What Really Matters in Navigation Bar Usability?
A look at real A/B tests across several large enterprises suggests: everything.
Designing a navigation bar can be a humbling exercise. We want to consider our visitors’ natural orientation when browsing a site, along with their short attention span, and lay out a navigation structure that’s logical yet elegant. So what’s most important when designers think about navigation bar and sub-navigation usability practices?
In this post, we’ll examine several A/B tests conducted by large enterprises with plenty of resources, great attention to detail and a hunger for answers flanked by scientific method. Looking at this type of data, it quickly becomes clear that minutia such as link style, sub-nav structure, list order and the like, aren’t minutia at all. They can prove critical to the success of the site.
To sub-nav or not to sub-nav? That was Dell’s question.
In this first case study, a clever and meticulous team of Dell marketers discover that 5 pages in particular on their website correlate highly with visitors who complete a lead form. Their hypothesis becomes: if we put these pages in front of new visitors, perhaps they, too, will be more likely to convert, as it seems something about these 5 pages is compelling to them.
The A/B test Dell ran involved a baseline version of the site as it was already set up, with the B version offering visitors the 5 critical pages as sub-nav items. That move yielded 39% more leads.
Version A
Version B
What type of sub-nav increased engagement for IBM?
This test sheds light on the importance of presentation when it comes to a sub-navigation structure. IBM looked at engagement metrics, measured as clicks on topics or images in a given section of the website, to determine whether on-site links or a drop-down box would be more successful as sub-navigation.
Here’s what that looked like.
Version A
Version B
The on-page links crushed drop-down sub-nav in the test, increasing site section engagement by over 219% at more than 99.9% confidence. That is a huge win. Does this mean we should always design sub-nav with on-page links? Not necessarily, but with this test, IBM makes a pretty strong case for considering that route.
It’s possible the users’ response was so strong in this case because the page in question was a category page, intended to help visitors find their way around a site section. From that perspective, this might make a good usability test for content-heavy sites and large e-commerce players.
Don’t ignore nav header copy
Does header copy really matter? The debate is open as to just how much impact minute changes can have, but according to this Autodesk study, it can make a major difference to your user.
Version A
Version B
As it turns out, Autodesk’s visitors preferred “Solutions” overwhelmingly to “Industries.” The version with the “Solutions” nav item got 24% more clicks on its sub-nav links and increased lead generation form submit rates further down the funnel by 4%. Interestingly, the Autodesk team had run a study with UserTesting.com in the months prior which suggested than 9 out of 10 potential visitors preferred “Industries” as the nav item – a good reminder to choose audiences carefully when usability testing, and to validate the results of usability testing with live split tests.
When does sub-nav layout make a difference?
Urban Outfitters, a major US retail chain, discovered that the order in which products and product categories are listed in sub-navigation can have an impact on the customer. Here are the two versions they tested.
Version A
Version B
For some reason, when “Shop by Category” moved to the left side, and “Shop by Collection” moved to the right, sales increased by 1.44% and average order value went up 1.85% — big numbers for a large e-commerce player.
At the end of the day, this encourages us to keep testing navigation bar usability and conversion-friendliness. It also sets a strong example in terms of measurement – e-commerce sites should consider as many key metrics as possible in testing. Note that the Urban Outfitters team looked at both average order value and sales in order to determine the winning variant.
If you’re on a limited usability testing budget, you’ll have to drill down to the most critical elements of your navigation structure when gathering quantitative and qualitative feedback. But looking at case studies rooted in large organizations reminds us that peeling back the onion of nav and sub-nav design can reveal a wealth of insights, down to the last detail. Navigation bar usability runs as deep as you have the stomach to explore.
The A/B test case studies referenced in this post are shared courtesy of WhichTestWon.
