1) "Recommended view" limiting how user should view the interface.
Responsive Web design consists of designing and developing interfaces to respond to the user's device based on screen size, platform, and orientation.
Not on this website. It asks the user to rotate the device to a landscape orientation instead of present the website nicely in portrait orientation.
Not enough to limit the orientation, when the website is finally shown after rotating the smartphone, the user is presented with a bad interface, clearly not optimized for mobile.
Don't ever ask the user to adapt to your interface, your interface is the one that must adapt to the user's device.
Optimize it to EVERY possible device, orientation, and platform.
2) Primary and secondary buttons style got wrong
When two or more buttons are close to each other with different priorities, we need to differentiate them. As a best practice, we can use two options:
The primary button has the interface primary color, which usually is a very striking or different color from the rest of the elements, and the secondary button has a less striking color, even gray for some cases.
The primary button has a background color whilst the secondary only has borders (which is debatable regarding ghost buttons, but this will be discussed in another post).
In this interface, they did the opposite for #2. The "finish" button, which should be the primary with background only has borders. Whilst the "cancel" button which should be the secondary button has the background. The user can wrongly click on the "cancel" button without reading it properly thinking it's the "finish" button.
Follow best practices to show very clearly for the user which button is primary and which is secondary.
3) Content that's loaded after the interface is ready.
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).
Either load everything together or leave a space beforehand where the new content will be loaded to avoid it pushing the content down.
4) Ask user not to do something.
No, no, no. A big no-no. Never rely on user good behavior to avoid errors. The interface itself MUST avoid users errors.
In this example, which is a WordPress plugin to backup and restores content, it asks user not to click on the button until the restore is done, but leaves the button there! If the button is pressed, it can break the whole website. That's a very bad UX, it relies on the user not to break its own website! Even a wrong click can cause a mess. And if the person who is doing it is a layperson, they will have to hire a developer to fix the website.
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) Mislead user into paying more
Here in Brazil purchasing in installments is very common, with or without interest clearly shown to the user.
In this app, it shows first the value of R$ 20 in 3 installments (3 x R$ 7.37 = R$ 22.11, so you're paying R$ 2.11 in interest). User has then the option to change to 1x without interest. But if the user makes any other change like changing the credit card to pay or add a promo code, it comes back to 3 x R$ 7.37. If this change is not noticed, the user ends up paying more than they wanted to pay.
When you click to pay, a popup will appear offering a prime service for R$ 9.99 a month, with the option already selected. Many users have complained on Google Play and the Apple Store about charging the R$ 9.99 fee they didn't want due to their mistake of not realizing the option was already selected.
Don't try to fool your users, have the interface to follow the nature and intuitive way, do not pre-select options that will increase the cost for users, and never try to earn more by hiding fees or changing something users already selected how he/she wants.
Avoid bad sales practices, it will hurt your reputation badly that will cost way more than you're earning with those bad practices.
Bonus: Confusing arrows
Well, UX is not only digital, it's everything that communicates with your customer.
This one I saw the other day when in a department store in town.
In the store fitting room, you're presented with three options: Women, Men, and Kids. But the arrows are all to the floor! A woman can be confused if she should go left or right there, because even though the arrow is positioned at the right of the text ("provador feminino", "women fitting room" in Portuguese), it's not clear that's the right side, especially since the arrows are slightly turned to the left.
Worst, no one was using the fitting room, so the customer doesn't even have a reference to follow a side since both are identical.
Don't try to create something "cool" to impress users ending up forgetting the UX. Get your arrows straight in the right direction.
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 Top Mobile App Development Companies and Top Cross Platform Mobile App Development Companies.
Get a free consultation with us and discover if your website or app has them. We also offer special conditions for design outsourcing.