Bad UI Patterns That Hurt Your Business.
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 stories in the São Paulo (City in Brazil) area that supposedly is “available” to book (the red error only shows after your try to book), but after 2 minutes of clicking on all of them, only 2 or 3 were actually accepting bookings at given filters.
The only exception I’d like to mention is when the unavailable option is placed in the results as a marketing strategy.
As an excellent example, I can show Booking.com — which by the way does an awesome job with their UX.
They do show unavailable options (but notice here that the message about it is already visible to the user without having to click, it doesn’t leave the user confused thinking that’s available), but to induce a sense of FOMO, i.e., fear of missing out. They are indirectly saying “hey, look, this hotel is sold out because you were late, act now or you’ll miss more opportunities”.
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) FORGET TO DISABLE IT AND LACK OF FEEDBACK AFTER CLICKING ON A BUTTON.
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, 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).
