One of the most promising initiatives that you can take to improve revenue generation from your e-Commerce site is to optimize site navigation. In this four-part blog series, I’d like to walk you through the building blocks of an optimization strategy that can lead to a consistent, positive revenue outcome from your existing e-Commerce site.

Key Takeaways:

  • Site navigation has a significant impact on the visitor experience
  • Optimal navigation is brand specific
  • You need a strategy along with the proper technology

In the first part of this series (Part I: Understanding Analytics), the objective was to help you arm yourself with the data you need to more effectively design an optimization campaign for your navigation bar or menu. Navigation is all about “findability” and “usability”: no matter how simple or complicated your e-Commerce website may be, your on-site navigation must help all types of visitors find what they’re looking for.

Insights vs. Best Practices

We are purposely using the term “insights” instead of the more commonly used term, “best practices“, to make sure that you understand the difference between real-time optimization methodology and website testing.

In the case of website testing, companies will use best practices to design an experiment and evaluate which best practices work well for them, and then simply implement the winner. This approach is unlikely to produce sustainable results since web visitor behavior is constantly changing. (For more about why online testing doesn’t work, check out our new white paper: Beyond Testing and Personalization in e-Commerce)

Real-time optimization is about finding what works best for your visitors right now, and then learning how to adapt to changes in visitor preferences as time goes on. In this way, “best practices” are a good way to start your website optimization campaign, but they are far from a final destination.

Needs Assessment

One ongoing challenge with on-site navigation is getting visitors to the most relevant part of your e-Commerce site while minimizing the amount of friction (e.g., clicks) necessary. What we mean by the “relevant part” of the site is determined by the intent (or needs) of the visitor.

Examples of typical visitor activity:

  • Browsing your product range, which they might already be familiar with
  • Looking to buy something specific
  • Looking to get some inspiration and searching for specific ideas
  • Looking to see what’s new from your brand or others
  • Discovering what’s available, as they’d like to find out more

A navigation menu must be able to handle all of these needs with the least friction possible. Here are a few ideas to help you get started with optimizing yours.

Primary / Main Navigation

The primary navigation provides links to the most important areas of your e-Commerce site. This is the backbone of your navigation strategy, as this navigation is typically present on every page.

In Part I, we showed you how to use web analytics and reports to arm yourself with navigation performance data. Let’s now apply our understanding of performance data to introduce primary navigation optimization ideas.

Main Navigation – Navigation ‘Width’

In most cases, e-Commerce sites are loaded with product categories. One common question is, “how many of these categories should be featured in the main navigation menu?”

Nav Menu

If you analyze the revenue importance (or entry page reports) of your current site, you will typically find that a few product categories standout from the rest; however, other lesser-performing categories might still account for significant amount of revenue.

This is known as the famous long tail situation represented by the picture below:

Long Tail Revenue v. Categories Scenario

Of course, you’ve probably already placed the top-performing categories in your main navigation. But which one of these “long tail” categories should also be in the main navigation menu? Define what content is important for your users based on analytics data and sales reports. High priority content should be above the fold when possible and menus should remain consistent throughout the site. Simplicity is effective. It is important to group products into categories in a way that makes sense to your visitors. Navigation menus with fewer options often produce more sales than a navigation structure that overwhelms your visitors.

This answer is specific to each company and the only way to find out what works best for your e-Commerce site is to experiment with different options:

  • Play with the number of top navigation options: By experimenting with the number of main navigation links, you will create a new site dynamic that might produce surprising results. For example, we often find that fewer categories in the main navigation menu have better results than more categories. A typical number of categories on the main menu ranges from 6 to 10.
  • Change the order of your categories: The location in the main menu can also impact a visitor’s reaction. Several studies show that visitors scan websites in patterns, so prioritize the products that are the bulk of your sales to where your visitors are looking first. Subconsciously, the information that is on the left will be consumed before something that is on the far right of the navigation menu. Also, something on the top of the list is usually read before something at the bottom of the list.
  • Introduce user-friendly categories: During eCommerce site content classification, the focus usually is on the products and not consumers. Visitors might view your offering from their point of view and your grouping may be a less efficient than you first imagined. We suggest that you include user-focused criteria in your optimization campaign. This might include things like: top sellers, most liked, most recommended, or product combinations. For example, this top level category title could confuse visitors as to what its meaning is:

Confusing Top Level Category Example

 

Sub-Navigation – Navigation ‘Depth’

Deep Sub Navigation Menu Example

Similar to the main navigation, you have to analyze the revenue impact of different

subcategories. Again, you should first experiment with the number of options in the sub-navigation, such as order and kinds of product groups.

An evaluation of what to include in the list can have lot of subtleties. In the example below, one client has determined that disabling the links behind each one of the main categories (circled in red) was producing a revenue lift. So instead of visiting the main category first, followed by selecting the next option, a visitor is forced to go through an extra step in the funnel. Instead, disabling the link forces the selection of a sub-directory.

Nav Menu With Disabled Links

Layout

The decision of whether to make the navigation horizontal or vertical tends to be determined by both the nature and focus of the website. Often it’s a mix of both. However, with primary navigation, we often see certain tendencies. Small websites often lean towards horizontal navigation at the top of the site, while large corporate websites often use both horizontal and vertical navigation (usually with drop-down menus).

Amazon.com Department Sub Navigation menu

  • Try an alternative navigation option: If your site is using a horizontal menu try a vertical option, and vice versa.
  • Vertical menu trend: Leading e-Commerce companies like Amazon and eBay are setting the vertical navigation trend.
  • Explore a hybrid layout: Separate the main navigation in two sections, and present one of the sections horizontally and the other vertically.

Here are few good reasons for following suit:

  • Better use of vertical space: A horizontal menu occupies a significant portion of vertical real estate which might push valuable content below the fold. Scrolling down the page can reduce the performance of an e-Commerce site.
  • Clear separation of categories: All categories are visually separated with decent line height between each of them, making them more readable.
  • More characters per line: In a tabbed menu system, a lengthy category name will split in two lines; whereas in this case, all categories are in a single line.
  • Cleaner look: Vertical navigation is generally more eye pleasing. It makes it easier for the user to focus and find the desired category.

Presentation Options

The final frontier of your navigation strategy is how navigation options are presented on the page. The following are few dimensions that you should explore:

  • Color pallete and fonts: Font size helps with readability and proper use of color helps with ease of reading for general visitors. It is well-known that a large percentage of people have a very hard time reading white font on a black background.
  • Mouse clicks and mouseovers: Companies are now routinely implementing mouseover drop down menus. We recommend that you evaluate use of mouse clicks that activate drop down, and perhaps even removing the drop-down entirely. Mouseover functionality triggers surprising menu pop-ups which tend to frustrate visitors. Also, mouseover menus don’t function unless you have a mouse, leaving  tablet and mobile users with a poor experience. The chart below shows the positive impact to this customer’s revenue by changing their navigation from a hover to pop-down to a click to pop-down:

e-Optimizer® RPV results broken down by variable

  • Drop-downs and mega drop-downs: Drop-down menus can fit a lot of items in one space, thus saving valuable real estate and keeping the navigation organized. The hierarchy can be refined with sub-levels and even sub-levels of sub-levels, helping users filter the information to get to the page or section they want.

Even more popular are mega drop-downs, which can accommodate an even wider variety of content and layouts, but more importantly provide larger click areas for users.

Pet medication Website navigation menu

We recommend experimentation with fonts, images, drop down background and other visual aspects of the menu.

Note: Extensive QA testing of mega drop downs is recommended, since it is well documented that the functionality of mega-drop downs on certain web browsers tend to cause issues (particularly with Flash).

To be continued …

In Part III of the “Optimizing e-Commerce Site Navigation” series, we’ll cover optimization ideas for secondary navigation options.