Optimizing onsite-navigation

Table of Contents
..........................................................................................................................................Introduction 1
......................................................................................................Foreword by Zee Aganovic, PhD. 1
...............................................................................................................................Additional resources 1
....................................................................................................................................Getting Started 2
.........................................................................................................................Why onsite navigation? 2
.......................................................................................................................Understanding analytics 3
............................................................................................................................Primary Navigation 6
...................................................................................................................................Needs assessment 6
............................................................................................................Choosing the right categories 6
..................................................................................................Sub-navigation: Navigation ‘depth’ 8
...........................................................................................................................................................Layout 8
..............................................................................................................................Presentation options 9
......................................................................................................................Secondary Navigation 11
..................................................................................................................................................Taxonomy 12
........................................................................................................................................Sorting options 12
.............................................................................................................................Presentation options 12
.........................................................................................................................................................Layout 13
..................................................................................................................................Implementation 14
....................................................................................................................................Variable creation 14
...................................................................................................................Technology requirements 14
..............................................................................................Getting the most out of your results 16
...........................................................................................................................................Conclusion 18
© 2013 HiConversion, Inc.

Introduction
Foreword by Zee Aganovic, PhD.
Largely considered one of the most important elements of an e-Commerce webpage,
your onsite navigation represents a promising new frontier for strategic revenue-driven
website optimization. However, due to the wide variety of diﬀerent layout, functionality,
and style options available, there are very few set guidelines or deﬁnitive best practices
to follow.
We’ve created this guide to help you explore the possibilities surrounding optimizing
your onsite navigation, with a healthy preference for those activities that lend
themselves to revenue-positive outcomes. Our goal is to provide you with pragmatic
insights to help you understand the implications of optimizing your site navigation on
both the user experience and overall site performance.
Additional resources
‣ This guide is based on a series of blog posts available on HiConversion’s eRPM
blog.
‣ Have questions or comments about this guide? Feel free to drop us a line:
info@hiconversion.com.
Optimizing Onsite Navigation Guide | 1

Getting Started
Why onsite navigation?
Today, navigation design is treated as an art in-and-of itself – driven by a designer’s
empirical (and occasionally quantitative) observations and intuitions. At it’s core,
navigation design is about forming a logical information architecture that facilitates
behavioral activities requiring explicit details in otherwise complex systems.
This complexity can make even the simplest change to your onsite navigation seem
daunting. However, the potential impact of this element on both your visitors’
experiences and your site’s overall performance is significant. To demonstrate just how
impactful your onsite navigation is, look no further than Amazon and eBay. Here, you’ll
find evidence of significant investments in both time and manpower on iterative
experiments with onsite navigation:
We can speculate with good confidence that the impetus on continued investment in
site navigation for both of these internet giants is a healthy return on investment after
each iterative improvement. To that end, we also find evidence within our own clientele
suggesting that optimization campaigns that focus on navigation options have the
potential to yield double-digit lifts to revenue within the first few weeks of the
experiment.
Whether you’re already driving millions of visitors per month to your site or you’re just
getting started, we encourage you to ‘join the club’ of elite merchants who respect the
tremendous impact that navigation options can have on your website’s bottom line.

Understanding analytics
Any good optimization strategy begins with an introspective look into what’s working
with your current website. First, analyze your current situation:
‣ Where are your visitors clicking?
‣ How does your sales funnel naturally function?
Once you have a grasp on the status quo, you can establish baseline goals for further
improvement. At that point, you can then arm yourself with analytics tools and metrics
that can help you measure and understand which new navigation element(s) are
contributing positively to your optimization campaign.
Smoke Tests
Now that you’ve begun to design your navigation optimization campaign, it’s important
to consider the types of metrics that are important to you.
‣ What are the implications of these results on your bottom line?
‣ More importantly, does it contribute to improved revenue per visitor (RPV)?
Some of the more common metrics are:
Bounce rate: A metric that counts visitors who arrive at one page on
your site and then immediately leave (or “bounce”). There are many
reasons as to why a visitor might bounce, but often times navigation is
the culprit, since poor navigation can prevent visitors from immediately
ﬁnding what they’re looking for.
Page views ratio: The ratio of unique visitors to page views. While it’s
great to have visitors engaged and viewing multiple pages, a big
discrepancy between total pages viewed and unique visits could expose
a navigation problem wherein visitors are unable to easily reach their
goals. We suggest that you investigate instances that exceed 7-8 pages
per visit.
Exit page: Evaluate your list of top exit pages to determine whether any
abnormalities exist. For example, if your home page receives both the
highest number of visits and exits, this may highlight an issue wherein
visitors are circling back to the home page in search of an easier route
to their desired destination.

e-Commerce Information Architecture
Your current navigation setup actually contains clues about the alignment between your
site’s content and your results. In your analysis, you should evaluate both revenue and
traffic aspects of your site.
Revenue importance: You should understand the revenue impact of each type of
page on your e-Commerce site. For example, the report below reveals the relative
importance of different product categories. This information can help you make
decisions about which categories should (or should not) be shown at the primary
navigation level.
In-page analytics: Virtually all major web analytics tools provide features that
illustrate the number of clicks registered for each of the navigation options. This
information helps you better understand visitor’s preferences, allowing you to
decide which navigation options to keep, move, or eliminate.
Flow analysis
Flow analysis (also path analysis or flow reporting) helps to determine which paths
visitors take over the course of their session, revealing a number of opportunities and
inspiring ideas ranging from product merchandising to website optimization.
Unfortunately, this technique is unpopular amongst web analysts for two reasons:
‣ Flow analysis can expose an overwhelmingly high number of paths to
conversion.
‣ Many analysts agree that web behavior is difficult – if not impossible – to
shape.
In general, we think that flow analysis and control are poorly addressed – all we need in
order to get more from this technique is better software. Regardless of how deeply you
wish to analyze your conversion paths, flow analysis can provide some important
insights.
Entry pages: Similar to in-page analytics, this report helps with understanding
the importance of different types of web pages. If a particular page category is
an entry page for a significant number of visitors, you should ensure that it is

represented in the top navigation. This will lend to an intuitive experience for
that group of visitors.
Visitor flows: This provides a multifaceted understanding of visitor behavior on
your e-commerce site.
The Google Analytics visitor flow report below shows a relatively small drop-off
rate between different steps in the visitor flow, indicating significant visitor
interest. However, it also appears that a number of visitors keep returning to the
home page in search of something they couldn’t find. This may be indicative of
an issue with the onsite navigation. Ideally, visitors should move deeper from
one level of the site to another, not backwards.

Primary Navigation
Now that you’ve armed yourself with the analytics tools and metrics you need to more
effectively design an optimization campaign for your onsite navigation, it’s time to shift
focus towards your primary navigation.
Needs assessment
Primary (or main) navigation options exist on virtually every page of your e-Commerce
site, with the occasional exception of cart or low-funnel pages. This element serves to
keep the most relevant part(s) of your site within easy reach. In order to balance the
amount of friction (number of clicks) required to reach those top-level pages, consider
these examples of typical visitor activity:
‣ Browsing your familiar product range.
‣ Discovering more about new or novel products.
‣ Searching for inspiration and collecting ideas.
‣ Looking to buy something specific – right now.
Ultimately, your navigation menu must be able to serve all of these functions with the
least amount of friction possible. Here’s a few ideas to help you get started optimizing
your primary navigation.
Choosing the right categories
In most cases, e-Commerce sites are loaded with product categories. One of the most
common questions is, “how many of these categories should be featured in the main
navigation menu?”
If you analyze the revenue importance (or entry page) reports from your current site,
you may find that a few product categories stand out from the rest. These categories
represent your highest-priority menu items; however, don’t discount the significant
impact some lower-performing categories may have on your site’s overall revenue. This
is known as the long-tail situation, illustrated on Page 7.

Naturally, you may have already placed the top-performing categories into your main
navigation – but which of these long-tail categories should also be included? To answer
this, first define which content is most important to your users based on the analytics
data and sales reports that you’ve collected. Then, try experimenting with one (or more)
of the following optimization ideas:
‣ Play with the number of top navigation options: Try adding one or two long-
tail categories to your main navigation. By experimenting with the number of
navigation links, you’ll create a new site dynamic that has the potential to
produce exciting results. For instance, we often find that fewer product
categories in the main navigation lends to higher revenue outcomes.
✓ TIP: The average number of categories on main menus ranges from 6 - 10.
‣ Mix up the rank and file: The location of categories within the main menu can
have a tremendous impact on visitors’ reactions. Several studies show that
visitors scan websites in patterns, so prioritize the products that make up the
bulk of your sales and delegate those categories to the areas that your visitors
will see first. In the western world, information displayed towards the left of the
page is digested first. Similarly, visitors also share a preference for information
displayed at the top of your website.
✓ TIP: For more information, check out HiConversion’s blog article on visual
phenomena and e-Commerce revenue growth.
‣ Introduce user-friendly categories: During e-Commerce site content
classification, the focus is typically on product types and not necessarily on
consumer preferences. However, your customers may view your products or
services differently than you or your brand. For that reason, we suggest that
you experiment with user-focused criteria in your optimization campaign. This
might include categories such as top sellers, most liked, most recommended,
and/or product combinations.
✓ TIP: Labels for primary navigation options should not be novel – your
visitors should be able to clearly distinguish categories from one-another
regardless of their level of experience with your brand.

Sub-navigation: Navigation ‘depth’
Sub-categories can also have a significant impact on revenue generation, and deserve
careful attention as part of your greater navigation optimization campaign. Sub-
categories can be optimized just like main navigation: first, experiment with the number
of sub-categories displayed. Then, change the order of presentation and types of
product groups.
Your optimization campaign is likely to reveal many subtleties. In the example that
follows, one client determined that disabling the hyperlinks behind each one of their
main categories (highlighted) produced a positive revenue lift. Again, we can speculate
that a potential reason for this lift could be that disabling main category links forces
visitors to go directly to the sub-categories that are most relevant to them, reducing
friction by circumventing the category page all-together.
Layout
The orientation of your onsite navigation – either horizontal or vertical – usually
depends on both the nature and focus of your website. Small, low-traffic websites tend
to lean towards horizontal top navigation bars; by contrast, high-volume retailers tend
to display hybrid navigation elements that include both horizontal and vertical
navigation options. If you’re considering optimizing your navigation layout, consider the
following ideas:
‣ Try an alternate navigation option: If your site is using a horizontal menu, try
incorporating a vertical menu instead (or vice-versa).
‣ Explore a hybrid layout: Separate the main navigation into two sections,
presenting one of the sections horizontally and the other vertically.
✓ TIP: Leading e-Commerce organizations like Amazon and eBay are paving
the way for vertical and hybrid navigation options. Companies choose
vertical and hybrid navigation because they make better use of vertical
space, allow more characters per line, and offer a clearer separation of

categories – making the navigation options within cleaner and easier to
locate.
Presentation options
Now that you’ve assessed your needs, optimized your categories, and considered
various changes to your master layout, it’s time to explore how each of your navigation
options are presented on the page. To help you get started, here’s a list of dimensions
to consider:
‣ Color palette and font attributes: Proper font size and color helps with
general ease of reading.
✓ TIP: In our experience, websites with white text against dark (non-white)
background perform less well than those with inverted colors.
‣ Mouse clicks and mouse-overs: Many companies routinely implement
mouseover drop-down menus. We recommend that you evaluate either using
“hard clicks” to activate drop down menu, or remove the drop-down element
entirely. Mouse-over functionality can trigger inadvertent pop-ups that only
serve to frustrate your visitors. Additionally, mouseover menus don’t function
unless you have a mouse, rendering the feature useless for mobile and tablet
visitors.
The graph below illustrates the positive impact of swapping a mouseover
menu for one activated by “hard clicks”.

‣ Drop-downs and mega drop-downs: Drop-down menus help to fit a lot of
items in one space, saving valuable screen real estate and keeping navigation
organized. The hierarchy can be refined with multiple sub-levels, helping users
filter the information displayed to get to the page or section that they’re
looking for.
Even more popular are mega drop-downs, which can accommodate an even
wider variety of content and layout options. More importantly, mega drop-
downs provide larger click areas for users. We recommend experimenting with
fonts, images, drop-down background colors, and other visual aspects of the
menu.
✓ TIP: Extensively QA test mega drop-down menus across platforms and
browsers, especially with menus that require Flash.

Secondary Navigation
Secondary, or page-specific navigation, is essential to helping your visitors reach their
final destination. Here are a few examples of secondary navigation options on real-world
e-Commerce sites:
As illustrated above,
secondary navigation on
category or sub-category page
templates can be quite
elaborate, containing many
possible style options. This
renders most one-size-fits-all
approaches ineffectual – if not
impractical - for your e-
Commerce site.
Optimization of secondary
navigation relies equally on
four tenets: taxonomy, sorting
options, presentation, and
layout. In the pages that
follow, we’ll briefly define each
and provide a few optimization
insights to help you get a head
start on your optimization
campaign.

Taxonomy
Taxonomy links are sub-navigation links that provide direct routes to other product
categories or sub-categories on your e-Commerce site. If you’re looking to optimize
these links, we recommend experimenting with the following to aspects:
‣ Change placement: In many cases,
taxonomy-type navigation options
are prominently displayed towards
the top of the list. Experimenting
with the location of this group of
links within the secondary
navigation menu can help focus the
visitor on other product groups.
‣ Change link order: Explore the
order of links within the taxonomy
list. Visitors tend to read in a
particular order, and links that are
displayed towards the top of the list
have a higher chance of being
clicked.
Sorting options
Secondary navigation menus often provide different product sorting options, allowing
your customers to find their desired product based on different attributes. For example,
a visitor might want to filter results within a category by price, color, size, and more.
Like taxonomy above, we recommend experimenting with both the placement and
order of your product sorting options.
‣ Change placement: You may find certain sorting options or filters that are
more important to your visitors. For example, shoppers visiting a discount
retailer’s website may wish to sort by price or volume; visitors to a luxury
brand’s page may be more interested in rating, size, or color.
‣ Change link order: Consider manipulating the order in which sorting options
are displayed within the same category.
Presentation options
Form or function? Design or hard numbers? Many brands still believe that their e-
Commerce sites must involve a compromise between either “good design” or
“optimized experiences”. In reality, it’s quite possible to have your cake (and eat it too),
but doing so involves a careful evaluation of how visual experiences affect overall
outcomes.
For a no-compromise secondary navigation, we recommend experimenting with the
following presentation options:

‣ Style: Try applying different styles, including font sizes, colors, and
backgrounds, to your secondary navigation menu. Even the most discreet
changes can have a significant impact – we’ve observed RPV lifts upwards of
24% simply by replacing a dashed horizontal rule with a solid line.
‣ Expand / collapse drop downs: Often times, secondary navigation options
contain multiple sub-layers. We recommend experimenting with the expansion
or collapse of one or more of these sub-layers. For example, you may wish to
collapse less-dominant sorting options in order to reduce the overall vertical
size of the sub-navigation menu.
Layout
Secondary navigation options are typically displayed on the left side of e-Commerce
sites in either a stacked or vertical fashion. However, horizontal placement of secondary
navigation menus, like the one shown below, is becoming a popular trend.

Implementation
Once you’ve considered the implications of an optimization campaign for your primary
and secondary navigation bars, you can start to explore the various implementation and
analysis options that are available.
Variable creation
There are a wide range of optimization tools available, and each oﬀers a variety of
diﬀerent implementation options. In most cases, variable creation requires custom
scripts, which after being executed by the client-side browser (or proxy server), change
the navigation options, layout, and/or basic functionality.
In the case of onsite navigation, the two most common implementation options are
client-side scripted variables and server-side variables.
‣ Client-side scripted variables: Client-side scripted variable execution enables
the manipulation of content without requiring intervention from your e-
Commerce IT or development team. In theory, you should be able to create
and execute all desired changes to your navigation menu purely on the client
side; however, due to the number of options available, complexity can escalate
rather quickly. This can lead to a complicated coding exercise. Further, the
manipulation of hundreds of navigation links via client-side scripting can
negatively impact load times.
‣ Server-side variables: Industry-leading e-Commerce platforms offer
template-based languages that allow you to create different navigation options
on the server side. Rather than spending days to custom script your navigation
options, your e-Commerce programmer can create these options within hours
and execute them on the server side. To make them available to the
optimization system, these variations will be injected in the server-side code
and delivered as part of your regular web page. During the optimization
process, the tool will hide one variation and make the other visible.
Technology requirements
Optimizing your onsite navigation can be a technically complex undertaking. In order to
succeed, you should start by implementing variables with the highest upside potential
and use technology capable of performing the heavy lifting. When selecting a
technology vendor for optimizing your onsite navigation, keep the following
requirements in mind:
‣ Multivariate: There are an exponentially large number of ways in which
shoppers can navigate through your e-Commerce site. The large number of
combinations that are created when you configure different main, sub, and
secondary navigation options would simply overwhelm those using traditional
A/B testing methods. In order to simplify this process, many companies are
running a series of tests focused on optimizing one aspect at a time.
For example, one wave of tests might focus on main navigation, followed by

sub-navigation options, and so on. Keep in mind that individual options may
produce a lift in isolation, but combining many “top-performers” onto one
version of your page may actually produce negative results. This common
phenomenon is due to the interaction between individual changes – something
not considered using typical testing methods.
✓ TIP: For more information about multivariate optimization, visit
www.hiconversion.com.
‣ Full funnel: Onsite navigation is one of the most pervasive elements on an e-
Commerce site, so it’s important to keep your focus on end-to-end results. As
you are designing your optimization experiment, you should be flexible enough
to maintain or remove navigation options from certain pages – such as
checkout pages - in order to create changes that co-vary with elements on
other pages. This is useful when you’d like to remove the navigation options
from low-funnel, sales-oriented pages, but also keep your brand consistent
throughout the experience. In addition, this action is only possible if your
optimization solution enables multi-page campaigns and multi-component
variables.
‣ Real time: One often misunderstood e-Commerce dynamic is the time-varying
nature of visitor behavior. We’ve observed time-varying behavior – that is, your
shoppers in-the-moment preferences and the revenue outcomes related to
those biases – in virtually every client across dozens of industries. In order to
ensure that the optimization(s) you perform on your site navigation result in
consistently positive outcomes, your technology must be able to adapt to any
changes in visitor behavior in real time.
✓ TIP: For more information about the time-varying nature of visitor
behavior, check out HiConversion’s blog article on what the S&P 500 and
e-Commerce Have in Common.

Getting the most out of your results
Traditional testing is based on the notion that statistically-significant results represent
accurate predictions of future outcomes. Following this logic, let’s examine a real
category navigation optimization example. In the figure below, Combination 184 is the
highest-performing optimization variable with 99.75% statistical confidence.
At a glance, it appears that implementing Combination 184 would all but guarantee an
RPV lift of about 18%. However, a deeper look reveals that had the client implemented
this ‘winning’ combination on live site, they would have potentially lost money rather
than witnessing an expected gain. Since shopping patterns can – and nearly often do –
change dramatically over time, statistical confidence cannot be relied on as a guarantor
of future outcomes.
We recommend that you focus on more than simply winning combinations or pages. If
possible, go a layer deeper by analyzing the individual navigation options included
within your campaign. For example, the report below indicates that the Cat Nav - D
variable was one positive navigation option.

Even if one particular variable or another demonstrated strong lift positive lift, it’s
important to examine whether that variable exhibited the same kind of performance
over time. To reiterate, shopping patterns can change dramatically from one time
interval to the next, so you should only permanently implement a variable if it shows
consistently positive outcomes. Variables that do not meet this criteria can still remain
in-the-mix for ongoing optimization, and variables that are cumulatively negative should
be replaced with alternatives or new ideas.
The ﬁgure below shows one navigation option (labeled Cat Nav - D) as it compares to
the baseline (control) version over time. Since this variable produces consistently
positive lifts to RPV, we would recommend that you implement it.

Conclusion
We hope that this guide has helped you understand the significant impact that onsite
navigation can have on how your site’s look, feel, and functionality. To that end, we’ve
aimed to address – at a basic level– the implications of building a navigation
optimization campaign designed to maximize your overall e-Commerce revenue
performance.
Optimization campaigns that focus on site navigation can quickly become complex
undertakings that (at times) appear overwhelming. However, we view site navigation
optimization as a continuous process of improvement that can be handled sufficiently in
small chunks (or ‘waves’). You may periodically find evergreen variables and navigation
options that perform consistently well over time – those deserve implementation. On
the other hand, you may find other elements whose performance is more cyclical, or
even negative most of the time.
Whatever results come from your individual optimization campaigns, we’re positive that
you’ll glean actionable insights related to how your customers react to various changes
to your online storefront. These reactions can be used in turn to design optimization
campaigns that maximize your potential for revenue growth and help you to build a
sustainable e-Commerce Revenue Performance Management (eRPM) strategy to grow
your online business.

Optimizing onsite-navigation

More Related Content

What's hot (20)

Similar to Optimizing onsite-navigation (20)

Recently uploaded (20)

Optimizing onsite-navigation