Table of Contents
Welcome back in the next post from UI design series focused on creating great user interfaces with ten, sometimes simple, steps. In the previous part we explored the first step to create great UI design that is by creating a story. In a quick, options we went through were using real images, using a mascot to create deeper relationships with users, creating custom messages, focusing on authenticity, offering ways to share on social networks and using an interactive content to create more immersing impression. Today, we will continue by diving into best practices for navigation.
Well, this seems like that kind of question that does not need any long explanations. The answer is simple. Navigation is crucial part of your UI design. If there would be one thing that must be done well it is navigation. Well-designed navigation will work as an anchor for user helping him get where he want as fast as possible with minimum effort. On the other hand, if you screw up the design of navigation, your users will have problems to interact with your website or product and this may result in them leaving soon.
High bounce rate caused by poorly designed navigation is something you should avoid. For this reason, on the following lines we will explore six options to make sure navigation and whole UI design is done well and nothing will distract the user from getting what they want (or we want).
The first thing you can implement to improve the design of UI is by using icons. These simple and easy to understand symbols can help you avoid problems arising from language, culture, social and other conventions. In a perfect world, words would have the same meaning no matter the region you are in. In a perfect world, you could use any color without worrying about how will people form different countries react. Fortunately, we have option to bypass these design challenges.
Icons can be the quick fix for this problem. These symbols (most of them) are culture and language independent and universal. Most of the people using your website and other product will probably have little to no problem to understand and use them. To support this claim, take a look around yourself. You are surrounded by various icons, symbols and pictograms. They are everywhere, from app icon on your smartphone to toilet sign in shopping center to stop sign on the highway.
Even though they differ in shape or color they have one thing in common. This is important rule you must keep in mind. They are all universal and easy to recognize thanks to broad usage. The more some icon or symbol is used, the easier for people to understand it will become. Remember, if you want to implement icons in UI design, make sure all of them are broadly used and recognizable. Otherwise, they will make the situation only worse.
We are living in the age when more and more people are accessing web via their mobile devices. What’s more predictions for the future are saying this will only continue. So, even though your design is not approached by mobile users at this moment, it does not mean it will be the same a year later. For this reason, better approach would be to take mobile users already to count and modify your UI design accordingly.
One of the ways to go is to start designing mobile-first. In other words, forget about creating the first draft for desktop and go with mobile instead. Also, another suggestion would be to forget about searching for any fixed breakpoints to design for. In this post you will find couple reasons why the content should be the pointer for media queries instead of device screen sizes. In short, remember to always double-check if the navigation is mobile-friendly and is using universal design patterns.
Another way to make your UI design better and more user-friendly is through direct manipulation. Some time age, when I first approached this term, I had no clue what it meant and had to look for a couple of examples. It turned out to be pretty simple. The design elements should be directly approachable. This means avoiding nested sub-menus and dropdowns inside dropdowns.
Overcomplicated navigation elements are not only confusing for users, they are also often hard to use. Imagine going through multiple sub-menus while trying to keep them opened with mouse or touchpad. This is sometimes a feat deserving a gold medal. Now imagine the same thing on mobile. Painful, hard, dreadful, challenging, difficult, time-consuming. None of these words should be used or associated with your UI design. Always try to make the manipulation with elements as direct as possible.
Quick way to kill any efforts to create great UI design can be poorly designed calls to action (cta). This includes everything from visual part to interaction. CTA’s should be easy to recognize and distinguish from the rest of content. This can be done through contrasting colors, use of whitespace, dominance and other design elements. Next are labels and reactions on user’s interactions. Labels should always describe what the cta is supposed to do.
If it should submit a form, use label saying exactly that. If the cta is for applying a discount, again use the same semantics for label. If the button will have to be larger, let it be. Next step is to implement some kinds of feedback for user while interacting with cta. You can use animations to indicate form submitting or change the style of button depending on whether the action was successful or not. Users should always get feedback to their actions. Remember, make the calls to action clear and easy to distinguish.
One mistake we can do is to use too many similar elements in UI design. This is a sure way to unsettle the user or to completely mislead him. Good example can be using chevrons or arrows around play button. Even though they are not looking the same way, they can be interchangeable and users can be confused. So, any time you want to use some icon or other element in UI design, make sure there is nothing similar to it, at least not in close distance. Remember, always try to aim for simplicity to avoid ambiguities.
One of the hottest terms on the web now is conversion. Every designer should understand that the impact and success of UI design can be (and should be) measured. It does not matter if you are working for yourself, starting a company or work for an agency, conversion is still thing to take into consideration. Couple of things you can do to increase the conversion of your design are wrapping elements to demonstrate that it’s worth visitor’s attention and again using contrast to help users distinguish cta and other elements.
Giving elements space to breathe is another tip along with using a directional cues like arrows postures and directions of views of people on photos. Creating urgency or scarcity is also a good way to make something more appealing to users. Let’s also not forget about some kinds of social proof. This can be testimonials from people already using your product, past clients, etc. Their goal is to give people reason to put their trust in you.
And with this we are going to close the navigation part and also end this post.
Final words
In this second post of this UI design series we discussed steps related to streamlining the navigation. These steps include use of universal and easy to recognize icons, making sure our ui is mobile-friendly, users can manipulate with elements directly (avoid overnested elements), clear and distinguishable calls to action, avoiding ambiguities and confusion caused by similar elements and last aiming for conversion.
What other advice do you have to streamline the navigation and improve the UI design?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
