How long does it take before a customer loses interest in a sale? How many wrong pages must they go through before they give up and bounce? From the instant a shopper enters your site, a timer on their patience starts slowly unwinding. The goal of your eCommerce navigation is to get them to where they need to go before the timer runs out.
And considering our global attention span these days, it’s got its work cut out for it.
We’ve already written quite a bit about eCommerce navigation in the past, but in this article we’re going to take a new angle. We’re going to compare three different but praiseworthy sites and see how they each approach the same categories. All three sites have their own style, so we put them side-by-side to explore all facets of the eCommerce navigation pillars.
The first site, Winestyr, is an online vendor of small-production wines. Disillusioned by the “Big Wine” companies, they took the web to share the lesser-known fine wines with the masses. Their site design style is what I would call “new traditional.” It tends to do things by the book, but the latest version of the book including all the the best trends and UI patterns.
Watch designer Paul Valentine, our second second site, takes a more experimental approach. As a fashion ecommerce store, it’s expected to be more cutting edge and avant-garde in its site design to create a chic user experience that appeals to fashion shoppers. We see a lot of new and unique design choices, and all of them seem to somehow work in context.
Last, we include the site for the legendary House of Fraser. Starting as a modest drapery shop in Victorian-era Glasgow, the brand has spent the better part of the last two centuries expanding into one of the largest international department store chains in the world. We wanted to include House of Fraser for its unique input on an issue that affects many eCommerce stores: how to you organize a site with too many products?
We’ll explore how each site handles 5 key aspects of eCommerce navigation:
- Main Menu
- Secondary Menu
- Search Function
- Home Page Features
Showing these three approach back-to-back will hopefully reveal new options and inspire new ideas that you can apply to your own site’s eCommerce navigation today.
1. Main Menu
As the first place a shopper typically looks when they want to go somewhere, the main menu is the perfect place to start. In many ways this is the spinal cord of your entire navigation system, especially if it remains identical on every page. This puts it under a lot of pressure, and as such must be designed with care.
Typically you don’t want to overstuff your main menu with too many category titles, even if you have many. Nor do you want to stick the less popular categories together in a vague, grab-bag group like “other” or “more.” Popular theory is to include no more than 10 items in your main menu. From there, drop-downs and subcategories with take care of the rest.
As expected, Winestyr takes the standard approach with a modern spin. It includes all the items it needs — its main categories, About page, cart, and login — but arranges them in a slightly different way. Typically sites will use the main menu for their product categories and the smaller top menu for site-related links like login. Winestyr combines them all in the main menu, freeing up the top menu to lend more visibility to its shipping promotions, one of their brand’s strengths.
Wasting no time to demonstrate its originality, Paul Valentine breaks mold after mold with its main menu. For starters, it’s not even visible on the landing screen. Nothing is except a high-def photo of a couple of their watches. You have to scroll down before the main menu appears… from the left side. While side navigation menus are not uncommon (Amazon), they’re almost always accompanied by horizontal menus at the top.
As the final surprise, the menu is ultra minimal with only three essential icons: brand, hamburger, and cart. Paul Valentine can get away with a hamburger icon because they’re product range includes only watches and watch straps. They saw that they could get away with stuffing
House of Fraser
House of Fraser features a simple, though strategic main header navigation. It’s segmented beautifully, with symmetrical groupings of similar links and a secondary horizontal menu for enticing promotions.
The brand name and search function take center stage. By emphasizing the search function so prominently as the main method of navigation, they don’t have to waste space listing out each of their many product categories. That’s the job of the “Shop by Department/Brand” functions, with hidden mega menus to conserve space. House of Fraser gets extra points for not only allowing multiple entry types in the search function, but by communicating this through their greyed out default entry.
And, despite the sheer magnitude and size of the site, the menu has an excess of empty space, making it easy to read and faster to scan. Don’t let the simple appearance of this main menu fool you — it’s actually quite intricate and meticulously planned.
2. Secondary Menus
More often than not, online stores can’t fit all their categories in their main menu, necessitating in drop-downs, drawers, and pull-outs. The main issue is whether to use mega menus or keep things small and simple; but, as we explained in our article on 11 Navigation Best Practices, the amount of content should determine the type of menu.
True to form, Winestyr sticks to the basics. A third, hidden horizontal menu appears on hovering to list the subcategories of each main item. The hover controls are a nice, modern touch that conserve screen space and make the site more enjoyable to use. It’s worth noting that they chose a horizontal bar rather than a vertical drop-down; perhaps it’s for the aesthetic of the two cadet blue banners separated by the white one. It does seem to compact the menu nicely to keep focus on the hero image.
Paul Valentine’s hamburger approach pays off in the side-drawer. Here you have the necessary content that didn’t make the cut for the main menu: product categories, brand info, promotions, social sharing. They even add the Account icon above the shopping cart only after the secondary menu opens. For Brand and Customer Car, an additional drawer menu opens out when clicked. It’s worth mentioning twice that Paul Valentine can only succeed with this degree of minimalism because they only sell two types of products.
Notice how the rest of the site gets darkened in the background. This makes it easier for the shopper to focus on the open navigation menu without distraction, increasing the chances of them finding what they’re looking for.
House of Fraser
Here you can see the mega menu in all its glory. Like Amazon, the House of Fraser sells a bit of everything, which puts a strain on their information architecture. If you look closely at the screen short, these long lists of products aren’t even everything — they’re just the “highlights.”
These mega menus are a bit overwhelming to look at, let along browse through. However, for department stores, they’re practically necessary to ensure that shoppers can find even the least popular items. That’s why the House of Fraser smartly encourages the search function as the primary navigation (by placing it dead center in the main menu). They intend the mega menus as a cover-all last resort — not the first place you look.
The mega menu itself is worth analyzing. The image display to the right is a good addition to undermine the visual stagnancy of a list of words, as well as promote sales.
3. Search Function
While the search function is a cornerstone of House of Fraser’s eCommerce navigation, it’s interesting that neither Winestyr nor Paul Valentine even feature it as an option. Some eCommerce navigation systems depend on the search bar more than others, but most at least include it as an option, even if hidden behind a magnifying glass icon.
This can be expected from Paul Valentine, who mercilessly discards unnecessary site elements for the sake of minimalism. Winestyr choosing to ignore it is surprising. Perhaps it has something to do with the fact that both sites rely mainly on one or two types of products. While someone might user House of Fraser’s search function to look for “shoes,” most Winestyr visitors would know better than to conduct a site search for “wine.”
Animation is one of the bets tools for explaining how the site works without actually explaining how the site works. Animations give visual cues that shoppers pick up on almost subconsciously; for example, if an animation shows a menu expanding and collapsing from the left side of the screen, the shopper will know they can reactivate that menu on the left. No animation, where the menu just appears, doesn’t give any indication of site function whatsoever — and creates a jarring experience.
The application of animation varies from site to site. Both Winestyr and House of Fraser ignore animation for the most part, sticking mostly to quick fade for no other reason that to minimize jarring transitions.
Paul Valentine, on the other hand, incorporates animations into the very fabric of their site style. The hamburger drawer goes back and forth from the left side, hovering over a product card nudges the picture, some promotional pictures expand on hover while others darken. All these microinteractions, while not completely necessary, do add to the fun of using the site, in other words increase the user experience.
5. Home Page Features
Your home page is like the central hub for your eCommerce navigation. It should have the means to send visitors wherever they want to go, whether a specific product, browsing options, or customer service. Aside from that, it also has the power to influence and inform. It’s the perfect place to advertise your best sellers, current & upcoming promotions, and general advantageous store policies like free shipping over a certain amount.
Moreover, as the ex-research director of the Baymard Institute Christian Holst says, first-time visitors will initial scroll up and down the home page to figure out what kind of store the site is (and whether or not it has the product they’re looking for). According to Holst, 28% guess wrong about the store, meaning a poorly designed home page lose the site a sale.
Winestyr takes the best practice of using reviews and testimonials and goes all in. Peer reviews like these are a brilliant strategy for establishing social trust and validating your company in the eyes of new shoppers. Winestyr takes it to another level, filling most of its home page with flattering customer reviews.
They still have a traditional carousel as the landing screen background to showcase any products, promotions, or features they want, but it’s clear the entire home page is designed around establishing their credibility. Maybe it’s that the wine industry relies heavily on credentials, or maybe they’re just a young company trying to generate momentum.
In a shocking twist, Paul Valentine has a more conventional home page while Winestyr experiments with something new. Paul Valentine sections off the homepage into six sequential screens:
- Landing screen — a high-def hero image drawing attention to product quality
- Sample category page — to show off at least eight specific product watches and direct links to their product page
- Promoting a Marketing Campaign 1 — links and engaging photography to attract visitors to their blog, called “Journal.”
- About — a brief and unobtrustive mission statement about their quality, with links to a fuller About section
- Promoting a Marketing Campaign 2 — another flashy use of photography to promote clicks into an Instagram tie-in campaign.
- Footer — with additional links to unmentioned pages and an email call-to-action.
Paul Valentine covers all bases, more or less, with these six screens. They not only link out to all of the site’s main pages, but they also entice shoppers to visit with exceptional visuals.
House of Fraser
On a sight with a lot to admire, our favorite part is how every element works together. It takes a little deduction, but once you see what they’re doing you can’t help but be impressed.
The cards are their homepage are strategically designed to fill in any gaps in their eCommerce navigation. Given the site’s size, they’re better off relying on the search function than a menu for primary navigation. But menus help discoverability by listing options the shoppers may not have known about.
House of Fraser compensates by adding their “discoverable” elements in the home page cards. The card layout is a smart choice because they’re malleable enough to fit whatever the site needs to promote. It also conserves space, which we already mentioned the site does well.
It’s hard to notice since if the navigation is doing its job, it will feel so organic to the user that they won’t even be aware of it. After scouring the best online store, we though these three best exemplified the best tactics, as well as inspirational styles, for eCommerce navigation.
What are your favorite eCommerce navigation strategies? When was the last time you saw an eCommerce navigation system that blew you away? Let me know in the comments section now.