Designing for an application involves a lot more logic and thinking than most people realize. Sometimes we find that a designer’s logic doesn’t make sense to the intended user. Even after conducting vigorous user testing, what the users say they want might differ from how they actually use the application.
With all these complexities in place, our designs are somewhat prone to unintended user pain points, hence the need to keep learning about the user’s interactions with your platform. Although we might not be able to anticipate and avoid every user pain point, we can minimize by avoiding some common UX design mistakes.
Below, I demonstrate nine examples of common UX design mistakes and how to avoid them.
- Poor System Feedback
- Vague Error Messages
- Inconsistent Navigation
- Icon Without Labels
- Complicated Application
- Bad Information Architecture
- Giving Users Too Many Options
- Unecessary and Redundant Form Fields
- Rendering Non-Descriptive Empty States
Let’s get started!
1. Poor System Feedback
The first example of bad UX design is when a user clicks on a button and doesn’t know if the action went through or not. If an application lacks a solid user feedback system, such as success or error messages, the user may click on a button several times thinking the first time didn’t work. Several consecutive clicks on the same button can result in overloading the server with too many requests and crashing the application. Yes, this is a worst-case scenario, but it occurs more often than you might think.
How to Avoid Poor Feedback System
While your application is loading, show a visible progress image on the page, such as a loading progress bar.
The goal is to ensure the user stays informed on the progress of the application and knows that the application registered their click. Here is a fun example of a loading message by Gal Shir.
2. Vague Error Messages
Another common UX design mistake is a vague error message when an error is experienced. Unfortunately, errors in an application are inevitable, but experiencing an error is exacerbated when the user doesn’t understand why it occurred or how to solve it.
It is important to take out any ambiguity in error messages and avoid blaming the end user for causing the error.
Example of a Good Error Message
A good error message explains why the error occurred and even possibly explains how the user could solve the problem or prevent it from happening again. Simply saying “an error occurred” is certainly not enough and will only frustrate your user. Here is an example of a descriptive error message from Facebook:
3. Inconsistent Navigation
Clicking on a navigation item that takes you to a subpage with an entirely new navigation system without breadcrumbs or a visible indication on how to go back to the previous page. This is very confusing and could cause some unwanted user anxiety and page abandonment.
How To Improve Your Navigation System
A good navigation system makes it easy for the user to gain access to important links or pages on a website instead of burying links on a page. Because the user relies heavily on the navigation system, it needs to be consistent. Navigation links can be grouped into categories of related pages, but clicking the links shouldn’t result in inconsistent behavior.
4. Icons Without Labels
Icons are graphical representations of actions within an application. Icons provide a clean look for a design by eliminating copy. However, if not properly defined or explained, icons have the potential to confuse the end user. Because icons are not consistent across multiple platforms in meaning, they tend to be ambiguous in nature. Although a few icons like the magnifying glass and the hamburger menu icon enjoy universal recognition from users, sadly, most don’t.
The Nielsen Norman’s Group explains this, “In human-computer interaction, anything that can be clicked on (or tapped) is called a target: all active UI elements are targets. For users to acquire a target, they must be able to (1) identify the target; (2) click on it reliably. Both of these aspects cause problems in modern app interfaces.” Hence the need for labeling.
For users to acquire a target, they must be able to (1) identify the target; (2) click on it reliably.
– Nielsen Norman Group
A heart icon could mean “like” or “favorite” depending on the platform. The star icon could mean “bookmark” or “favorite”. Therefore, to make sure your application is well understood by the end user, it is important to add labels to icons.
Examples of Application Icon Labeling
5. Keep Your Application Simple
A great example of a seemingly simple website that is visited more than any other site in the world secretly hides tons of complexity so the user doesn’t have to worry about it: Google.
“Make everything as simple as possible but not simpler,” Albert Einstein said. And he was right. Simplicity is key in design. The Nielsen Norman Group has this to say about it, “The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.”
The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.
– Nielsen Norman Group
6. Bad Information Architecture
Having bad information architecture gives your website an inconsistent structure, increases cognitive overload, and makes it harder for your user to navigate different parts of your application.
So How Do You Avoid Bad Information Architecture?
My favorite definition is by Dan Brown, “information architecture is the practice of designing structures,” and I will add, around users’ expectations. In his article, Dan Brown, founder of EightShapes, defined eight principles of IA that do justice to this topic. Want the eight principles at your fingertips while designing?
I’ve compiled a handy checklist about Information Architecture and How It Relates to UX Design that you can download.
Download: 8 Principles of Info Architecture Checklist
7. Giving Users Too Many Options
Another common UX design mistake is giving users too many options or tasks to accomplish. This is common on ecommerce and government websites when they overwhelm the user with too much information. This causes analysis paralysis and decision fatigue.
Hick’s law states it best:
“The time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically.”
How To Avoid Too Many Options in UX Design
Always aim to keep an action focused on one task at a time to help your end users make a decision fast. A great example of this is the landing page on Airbnb. It has one focus: getting their users to book a place to stay.
8. Make Forms User-Friendly
If a form does not need a user’s address for them to sign up, then don’t require users to fill out the address field. Skip the field or at least make it not required. It is that simple.
Solution: Remove Unnecessary Form Fields
Here is a real user’s feedback about forms (which also goes back to our second point of vague error messages.)
“I feel much less annoyed when I get an immediate error on a long form that doesn’t allow me to continue forward, instead of when I click “submit” and I’m sent back to the same page, having to scroll around to look for what I did wrong.”
Deja
Knowing this information is gold and should be taken into consideration when designing forms.
Break Down Long Forms
It’s also a good idea to break down long forms into multiple short steps or pages and number the steps required to complete the form.
9. Non-Descriptive Empty States
More often than not, I find websites that lead users to an empty state with no further direction or next steps. Empty states can be a good tool to utilize to help your users learn and reduce action abandonment, but they can also lead to confusing and frustrating interactions.
A Better Way to Deal with Empty States
A good example is showing other related links versus an “Oops, search not found” message, or a suggested alternative action.
In Conclusion
There you have it. Those are my examples of confusing user experiences and how to avoid them.
References:
https://www.nngroup.com/articles/top-10-application-design-mistakes/
https://en.wikipedia.org/wiki/Hick%27s_law
We're building an AI-powered Product Operations Cloud, leveraging AI in almost every aspect of the software delivery lifecycle. Want to test drive it with us? Join the ProdOps party at ProdOps.ai.