Ecommerce Top Level Navigation – Lessons From the Top 10 E-Retailers
- Posted in Ecommerce
Most websites do not pay close attention to the design of their top navigation bar. Yet simple changes made on this location of the page can make huge differences in conversion optimization. Prior to going bankrupt, Tower reported that they were able to double their conversion rates by adding a new navigational feature to their site.
While there are no concrete rules on what elements you should include on your top bar, there are several elements you should consider.
Should you use a top level navigation in your ecommerce site?
6 of the top 10 e-retailers use the top navigation to funnel traffic to either
1. major product categories
2. or to different sections of the site that can address specific visitor needs.
Apple provides users with an option to enter its ecommerce store or click some of the major products it offers for specific category or support pages.
CDW follow the same approach, allowing visitors to select its products, services, solution center or special offers.
Amazon on the other hand decided to do away with its top level navigation all together relying instead on left navigation to drive users to category pages
Which one of these approaches work best? There is no fast and hard data to support one approach versus another. What is more important is helping the visitor arrive at the specific category he is looking for with the least number of clicks. I personally prefer using a top level navigation.
How many categories should you display in your top bar?
The space in the top navigation bar is limited. That is the reason you have to pay close attention to how your structure your categories. Having more than 10 categories in the top level can be overwhelming.
Staples for example uses 6 different links in the top navigation:
Office Depot manages to cut down the categories down to 4 in the top navigation bar
Of course that is a result of the type of catalog they carry.
OfficeMax, the direct competitor of Office Depot, takes a complete different approach
The top level navigation lists the alphabet, allowing the user to highlight a letter to list the categories under that letter
When I highlight the letter “B”, I am presented with categories that start with the letter B
This approach seems to translates the traditional paper catalog approach into a web format.
Of the top 10, Sears is the only ecommerce site that uses multi-level category in their top level navigation:
The challenge is presented with the categories Sears offers. What would have been a better categorization? What categories could we have combined together?
And of course if you cut the number of categories you use in your top navigation, then you are most likely going to have to use drop downs to display your second level categories.
Of course you always have the option of requiring the user to click on the top level category and from there you take them to page that display all the subcategories below it. When click on a top level category on the Sears website (tires for example), you will be taken to that category page which presents you with the subcategories below the main category:
You can also choose to display multi-level category from your top navigation. And that is the approach CDW took
20% to 30% of the ecommerce visitors rely on a search box to find the product they are looking for. And each of the top 10 ecommerce sites has the search box in the top navigation. Amazon has the large search box which takes up a large portion of its top level navigation. Amazon uses an html size of 50 for its search box.
However, you have to be careful not to crowd your top level navigation with too many elements that will overshadow your search box and make it difficult that your search box to find.
Finally, distinguish the color of your search button:
Shortcuts (supplemental navigation)
Visitors to ecommerce websites expect to see a couple of more items in the top navigation. These items represent shortcuts the visitor can use to get to frequently visited sections of the site.
- Active shopping cart (if your site allows for more than one) with the number of items in it
- Link to the account page
Of course, you can go the extra mile and add few more elements there:
- The dollar amount for the cart: And while that might sound like small feature to add, there might some technical reasons that can limit you from providing that feature.
- Recently viewed items
- Order status: the customer does not have to navigate to the “my account” page first
- Store locator
- Customer service: Nice and comforting to see on the top navi for visitors
Let’s talk: Which one of these top navigation bars do you like or hate? Did you pay close attention to the design of your top navigation?
My name is Ayat Shukairy, and I’m a co-founder and CCO at Invesp. Here’s a little more about me: At the very beginning of my career, I worked on countless high-profile e-commerce projects, helping diverse organizations optimize website copy. I realized, that although the copy was great and was generating more foot traffic, many of the sites performed poorly because of usability and design issues.View All Posts By Ayat Shukairy
Join 25,000+ Marketing Professionals
If you enjoyed this post, please consider subscribing to the Invesp blog feed to have future articles delivered to your feed reader. or,receive weekly updates by email:
Connect with us
The Art and Science of Converting Prospects to Customers
By Khalid Saleh and Ayat Shukairy
- Augmented Reality in E-commerce – Statistics and Trends
- The illusion of Completeness: How to break this fatal UX design mistake
- How to Analyze A/B Test Results
- JTBD and using it on Conversion Projects
- How much does it cost to hire a CRO firm?
- Road Map to Effective Personalization: When, how and what to do!
- 6 Usability Pitfalls that Developers Should Avoid
- Crunching UX Data for Actionable Insights
- Which Comes First? Content or Layout?
- 6 uncomfortable thoughts on AB testing | #CRO