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. 

Reference:
“Don’t let me think” by Steve Krughttps://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758

Complexity with Jonas Söderström from UX podcasthttp://uxpodcast.com/
Amazonwww.amazon.com
Navigation: Oh, The Places You Were Trying to Go - UX Immersion Podcasthttps://www.acast.com/uiebrainsparkspodcasts/navigation-oh-the-places-you-were-trying-to-go-ux-immersion-podcast
The Design of Everyday Thingshttps://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654/ref=pd_sbs_14_t_1?_encoding=UTF8&psc=1&refRID=FNBS2H3H37XFH2CRXY86

Comments

Popular posts from this blog

Storyboard 101

Since I made up my mind to go into the field of user experience and design, I’ve been constantly amazed by how many different concepts and terminologies we have come out in different professions to mean the same thing. One of them is the concept of a storyboard. Today I joined a design meetup event by “Design by Night”, the theme of which is to draw a painting to illustrate how we solve a problem using a possible solution. We drew the problem and solution from two boxes and no matter if they make sense to us or not, we have to build the connection. The problem I drew was mosquitos, and the solution, Jack Ma. Just the perfect solution. I can think of a zillion ways how he can solve the problem. One possible way is for Alibaba to sell Mosquito Repellent to everybody in the world, delivering through ship, plane, truck,  motorbikes  and even on foot. We will apply them to ourselves and to all animals around us. Mosquitos will have nothing to eat and...

8 Takeaways on Productive Usability Tests

Please, test it.  The fact you believe in your idea, or that your investor do as well, it means a lot about creating a wonderful team and culture. It does not mean your customer will buy into that.  There is a long way between what the market opportunity (as the market analysis and the founder’s vision is) and what the actual product is. Of the thousands of products in different countries that seems to solve the same problem (you may call them competitors if you want), which one will win the customers’ favor now and in the future? Usability test helps to provides insight on that. Or in other words. usability test tells you, at the current state of mind, your customer will most likely find your product to be value if you do … in the following way … and … in the following way ... As you can see, these findings can be translated to what you can include in your MVP, why a certain design or feature did not meet the expect...

6 Ways Machine Learning AI Will Transform Retail Experience

Machine learning utilizes big data to understand users' needs and to provide them relevant information. To a retailer, how will machine learning improve the way they interact with their consumes? In this article, I will talk about 3 pioneers that has already been using AI to provide a better user experience and what are 5 areas you, as a consumer, can leverage on the AI power to improve your shopping experience. In terms of machine learning, currently, most of the implementation is focusing on the awareness/discover stage. Understand your need and suggest the right products:  The North Face shopping assistant powered by Watson through agency Fuild, then you go on the website to search for the perfect garment, all you need to do is to answer from simple questions, and the shopping assistant will find a list of results base on your needs. Give directions when shopping in store: Macy’s On Call powered by Satisfi and Watson help consum...