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?
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:
The Art and Science of Converting Prospects to Customers
By Khalid Saleh and Ayat Shukairy
- The Rise of Marketing Automation – Statistics and Trends [Infographic]
- The Ultimate Guide to Understanding SaaS Metrics
- Creating A Conversion Roadmap: How to Prioritize Conversion Problems on Your Website
- Chatbots In Customer Service – Statistics and Trends [Infographic]
- 9 Tips to Conducting Accurate Qualitative Research
- Server-Side Vs. Client-Side A/B Testing
- The Ultimate Guide to Persuasive Online Copywriting
- E-commerce Product Videos – How Videos on Product pages Can Increase Conversion Rate of E-commerce Website
- E-commerce Abandonment Rates
- Bayesian vs Frequentist A/B Testing – What’s the Difference?