1) Show user unavailable options
Users shouldn't be guessing which option is available or not when they are searching for something.
Take this search as an example. National Car Rental website shows the user all the locations available to book a car for the dates already selected, but when you try to select one of them, two errors appears: either the store doesn't open at the select date and time or the store is not valid for the promotion code added.
As you can see, there are many stores in São Paulo area that supposedly is "available" to book, but after 2 minutes clicking on all of them, one 2 or 3 were actually accepting bookings at given filters.
The user is already doing a search, which basically is a filtering action, so give it the proper treatment and only show the available results.
2) Text hard to read because of the font weight and color
Never use fonts too light in small texts, and always check with web accessibility evaluation tools if your design is compliant to WCAG rules to avoid law suits
3) Lack of feedback and after clicking on a button and not disabling it
Sometimes we need to load content after the whole site is already there. But if that new content pushes everything down when being placed, you got a UX problem here.
Since the interface is already loaded, the user might be in the middle of an action, a click, a drag and drop. And having the content pushed down might cause unexpected behavior if the user clicks somewhere at the same moment that the new content appears.
The example below shows a shopping cart after adding a product. The e-commerce then loads related products on top of the cart after the content has already been loaded. If the user tries to change the quantity of the first product in the cart right at the moment that the related products are being loaded, it ends up clicking on one of them and going to the product page, frustrating the experience of buying that first product (Yeah, I did that many times, I always forget to wait for the related products, but this shouldn't be an issue the user needs to deal with).
CHECK OUR RELATED ARTICLE
As soon as user clicks on the button, place a message at first that the information is being processing and disable it to avoid it to be clicked again while the process is not finished.
After the the process is done, make sure the system is working fine and returning the proper system status. Show it to the user in an intuitive and "human" way. "Error xxxx" is not enough for user to understand.
4) Low contrast between different element states
When you need to differentiate the status of elements, you need to do it right. Low contrast will not make it clear they are not the same.
This example below shows a login/signup popup, but it's really hard to know which tab is selected because the blue-ish background is very light, which blends with the overall background. It's possible that you can't even tell the difference because it also depends on your screen brightness and your eye capability - trivial accessibility rules are not being implemented.
It gets worse in this case because the login/signup contents are very similar.
Keep the warning not to close the browser, but remove or disable (and style them as such) the buttons that can cause error after a dangerous action begins and add an alert if the user closes the window/browser informing that some action is taking place and it's not recommended to close the browser.
P.s. unfortunately, we can't totally block the user from closing the window/browser as part of a security policy implemented by browsers, but we can at least warn users of the risks.
5) Confused unsubscribing process
Our inbox sometimes gets full of marketing and we need to unsubscribe to them. Some of them are really use to do so, some don't even need further action other then clicking the "unsubscribe" link.
However I've encountered some that are really easy to misinterpreter the information, it even seems like they do it on propose.
The example below is so badly done that it needs to explain to the user how to subscribe and how to unsubscribe.
If you ignore the texts above the checkbox, you may be wondering if you need to check the "Web Hosting Talk Insider" to unsubscribe from it, or if the check means that you want to keep subscribed to that list. The button also doesn't help, just a "submit" text doesn't tell anything to the user.
“A user interface is like a joke. If you have to explain it, it’s not that good”Martin LeBlanc
A self-explanatory design guides the user while he is working on it. It provides necessary help and guidance to its user in a natural way.
An intuitive interface guides the user through the steps in a natural way, without having the think hard to understand what should be done, and without having to explain itself.
Remove unnecessary texts, use intuitive elements that represents the desired result in a understandable way (for example in this case, it would be a lot more intuitive to use a simple switch to indicate on/off instead of a checkbox).
Also, it's important - if possible - to make a customized page for the required action, it avoids confusing with unnecessary information. If the user is subscribed and they've clicked in the link inside the email to stop receiving them, the best approach is to lead the user to a different page than "update your preference" if the only possible action here - and the desired result - is to cancel the subscription.
WORRIED ABOUT BAD UI PATTERNS?
Pengreen Design has an elite team that offers design solutions for businesses to avoid bad UI patterns. We are also featured as one of the Best B2B & B2C Web Design Of 2020 (So Far).
Get a free consultation with us and discover if your website or app has them. We also offer special conditions for design outsourcing.