Ecommerce Guide to Site Navigation

The most important element of your ecommerce website is not the search box. It’s certainly not the rotating home page banner. It’s not even the checkout. It’s your site navigation.

No matter which page your customer lands on, it’s your site navigation that welcomes your visitor, providing a high level overview of what you have to offer. Whether the customer arrives with specific intent or just wants to browse, your site navigation makes or breaks whether the customer sticks around. Even visitors that like to search rely on your menu to access their cart, customer service links and more.

If your site navigation is difficult to use, unintuitive, too clumsy or too cluttered, you risk site abandonment. But it’s not just about look and feel. Your Information Architecture (the way you organize and label your site content) is critical to getting your experience right. And the right organization and presentation depends on what’s in your product catalog. Best practice for BestBuy is very different than a niche brand selling direct to consumer.

Rather than broad-brush guidelines, in this chapter we’ll explore how to organize and design your navigation to support your customer’s journey, with examples from my survey of the Internet Retailer 500.

Catalog and Merchandising Architecture – the blueprint for effective navigation design

The term “Information Architecture” applies to all websites, but is most appropriate for content sites. The bulk of ecommerce pages are catalog product pages, so I prefer to use the term “Catalog and Merchandising Architecture,” or CAMA. CAMA refers to both product categorization and thematic merchandising groupings such as Sale, New Arrivals, Trending, Editor’s Picks, or Shop by Brand.

CAMA also emphasizes the importance of merchandising strategy to site navigation. Navigation shouldn’t be treated as merely a sitemap, but a guided-selling tool that maximizes your sales. A deep understanding of what products customers seek most and how they make purchase decisions is the bedrock of your strategy. Combine this with solid UX principles and you’ll have navigation that will convert instead of confuse.

CAMA depends on Catalog

Ecommerce sites fall into 3 general buckets (the occasional exception will typically map to one of the buckets based on catalog size or complexity):

Everything store (Amazon, Hayneedle, eBay, Target) – May be marketplaces or large department stores, with many departments across a broad range of categories.

Retailer (Pacific Sunwear, Uncommon Goods, The Vitamin Shoppe, Barnes and Noble) – A channel partner to different brands. May have diverse departments and large number of SKUs (e.g. pharmacy, grocery, or flash sale site like BeyondTheRack), or be more streamlined (sporting goods, shoe stores). Typically a larger catalog assortment than a brand selling direct.

Brand selling direct to consumer (Burton, Gaiam, Kate Spade) – Brand or manufacturer with a smaller catalog with fewer categories and sub-categories, and fewer items within each category than retailers and everything stores. Keep in mind, very large brands like Adidas, Victoria’s Secret or Mountain Equipment Co-Op’s catalog sizes and breadth are more like a “retailer’s.”

Organizing Complexity

Sites with large and complex catalogs understandably face the biggest CAMA challenges. For example, Hayneedle’s horizontal menu doesn’t fit all its categories, so it uses a “More” link.

hayneedle-challenge

Hiding options behind “More” links is not the best solution to this challenge. In Hayneedle’s case, it could consider re-working its categories, for example, moving “Lighting” under “Decor” or “Furniture” (in fact, both Decor and Furniture contain Lighting as a nested sub-category).

Hayneedle could also break out thematic links like Gifts and Holiday Shop into their own secondary menu. Sur la Table, for example, keeps its main menu for categories and leverages a secondary menu for links like Gift Registry, Recipes, Sale and Clearance and Christmas items.

surlatable

Another approach for very large catalogs is to ditch the horizontal design for a multi-level drop-down mega-menu. Meijer’s 3-level menu fits all its items in an organized way, with room for important, non-catalog links in its main navigation.

meijer-deeper-levels

Amazon uses a similar approach, keeping its parent categories within a reasonable number by grouping them into even higher-level associations like Beauty, Health and Grocery — a tactic that’s not possible in a horizontal menu.

amazon-flyout

The mega-menu trend and paradox

While mega-menus like Meijer’s and Amazon’s are fitting for large and complex sites, they’re as trendy and ubiquitous on smaller sites as rotating home page banners (covered in chapter 3).

Like rotating home page banners, designers love them because they allow you to stuff a lot more content in them than regular drop-downs and lists. In fact, you can shove so much in mega-menus they’re akin to mini home pages, exposing multiple layers of site taxonomy along with images, promotional badges and even product results. Some are so large, they require scrolling on a desktop!

petco-mega-menu

While exposing sub-categories or additional ways to shop may be appreciated by users, supporting a fewer-click journey to the product list they want, like rotating banners, they can also really suck for users if they violate conventional UX guidelines.

Mega-menus that “make them think”

Though Steve Krug’s “Don’t Make Them Think” was published in 2000, the adage still holds today. Complicating navigation menus by including everything and the kitchen sink because you can creates a paradox of choice, which increases the odds your customer will make no decision (or in this case, take no click-action).

For example, notice Macy’s stuffs luggage, home furniture, coffee, window treatments (and the kitchen sink) under the Bed & Bath heading, when they already (and appropriately) exist under the Home link.

macys-mega-menu

If an in-store customer asked where to find duvet covers, would you take her past the kitchen section first to show her espresso machines? Of course not! Neither should a navigation menu.

For Macy’s, a redesigned menu removing the clutter would certainly reduce cognitive load.

macys-menu-redesign

The above conceptual clean-up removes irrelevant links and Shop By Brand (which can be supported effectively on the category page) and visually separates the thematic grouping “Sleep Solutions” from categories with a different color. #testidea

Simple sites become complex

The irony of mega-menus is they encourage smaller ecommerce sites that don’t have the problem of complex architecture to design equally complex (and cluttered) menus as their large counterparts.

Consider Tarte vs Urban Decay. Both are cosmetic brands with a very similar product offering and catalog structure, and nearly identical target market with similar buyer intent and behavior.

A shopper looking for Tarte mascara must digest an entire map of makeup options to locate their link, while Urban Decay visitors need only to hover over the Eyes category.

tarte-menu

urban-decay-menu

That said (and illustrated), Tarte’s menu does promote thematic merchandising that visitors may otherwise never see if not included in the flyout menu (such as vegan friendly or 30 under $30). But there are better ways to present these options without as much clutter. For example, product categories can be collapsed into a top-level menu, with sale and shop-by themes (which span these categories) visually separate.

tarte-2

Making the merchandising decision

Whether to go high-level or deep in a mega-menu should take into account what you’re selling and how much of it you have to offer. A benefit of simpler top-level navigation for smaller catalogs and single-brand sites is product discovery. Rather than pushing the customer to a more narrow sub-category with a narrower set of product results, a higher level category presents a broader range of products he or she may enjoy, click on and buy.

On the flip-side, merchandisers should consider buying context when deciding how to best guide customers through navigation.

For example, a Tarte visitor may have seen a YouTube beauty guru rave about Park Avenue Princess bronzer. Scanning the menu for the trigger word “bronzer” helps this customer spear-fish the product far easier than forcing her to figure out that bronzer lives behind the Cheeks category.

In this context, Tarte may want to maintain sub-category presentation, but aid customers in processing a menu’s contents with some visual separation. This mockup separates thematic groups from product content with a vertical spacer.

tarte-3

The left hand is for “I think I know what I’m looking for” visitors, the right is for “I’m interested in browsing what you’ve got.” Consider it the “you may also like” section of navigation menu options.

If your mega-menu includes different ways to shop, such as promotions, educational content or shop by brand, to use visual separation. GNC and Ritani are good examples.

gnc-flyout-menu

ritani-menu

ASOS adds color and bold styling to highlight links it wants to draw special attention to.

asos-menu

When leveraging the extra space to merchandise in creative ways, always validate your design decisions with analytics overlays (that show which links are actually being clicked) or heat map tools. If your supplementary menu links aren’t being used, they’re not worth showing. While it’s certainly useful to A/B test menus, it’s always best to start with an understanding of what’s working and what isn’t on your existing menu to inform your redesign hypotheses.

Another way simple sites complicate themselves is by unnecessarily duplicating their navigation options. For example, Hallmark offers a 2-tier menu with occasions presented at the top, and an Occasions link in the bottom menu.

hallmark-1

While the top menu highlights perhaps the more popular categories, making their “trigger words” easy to spot at a glance, the Occasions flyout menu resembles a sitemap page! Notice that the sub-links to gifts, cards and ornaments could all be accessed from the Gifts, Cards and Ornaments links in the purple menu.

hallmark-2

While some search engine optimizers may recommend such keyword-stuffed menu structure, keep in mind the negative impact on scannability and “don’t make me think-iness,” and ultimately its conversion impact.

Another example of unnecessary duplication is Fossil, which uses an ambiguous “By Type” grouping for each gender. Leather Watches are duplicated in both menus, and it’s not clear on what classifies “type.” What makes a mechanical watch a “type” and not a sport watch?

fossil-menu

Fossil may consider simplifying the menu by removing the “By Type” menus or classifying categories by collection, style and material. Special features like “Make It Your Own” may warrant their own, more uniquely styled links, with visual separation and special color.

Don’t make them blink

Some mega-menu designers err in the assumption that visitors will methodically fixate on every link presented in a flyout, and don’t factor what we know about eye-tracking behavior into their designs.

This is most apparent on menus that truncate sub-category lists with “View More” or “See All” links.

Bike Bandit’s choice to expose sub-categories in its flyout menu forces it to use +More links and a Shop All link.

bike-bandit-view-more

Can you spot the Shop All link? It’s styled exactly the same way as menu items. For a catalog of this size, it may be more effective to list all Motorcycle and ATV sub-categories at this level, and support winnowing to sub-subcategories like brand links on the category landing pages, or visually separate the most popular brands in a “more ways to shop” section, like ASOS above.

PureFormulas’ menu buries useful ways to explore it’s massive catalog, like by health need or ingredient at the bottom of the menu (which visually competes with the home page in the background). These links would be better promoted as top-level links, instead of the vague “Discover” and Customer Service which can be moved to a conventional, auxiliary menu above the search box.

pureformulas-see-all

This design also only exposes 9 of its (literally) hundreds of categories, forcing the customer to select See All Categories — if he or she even sees it!

Another design mistake to avoid is placing calls to action in “dark bars” (of any color). Again, our brain likes to focus our attention on white space and any text in a bar is easily missed. Shoppers may erroneously conclude what’s in the white space is all B&N carries.

shop-all-hidden

BH Photo’s “See 15 more in Computers and Solutions” call to action is highly susceptible to banner blindness. Our eyes tend to gravitate to photos and white space and ignore peripherals.

bh-photo-menu

When designing mega-menus, avoid View All and More links. If Amazon can design a menu that doesn’t need them, any ecommerce site can.

The Navandising Trend (and Tips)

“Navandising” refers to merchandising in the navigation menu, which may include images, promotions, featured products or a combination of these — and it’s definitely an ecommerce trend in 2016.

For example, Karmaloop highlights 3 of its top brands visually, a digital endcap, if you will.

karmaloop-view-more

While merchandisers love the opportunity to be more creative, these elements can create distractions that can work against the goal of the navigation menu – to guide the customer to the products he or she wants most. Thus they should be used strategically, and validated through testing (with and without these elements).

Merchandisers and designers should consider how images can detract from navigation links. For example, Modcloth uses photos to highlight featured categories (absent from the left hand menu), which attract the eye, but may appear as they are the only category links if the customer does not notice the left-hand items.

modcloth-combo

CVS’ flyout menu combines featured categories with a non-alphabetized link list and a featured promotion.

cvs-mega-menu

The category thumbnail images are problematic for a few reasons:

  • The images compete visually with the other links in the menu, and reduce the amount of space for a clean, scannable list (requiring a Shop All link)
  • User testing by Baymard Institute repeatedly found that ecommerce visitors misunderstand thumbnails as actual product links, rather than representative of the entire category, and are not recommended
  • If the category is broad, selecting a single image (like cookies under a Food category) may lead the customer to assume the category is narrower than it is. For example, if the customer is looking for chicken broth, the cookie image may suggest that the category is more for snack foods than staples

Furthermore, the promotional image for prescription eyewear is not relevant to the category selected of Household and Grocery. It serves only as a competing call to action that further reduces space for what site navigation should primarily contain – a list of categories.

Crocs is an example where navandising is used in an appropriate context. Under the Sale tab, Crocs presents relevant ways to shop (high level categories and by price facet), with a sale-oriented value proposition that doesn’t compromise its important links.

crocs-value-prop

ThinkGeek’s featured image doesn’t visually compete with its menu links, but should link directly to the product shown (it doesn’t) for those interested in the item.

navandise-link

Some sites, like Hot Topic, display featured items within a category. This tactic should be used very carefully as it certainly dwarfs and distracts from left-hand menu links, and may give the customer the impression that this is the entire available selection. It also runs the risk of losing customer interest in the site altogether if the previewed items are not appealing to the customer.

hottopic-flyout

Developing navigation requirements

Regardless of the diversity and complexity of the product catalog, all ecommerce sites need to nail down their navigation requirements before designing their menus. These requirements are ideally developed by the merchandising team or director of ecommerce before being passed on to UX and design, and informed by and understanding of the customer.

If you haven’t taken this approach from the beginning, it’s not too late to re-assess your menu organization and design. This process will likely uncover a number of testing ideas to optimize your navigation experience.

Assuming your ecommerce site is live and already has been organized into categories and sub-categories, consider the following:

  • What are your parent categories? Are these the most intuitive to your customers? Would some parent categories be better as sub-categories under other parents?
  • Are your parent categories all product-specific or are some non-product or thematic (e.g. Sale, New Arrivals, Fall Collection, Shop By Brand)?
  • What are your sub-categories, and do they ever nest under multiple parent categories? Should they nest under multiple parent categories? Should some be promoted to parent categories based on sales data, site search logs or user analytics?
  • How many levels of navigation do you support (e.g. sub-subcategories)? How important is it that they’re visible from global navigation menus (do they contain a large number of SKUs or does it make more sense to direct the customer to a category page and allow them to filter)?
  • Is there a strong case for “navandising” in your menus (showing featured products, promotions or other calls to action in your flyout menus at the parent or sub-category levels)? Does this case justify the potential distractions they may create?
  • If you are using “navandising,” can you measure and validate the value this adds to your revenue per customer? Does it deliver significant results against not using it?
  • In what order should you present your categories to aid discovery and usability? (Most popular categories first? Alphabetical? Other grouping order?)

Site navigation is arguably the most important element of your ecommerce experience. Getting it right requires harmony between effective catalog architecture, merchandising strategies and UX design. While today’s mega menus afford more space to pack links and graphics, they must also be easy to use. It’s easy to focus on elements like checkout, home page banners and email and forget navigation. Make navigation a priority in 2016!

Ecommerce Illustrated is a project of Edgacent, an ecommerce advisory group.

You may also like...

4 Responses

  1. Thanks for these great examples Linda. I definitely need to work on some better navigation for http://hammocktown.com/. When I test some variations I’ll keep you in the loop on the results!

  2. Fadi Shuman says:

    Hats off to you for this initiative. I shall be following it through the year.

  3. Mike Edmonds says:

    Great post as always, Linda – thank you for sharing. What are your thoughts on navigation/structure paradigms for commerce-related mobile apps? For example, we see a lot of companies moving away from hamburger menus, leveraging 3D touch, popovers/interstitials for basic interactions, etc. Are you seeing anything notable in your “travels”?

    • Linda Bustos says:

      Hi Mike! Mobile ecommerce apps are kind of a wild-wild-west from what I’ve encountered. In addition to the hamburger menu, many make use of the bottom-aligned thumb-friendly menu like other types of apps. 1) there’s no convention/consistency among them in terms of which links are most frequently used at the “bottom” and 2) the combination of menus makes it even more difficult to figure out. You need to “learn” the way of each app. I think 3D touch will be an important gesture to accommodate if it goes mainstream – provided the other handset manufacturers start using it and folks start replacing their older Apple models. I’d love to see an example live but I’m still on my 6S! Can you share an example that’s using these new groovy ways to navigate?

Leave a Reply

Your email address will not be published. Required fields are marked *