UI & UX Micro-Tips: Volume Eleven

In this follow-up article, I've provided you with another set of easy-to-implement UI & UX micro-tips to help quickly improve your designs.

UI & UX Micro-Tips: Volume Eleven
Photo by SIMON LEE / Unsplash

When creating efficient, accessible, and beautiful UIs, it takes only the smallest tweaks to improve your designs.

In this follow-up article I’ve brought you another selection of easy to put into practice UI & UX micro-tips.

Tips that can, with little effort, help improve both your designs, and the user experience.

Let’s dive on in…

Lower that text contrast when working with Dark themes.

This tip applies to me on a much more personal level. I suffer from a condition called Astigmatism, so working on and viewing a Dark themed design can be troublesome sometimes, with an effect called Halation coming into play.

So when pure white text is set against a pure black background, the text can appear (to me personally) to have a strange kind of ‘shimmering’, and ‘haloing’ effect, which makes things particularly troublesome when viewing Dark text-heavy sites, or apps.

To improve things for users with Astigmatism (of which there are many more than I realised), setting your White text to around 85-90% opacity (as well as avoiding those pure black backgrounds) can improve things significantly for users with this condition.

Two design examples. One with text paragraphs at pure white, and the other with paragraphs set at white with 85% opacity

Present Icons with Labels for easier comprehension.

Try not to leave those Icons all by themselves. For the benefit of your users, they need some company in the form of Labels.

In some circumstances, yeah, you can get away with a sneaky lone icon (Search function anyone?). Shhh! We won’t mention Hamburgers here.

But for Primary Navigation elements, it aids usability and brings easier comprehension to have a Label alongside its accompanying Icon and not have the user second-guessing things.

Two design examples. One with a navigation consisting of only icons, and the other with icons and labels

Use complementary border radiuses. Avoid making things look ‘off’.

It pays to keep your border radiuses consistent and complementary and avoid that slightly ‘off’ feeling within your designs.

Tightening up those border radiuses can create a much more pleasant visual harmony between elements in your design, with only the smallest tweaks required to make them look complementary to one another.

Give your designs a much more refined and professional look and avoid those ‘Ooh, something looks off here?’ feeling from your users.

Two design examples. One with slightly off border radiuses applied to elements, and the other with more improved border radiuses

Use elevations correctly when working with Dark themes.

When working on Dark themes, use dark greys rather than black to communicate an element’s elevation correctly and effectively.

The closer an element is to you (and in the real world, closer to a light source), the lighter that element should be against the background to communicate depth well.

Using this simple method, you can effectively express depth within your design, and if you choose so, without the need for shadows of any kind.

A design example, of various Card elements with differing shades of grey applied to their container backgrounds

Make your long-form content more accessible with the Atkinson Typeface.

I mentioned Atkinson in a recent article but just wanted to namecheck it again if you’re looking for ethical ways to improve your long-form content for users with Low Vision.

Atkinson Hyperlegible (the clue is in the name) is a Typeface created to improve readability and increase legibility, especially when creating long-form content.

For long passages of text, Atkinson is a highly recommended choice. It is the best I’ve come across for legibility for users with low vision and just all users in general to be honest.

Two design examples. One using the Museo typeface, and the other using the Atkinson Hyperlegible typeface

Cut out the noise. Make those messages short, and to the point.

Always keep your messaging short and to the point and reduce the cognitive effort required by your site or app's users.

If there's no real need for a more detailed message, then trim it down, and keep your messages short and to the point.

Presenting the user with clear and straightforward messages will help them achieve their objectives more effectively.

Two design examples. One showing a notification with a long message, and the other with a much more concise message

I hope with this short collection of tips you've realised how the smallest of adjustments to your designs can produce better end-results for both yourself, and your users.

By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Creating amazing designs is hard when you’ve got deadlines to meet. So we built Cabana, a Design System for Figma that enables you to start projects faster.

Thanks for reading the article,