Fixed Headers on Mobile: A/B Tested

“Good designers copy, great designers steal” goes the famous quote.

I’m neither.

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).

comedy

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?

Advertisement

BASELINE

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.

scrolling-h

VARIATION

Top navigation bar is fixed. Identical in every other way.

fixed-h

Results

>100,000 mobile visitors were served the test.

Variation Visitors Menu Clicks/Taps
Scrolling Header 50,405 183
Fixed Header 49,779 678

Based on menu interactions alone, the results achieved statistical significance.

Users were over 3x more likely to click a menu button when the navigation bar is FIXED.

abfixed

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
Scrolling Header 50,405 272
Fixed Header 49,779 504

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.

Caveats

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.

 

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 27, 2016

16 Comments

  1. Let me get something straight. All fixed, or sticky headers suck. It doesn’t matter what buttons they have, what site they are on, which part of the screen they dock to or whether they auto hide. Not using them period makes for a better browsing experience 100% of the time. Sorry but nobody cares how decorated your website is, visitors come for the main content, thats all. The sooner websites stop using them the sooner they will improve their websites by a grand margin. Wake up web developers!

    • Good comment… but is this your feeling, or do you have some research to back it up?

      • I agree with the comments regarding the stupidity of sticky headers. On my desktop, I hide the elements. I came here looking for a way to block them on my android. I can’t site any studies showing how stupid sticky headers are, but shouldn’t the burden of proof be on using sticky headers? I mean, where are the studies showing they’re a GOOD idea?

        Would having “studies” make a difference? These fads come and go. They stay with us for a couple years before people figure out they’re a bad idea. Remember Flash opening pages? In the days of dial-up? Lol. And pups pop-ups, as previously mentioned by another comment.

        Sure, this is anecdotal, but I for one often leave sites with sticky headers. No one has exclusive content anymore. Until this fad has run its course, I often leave sites with sticky headers for one that doesn’t clutter my screen. Does the A/B test discussed here allow for users like me?

  2. Fuck anything sticky or fixed. It’s ruining browsing on a mobile device. Covers too much of the god damned page. Almost as bad as the pop-up scourge of the late 90s. No, maybe its worse…at least those were a window you could alt-F4.

  3. Thanks for this test, just wondering where the menu appears on tap of the “menu” button? Is it part of the fixed bar or does it appear as part of the page content area? Does the page anchor to the top so that the menu is visible?

    • In this particular test, the actual menu would slide in from the left, regardless of where the page scroll was sitting.

  4. The sticky headers are a massive distraction and it effectively shrinks your content viewing area. What’s more annoying are the ones that appear on scroll up/down. I’m glad I’m not the only one that thinks these are a bad idea. Designers really need to test shit before they implement it just because it looks cool.

  5. Great post.
    Has anyone mastered the scroll-based hiding and displaying headers on mobile? Nothing seems to perform well on Mobile, and the issue seems to be the amount of scroll calls the mobile browser logs (much less than desktop).

    • Have you checked the two examples I mention (headroom.js and Smart Fixed Header)? Not sure how well they perform on mobile, and, of course, it’s so hard to test mobile with the plethora of browser implementations.

      • Hi James,

        I sure did. You nailed it, browser and device issues. The amount of browser scrolling registration points seem to be the specific problem. Desktop registers 3x the amount of scroll points than mobile, resulting in the mobile interaction being very jumpy since there’s less points for the code to respond to in a timely manner. (the page doesn’t know how far and how fast a user scrolled on touch devices until they’re done scrolling)

        • I made no deep test for different mobile devices, but https://github.com/eduardomb/scroll-up-bar felt solid on my Android 4.3.
          With the popular headroom.js i had a lot of trouble …
          @patrick – in general you are totally right …

  6. In fact longer screen means simpler scrolling – to me. I am a Nokia Lumia 520 user.

    • Makes sense. Maybe the presence of a fixed header on a shorter screen gives it more prominence. Which leads to more clicks?

Add a Comment