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
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