UI & UX Micro-Tips: Best of 2021

In this article I’ve compiled a selection of 12 of my most popular UI & UX Micro-Tips from 2021.

UI & UX Micro-Tips: Best of 2021
Photo by Casper Johansson / 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.

Here I’ve compiled a selection of 12 of my most popular UI & UX Tips from this past year.

Let’s dive on in…

Use established icons in your UIs to avoid confusion for the user.

When adding icons to your designs, always try and choose an established icon that represents the action about to be taken.

Choose an icon that conveys the correct meaning and functionality, as anything else invites confusion and becomes a cognitive obstacle for the user.

Don't be too rebellious with those icons.

Two design examples. One using vague icons, and the other using established icons to represent the action to be taken.

4pt Baseline Grid + 8pt Grid = Harmonious Vertical Rhythm.

When working with Type, using a 4pt Baseline alongside the ever-versatile 8pt Grid can bring a much more harmonious vertical rhythm to your designs.

You need to align your Type to a Baseline Grid of 4, using a line-height value that is a multiple of 4 (16, 20, 24, 28 etc...)

Why 4? Well, I’ve found that scaling in multiples of 8 in the past is just not as versatile when working with certain text sizes.

4pt Baseline Grid + 8pt Grid = Sweet Vertical Harmony.

A design example showing the correct usage of a 4pt baseline grid in a block of text

Use weight, size, and colour to indicate hierarchy within your type.

When working with Type, elements don’t need to scream “Look at me!” all the time. But they need to have a balanced hierarchy in place.

Just subtle adjustments via the use of weight, size, and colour is all it takes to achieve this. This allows the user to scan and find essential elements, avoiding confusion in the process.

Two Card design examples. One with mismatching text styles, and the other with text styles that have the correct weight, colour and size together.

White Space. Use it generously.

Whitespace. Negative Space.

Same thing. Different titles.

My advice to you. Use it generously or in moderation, but use it well.

Adding whitespace to your designs is one of the simplest ways to instantly improve them, allowing your work to breathe and look more refined.

Two Card design examples. One with the elements packed too closely together, and the other with more whitespace added to create a better spaced design.

Lay out your icons consistently when using the 8pt Grid System.

When working with icons and the 8pt Grid System, you’ll find that most well-built icon sets have icons that sit inside frames that are multiples of 8 (i.e. 16x16, 24x24, 32x32 etc...)

Sometimes, just sometimes, that’s not always the case.

If not, make sure that any icon inserted into your design you frame it inside a container that uses an 8pt Grid value (i.e. 24x24).

Doing this will enable your icons to be laid out consistently within your designs.

Two icon set examples. One with icons laid out irregularly, and the other with the icons laid out perfectly next to each other.

Inform the user on what’s going to happen if they apply a certain action.

Always try and inform the user, in detail, before applying a particular action that can have consequences.

This applies especially to actions with irreversible consequences, such as permanently deleting something.

Let the user know what’s going to happen and ask them for confirmation before they go pressing that big, red button labelled ‘Delete The Internet’.

Two notification examples inside of an app. One with a very basic message, and the other with a more detailed description inside of a Modal.

Make sure your most important screens get priority in the Tab Bar.

The Tab Bar in your App is a prime piece of screen real estate, so use it wisely.

Reserve the Tab Bar for the most frequently used screens of your App and hide secondary screens inside a More icon.

There’s only room for the important stuff inside of that teeny-tiny Tab Bar.

Two Tab Bar examples. One with less important icons visible, and the other with more important icons displayed.

Try and create generous tappable areas on Mobile.

When designing for mobile, try to make Tappable Areas large enough for fingers to tap successfully.

The minimum recommended Tap Area for both iOS and Android is -

44 x 44pt for iOS

48 x 48dp for Android

Our fingers come in various sizes, so give them some room and make it easy for the user to tap accurately without too much frustration.

Two Mobile design examples. One shown with elements with very small ‘Tap Areas’, and the other with much larger ‘Tap Areas’.

Don't just choose font sizes at random. Use a Type Scale.

When you need to define a collection of font sizes fast, practically, and without any guesswork, use a Type Scale.

As the name implies, a Type Scale operates on a scale factor (say, 1.25).

The approach is to start with a Base font size (ie; 18px) and multiply (or divide) it by the scale factor (ie; 1.25) to get font sizes of a higher (ie; H1, H2, H3, etc.) or lower hierarchy (ie; Caption, Button, etc.).

Using a Type Scale will help you create texts that look harmonious and quickly bring consistency, rhythm, and hierarchy to your typography.

A list of Text elements using a Type Scale to achieve an harmonious rhythm.

Prompt initial user action with helpful empty states.

Empty states. Highly beneficial in improving the user experience but so often neglected.

Use empty states as an opportunity for the user to quickly discover features that will benefit them, get them to accomplish their goals sooner, and use the site or app as you intended.

Please don’t leave your user at a loss on what to do first, and start them off on the right foot.

Two ‘Empty State’ examples. One shown with a short paragraph of text, and the other with helpful text and a button to guide you.

Set your line-height based on the Typeface’s x-height for optimal readability.

Typefaces with differing x-heights need, well, different line-height measurements to achieve optimal readability and legibility.

Merriweather, for example, is a Typeface with a large x-height, and as such requires a larger line-height.

In contrast, something like Mr Eaves Sans with its small x-height requires less line-height to achieve the best readability.

Two Typography examples. One with a paragraph of text with too short a line height, and the other more generously spaced with adequate line height.

To determine the readability of your chosen typeface, use the x-height or Il1 test.

I've covered this tip previously, but I just wanted to showcase it again because it can be so darn helpful (again, credit goes to Jessica Hische for the ‘Il1 Test’ tip).

The x-height is the height of a lower-case 'x' in relation to an upper-case letter (i.e., T) in the same Typeface.

If your font has a large x-height, it will have considerably better readability, especially when used in long-form body content.

Now, another way to determine the readability of a Typeface is to do the Il1 Test.

With this test, you compare three letters from the same Typeface: Uppercase i (I), Lowercase L (l), and the number one (1).

How different the letterforms look against one another can help determine readability, especially when working with Sans Serif Typefaces.

When choosing a Typeface for your Body text, always aim for the best legibility, either via x-height, Il1, or both.

Two Typeface examples showing the letters I, l, and 1. One shown with text that is not very legible, and the other with a different typeface for improved legibility

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.

I look forward to bringing you many more valuable UI & UX Tips in 2022!

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,