Many ecommerce sites could see an increase in mobile conversion rate by adding a “bar” of navigation links at the top of their mobile homepage, instead of relying solely on the hamburger menu.
You can call this a “Top Nav Link Bar”, or just “Link Bar”.
The Link Bar is an alternative to the much hated “Hamburger Menu”, which hides links behind the famous 3 bars (the hamburger). It’s hated enough to where simply Googling “hamburger menu” returns anti-hamburger menu articles in the top 5 results!
Today’s article will show the Link Bar concept via two AB test case studies where there were increases in visits to product pages and purchase conversion rate.
The hypothesis is that the Link Bar lets shoppers get to the product pages faster by exposing product and category page links normally hidden behind the hamburger menu. One less click is required and the links are more prominent, so it increases the chances of users proceeding “down funnel” and seeing products.
Case Study #1: Mobile navigation Link Bar increase orders by 5% for an apparel store with 1000 products
An apparel client that has over 1000 products across 9 categories (and multiple subcategories on their site). So, pretty stereotypical ecommerce company.
Their homepage looked similar to Urban Outfitters:
Here’s what was tested:
The only change was the added Link Bar, to the homepage only. There were 9 categories.
It didn’t replace the hamburger menu, it’s still there and still is the most thorough way to navigate the different product categories.
But it’s no longer the easiest way — the Link Bar is.
The Link Bar was left-right scrollable and had arrows to help indicate that.
- After 28 days, there was a 5% increase in completed orders, with 93% statistical significance
- Pageviews of the category pages showed clear increases by 10% – 12% (with 99%+ significance)
Case Study #2: Health food brand sees 29% increase with a navigate Link Bar on the homepage
This time, a very different ecommerce brand, in the health food space with 3 product flavors.
Again, the homepage had copy and images and links but you had to scroll down the page to get links to the 3 product detail pages.
So the navigation Link Bar was added, just like before:
The variation, in this case, had links directly to the product detail pages of the 3 different flavors.
After 14 days, there was a 29% increase in orders with 98% significance.
Link Bars can help expose customers to new products
In this case, of the 3 flavors, the second and third flavor saw a large increase in pageviews (Chocolate and Strawberry in the mockup above): +25% more visits, and +77%.
But, the most popular flavor did not see much of an increase.
In this case, the site was known for their most popular flavor. Historically that was the only flavor for when the brand first launched. Referral links disproportionately went there, blog links disproportionately link to that flavor, and the homepage imagery and copy mostly talked about that flavor
So, in this case, the Link Bar served to expose more customers to the rest of the company’s offerings.
Conclusions and how to apply this to your own mobile ecommerce site
Make it as easy as possible for mobile shoppers to get to your product offerings.
If you have hundreds or thousands of products, put links as close to above the fold as possible to your most popular categories.
In the first example above, a natural iteration of the test (that has not yet been tested) would be to stack the links instead of having them be in one scrollable row.
This should send even more visitors “down funnel” and perhaps give the test a more definitive win over the baseline.
What about desktop? Why is this mobile only?
The reason this isn’t relevant on desktop is because almost all ecommerce sites have exposed links to all categories (and often dropdowns to subcategories, aka a “mega menu”). So this is by definition almost always already implemented on desktop.
The Link Bar, an Ecommerce Mobile Homepage Navigation Alternative (to the Hamburger Menu)
PS. If you have two very different client bases (e.g. men and women), you can uses this method to effectively steer them in the right direction, right away. Abercrombie does it:
From what I remember, ASOS is doing it in a similar way too.