E-commerce navigation: finding your way round

Some easy-to-implement principles about how to organise the products on your website and what mechanics you can employ to help your visitor find them.

Getting visitors around an online shop is surely one of the biggest challenges of an e-commerce website. It is up there with customer acquisition (getting visitors there in the first instance) and conversion (getting them to buy). With overall bounce rates (the % of visitors who exit on the first page) at 30% those landing and follow-on pages in the “customer journey” need to be carefully planned. Between the 70% of visitors who arrive on a shopping site and, say, the 3% who actually make a purchase, that’s 67% of all visitors who are traipsing through 7-8 pages of a website then exiting, bored or frustrated.

If they can’t find what they’re looking for, your visitors will use the search box, which although not the theme of this article, can provide vital clues as to what your visitors are seeking and what they can’t find readily.


Let’s start off with some basic principles and look at the role of the “home page”. Typically this page will receive 40% of all site entrances. Why would a visitor arrive on this page? In most instances, a visitor will come to this page if they are aware of you and your brand already. Most traffic coming here will be typing in your URL or entering your brand name into Google. Think about it: if they arrived from a search engine having typed in a product name or category (mohair cushion, girl’s hoodie), they will end up on a category or landing page. Or be sent there by an email or an ad.

The navigation challenge is to get these visitors into the relevant part of the site as quickly as possible We’ll ignore the debate about communicating brand values and overall proposition on this occasion and assume that your products are unique and beautiful, attractively priced and packaged, quick to deliver and backed by superb customer service.

What we mean by “relevant part” of the site is determined by the purpose of the visitor, which 95% of the time will be to carry out a shopping-related task: browse your product range (which they are probably familiar with already – hence the visit), discover what’s available (as they’d like to find out more), see what’s new, on offer or get some inspiration (as they like you and are looking for ideas) or finally, buy something specifically. Breaking down visitor intent in this way makes the task of designing a navigation framework a lot easier. Let’s look at these scenarios in turn.

The folk who are familiar with your product range already will probably survive the journey. They have already been through the experience of learning how to operate your website. They understand your product categories. The emphasis is to expose the visitor to as many of your categories as possible and enable them to go to the desired category as quickly as possible. An obvious pitfall here is the CEO’s desire to have branded products: collections, ranges and styles which have names that only the initiated (or the marketing department) can understand. How will a new website visitor will find a cashmere wrap if it’s buried in this season’s exciting Milano collection?

Top navigation

For genuine enquirers who seek to understand the entirety of your range with minimal fuss, you need to provide a vehicle that shows off the whole lot without too many clicks. Nowadays, the best way of doing this is via “multi-layered dropdowns” in your top navigation, as pioneered by the likes of John Lewis.

John Lewis Navigation Menus

John Lewis’ “multi-layered” dropdowns – everyone’s favourite

The essence of this view is to present your top level categories as the top navigation banner. Moving to one of these will reveal its sub-categories and the sub-categories within that (e.g. mens/tops/polo shirts) and enable the visitor to go straight to that category. This works fine provided you have 2-6 sub-categories and 3-10 sub-sub-categories within that (so to speak and apologies for the multiple “subs”). You’ll appreciate that the dropdown menu will look ungainly or even unprofessional if the proportions are skewed (“how come they have one hat and 20 dresses?”). If you can’t quite populate one of these sensibly and elegantly, use simple one-column dropdowns. E-consultancy conducted Usability Tests in February 2011 and John Lewis’ “flyout menus” were the second most appreciated website feature.
In all cases, to state the obvious, make sure the visitor is directed to the specific place they choose.

Category hierarchy

Another consideration is the management of this category hierarchy. In a word, it must be maintainable by whatever content management system or e-commerce platform you are using. For example in Magento, which Screen Pages has now used since early 2009, the category tree can be edited in entirety in the admin panel/CMS, including category creation, moving, copying, deleting etc. A particular point of pain can be the management of the top navigation categories themselves – especially once day-to-day merchandising begins. Based on a study of your trading categories and product taxonomy, you design your website 8 top categories all under your control. You add three – where do they go? Or you remove 3 – where do the spaces come in? What happens if a new category name is dramatically longer or shorter than the original set? Panic sets in as the website degrades from “professional” to “amateur”. My best advice is to left-align them and fit the menu highlight to the width of the category name. And a allow content-managed area where you can add in some static links if you reduce the number of categories. In Magento this is easy as categories in the navigation need not have products in them.

Dealing with the folk who want some inspiration, ideas or good old-fashioned deal s should be managed using conventional merchandising concepts. The “sale” and “new “ categories always get a lot of clicks and account for a big share of the clicks from your home page. Make these categories in the same way as you would create “garden” or “kitchen” and give them prominence. Other categorisation techniques that work well are “customer favourites”, “best sellers”, “editor’s picks” and so on. What other people do or recommend can help a new visitor self-select: it acts as a psychological draw and defines you in the visitor’s mind. Again, these can be built into the conventional navigation framework quite easily and they can have their own sub-categorisation.

Apart from the top navigation, e-commerce websites also offer left-hand navigation and large content areas usually populated by product photographs or merchandising images. Left-hand navigation is usually preferred on home pages where the number of top-level categories exceeds what can elegantly be displayed across the top (6-10 categories, as above). Nowadays, left-hand navigation tends to come into play once the visitor is in the site on category pages. Right-hand navigation is a bit of a no-no in any event.

Net A Porter navigation

Left-hand navigation works well with larger numbers of categories

Directional navigation is usually driven by content areas which promote special offers and featured products (with a good reason and incentive to get the click). Most e-commerce websites have reasonable facilities for managing these in-house (provided such areas are included in the website’s layout). More sophisticated lists of featured products can be showcased in galleries or carousels (scrolling lists), either for purchase directly or for click-through. Typically these are populated through custom categories.

Category pages

Off the home page, most sites have product categories. Check your analytics and you may find that category pages can account for more than 50% of all pages viewed on your site – but sadly, receive least management attention. Generally, these show products or sub-categories. We’d say the prime purpose of these pages is help the visitor find the right product, nothwithstanding any attempts to convey brand or proposition messaging. Having said that, category pages serve as landing pages, routing pages (a stepping stone to other pages) or depending on the product range, they can be purchase pages (with add-to-basket). Because much of the content on these pages is reserved for images of categories or products, you typically only have the left-hand navigation to work with. Conventionally, you are showing the sub-categories of the category selected from the main navigation. Ideally, this will be a list of 8-15 in alphabetic order, but I am sure many will have their own views on this. Ultimately, you should test the configurations. In common with some e-commerce platforms, Magento offers the ability to “filter” the products on display (for example by colour, price, style etc). This helps the visitor narrow down the search for the “right” product quite quickly. The trick with filters is to make them useful, rather than tedious, over-specified lists of technical attributes.

Christopher Ward filters

“Filters” help customers narrow down their selection

Some product categories can have, in theory, many pages of products, which poses a difficult question- to paginate or not. Fashionistas may encourage the concept of “just browsing” up and down a large page of summer frocks. IT will baulk at the idea of a huge page and usability might rebel at the scrolling. We have seen from analytics data on some sites that many visitors will quite happily page through the list and then exit. In truth, the vital component is to get the click by a compelling image and a compelling “story” (such as a sales message) – a bald product name (from the database) and the price quite often will not cut the mustard.

More savvy marketers will know how to manage category content areas and copy to build in additional guided navigation, for example by links. In many cases, these category pages will double up as landing pages for marketing activity (whether its email, paid search or SEO), so remember that they need to provide easy access to the overall navigation tools described above (which reinforces the value of the multi-layered approach described above). Don’t forget it’s possible to provide directional banners etc on these pages as well.

Product pages

So we make it through to the product page. At this stage, your shoppers are ideally going to hit “add to basket”, in which case the only navigational dilemma is getting them to the basket and thence to checkout (easier said than done, of course).
Many retailers forego the left-hand navigation on the product page in exchange for larger and more images, reviews, longer copy, social media sharing etc. After all, one of the key conversion factors is actually persuading your visitors to buy your product.
However, there are some important navigational assists that the product page can provide. What if the visitor likes the style, but would like to see something similar? Or the size 10 is out of stock? Cross-sells and “you may also likes” should be populated (either manually or automatically using merchandising tools). As decision-making on these pages is almost binary (witness a typical bounce rate of 50% on such pages), it’s important to keep the visitor on board.

Using “cross-sells” as navigational prompts

Once in the basket and checkout, navigation options are generally hidden away, ideally replaced by a clear indication of where your customer is in the checkout process. Most retailers like their customers to concentrate on completing the order and avoid distractions.


Finally, it’s important to measure what you do. It’s easy on Google Analytics to see where your visitors arrive and where they go from specific pages or generic types of page. Your visitors are leaving trails on your website and it’s your job to understand the behaviours and where the friction or pain lies. It’s often surprising the patterns that these visitor trails lie. Then take action.

Using Analytics to understand navigation

Using Google Analytics to follow navigation paths

You can spend a considerable sum on automated merchandising tools where all sorts of sophisticated algorithmic equations can drive what products get presented and how: product taxonomy, sales performance, viewing propensity, demographic/visitor profiling. In fact, there’s a whole industry around such software products. But you can’t escape the fact that you still need product categories and understand that people click on areas within websites to find their way around.

Obviously, whatever you do, you need to instil a sense of trust and confidence in your visitor, as well as gently persuade visitors that you uniquely have the answer to their problem.

By Roger Willcocks

Sign Up To Our Newsletter

Join our mailing list to receive the latest e-commerce & Magento news from Screen Pages.

For information on how we process the data that you give us, please see our privacy policy.

You have Successfully Subscribed!

Pin It on Pinterest

Share This