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.
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.
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.
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.
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.
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.
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’.
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.
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.
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.
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.
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.
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.
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. 👇
Thanks for reading the article,
Marc.