15 Types of UX Problems: Usability Issues and How to Solve Them
Everyone in the UX industry knows the 10 Usability Heuristics for User Interface Design by Jacob Nielsen. I swear by them daily. However, one might surmise what happens when they are not followed: we see UX problems and usability issues resulting in poor user experience.
Over the course of 20 years, I have realized that these classic heuristics are not enough. We also need to recognize and classify the symptoms of poor UX in order to understand the root of the problem and how to address it. It is like going to a doctor: recognizing and classifying symptoms allows physicians to determine the illness and prescribe the correct treatment. Similarly, when conducting a UX audit, it is essential to recognize and properly classify common UX problems to find the appropriate solution.
I have put together the following cheat sheet that helps my team and me to correctly identify, classify, and tackle the most common UX problems. We call it 15 Pitfalls of Bad UX, organized into three main categories:
Extra Time or Effort
In most cases, the user can still complete their task, but the presented UX challenges require extra time or effort to produce the desired outcome.
Users struggle to find the information they need, discover new information of interest, or find their way around the site
(e.g., navigation, information architecture, taxonomy, information scent, wayfinding).
Examples: Confusing navigation that is not aligned with user journeys; search that does not follow best practices; missing breadcrumbs.
Recommendations: Conduct information architecture exercises, such as card sorting with real users, to ensure information is organized in a user-centric fashion. Study search logs to uncover information that is missing or hard to find. Follow best UX practices for navigation, wayfinding, and search. Test the information architecture/taxonomy with real users with the help of a tree test.
2. Cognitive Overload
Excessive mental energy is required for users to process, remember, and digest information while keeping track of the task they are trying to accomplish.
Examples: Too much text; overly busy or cluttered interface; overwhelming UI; elements competing for attention.
Recommendation: Reduce the cognitive load by limiting the amount of information the user is exposed to at any given time. Segment, group, and chunk information into more manageable "bites." Use techniques like progressive disclosure to display and collect only relevant information, at the right time, and to the right audience. Conduct cognitive and pluralistic walkthroughs, test with real users, and measure the amount of time it takes a user to complete a task.
Important information or actions are not prioritized over secondary or less important information resulting in reduced information scent or higher interaction cost.
Examples: Burying important information; hiding contact information; prioritizing less important content at the expense of more important (i.e., FAQs).
Recommendation: Studying user journeys and mental models will reveal which information is important to users and for what purpose. It is essential to understand the context and the use cases to prioritize what is and is not important. For example, if a user is on their way to a specific location, they should not have to scroll 10 screens down on their mobile device to find the address of that location. Conduct user testing to uncover and test for prioritization issues.
Experiences take too long to load or interactive elements take too long to respond.
Examples: A page that is slow to load; a form that takes a long time to submit.
Recommendation: Use tools like Google’s PageSpeed to measure the speed of your pages across all devices. Implement the suggestions and test regularly. Always use loading indicators and progressive (lazy) loading so that users do not have to wait for all the content to load.
5. Interaction Cost
Tasks require excessive user interaction (extra steps, clicking, or scrolling) that can be simplified or removed to streamline the experience.
Examples: Dropdown menus with too many levels or that are too sensitive (open/close on hover); pagination with a few items per page, large distances to cover with a mouse.
Recommendation: Reduce the number of unnecessary clicks, steps, or excessive scrolling by simplifying and streamlining the experience. Look for steps that can be removed without sacrificing the outcome. Use the KLM-GOMS model to measure "before" and "after."
The user has a general idea of how to get from point A to point B, but they must overcome unexpected friction or confusion that may get in a way of completing their journey.
Unexpected subconscious reaction or unplanned association with the visual stimuli (e.g., colors, shapes, images, audio).
Examples: Color that does not resonate with the audience; images that do not communicate the right message; video that does not establish an emotional connection.
Recommendation: Understand the demographics and psychographics of the audience. Rely on the psychology of colors and shapes. Choose the visual stimuli that support your message, are relatable to the target audience, and evoke the right emotions and associations. Test with real users and ask them what they think and how they feel.
Issues with visual cues or lack of cues that help users interact with the interface and suggest what to expect (i.e., clickable vs. non-clickable elements).
Examples: Underlined blue text that is not a link; thumbnails that are not clickable; elements that look like they are clickable but are not (and the other way around).
Recommendations: Use heatmaps to determine where users click and look out for clicks on items that are not clickable and missing. This could indicate an affordance issue. Redesign such elements following the best UX practices while maintaining established affordance signifiers (i.e., making buttons look like buttons, links like links, etc.). Retest to ensure that it works.
Lack of pattern-forming consistency inhibits recall and recognition and could result in other usability issues (e.g., affordance, extra cognitive load).
Examples: Menu that looks different on different pages; inconsistent formatting of text; too many unique layouts.
Recommendation: Create a full inventory of all elements (building blocks). Rely on pattern libraries, style guides, and design language systems to create reusable, uniform, and consistent experiences. Help users form patterns to ease their recognition and recall. Never use the same or confusingly similar elements for different functions. Limit the number of unique elements and templates.
Ineffective or suboptimal use of space: inefficient use of real estate at the expense of important information or functionality; grouping of elements that is not logical.
Examples: Headers that take too much space; perceived floors; non-related items grouped together.
Recommendation: Studying heatmaps and scrollmaps and conducting user testing with real users will reveal if users click or interact with non-related items or do not scroll where you want them to scroll. Use real estate wisely. Maintain best UX practices for grouping elements, prioritize important information (see previous pitfalls), and avoid dedicating too much or too little space depending on the importance of the information.
Missing, confusing, or ineffective feedback on interactive elements (i.e., responses to user-taken actions or inactions).
Examples: Missing or confusing validation or error messages; missing feedback on form submittal; missing "on hover" or "on click" states.
Recommendation: Ensure that the state of an object always visibly changes when a user interacts with it (assuming the object plays an important function). Pay special attention to "on hover" and "on click" states on links, buttons, menus, and thumbnails. Ensure that all forms have clear and descriptive validation and error messages and confirmation messages. Conduct a UX audit to see what is missing.
Just as technology, trends, and user expectations evolve, UX issues evolve as well. The following are common UX issues that result in users not experiencing the website or app to its fullest because of certain limiting factors.
11. Dead Ends
Missing or unclear next logical step; inability to recover from an error or proceed with the journey.
Examples: There is no CTA or a suggested logical step to take; no easy recovery from an error.
Recommendations: Design and connect all your flows in a way that presents users with a clear and easy-to-take logical step so that they never have to wonder "what’s next?" By doing so, you will help guide users over the perceived limitations of your product or service.
A resource, feature, or function has little to no value or utility to the user and does not get much engagement (inaction or action that is not aligned with users' and organization's objectives).
Examples: A feature that no one uses; users are not clicking on the CTA; users don't read or engage with the content because it is of no interest.
Recommendations: Conduct quantitative analysis (UX audit) to determine the usage of the item in question. Conduct qualitative research (user interviews and surveys) to discover what’s missing and ask users to grade the "usefulness" of the core resources, features, and functions.
Usability issues prevent certain users from accessing, understating, and interacting with the environment due to their age, limitations, or ability level.
Examples: Text size that is too small; insufficient contrast between background and foreground; missing ALT tags on images; links that are not properly labeled.
Recommendations: Conduct a web accessibility review to uncover issues and test with real users. Maintain best web accessibility practices checklist and test all designs regularly. Try designs in low-contrast environments and in browsers designed for visually impaired users.
Issues could result in devices or browsers performing "not as expected" or "not as planned" or causing compatibility problems.
Examples: 404 (Not Found) Errors; HTML/CSS Validation issues; broken layouts; server/client errors.
Recommendation: Conduct a thorough QA on all designs post-implementation. Conduct testing across all devices, browsers, screen sizes, etc. Use HTML/CSS validators, scan for broken links, and test all functions, features, and components of the site for possible errors.
Issues may violate or not be fully compliant with existing laws, requirements, and regulations (e.g., WCAG, GDPR).
Examples: Lack of GDPR prompt; ADA compliance issues; industry-specific legal compliance (HIPPA, etc.).
Recommendations: Conduct a compliance review to uncover potential issues. Maintain a compliance practices checklist and test all designs regularly. Consult compliance experts in the specific field.