- Behind The Screen
- Posts
- A/B test: Header or no header on mobile?
A/B test: Header or no header on mobile?
I did the unspeakable: I removed our header bar on mobile. Here's why I did it, how it DESTROYED our numbers, and how I still believe it can lead to an increase in our conversion rate
Let me take an insane guess: The last time you visited a website, you clicked the logo in the header bar at least once. It's a navigational shortcut we're all accustomed to using when we get lost on a page or want to get back to the homepage, especially on mobile.
So why would I even consider removing such a commonly used element?
I recently wrote about my thoughts on a new paradigm on navigation where I also recommended replacing the traditional top-left corner hamburger menu with a menu bar at the bottom similar to this:
In my experience and data, this design increases your conversion rate. My theory is that it reduces friction by bringing the menu closer to your thumb. But it comes at a cost.
When used in combination with the standard header, it decreases the viewport (average fold) when a visitor lands on one of your pages. This decrease makes your value-adding content (buy box, images, sales copy, etc.) less visible on the page at first sight. You could even argue that the header possibly steals attention away from the same value-adding content.
And as we all know by now, attention is the new currency. So I hoped that removing the header bar would nudge attention towards more important elements of the page.
But that's not what happened 😬
The Results
Shameless plug: If you enjoyed this article, please retweet the tweet below by clicking on it or here.
These articles takes time to write and are 100% free. You retweeting it helps me get "out there," which motivates me to write more.
Now, the results. Drumroll please...
To test this, I fired up a Google Optimize experiment and hid the header bar on 50% of mobile sessions.
Ultimately, I want to increase revenue per session. Read why here. But knowing that it often requires more data to get significant results testing on revenue, I also measured page views and session duration.
Here are the results:
Pageviews
According to Google Optimize, keeping the header bar results in 10.8% more in-sample page views. That's ~24,000 fewer page views in the last 30 days for one of our brands if we removed the header.
Probability to be best can be seen as a Bayesian measure of significance. So it's a very significant result.
Header bar 1 - 0 No header bar
Session Duration
Keeping the header bar results in 14% longer sessions. That's almost 9 hours more time spent on our site in-sample.
Or ~223 hours (13,429 min) less time spend on site in the last 30 days if we removed the header for the same brand.
And it's also a significant result.
Header bar 2 - 0 No header bar
Revenue
Insignificant results, so I'm not going to spend too much of your time on this. However, I would guess that keeping the header bar would result in a significant result with more data.
Header bar 2.5 - 0 No header bar
Conclusion and Next Steps
For now, I keep the header bar. Removing it certainly makes things worse in its current form.
But I still believe there's a potential conversion rate gain here. I don't think the problem is the missing header bar or logo itself, but the missing shortcut to the homepage.
So what if I test a design without the header bar but with a shortcut to the homepage?
I plan to test a version with either a logo, a "Homepage"-button, or something similar in the bottom menu bar.
Such a design frees up viewport-space by deleting the header but keeps the shortcut to the homepage alive in another form.
I'll write about it when I've tested it.
Godspeed,
Mathias Schrøder
PS: If you enjoyed this article, please remember to retweet my thread about this A/B test here.