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