Lousy navigation and filters ended up being the Achilles heel in just about all online stores which I user-tested for this book. Menus, navigation prompts, as well as Filters, need to be designed primarily for smartphones.
Considering that roughly 30% of all consumers in smartphone online stores don’t discover what they may be searching for, this post is particularly important.
The Fundamental Principles
Whenever you design navigation, there are five basic principles which you can follow, and consumers should receive answers to all of the following questions without needing to think:
- Where’s my navigation?
- Where am I?
- Where can I go?
- Where did I come from?
- How do I get back to where I came from?
1. Make your menu obvious by using a burger menu and a menu text label
I suggest that you exhibit a burger menu along with a “Menu” text label in the upper-left corner, like in the following Zalando example:
Note: Your burger-menu icon needs to be a little bigger than Zalando’s.
All participants of the test discovered this item.
Amazon presents another great way of top navigation best practices. All the test participants located this item.
Additionally, I’d suggest not presenting two, because this confuses the shoppers. Alternatively, you could display “Help,” “Customer Service,” etc. buttons or text links at the bottom of the page, as shown in Amazon’s web store:
2. Insert a heading such as “Men’s Department” to make it obvious for the customer where he is in the online shop.
Here you see on Amazon it is difficult to know where you are as a main heading identifying the category is missing from the page.
3. Place your navigation in the upper left corner.
Some participants intuitively pressed the burger menu in the upper-right corner when they wanted to shop, but this menu did not contain any products. This very well illustrates the “power” of the conventional burger menu, as it outperformed even the more-obvious orange “SHOP” button. I recommend that you display a burger menu label in the upper-left corner, as in the above Asos example.
4. Do not mix products and features together in the shop’s main navigation
Amazon might be (incorrectly) assuming that they would sell more by forcing customers to scroll past many products and brand categories, but my test clearly indicated that this only annoyed the customers. It is better keep products out of categories to prevent navigation confusion.
5. Show product categories in your menu, and refer to the “Help”, ”Login”, etc. at the bottom or at the top of the page.
Pet Smart gets this right by keeping the information on the bottom of the page yet still easy to find.
6. Make sure your menus, buttons, features, etc. are fat-finger proof.
Most menus and sub-menus aren’t “fat-finger proof” which is a huge problem, specifically for men. Menus, buttons, links, etc. must be effortless to choose using a finger, and these are indeed not. See Asos’s menu of “Women,” “Men” etc. fat-finger proof to make it effortless to navigate:
7. Make it easy for the customer to return to the previous page when navigating up and down the product hierarchy.
8. Make it possible for the customer to go back to the previous menu item without directing to the home page.
Amazon has a heading to the main “CLOTHING DEPARTMENT” page and correctly linking the “back arrow” to the page the customer just came from. This allows the customer to go back to the same page he came from easily, adding the same ability by selecting the browser’s back button or arrow, makes it easy and efforltless for a customer to navigate.
9. Do not display advertising, etc. above your product lists when the customer has selected a product category such as “Jeans”.
Do not advertise on category pages as Amazon has done here, this just makes navigation clunky and difficult to navigate.