UI & UX micro-tips: Volume fourteen

A collection of handy tips to help improve your designs instantly

Published in

UX Collective

5 min readMay 12, 2022

An example of a colour wheel and next to it a block of text with a button element, and chip elements using colours from that colour wheel

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.

Let’s dive on in…

Oh. Before you read the rest of the article…

🏠 Growing a SaaS startup? I combine strategic design with proven founder experience to help you build products users love.
Join the Haus waitlist for early-bird perks → https://gohaus.design/

1. Go Soft, not Hard with your Grid spacing.

A Card design example with an image and text with 8 point grid spacing between elements

Do you go Hard or Soft when using a Grid system of some kind in your designs?

My advice to you. Keep it Soft.

When I’ve created designs before (using something like the 8 Point Grid System), I’ve always opted to use the ‘Soft Grid’ approach, where you simply measure 8pt spacing increments between individual elements in your design.

As opposed to the ‘Hard Grid’ approach, which places elements into a rigid grid pattern defined in 8pt increments which I find not practical for when it comes time to pass your design over to developers.

2. Try and provide instant feedback after Form interactions.

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

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 as to whether an interaction with a specific field was successful or not.

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

3. Struggling with choosing colour schemes? Keep it Analogous.

I’ve mentioned Analogous colours previously, but I just wanted to touch upon them again as I know how beneficial they can be for folks struggling with choosing colour schemes for their project.

Analogous colours, also referred to as adjacent or neighbouring hues, are simply three (but this can be more if you choose) colours that sit next to each other on the colour wheel, composed of one dominant colour (sometimes known as the Mother colour), then supporting colours sat either side.

Working with Analogous Colours can help you find an harmonious colour scheme that enables your designs to look uniform and consistent, with much less effort and frustration on your part.

4. Make your Type look better optically. Bend those Grid rules.

Two Card design examples. One with a title and paragraph slightly misaligned, and the other with both text elements aligned correctly

If you’ve read my previous articles, you’ll know I’m a big fan-boy of Grid Systems, the 8pt variety in particular, but I’ve also realised, and especially when it comes to aligning Type, that you need to bend those grid rules from time to time.

We all want to present our UIs the best way we can optically, and sometimes sticking to a grid rigidly will not always allow for that. So, if your Heading needs 16px of left padding but your paragraph needs 2px more to make them look more optically aligned, big deal! Just do it!

Don’t feel you have to stick to the Grid every single time. Go off-grid on occasion.

5. Keep those Search fields wide. Fit in the 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

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 nice, wide search field enough to accommodate the user’s full search query.

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

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

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.

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.

Oh. Before you go…