UI & UX Micro-Tips: Volume Five

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 Five
Photo by Nubelson Fernandes / Unsplash

When creating practical, accessible, and gorgeous UIs, it takes only the tiniest 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...

It’s ok the bend the rules sometimes when it comes to Type Scales and Grids.

I’m a big advocate of following rules such as a Type Scale of some kind or the ever-awesome 8pt Grid system.

But sometimes, it’s good to divert from what a Scale or Grid is rigidly telling you to do and present something that looks better, optically.

Remember that rules are there to be bent, and on occasion, broken.

Be a rule-breaking rebel.

2 Card design examples. One showing a title with a lot of line height, and the other with much less line height applied.

Make those error messages on your forms helpful and easy to understand.

When working with Forms, try and make sure that your error messages explain what went wrong and how to remedy things.

Always keep the user informed, even with something as commonplace as a regular ol’ Form.

Make those error messages useful, and don’t leave your users in the dark.

2 Form Field examples. One showing a field with a basic error message, and the other with a more detailed error message.

Try and assure the user that something is happening when loading up your App.

Displaying a skeleton of your app’s elements can help you quickly communicate the layout and assure the user that something is happening.

System status visibility is an important principle to follow and allows the user to be informed about what’s going on.

Don’t have the user playing a guessing game. Keep them informed right from the very start.

2 loading screen examples in an app. One showing an empty screen with no visible loading indicators, and the other showing more detailed loading indicators.

Inform the user on what’s going to happen if they apply a certain action.

Always try and inform the user, in detail, before applying a particular action that can have consequences.

This especially applies to actions with irreversible consequences, such as permanently deleting something.

Let the user know what’s going to happen and ask them for confirmation before they go pressing that big, red button labelled ‘Delete The Internet’.

2 notification examples inside of an app. One with a very basic message, and the other with a more detailed description inside of a Modal.

Make sure your most important screens get priority in the Tab Bar.

The Tab Bar in your app is a prime price of screen real estate, so use it wisely.

Reserve the Tab Bar for the most frequently used screens of your App and hide secondary screens inside a More icon.

There’s only room for the important stuff inside of that teeny-tiny Tab Bar.

2 Tab Bar examples. One with less important icons visible, and the other with more important icons displayed.

Don't hide important actions away inside of a Dropdown. Front and Center people!

Yup. I still see this happening from time to time on Desktop views.

Essential actions that a user needs to take (i.e., Sign Up or Log In) solely hidden away in a Dropdown that they may not even navigate to.

Keep those important actions accessible and in a place where they’re most expected.

2 Desktop navigation examples. One with Sign Up and Log In buttons hidden away in a dropdown menu, and the other with the 2 buttons outside a menu and sat alongside the top navigation.

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

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,