Great navigation on a budget
Quick wins to enhance UX in your navigation
Imagine a supermarket having the widest variety of fresh, delicious produce everyone wants to buy, but the road to get there is rubbish or simply doesn’t exist. The store probably won’t have a ton of sales. This has got nothing to do with the products they offer or the service to their customers. It’s all about the road to get there. If people can’t find it, they can’t buy it.
Same goes for your website. A working navigation is key to getting the results you want, whether that’s selling a certain product, informing your user or getting them to interact with you.
Building the perfect navigation for your website requires extensive research and analysis to figure out how your users navigate through your pages and content. What are your users looking for on your website and what does it take for them to get there? How can you make it easier for them to get to the right content?
We get it, not everybody has the chance or resources to completely rethink their navigational structure, so here’s a few quick wins to help overcome the biggest issues.
1. Home is where the logo is
Your logo should redirect to your homepage. This has become convention over the years, most people expect to be taken back to home when clicking the logo. However, not all people are aware of this, so it’s best to still guide them with a literal ‘Home’-link in your main nav.
Another convention when it comes to the logo on your website, is placing it in the top left corner of your page. This is where people expect it, so why put it somewhere unexpected and harder to find? Studies by Nielsen Norman Group have shown that users are 6 times more likely to reach your homepage in one click when the brand logo is placed in the top left corner instead of centered on the page.
2. Let users know where they are
Surfing the web sometimes leaves us wondering how we got to the page we’re currently on. And no, it’s not just us. People often get lost in the abundance of content on the web. Here’s a few simple tricks to get or keep them on the right path.
Use active states for pages
An active state in your main nav indicates which page you’re currently on. This can be done by changing the color, font and/or adding a little element. Just make sure to keep accessibility in mind when working on these active states. By just changing the color of the label, people with any type of color blindness might miss the indication and still be left confused or maybe even frustrated.
Use breadcrumbs
When your website is a complex structure of pages and subpages, it may get confusing for your user to navigate through it successfully. That’s where breadcrumbs come in. They display the path the user has taken to get to the page they are currently on. It’s easy for the user to go back to the previous page or even further back.
Breadcrumbs are tiny elements on your page, yet I see a lot of websites hiding them on mobile devices. This is problematic, since we’re already hiding the menu items behind a hamburger icon below a certain breakpoint. Without the breadcrumb, the user has no idea of where they are.
If your desktop breadcrumb takes up too much space on mobile, consider slimming it down, by just referring to the previous page for example.
3. Be clear, use a label.
For this one, we’re gonna keep it short: Using just icons in your navigation is not done.
Don’t give users the chance to interpret your fancy icon the wrong way. It’s okay to use icons, just make sure you add labels, so it’s absolutely clear where this item is navigating them to.
4. Keep it short and sweet
People may say they like to have options, but in reality, we don’t. Choice overload, a term first introduced by Alvin Toffler in his book Future Shock, is something we all experience when having too many options to choose from.
When it comes to your navigation, be careful not to overwhelm your user by giving too many options. There are loads of important laws of UX to keep in mind when designing your navigation, but the following two pretty much cover the essentials:
Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices.
Miller’s Law: The average person can only keep 7 (plus or minus 2) items in their working memory.
Hick’s and Miller’s law are especially relevant for random lists that have no logical order. The most important random list of items on your website is highly likely to be your main navigation, so better apply these 2 bad boys asap.
That’s probably still way too abstract if you’re not into Laws of UX, so let‘s make it super simple for you:
TL;DR
Rome wasn’t built in one day, so don’t expect the navigation of your website to be an easy peasy task. However, there are some quick wins to get you going:
1. The website logo should be in the top left corner of your page, redirecting to the homepage.
2. A user should always know where they are, at any given moment. To achieve this, indicate the current page with an active state and use breadcrumbs to show how the user got there.
3. When using icons in your navigation, make sure to put a clear label on it as well. This way, the user can’t interpret an icon the wrong way.
4. People are bad at memorizing and making choices. Avoid these problems by using one simple rule: If you can’t simplify, sort; If you can’t sort, simplify.
