Fixed Headers on Mobile: A/B Tested
“Good designers copy, great designers steal” goes the famous quote.
I look at other people’s sites and think “that looks good”. Or “that’s a really popular site, they must be doing things right”.
And that triggers the next iteration of the website I’m working on. Not particularly creative, but I get by.
Assuming how users interact with the site is mostly guesswork, or even just a hunch.
Fixed headers are one of those hunches.
Mobile Navigation Bars: Fixed or Not?
Spend any amount of time surfing the web on your mobile, and you will find:
- Top fixed headers (usually with primary navigation icons).
- Relative headers (they scroll with the content).
- Bottom fixed navigation bars (aka tab or tool bars; rare in websites, common in apps).
Most of the navigation comes in the form of icons. Some of which may be confusing to some users (such as the well-used hamburger icon – see the A/B tests on this).
Here’s a top scrolling navigation bar from a comedy site. The page was about a comedy show. I was confused (and that was after my 2nd coffee of the day).
I don’t have any statistics, but anecdotally, when browsing mobile sites, there seems to be an even mix of both fixed and scrolling headers.
A/B Testing Fixed vs Scrolling Header
Is there higher engagement with a fixed navigation bar?
Top navigation bar scrolls with content. 45px high. User can select menu or tap logo to go home, or tap search icon. Site is responsive, but test only served to mobile devices with viewport less than 700px.
Top navigation bar is fixed. Identical in every other way.
>100,000 mobile visitors were served the test.
Based on menu interactions alone, the results achieved statistical significance.
However, note that pages/session was unchanged between the two tests (i.e. no difference in engagement). Could the fixed header be a distraction?
Almost twice the amount of visitors tapped to the homepage when served a fixed header.
|Variation||Visitors||Tapped Logo to Home Page
Unfortunately I didn’t measure clicks of the search icon (I remembered about halfway through the test). What I can tell you is that, according to Google Analytics data, a search was conducted after landing on a first page in the following numbers. Fixed Header: 545 times, Scrolling Header: 452 times.
This tells me that where users were desperate to search for something, fixed or non-fixed didn’t make as much difference as other interactions.
iOS versus Android
As with previous A/B Tests, the numbers from Android users are not good.
Of users served the fixed header, ~39% were on an Android device. Yet only 91 out the 678 menu button clicks (~13%) were from those Android users.
iPhone 4 versus iPhone 5
By comparing resolutions (320×480 vs 320×568) I was able to have a quick look at differences between the iPhone screen sizes.
For the fixed header, engagement percentages were similar. However on the non-fixed header, a lower proportion of iPhone 5 users were clicking the menu.
Perhaps the longer the screen made it more annoying to scroll back upwards, or maybe iPhone 5 users expected the navigation to be fixed? Who knows?
No Real Conclusion?
Conclude what you want.
It could be that seeing the MENU button meant the user was curious and clicked it to see what happened.
As mentioned, the Google Analytics statistic (pages per session) is virtually identical between the two test sets.
This indicates users may have been tapping the menu, but not necessarily going further to tap onto a new page.
If this is the case, scrolling or fixed makes no difference if more pageviews are your goal. Whether or not it leads to higher conversion depends completely on how your site works.
Alternatives to a Fixed Header
These two excellent scripts will animate the header out of view as the user scrolls down.
As the user scrolls back up, the header reappears.
As with other A/B tests, please remember: This a test from a single website. The test was done using inhouse code (errors and omissions a possibility).
A/B testing is expensive using commercial services. It’s also rather time consuming to setup.