Design Tips

UI & UX Micro-Tips: Best of 2022

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

Marc Andrew
Aug 24, 2022
7 min read

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

In this latest 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 the past year so far.

Let’s dive on in…

1. Creating a Dark-themed design? Don’t forget to soften up that White too.

As I mentioned in a previous set of tips, never opt for pure black when creating Dark themed designs as it can affect usability for many users. Soften up that black when you can.

Similar rules apply whenever you decide to add White flavoured elements into a Dark design.

If your Whites are pure white, they can feel jarring to the eye against dark-themed elements and make for a poor visual experience, so soften up those Whites and bring them down in contrast a little to provide something much easier on the user’s eye.

Two design examples. One with a Notification element using a pure white background, and the other with a subtler shade of white

2. Don’t rely on colour alone to communicate error states in your Forms.

When it comes to 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 some form of 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

3. Make those selected items stand out and grab the user’s attention.

UIs can be clean, stripped back, and straightforward. No doubt. But not at the expense of a neglected user experience.

For something as simple as a menu of options, make sure that a selected item can be easily identified with a quick glance.

You don’t have to go crazy here. Simple but bold wins the day and allows the user to easily distinguish which item they’ve selected and that their input has been recognised.

Two design examples. One with a menu item selected with just a plain border, and the other with a full colour background

4. Using a lighter font weight? Darken up your text if you can.

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

5. Don’t have the user second-guessing the next step. Keep them informed.

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

Always keep the user well informed before an action is taken as to what they can expect when clicking on that shiny CTA of yours.

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

6. Give the most important elements on the screen more prominence.

You want the user’s eye to be drawn to the most important elements on the screen quickly, efficiently, and with minimal cognitive effort every time.

By using visual hierarchy principles such as Font Size, Weight, Colour, and Layout, to name but a few, you can easily give prominence to the most essential elements.

Following these principles will help improve the user experience and help lead the user through your product in a much more streamlined manner.

Two design examples. One with poor visual hierarchy, and the other with much improved visual hierarchy

7. Keep those Search fields wide. Fit in the full search query.

Whenever possible, try to make that Search field large enough to accommodate a user’s full search query.

No one likes to see their query vanishing into the depths of the search field and scrolling horizontally like a ticker tape (keeping it web circa 1995 right there).

For content-heavy sites especially, you can opt for a wide Search field in the Hero section or, in other cases, simply a Search icon that when clicked, displays a wide search field, enough to accommodate the user’s full search query.

Two Search field examples. One with a short width and the search query too long for the field, and the other with a much wider search field with all text visible

8. Make those Navigation Bars sticky when quick access in needed.

For those short-on-scroll kinda sites, it’s cool to tuck away that Nav Bar as the user makes their way down.

But for longer web pages and especially when quick access is needed, for example, with an important call to action such as a Sign Up or Buy Now button, it’s always wise to give that bar some stickiness.

Don’t have the user scrolling further and further away from that important CTA in the Navigation bar. Keep it sticky. Keep it available at all times for quick access.

Two design examples. One with a Navigation bar disappearing off the top of the page, and the other with the Navigation fixed in place with the content scrolling underneath

9. Help the user get to relevant content in the quickest way.

In-Page links (sometimes referred to as Jump links) have in the past been frowned upon by certain sections of the UX community. Still, if they’re implemented well, they can significantly improve the user experience when it comes to lengthy content on a single page.

Say, for example, on a very long article, and I’m talking one with many sections, each with plenty of content inside, having a table of contents of some kind can help the user navigate to the section they need fast without endless scrolling to find that point of interest for them.

Applied well, In-Page links can provide quick access to the content of interest for the user and greatly improve discoverability and engagement with your content.

An example of a long blog post with a table of contents to the right of the post

10. Try to minimise redundant tasks when it comes to longer forms.

Some forms can get pretty long, especially when it comes to E-commerce and those that involve the user’s shipping and billing details.

Make things a little more streamlined for the user and minimise redundant tasks, such as inputting details for both a delivery address and billing address, which will be the same in most cases.

So make it much less time-consuming for the user with something as simple as a checkbox that allows them to duplicate their previously entered data, pre-populate fields, and move swiftly through your form.

Two Form design examples. One with shipping and billing form fields, and the other with an added checkbox

11. Always place the Labels above Fields on longer 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 in a much more natural way and achieve their goal quicker.

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

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

12. Try not to clutter your UIs with unnecessary words.

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 have to take (fill out a form and sign up for your service) is pretty obvious, a simple title ie; ‘Register Now’, is more than enough to guide them forward.

There’s nothing wrong in hand-holding the user from time to time, but when something’s self-explanatory, 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

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, and save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 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,