-
UI
5 Examples of UI Design Mistakes and How to Avoid Them
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.
Good and Bad UI Design Examples – Which Works Better?
Example 1 – A Members List Section
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
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
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
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
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
