Design Problems With Domain_10 App

10 Key Mobile Usability Issues

10 critical usability issues and practical recommendations on to avoid when working on your mobile design

1. Visual clutter

Clutter is one of the worst enemies of good design. By cluttering your interface, you overload users with too much information. In comparison with desktop screens, mobile devices have a relatively small screen estate. And every extra added content section, image, or button, makes the layout busier.

Reducing clutter will improve comprehension.

How to solve it:

Trim all the fat. Decide which information is important enough to show it to your mobile user and which information can be removed. Get rid of everything that isn't absolutely necessary.

Minimalism is a designer's best friend.

Prioritize content. Focus on user goals. Think about what a user actually wants to accomplish using your app. Visualize user journey step by step and offer information/features that users need at each step of the journey.

User Flow/Impression Map. Image credit Nicole Love

Design for scannability. No one enjoys reading big blocks of text on their phone. It's possible to make the content more scannable by using short paragraphs and adding bulleted or numbered lists.
Use progressive disclosure to reveal more content/features. Let users access more information on demand.

*The interface reveals more options after an interaction. Image credit* *Ramotion*

2. Unclear navigation

Helping users navigate should be a high priority for every app. When users have to think about how to navigate, they likely switch to a competitor app that offer better experience.

Navigation should be clear and intuitive.

Users should be able to understand how to get around a mobile app in no time.

How to solve it:

Don't reinvent the wheel. Predictability is a fundamental principle of UX design. When things work in the way users predict, they feel a stronger sense of control. That's why it's better to use familiar navigation patterns such as Hamburger Menu or Bottom Tab Bar.
Strive for simple navigation. Minimize the total number of navigation options. For example, a tap bar shouldn't contain more than five options.

Too many vs. just right number of options. Image credit Apple

Prioritize navigation options (based on the way users interact with your app). Assign different priority levels (high, medium, low) to common user tasks. Give prominence in the UI to paths with high priority levels and frequent use (i.e. by putting them in a top-level menu).
Communicate current location. User should answer the "Where am I?" question just by looking at the screen. They should know where they are in your app at any given moment.

Twitter uses color contrast to highlight the current location.

Use recognizable icons. The meaning of icons should be clear to your users. Use familiar icons such as the 'Home' icon, which means home screen, or the 'Magnifying glass' icon, which means search.

3. Tiny text and functional elements

Tiny text and functional elements increase the number of incorrect inputs and make interaction with an app less comfortable.

How to solve it:

Strive for good legibility and readability. Choose typefaces that work well in multiple sizes and weights (San Franciso and Roboto are good options). Plus, your fonts' size for body text should be no less than 11pt for iOSand 14sp for Android to maintain legibility on those platforms.
Design finger-friendly touch targets. The average human fingertip is 8–10mm, making 9mm x 9mm a good minimum touch target size.

Introduce good padding between touch targets. Add ample spacing between interactive elements.

Padding between touch targets. Image credit Microsoft

4. Low contrast text and functional elements

Light-colored text (such as light gray) might look aesthetically appealing, but users will have a hard time reading it. People often interact with their mobile devices in less-than-ideal conditions. Bright sunlight can make elements on a screen hard to see. But proper contrast can make elements more visible.

How to solve it:

Use a proper contrast ratio. When it comes to color contrast, the Web Content Accessibility Guidelines (WCAG) state that text and images of text must have a contrast ratio of at least 4.5:1. Use the WebAIM Contrast Checker Tool to check the contrast ratio.

Image credit WebAIM Contrast Checker Tool

4. Too many clicks to complete tasks

When a person launches an app on a mobile device, they want to complete the task at hand as quickly as possible. By minimizing the level of friction that users face, you make the mobile design more efficient.

How to solve it:

Review key user flows. Understand how users interact with your product and find areas that can be optimized.
Offer alternative ways of completing tasks. For example, introduce a voice-based interface along with typing to allow users to make some actions using voice.

5. Bad error handling

Bad error handling paired with useless error messages can fill users with frustration, and can lead to users abandoning your app.

How to solve it:

Use inline validation in forms. It's frustrating when, after submitting data, you have to go back and correct mistakes. Whenever possible, check field values immediately after entry so that users can correct them right away.

An example of inline validation. "Reward early, punish late" approach. Image credit Mihael Konjević

Write descriptive error messages. Error message should explain the root cause of a problem and inform users how they can solve it.

This error message doesn't say much to regular users. *It was written by a developer for a developer.*

6. Too much data input

Data input is hard and error-prone process. The more data input the app requests, the less enjoyable the interaction becomes.

How to solve it:

Avoid asking for extra details. Ask only what is really important for using the app. Reuse previously entered data instead of asking the user to type more.
Select a proper keyboard. If a user has to enter a phone number or ZIP code, you need to offer a numeric keyboard.

*Match the keyboard to the required text input. Image credit ThinkWithGoogle*

Use device capabilities for data input. For example, eCommerce apps can offer a camera option for inputting credit card information.

*Using device camera to collect credit card information. Image credit: Business Insider*

Offer auto-suggestions and auto-complete. Filling out an address field is often the most problematic part of any registration form. Tools like Place Autocomplete Address Form (which uses both geolocation and address prefilling to provide accurate suggestions based on the user's exact location) help users to enter their address with fewer keystrokes.

Address autocomplete. Image credit formassembly

7. Unconventional gestures

When a designer decides to deviate from an established gesture, it usually ends up badly. The biggest downside of using unconventional gestures in a user interface is the high learning curve. People have to learn new gestures and memorize them.

How to solve it:

Use conventional gestures. The most common gestures are scrolling, swiping, pinching to zoom.

Conventional gestures. Image credit James DeBrock

Offer gestures as a supplement to, not a replacement for, visible navigation options. Gestures might work as shortcuts for navigation, but not as a complete replacement for visible menus.

This mobile UI offers users two options to enter the destination—tap or voice. Image credit Sang Nguyen

8. Lack of visual feedback

Lack of feedback can confuse users and make them wonder whether the app is working or not.

How to solve it:

Provide feedback on interactions. Provide visual, audio or haptic feedback on user interactions.

Visual feedback for downloading button. Image credit Aaron Iker

9. Annoying notifications

Annoying push notifications is one of the top reasons why people delete mobile apps.

How to solve it:

Push value. Ensure that every notification that you send to your user is valuable to them.

*Select the proper notification type based on the urgency and content. Image credit Appboy*

Do not bombard users with notifications. Do not send too many notifications in a short period.

10. Annoying visual effects

All too many mobile apps use unnecessary visual effects. While they have good intentions (delight users), they often create apps that offer too much annoyance.

How to solve it:

Avoid using too many purely decorative illustrations. Because they do not bring much value to user experience.
Evaluate the long-term effect from using animation. Even good animation can be annoying when it's overused. When designing an animation, ask yourself, "Will the animation get annoying on the hundredth use?"

This animation can be great during onboarding, but seeing it in everyday experience can be annoying. Image by Cuberto

Offer an option to turn animation off. Users who suffer from motion sickness often turn off the animated effects in their OS settings. When the option to reduce motion is enabled in device accessibility preferences, your app should eliminate or at least minimize its own animations.

Want To Learn UX?

Try Interaction Design Foundation. It offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Planet reader, you get 25% off your first year of membership with the IxDF.