3

For e-commerces sites we often see side navigation, comprising of many other categories, in the hope the the visitor will see them, and go to these other categories and buy more items. In reality this is rarely the case. I was thinking about removing my side nav, and including an intelligent breadcrumb with drop down nav instead. Thus taking up much less space, and making room for a more interactive, higher converting landing page.

What evidence, experience, or data is available on the use of vertical navigation?

5
  • I don't really understand what you are referring to, do you have any images or low fidelity wireframes to illustrate what you mean by side navigation or intelligent breadcrumb? Dec 24, 2015 at 16:04
  • So no more side navigation for all the product categories. So I can use that real estate to sell them more on the page they landed on, and also not confuse them.
    – Source
    Dec 24, 2015 at 16:23
  • 6
    Do you have sources to support your claim that "in reality this is rarely the case"? May 2, 2016 at 18:50
  • I can't say it applied directly to the OP's case, but in my tests with broad-category e-comm, left hand category nav rarely approached the engagement seen in top nav or left hand filter controls. Jun 27, 2017 at 19:50
  • @plainclothes - engagement per se is not an indicator if some element is useful or not. If you put some buttons confusing users, they'd get a lot of engagement by having the users click them in expectation to see something happens, which does not.
    – drabsv
    Apr 19, 2021 at 15:02

3 Answers 3

3

tl;dr

Horizontal nav is good for overviews.
Vertical nav is good when you need persistent deep-dive controls.
Landing pages are an immersive experience worthy of experimentation.


E-comm has been around a while now. We have some solid, generalized patterns for shopping experiences.

  • Top / horizontal nav is a good pattern for exposing high-level categories. It's the first place shoppers will look to get a better understanding of your catalog.

  • Left / vertical nav can solve two problems: persistent visibility of deeper, local sub-category structure and product filtering controls.

  • Landing pages are (or can be) unique. These pages are geared toward in-bound traffic of a particular type, often the starting point of carefully architected SEO pathways. A landing page should be engaging for a certain audience and should always be tested heavily.

Case study

Amazon is big, tests constantly, and is familiar to the majority of on-line shoppers.
Their massive catalog uses an unfolding navigation structure worthy of study.

Top nav

At the highest level of the site, they've tested their way into progressively collapsing the top nav in favor of a big fat search box. This works very well for absurdly large catalogs.

Amazon header with search and departments

Other sites, such as Walmart, followed their lead with what is virtually a direct copy:

Walmart's Amazon rip-off

These two companies have something few of us ever will: boundless customer volume and financial resources. They are both aggressive with their testing and experimentation.

None of this voyeurism is a substitute for testing in your own context, but it provides a valuable reference point when dealing with large product catalogs: it's all about the search box.

Top with a side

So what might that solution look like if you had a smaller selection. We can still look to our good friend Amazon for a common pattern (compare elsewhere and you'll see similar structures).

If I drill into a sub-department, you'll see the taxonomy begin to expose itself.

Amazon sub-dept with expanded top nav and detailed left nav

Now we can see a horizontal overview with a vertical deep dive. It's a lot to take in, but there's more to the vertical nav to help with that problem:

Amazon filters

Second only to the search box, filters are the e-comm power tool of choice. Filtering mechanisms are a key part of the navigation experience and fit nicely into the vertical nav space.

You can see in some cases as you drill down further, the nav component of the vertical space compresses and the filters become the dominant element.

Sub-sub-category filtering

Landing pages

Here again, Amazon has spent a long time working on this problem.

Amazon category landing page

Parent categories, like this one, are usually a good candidate for a lander, though it doesn't have to be a taxonomy-based decision. It's more about shopper entry points (as the name suggests).

The goal is to engage someone at the first point of contact and avoid the dreaded bounce. How you do that will depend on your shoppers, product, competition, and goals.

You can see that Amazon has chosen to create some duplication. Part of that may be a platform constraint (every sub-category gets an expanded horizontal nav, but vertical works better here). The bigger take-away here is the immersive "feature" imagery. You'll find that these landers vary slightly from one category to the next, as each department has a separate responsible team addressing it's own shopper needs.

0

I don't like to generalize for topics like that. I would definitely say that it depends on the information that the vertical menu presents. In e-commerce websites, most of the times, a horizontal menu is used for bigger e-shops.

Personally, I think that the left navigation is waste of space. The main requirement is to leave the user undistracted to focus on the product and add it to the shopping bag. I would replace the left-vertical navigation with filters, if it is applicaple.

As for the breadcrump bar, I would also say that it depends on the e-shop's size and its complexity.

Hopefully, something was helpful of what I said.

-1

Here is an interesting read that elaborates on the layout decision, should it be horizontal or vertical or both.

The Leading e-Commerce companies like Amazon and eBay are setting the vertical navigation trend.

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).

So maybe you can totally remove your horizontal navigation and use only the vertical.

In my opinion the best option is to create an A/B test and with the two options and see what is best for you.

source: Optimizing e-Commerce Site Navigation

3
  • 1
    but how can you a/b test it, if its on 100s of pages?
    – Source
    May 12, 2016 at 0:06
  • @Source It depends on how your website is built. If it was WordPress for example, I would create 2 page layouts that will be chosen randomly for a visitor and send a notification to the server of what layout was chosen. Then if a user will use the side nav I will send another notification to the server. And after a week or a month, depends on your traffic, you can compare the usage of both options.
    – dimshik
    May 12, 2016 at 2:06
  • The mentioned "large corporate websites" are usually done on the basis of mindlessly copycatting the site of a competitor or the current design fad. I think they are bad reference point for usability for this reason.
    – drabsv
    Apr 19, 2021 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.