UI & UX Micro-Tips: Best of the Best

In this article I’ve compiled 10 of my most popular UI & UX Tips that can, with little effort, help improve both your designs and the user experience.

UI & UX Micro-Tips: Best of the Best
Photo by Brands&People / Unsplash

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

Here I’ve compiled 10 of my most popular UI & UX Tips that can, with little effort, help improve both your designs and the user experience.

Let’s check them out…

How darkening your Text can improve Readability.

When it comes to long-form content, you may be inclined (because all the cool kids are doing it) to go with a mid-shade of Grey, which can be all good until you start using a lighter font-weight, affecting legibility in a big way on screens of all sizes.

Don’t have users with reduced vision reaching for the back button, and quickly fix this issue by darkening the text and making it more accessible to everyone.

With Typefaces that have a lighter weight, just darkening things down a few notches can significantly improve their legibility.

Two design examples. One with a block of text in a light grey colour, and the other with the text block in black

Why placing Labels above Fields is best practice for lengthy Forms.

Ok. For short forms, following the familiar eye-scanning Z-Pattern and placing labels to the left of the field is acceptable as there’s not much content to scan through, but for longer forms, always keep those labels at the top.

Having those longer forms use the more common F-Pattern allows the user to scan the form more naturally and achieve their goal quicker.

Don’t build those longer forms purely with aesthetics in mind when you aim to get the user through it with the least friction.

Two Form design examples. One with labels to the left of the form fields, and the other with the labels above the fields

The importance of clear and consistent Button Labels.

Firstly, you should always try to give descriptive labels to your buttons describing the next step when the user taps that lil' button. Secondly, and something that gets neglected, is to keep consistent and clear with the button label naming throughout your site or app.

I've often seen (and been guilty of it myself) inconsistent, sometimes vague labelling for buttons that involve the same action. 'Join Now', 'Let's do this'. Same action. Different Labels. Try to avoid it.

Keep your labels consistent throughout. Reduce the cognitive effort (however small) for the user and let them achieve their goals without second-guessing.

Two Hero design examples. One with buttons with different labels, and the other with buttons with the same label naming

The benefits of removing unnecessary words from your UIs.

Our goal is to get the user from point A to point B in the quickest time possible, and avoiding unnecessary words is one of the simple ways you can achieve that.

If the action they must take (filling out a form and signing up for your service) is pretty obvious, a simple title, i.e. ‘Register Now’, is more than enough to guide them forward.

There’s nothing wrong with hand-holding the user occasionally, but when something’s self-explanatory, and you want the user to achieve their goal quickly, you can go ahead and cut out those unnecessary words.

Two Form design examples. One with a subtitle underneath the title, and the other with no subtitle under the title

Why instant feedback is crucial for Form interactions.

When it comes to Forms, especially those consisting of quite a few input fields, it can be encouraging for the user to see instant feedback as they make their way through it.

Just keep it simple. Nothing too fancy. Just keep users in the loop whether an interaction with a specific field was successful or not.

A simple icon and, in some cases, a short text hint are all that's needed to provide much-improved accessibility and just a general improved user experience when it comes to Forms.

Two form design examples. One with an email field error showing just a red border, and the other with border plus an error icon and short message

Ensure users always know what's coming next.

Before a user takes action, especially on some types of Calls to Action, ensure they’re not left in the dark about what may happen next.

Always keep the user well informed before an action is taken as to what they can expect when clicking on your shiny Call to Action.

Improve the user’s experience every step of the way, and don’t leave them second-guessing at any point in their journey.

Two design examples. One with a call to action button on its own, and the other with a call to action plus a small message below it

Reduce user friction and reserve one colour for your Call to Action.

The Call to Action (CTA) must be one of, if not the most crucial element on the screen.

Don't have the user confuse it with any other kind of element on the screen (i.e. Notifications or Tags). It needs to be easily distinguishable between those elements, and that can be achieved by simply reserving one colour for the CTA and nothing else.

Of course, you can go further with sizing, shape and more, but reserving that one colour for your CTA and alone can reduce most friction.

Two design examples. One with a call to action button, and tag elements looking very similar, and the other with more distinguishable elements

Communicate error states in Forms without relying solely on colour.

Regarding Accessibility with your Forms, don’t rely on colour alone to communicate different states to the user.

For example, with Error states, if you only communicate an issue with colour alone, someone with colour blindness may completely miss this. That’s not cool.

Always try to incorporate a combination of icons and some form of error message to aid Accessibility and not leave many users in the dark about the issue that’s being communicated to them.

Two form design examples. One using only a red border as an error state warning, and the other using an icon and message

How lowering text contrast can help users with visual impairments.

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 (and 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

The benefits of using Icons and Labels together.

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, 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

Hopefully, you can see that by making minor tweaks to your designs, you can easily create more efficient, accessible, and beautiful UIs that greatly enhance the user's experience.

See you next week,

If you enjoyed this, there's a few other ways I can help you out right now...

Design Guides: A collection of bite-sized UI & UX Design guides to reference frequently. Improve your knowledge and skills with little effort required. Oh, and they're absolutely Free. Grab the Guides here.

Cabana Design System for Figma: My best-selling system is a powerful kit for designers short on time. Think of it as a cheat-code that enables you to create beautiful designs... fast. Check out Cabana for Figma here.

Cabana Design System for Framer: With the power of No-Code you can quickly go from design to Live on the Web within seconds. 10x your workflow today.  Check out Cabana for Framer here.