Tips for improving your UI

There is much to say about the significance of UI design and how we choose to implement fonts, colours, images, spacing, etc. Our top priority should always be to create usable and functional interfaces that make the necessary information clear to our users.

Content can be prioritised and made more noticeable within a screen’s visual hierarchy through the strategic use of principles like contrast, scale, balance, etc., making it easier for users to navigate through a product (Kingston, 2020). If a user struggles to quickly figure out what they should be focusing on when interacting with a screen, then that’s a sign that the interface is missing a clear visual hierarchy (Gordon, 2020).

According to Mesibov (2015), when a person uses a product that they consider visually attractive, they will trust it more and be more willing to overlook its shortcomings. However, we should never rely on visuals alone to mend a bad experience. Good UI is like an invisible hand that helps to guide a user from one action/thought to the next without feeling overbearing (WebdesignerDepot, 2015).

What follows are some learnings I’ve picked up about UI design so far, accompanied by a couple of before and after visuals to illustrate these points. These are minor adjustments that require minimal effort but can significantly improve an experience. Enjoy!

‍

Make sure your call-to-action is the most prominent element on your screen.

‍

Try reducing the line-height on your headings to improve visual balance.

‍

Use a typography scale to achieve a harmonious set of font sizes.

‍

Improve the readability of text over images by adding a subtle overlay.

‍

Consider highlighting the most commonly used action in a menu.

‍

People generally prefer to read body text with a shorter line length.

‍

When it comes to drop shadows, a little goes a long way.

‍

To improve the readability of smaller all-caps text elements, pick a typeface with a heavier font-weight.

‍

High saturation colours can be hard on people’s eyes, so use them in moderation or tone them down.

‍

For better legibility in dark mode, use a heavier font-weight.

‍

When combining different typefaces, it’s safer to stick to using a maximum of 2 to maintain harmony.

‍

Negative space is your friend.

‍

References

Kingston, C. (2020) “Key Principles of Visual Hierarchy in UX Design,” Medium. Available at: https://medium.com/thinking-design/key-principles-of-visual-hierarchy-in-ux-design-c17395949ed (Accessed: March 17, 2022).

Gordon, K. (2020) “5 Principles of Visual Design in UX,” Nielsen Norman Group. Available at: https://www.nngroup.com/articles/principles-visual-design/ (Accessed: March 17, 2022).

Mesibov, M. (2015) “How Visual Design Makes for Great UX,” UX Booth. Available at: https://www.uxbooth.com/articles/how-visual-design-makes-for-great-ux/ (Accessed: March 17, 2022).

WebdesignerDepot (2015) “How eye scanning impacts visual hierarchy in UX design,” Medium. Available at: https://medium.com/@WebdesignerDepot/how-eye-scanning-impacts-visual-hierarchy-in-ux-design-5263fb88f2a3 (Accessed: March 17, 2022).