In this article, I want to share a checklist of the most common UI design mistakes that still can be found in mobile app design today.

1. Typography

• Small font size for body text. Designers often use fonts that are too small in layouts. It’s incorrect to use a font size less than 12 px because it will cause eye strain for users with poor eyesight.
• Using more than two font families. While it might be a good idea to use one font family for headers and another for body text, adding more font families to your UI will make it look sloppy.

2. Icons and imagery

• Inconsistent iconography. Use consistent line thickness and corner radius for your icons.

Home icons with different line thickness

• Low quality images. Ensure that all images in your app are without a distortion.
• Poor contrast of text over photos. For presentation purposes, visual designers typically select dark images that contrast nicely with white text. But as soon as the app goes live, the text becomes unreadable. That’s why you should always test your design with real content (text and photos).

Bad contrast vs. good contrast

3. Colors

• Low contrast for text. Low contrast for text is equal to poor readability. Images and text should have a contrast ratio of at least 4.5:1.

Low contrast vs. good contrast

• Too many colors in a design. Similar to fonts, the overuse of colors can make your design look sloppy. Using too many colors in UI is like sending too many signals to your users. By limiting colors and use a consistent color palette for elements like text, buttons, menu icons, and functional elements, you improve user experience.
• Making Dark UI a primary UI mode. While dark UI looks more impressive, it’s less practical than white. Always remember the context — who will use the interface and how. For text-heavy UIs, it’s recommended to avoid using dark UI as a primary mode because it will cause eye strain.

4. Shapes

• Using square and round shapes together. Try to use either rounded or squared corners for cards and buttons.

5. Visual hierarchy

• Lack of visual hierarchy. Properly formatted UI elements facilitate users’ perception of information. Use size, color contrast and spacing to separate individual elements and give some elements more visual prominence. Generally, the object with the strongest visual weight will get more attention.
• No visual distinction between primary and secondary CTAs. Google UI design is easily scannable. It’s possible to guide users by giving visual importance to the primary actions.

No visual distinction vs. with visual distincion.

6. Interaction patterns

• Generic onboarding experience. A Swipe-through gallery of screens that demonstrates products benefits is the defacto standard of mobile onboarding. This type of onboarding rarely works well for users because no one likes reading about the app features. Everyone wants to experience the features.

Swipe-through onboarding

• Lack of support and assistance in context. An app design might seem evident for a person who designs it, but this may not be true for the person who uses it for the first time. Test your design with your users, identify areas of friction and introduce a mechanism to help users overcome such areas.
• Using voice as the only way to interact with a system. Voice is a convenient way to interact with an app, but it cannot replace the traditional touch UI. There are situations when users won’t be able to speak (i.e., in a public space). Voice should support but not replace touch UI.
• Using creative interaction patterns. It commonly happens when designers want to impress their users and create a memorable experience. While creative patterns such as gesture-based navigation might be fun, they ask users to invest more time in learning how to use an app. Thus, be creative but remember who you design for.

7. Navigation

• Using hamburger menu when you have 5 or fewer top-level navigation options. When you have five or fewer top-level navigation options, its recommended to use tab bar navigation because such navigation is more glanceable for our users.
• Mixing different navigation patterns (i.e., using tab bar along with hamburger menu).

Facebook uses a hamburger menu in tab bar.

• Icons-only navigation (navigation options without text labels). It’s possible to use icons-only navigation only when the message of your icons is clear.

8. Animation

• Overuse of purely decorative animated effects. Too much of anything is bad, and animated effects are not an exception. Overuse of animated effects (especially when they’re unwanted) can cause slow loading time and user annoyance.

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.