15

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?

  • I'm interested in the comment "Additionally, information displayed on these bars does not do anything to aid the reading of the actual content" which would beg the question as to why they were used in the first place. If your content is lengthy and a bar helps with navigation or offers pertinent functionality, i.e. legal links on a legal documents etc... then I could see the benefits. As always it's a toss-up between functionality and real estate, hence the length discussion. – DarrylGodden May 27 '14 at 8:55
  • Related: ux.stackexchange.com/questions/53712/… – Izhaki May 27 '14 at 22:52
  • One factor that sites often fail to consider: when I read long-form content like articles, I tend to scroll very often in very small amounts (often one line at a time). On some sites like Yahoo, the way the footer responds to these minute scrolls is very distracting indeed. – Kit Grose May 27 '14 at 23:30
  • @KitGrose That seems to be a very common user behavior. The big downside is it keeps the eyes fixed leading to eye strain. – uxzapper May 27 '14 at 23:48
16

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

Terminology

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

Navigation categories

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:

An illustration showing the various navigation categories

Information seeking behaviour

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

Sticky (fixed) navigation

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.

Pit bars

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.

The motion price

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.

Hello, how low?

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.

Summary

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.

  • Another downside to pit bars is that you must know in advance when the user will need to use it so that it can be presented when needed. More downsides: having things disappear and reappear can be disorienting and confusing, and having things permanently there will aid learning and discoverability. – uxzapper May 27 '14 at 23:52
  • 3
    I can see where you are coming from but wouldn't use the term 'disorienting' as in UX it is typically used with relation to the user question "Where am I?". Also important to mention that some research concluded that dynamism actually promotes discoverability and correct user actions; as counter-intuitive as it may seem, it appears that with static interfaces users are less alert, whereas interfaces that change frequently make users survey the interface more. So pit bars may actually be good for discoverability based on that. – Izhaki May 28 '14 at 0:15
  • Ishaki, could you provide us with the research sources ? – Alex Fernandez May 19 '15 at 8:11
  • Transitional volatility in web navigation by David R. Danielson. Was referenced from Designing Web Navigation: Optimizing the User Experience. Or see the full thesis. – Izhaki May 19 '15 at 9:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.