Skip to main content

How to Design a Good Navigation

3 piece of articles I came across today discussed about the importance of a good navigation  which reminds me of some learnings I had in my previous products.

I just finished Chapter 6 “Street Signs & Breadcrumbs” in “Don’t let me think” by Steve Krug, he compared the user experience between going to a physical store and look for a particular product and going to an online store. 

First, there is no sense of space in the online world, users find it hard to get a feel on if they have seen everything of interest, especially on websites that have a long catalogue, the experience can be daunting;

Second, there is no sense of direction, I can’t turn left, right, up or down; so I don’t know exactly how I will turn one step back or two;

Third, there is no sense of location, users know they are on a page, but many times, they don’t know how deep they are down the hierarchy, how this page is related to the previous, and most important, how close or far they are from what they are looking for and when the search will end;

And I will add one more point, there is no sense of improvement with experience; if I have been to a physical store and found something, the next time I am able to take a short-cut; while online, when we return we have to try and remember the conceptual location of some content, which is more difficult to our brain. I remember I used to access the return application form of an e-commerce site through going to the second page of their FAQ, it is obviously not an optimal experience, but i just couldn’t figure out other ways.

Navigation is difficult also the physical world: I went to Wellcome near Causeway Bay in Hong Kong, this is not the first time I visit this store, but I often buys fruit and vegetables, which are right next to the entrance. 

This time I want to be a box of toothpaste. I found the sign next to the shelf “Health and Beauty Care”, which is usually where I found toothpaste, I wake down the aisle, I did found some brands of toothpaste but not the brand I want, I guess maybe they don’t sell it so I was going to leave. 

I want to skip the long queue at the normal checkout since I only have 2 items to but, so I took a short-cut to express checkout via the cold drink section.
Right next to the fridge, there is the shelf with the toothpaste i am looking for.

Apparently, the brand is on-sale so they want to move it to closer to the cashier so people can find it.

But the fact is, they moved every box they have so consumers can no longer find them in the old place. and worse still, the new place can only be found for people who use Express Checkout, people who use Standard Checkout can only see it after they have paid their products.

In many cases, the navigation bears too many objectives, it needs to lead users to the place they want to go, it needs to give them a sense of what is available; it needs to direct them towards what we want they to purchase or purchase more. In the physical world as well as in the online world, the different objectives does not always align with each other and many times, trying to appeal to all of them create a confusing navigation experience.

On the way home, I was listening to "Navigation: Oh, The Places You Were Trying to Go - UX Immersion Podcast” in which Hagen talked about the common reasons why navigation represent large part of the real state on a website while creates confusion:

Fear of users can’t find result in overcomplicating things: companies want to provide multiple ways for users to find the content because they are afriad users can’t find the things easily, so they provide a top menu,  a left menu and a bottom menu for the same objective.

Blinding chasing popular ideas without thinking what is needed: some follow what is trendy, for example, tabs were the main stream 10+ years ago; then it is the left side menu, now transforming to more subtle, hidden navigation. Many followed and added more navigation, but the new navigation does not create any value.

With all said, what does a good navigation needs to achieve and how to do it:

Create a sense of space and direction:

Apply different look and feel to the path users are on - it is recommended to apply visual clues to make the path look distinct, color the menu in a different way, blog the category name, make the name italic etc; there are many things you can do, just make sure you are doing it for the entire path, not only for the bottom level, this gives users a sense of where they are on the site and how far they have “travelled” from there they have started;

Use breadcrumb on top of the page - breadcrumb serve the same purpose, which is to indicate the full path. I found it particularly useful for informational sites such as developer portal or FAQ; when applying it to your site, make sure to use “>” in between and bold the last item;

Make it easy to reset the discovery:

Have a link to the Homepage - no matter how much effort we spend on designing the category and navigation, somebody will not be able to find what they want, so we need to make it ultra fast for them to restart from the beginning so as to prevent the frustration building up due to failed search does not accumulate;

Add search if the website is too big - everybody love search box, it is our genie in the bottle that grant our wish, give us what we want; but as a product manager, I know implementing a good search function can be challenging, when I did the search feature for a marketplace, it needs to support 3 languages, identify if the consumers have entered a curator's name, product name, brand name, give suggested search words and rank and categorize the search result. All things have to be done in near real-time. So if the website is a simple one, search may be an overkill that does not create the ROI expected;

Design navigation last - at last, the objective of navigation is to help the audience find things faster; whatever we do, we aim to arrange the site in a way that is most nature to the users; it is a good idea to get the contents out there first, so we know which ones belong or don’t belong together; if there is a need to move a level-3 sub-category to level-2 because it has to many sub-category under it; Design navigation last also helps maintain naming consistency as we will be start from confirming the page name, then sub-category names and then going up the tree.

Navigation plays a prominent role in creating a good user experience, prolonging the site stay and increasing engagement. Every website is unique, So, don't afraid to deviate from these rules as long as you have valid reasons. 

“Don’t let me think” by Steve Krug

Complexity with Jonas Söderström from UX podcast
Navigation: Oh, The Places You Were Trying to Go - UX Immersion Podcast
The Design of Everyday Things

Popular posts from this blog

4 Techniques to Make Your UX Review Meetings Successful

As a product manager, I often need to sit down with the executive management team to get their feedback on the new designs. It can be a frustrating process and many times I found that I cannot get things down in the time I am allowed to have.
Nevertheless, not having the sign-off from management is terrible for the team, we face high risk of having to re-work (yes, we always need to re-work, but it feels better if it is an improvement), schedule get delayed etc.
Over my 200+ review meetings, i've came to understand the reasons and learnt skills on how to stir the meeting towards an efficient completion, and I want to share them with you.
There are 4 key reasons of an unsuccessful product review meeting: 
1. Audience Lack the Background Knowledge: especially when introducing a new function, executives don’t know what they are looking at, or how the end users will be using such function, you may have sent the presentation before and again in the meeting invite, it doesn’t matter;

2. T…

What Changes will Machines Bring to us - As Employees

Machine learning to the employment has been a topic in debate. Darrell West, in his paper titled "What happens if robots take the jobs? The impact of emerging technologies on employment and public policy” suggested a list of actions government should take to ensure people whose job has been replaced by machines can live a decent live. The general sentiment seems to suggest a turbulent era as work force transform.

Growing up in China during the time of State owned enterprise reform, I had real experience living through the time of large group of people being laid off because the jobs were suddenly gone. My parent’s generation had to learn new skills for a completely new industry at their 40s and 50s. Few of them made it and even became millionaire, many of them didn’t and the family suffered a lot. I followed the news of Detroit Car manufacturing industry lapse and it shows familiar traits. The fact is, jobs come and go all the time, employee as a group will constantly adapt while …

21 Tops on How to Write a Successful Blog

Hubspot and General Assembly came together to offer a 10 week planner for successful blog. The type of blog discussed in this plan are corporate blogs used to bring people to the site and explore what the company is doing, potentially generate a lead.

Identify Your Target Persona: talk to sales team and research contract dataStart Building Evergreen Content: start with evergreen contents that stay relevant though time; do keyword search to see what people are searchingChoose the Right Content Management Tool: a good tool is easy to use and allow users to track metrics such as conversion rate, page view, and where traffic come fromDesign Your Blog: consistent layout; Focus on Your Content Strategy: basically it is depending on what you wantSet Subscriber Path: there needs to be a workflow for emailing the subscriber, a subscription form and an unsubscribe form. Hubspot is towards the "don’t email your subscribers too often” group while I also heard UI Breakfast Jane Portman talked …