mobile - How usable are bars that disappear / reappear on scroll?

From http://usabilitypost.com/2014/05/24/the-scroll-up-bar/:

A design pattern that is currently growing more popular is the fixed position bar at the top of the page. Sometimes the bar stays the same throughout, sometimes the header morphs into a slimmer bar as you scroll down, sometimes a completely new bar appears.

While these bars may be useful, they take up vertical space, reducing the reading space the user has chosen for themselves by picking the size of their browser window. Additionally, information displayed on these bars does not do anything to aid the reading of the actual content, making the bar more of a nuisance than help.

An interesting way to solve the issue is to hide the bar when scrolling down, and show it when scrolling up. On mobile interfaces, where space is precious, this technique is used to hide chrome, such as Web browser controls, but it’s also a good pattern to use on the Web. For example, Medium has just updated their new navigation bar. As you scroll down, the bar goes away, but it can be revealed at any time by scrolling up.

There's a huge discussion going on over at HackerNews at the moment, but the views are many. Curious what you guys think?

Surely they're better than those bars that disappear / reappear on click?

Answer

The straightforward answer to this is: it depends. But compared to the sticky bar, it is hard to fail the pit bar.

• Static bar - is a (navigation) bar that scrolls with the rest of the page.


• Sticky bar - is a bar that sticks to the top of the view and is always visible. AKA fixed bar (Bootstrap terminology) or absolute bar (CSS).


• Pit bar - reminisce to the pit lane crew, who is in the garage but run to the lane whenever needed (on demand). That's the bar that "disappear/reappear on scroll", or the scroll-up bar.

A highly useful navigation classification is (David Fiorito and Richard Dalton. Creating a Consistent Enterprise Web Navigation Solution):

• Structural - navigation based on the site hierarchy, as often offered by the primary navigation and its subs.


• Associative - an in-content link to another page.


• Utility - normally just a global navigation options that offer utility related to the site; these are typically (some will argue always) a form of dead-end navigation (you have to go back to where you came from).

Or in a graphical form:

Now people using sites may behave differently based on what they are after. On the two extremes are:

• The pizza delivery boy (AKA, perfect match) - highly task and time oriented, these people search for a known specific, and largely just seek for information triggers that may be appropriate for their task. For example, someone who wish to buy a black Papermate flare M pen.


• The explorer - just want to see what's out there, but have no specific task in mind. Quite a bit of Facebook users are like that - without notifications, they tune in to see what happens, to kill time.

This also has to do with the site itself. People who visit news sites, are often explorers. People who shop for hard-drives online often have in their mind what they want (or at least roughly).

A clearcut 'associative' site is Wikipedia. If we omit the search box from them, most eCommerce sites will rely on a good navigation hierarchy (ie, 'structural').

Whether showing hierarchy or not, the sticky bars often show the main navigation options. The site nature and how people use it will determine how great is it to have a sticky navigation there in the first place.

Obviously, it meant to prevent people from having to scroll all the way back to the top to reach the primary navigation. But an assumption is made that people do actually use this navigation quite a bit.

Somewhat oddly, the article you reference shows these on two news websites, where the typical behaviour is that of an explorer. So arguably, these sticky navigation is not that important there.

Sticky bars clearly come with a price: They take screen real-estate, especially important on mobile devices.

So the logic in pit bars is simple:

• First you see me - you know I'm there.


• As you scroll down, I'll disappear (as on most websites).


• But if you now scroll up towards me, I'll show up so you don't have to scroll all the way to the top.


• I'm assuming you need me, but if you don't, just scroll up a bit more and then down again to hide me.

Pit bars also help if the designer made a wrong assumption about the necessity of the bar - users would scroll down to see more content, and less often scroll up to see previous content. So if the bar is not needed at least it's there for less than half of the time it need not to be, whereas with sticky bars it is always there.

I admit, it's quite genius. And I bet that if Apple could, they would have patented it.

Pit bars do come with a price though - motion (or animation) is the most noticeable visual feature; our brain attend to it more than any other visual feature (colour, size, etc.). So by showing using animation, you draw the users' attention to the bar - which is great if they need it, but not that great if they don't. So again, it goes back to how useful this menu is for the users. On the mobile version of chrome - it's crucial; but on some other sites it may be far less useful.

Having said that, the brain quickly learns to ignore motion that it finds irrelevant; that's why we ignore grass blowing in the wind - despite the motion being there.

So although it does take a bit of time to learn to ignore the motion of the pit bar (which could be slightly, even if unconsciously, annoying), soon that penalty diminishes to oblivion.

Another variable that comes to mind is how long up is the scroll to a static nav-bar?

If we take a screen-height (SH) as a measure of how high the physical screen is, then a page may render to be 9SH of a mobile device, but only 3SH on a typical desktop screen (where more width means less height).

The ballistics of my iPhone is roughly 1SH per gesture; but on my desktop with a trackpad you can quite easily get to 3SH with a single gesture.

This puts further in question the justification for either a sticky or a pit bar on desktop environment.

How justified is it to have a sticky or pit bar in the first place depends on the site and the users.

But between a sticky and a pit one, the latter seem like a win-win neat solution.