UI & UX Micro-Tips: Volume Six

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 Six
Photo by Faizur Rehman / Unsplash

When it comes to building efficient, accessible, and beautiful user interfaces, the smallest changes can make a massive difference.

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

Tips that can improve both your designs and the user experience with minimal effort.

Let's dive on in...

Try to keep the Tab Bar a constant within your Mobile App.

If the user is going more than two levels deep into your app, make sure the Tab Bar is there to help them get back to where they need to quickly.

Too many taps aren’t cool and will bring frustration to any user.

Try to keep the Tab Bar a constant within your mobile app, and avoid those unnecessary tap backs.

2 Mobile design examples. One shown without a Tab Bar, and the other with a visible Tab Bar.

Using only Weight can create Emphasis and Hierarchy within your Type.

Emphasis and Hierarchy using only Weight? Oh yes!

Staying within the same type family and simply varying the family member’s Weight can signal a shift in Hierarchy even when the point size is unchanged.

Sometimes Weight is all you need to create Emphasis and Hierarchy within your type. Yup. It’s really that simple.

2 Typography examples. One with 2 blocks of text in the same weight, and the other using a Bold and Regular weight.

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 Areas for both iOS and Android are –

  • 44 x 44pt for iOS
  • 48 x 48dp for Android

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

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

Make your site's navigation as consistent as possible.

Follow best practices and try to keep your navigation consistent across your site.

Even minor changes can cause cognitive dissonance and frustration for the user.

There may be minor exceptions to the rule on certain types of sites but keep that navigation consistent for the majority.

2 Desktop Navigation examples. One shown with irregular elements, and the other with the exact same elements, in both look and placement.

Content-heavy site? Make that Search a prominent feature.

Whenever possible, aim to make Search a prominent feature on your content-heavy site, especially when viewed on desktop.

Try not to hide your search feature solely behind some teeny-tiny symbol as it plays an essential role on content-heavy sites, and demands a little more attention.

Make it prominent and visible on desktop and you’re good to go!

2 Desktop site examples. One shown with just a Search icon, and the other with a large, defined Search field.

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.

I hope with this short collection of tips you’ve realised how the smallest of changes to your designs can produce better results for both yourself and the user.

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,