How to Avoid Common UI Design Mistakes: Part 1

User Interface (UI) design is a powerful determines of digital product success. If you’re working on building high-quality apps, it’s essential to consider the seemingly small details surrounding UI design. I will share with you a few common UI design mistakes and how you can correct them. These tips are especially useful for early career UI designers, fasten your seat belts, we’re going to go really fast!

UI Design Mistakes to Always Avoid

Here is a checklist of things you are to avoid when designing product UIs.

Inconsistency in UI elements

A smooth app experience uses few styles. Too many styles can confuse users, so it’s okay to repeat patterns and elements where possible. A consistent-looking design establishes trust with users and creates an enjoyable experience. Also, your users will quickly learn to use the app.

Here’s your game plan to avoid inconsistency:

Use consistent color palette for buttons, footer, header, hover states, links, and other elements.

Be consistent with typography styles for paragraphs, links, titles, and other page elements.

Use rounded or square corners for button, cards, and icon shapes.

Use consistent line thickness for icons, dividers, and so forth.

There should be a strong reason to have for any element to appear different.

Using the default drop shadow

UIs are preferably not busy or noisy, so it’s best to avoid drop shadows. These exceptions are recommended practices for including them, however:

Always tweak the default drop shadow.

Keep it subtle. It’s best to use a darker version of your background color, as this tend to appear more natural.

Not differentiating primary and secondary buttons

Give visual prominence to primary buttons by making them bold. However, the user should still not struggle to locate secondary buttons. Try these:

Use different visual weights for both button types to elicit appropriate attention.

Use strong colors, bold text, and size to give visual weight to primary buttons and do the reverse for secondary buttons.

Lack of text hierarchy

Text is informational content; therefore, it must always be legible and organized. Properly formatted text facilitates users’ perception of information. Here’s how to present text so that it’s easily digestible and comprehensive:

Just like in UILand’s articles, use lots of contrast between each style title. Use color, size, and weight to differentiate styles.

Emphasize information hierarchy as necessary.

Use adequate kerning and spacing between text.

Separate text blocks clearly, using small amounts of space to connect related information. Also use lots of space to visually separate different information blocks.

These tips will help you build a UI that emphasize Natural User Interface (NUI) principles. While you can see these principles in action across UILand, we’ll provide even more tips in a future article.