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

Both Dell and HP websites also decided to not use a top navigation bar. Both sites utilize the middle section of their main page to address specific visitor needs.

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?

Drop downs

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

Search box

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:

Sears displays

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

Tags: Conversion Optimization, Ecommerce, ecommerce design, site navigation, usability, website design
Posted in Conversion Optimization, Ecommerce