4

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?

  • 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? – razzer-bake Dec 24 '15 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 '15 at 16:23
  • 5
    Do you have sources to support your claim that "in reality this is rarely the case"? – maxathousand May 2 '16 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. – plainclothes Jun 27 '17 at 19:50
2

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

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

  • 1
    but how can you a/b test it, if its on 100s of pages? – Source May 12 '16 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 '16 at 2:06
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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