UI

5 Examples of UI Design Mistakes and How to Avoid Them

Renuka Savant | 7 min read

Designing user interfaces is all about following the set rules of design aesthetics and visual hierarchy. Pay attention to these rules and you’re more likely to come up with simple, user-friendly interfaces that get the job done. However, there are times when UI designers, in their quest for creativity, try to experiment a bit too much. The resultant designs may be riddled with bad UI design mistakes and negatively impact the performance of the product.

Best Practices for Good UI Design

Every design project begins with user research, it involves understanding user needs, goals, motivations, preferences, and tendencies. Armed with the analysis of user research data, the project can move to the design phase. As a UI designer, complement the user research data with knowledge about usability principles to ensure that the interface has elements that are easy to access and understand.

Simple interfaces work best

An invisible interface is the best kind of interface. It is devoid of ‘extra’ elements and presents clarity on labels and messaging.

Ensure consistency through common UI elements

Good interface design examples always make use of commonly understood, universal elements and icons. A consistent UI comprises discernable patterns in language, layout, and design throughout the system to augment efficiency. The user only needs to familiarize himself once or twice and they’re able to navigate the system with absolute ease.

Make smart use of space

Carefully placed items can help draw users’ attention to the most important pieces of information and can aid scanning and readability, this is referred to as visual hierarchy. To follow a visual hierarchy, structure the items on the page based on their level of importance.

Use color and texture strategically

Color, light, contrast, and texture can be put to good use to direct or redirect the users’ attention to certain elements.

Convey hierarchy and clarity through typography

Font styles and sizes can be used to great effect to convey information in a logical manner. Different sizes, fonts, and arrangements of the text can be helpful in increasing the users’ ability to quickly scan the page and enhance legibility and readability.

Communicate system status clearly

A helpful, intuitive system always informs its users of location services being used, actions to be taken, changes in state, or errors. To do so, you can decide the best UI elements to communicate system status promptly and the next steps to be taken to reduce user frustration.

Place defaults wisely

Another step that goes a long way in reducing frustration and inducing delight in users is defaults. For example, you can have pre-chosen or pre-filled out fields in forms that eases burdens on the users and speeds up the process as well.

While there is no one perfect way to design good UIs, there are ways and techniques to ensure that your product follows the rules of visual hierarchy and is easy to navigate. At Koru, we’d created a series of social media posts to highlight the subtle differences between good UI and bad UI, titled ‘which works better’. Here are a few of those posts to help you understand the dos and don’ts of user interface design.

Download our comprehensive UI checklist to ensure your UI has all the required elements placed in the right order. Click on the image below to download.

UI checklist

Good and Bad UI Design Examples – Which Works Better?

Example 1 – A Members List Section

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by Koru UX Design (@koruuxdesign)

It’s rightly said that the devil indeed lies in the details. The most apparent mistake in option A is that it does not follow the rules of visual hierarchy in terms of the font type. This uniform font type makes it difficult to distinguish between the heading, subheading, and the items in the list. The call to action button is well highlighted, that’s all.

Example 2 – A Recipe Card

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by Koru UX Design (@koruuxdesign)

Clarity and cohesion in visual hierarchy and information flow make it easy for users to scan and follow. Therefore, option A is the clear pick here. The use of the larger font in the heading which is placed on top of the page and its break with the alignment with the rest of the text creates a hierarchy that makes for easy reading.

Example 3 – Appointment Booking Application

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by Koru UX Design (@koruuxdesign)

Option B here has been created to look cleaner in comparison to A, mainly due to the absence of the dark background in the first block (a great example of a bad UI design mistake). The low opacity in the doctor’s profile in option A also makes it difficult to read. The area above the fold is a spot where the user’s eyes fixate on the most. It has to be used to display important content in a legible manner.

Example 4 – Project Management Application

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by Koru UX Design (@koruuxdesign)

Option B follows the rules of visual hierarchy better, in that it has a better layout style for all the elements. The ‘type of meeting’ section isn’t too colorful as in the case of option A, which interferes with the legibility, which uses colored backgrounds and fonts on the buttons. The call to action button at the bottom in option B is commanding and strong, as it should be. Consistent UI design is important to help establish a relationship of trust with users and ultimately create a safe and intuitive experience. It also helps in seamless navigation which helps users in easily learning their way around the app.

Example 5 – Restaurant Feature Page

 
 
 
 
 
View this post on Instagram
 
 
 
 
 
 
 
 
 
 
 

A post shared by Koru UX Design (@koruuxdesign)

Option B appears to follow most good practices of UI design. To start off, the like button and location icon are placed in the right corner below the image (as opposed to on the image in option A, where users might miss it completely and is a UI design mistake). The levels of font thickness used in option B also follow the visual hierarchy and score better in terms of readability. Lastly, the rating system followed in option B is the appropriate one, wherein the number of stars helps the users understand the rating system better.

The interface is the pathway used by your users to engage and interact with the product. Therefore, designers must ensure that they make use of good, consistent UI that leaves no room for ambiguity. To make sure your UI design makes the right impression, steer clear from these UI design mistakes made in bad UI UX design examples. As responsible UI designers, it is important to remind ourselves to prioritize the components of usability over our creative streaks.

More Resources:

The Ultimate Glossary of UI-UX Terms for Designers

UI Design Trends 2021: What’s Working in Enterprise App Designs

5 Healthcare UI Designs That Demonstrate Ease of Use


About Author:

Sr. Content Writer at Koru UX Design, Renuka loves to write, discuss, research, and read up on the latest in user experience design. When she’s not doing that, she spends her days watching crime thrillers and sports.


Leave a Comment

Subscribe to our
Newsletter

on UX insights, delivered straight to your inbox


    Twice a month. Non-promotional. Knowledge-driven blogs.