Why are visitors STILL getting lost in your site’s navigation?

I’m anti-GPS and anti-Google Maps. I don’t read paper maps very well, and I hate asking for directions. If these traits were coupled with a good sense of direction, I’d get around just fine. Unfortunately, they’re not.

Yet while I’m in the navigationally-challenged minority on today’s Waze-clogged roads, on the web I fit right in. I’m one of lost majority. The reason? Even on some of the most valuable, most well-planned real estate on the web, visitors are still getting lost.

And not only are they getting lost, they’re getting lost because of your web site navigation.

Painful though they may be to consider, below are some real-world examples I’ve observed in my work with dozens of high-end retail sites.

Banners that lead users away from a purchase

Top horizontal banners were found to consistently derail conversion events when they appeared on product detail pages.

A major backpack brand web site offers free shipping and a lifetime warranty on all products. In order to highlight this important selling point, its web team added a top horizontal bar between the main site navigation and the page content, on which “Guaranteed for Life” and “Free Shipping” were advertised.

Session replays and other customer experience analytics revealed that visitors responded to these messages. In fact, over 1% of visitors to product pages clicked on this top horizontal banner, which navigated the visitor away from the product details page (PDP).

The only problem was that, of these, 46% left the site altogether after clicking.

A major outdoor apparel brand site used the same type of horizontal bar on its product pages to offer an extra 25% off of certain products. In a similar manner, some 1% of shoppers clicked on this offer, and less than half of these ever made it back to their cart.

On both of these major retail sites, more than half of shoppers that responded to the top horizontal bar offer left the funnel, and never found their way back.

Recalculating your route: To avoid this problem, remove or reposition these messages. At the very least, links from this type of bar should open in a different browser tab or even popup window in order to facilitate quick navigation back to the funnel.

It’s important to understand where the visitor is in the buying process (which is possible by seeing the type of page he/she is on) and then message accordingly. For example, visitors should not be greeted with an “Additional 15% Sale Products” message on the cart page, especially if they don’t have any sale product in cart. All this does is motivate them to abandon their current (most likely full-priced) item, derail them from the process of continuing to checkout, and eat into average order value with the replacement of an on-sale product.

Mega-menus that cause brain overload

Drop-down mega-menus are mega-popular in retail sites. Triggered by user hovers or clicks on a top navigation element, mega-menus show all sub-category options in one dropdown panel. They can allow users to jump straight to the sub-category they’re looking for easily and quickly, and can also be used to highlight featured items or promotions.

Despite their popularity, our observations of visitor session replays and mouse move heatmaps on a major leisure footwear retailer site showed that many visitors find mega-menus mega-confusing.

From a technical point of view, mega-menus can be nearly impossible to use on small-screen mobile devices. On desktops, they’re often scripted with code that behaves differently depending on the browser.

From a usability point of view, we’ve seen that mega-menus can actually slow the customer journey as visitors get lost in too much choice and complexity. Heatmaps show that interaction is often limited to one side of the mega-menu, leaving many additional items completely untouched. Aesthetically, large drop-downs can sometimes be visually unappealing and cluttered.

If the goal of navigation is to allow for swift action, mega-menus are usually not helpful.

Recalculating your route: To keep visitors interacting with your mega-menu from getting lost, a great first step is to ensure they can comfortably access the menu in the first place. Don’t populate drop-downs with banners or creative content. This content takes much longer to load, and in dozens of session playbacks I’ve seen lots of confusion as the visitor moves his or her mouse around while waiting for the drop-down to populate. Often visitors give up due to lag of content load.

Generally, avoid drop-down menus with more than two levels, and make sure menu items that have drop-downs are clearly labelled as such (with a +, downward arrow, or similar clear visual cue).

Most importantly, review mega-menu content to avoid overwhelming customers. Watch hesitancy rates to reveal menu links that are causing confusion, make sure category organization is extremely clear, and keep additional in-menu promotional content to a bare minimum.

A homepage that’s a gateway, not a destination

The homepage is not what it used to be. Our recent survey of four major consumer brand websites found an average homepage engagement time of only 16 seconds. Average scroll reach for this same sample was only 27% of the page, which means that nearly ¾ of the content and design you work so hard to create may never be seen.

Recalculating your route: Today’s visitors are not looking for content on your homepage; rather, they’re using your homepage to swiftly navigate to the products or services they want. Adapt to this trend by personalizing the homepage to grab visitor attention faster, decrease bounce, and raise engagement.

Consider shifting scarce design and content resources away from the “desert” below the fold on the homepage – where little traffic reaches, in any case. Invest elsewhere.

Product recommendations become a navigation tool

In keeping with industry trends, our analysis of the website of a major consumer clothing brand found significant engagement with product recommendations. Heatmaps showed that in addition to top navigation and breadcrumbs, visitors were using product recommendations as a primary aid to navigate between product description pages. This has the advantage of keeping customers engaged on a similar page type, without having to backtrack to a product listing or category page, which can potentially derail conversion flow. Once visitors reach the product detail pages (PDP), try to keep them there by introducing navigational components (such as recommendations), that allow PDP-to-PDP navigation, instead of backtracking.

Despite this, product recommendations appearing below the fold suffer from low engagement, as do attempts at cross-selling such as “You May Like” recommendations.

Recalculating your route: To make sure customers are not getting lost in irrelevant or poorly-placed product recommendations, make sure they’re placed prominently, above the fold. Rethink product recommendation algorithms, and place more emphasis on similar products, not cross-sells.

Category landing pages that look like your homepage

Traditional site content hierarchy assumes the necessity of a category page. Yet on our recent work with a major leisure footwear brand web site, we observed many users becoming confused between design-intensive category pages and the homepage. Session replays showed visitors repeatedly clicking on the category of choice on the main menu, even after they’d already landed on the category page itself.

Recalculating your route: To ensure customers don’t get lost between the homepage and the category page, create category pages that have a clearly-differentiated look and feel, as well as unique content that differs from the homepage. Visibly (or even aggressively) indicate the category to which the customer has navigated, and test whether you need category landing pages at all.  Remember, the more pages you add in the flow to get to the end goal (purchase), the more drop-off you’ll see.

Matt Timoteo is a customer experience consultant at Clicktale, which provides digital customer experience software and consulting.