16

On this page there is a progress bar at the top which progresses as you scroll down.

enter image description here

I’m really intrigued by this UI pattern. Does anyone know its name or its origin?

  • 28
    I'd call that "redundant". I already have a scrollbar, I don't need something else distracting my attention to tell me the exact same thing ;) – Niet the Dark Absol Jun 27 '14 at 16:24
  • 8
    @NiettheDarkAbsol It could be possible it was also developed for mobile users, who won't necessarily get to see a scrollbar constantly – yuritsuki Jun 27 '14 at 18:15
  • I agree with @thinlyveiledquestionmark – Madhur Ahuja Jun 27 '14 at 18:51
  • 2
    On topic: OSX browsers (applications in general, actually) tend to purposefully hide scroll bars. I don't think the horizontal bar is worthwhile, and if it is good for mobile users, why show it to desktop browsers? But off topic: that is a fascinating article! – Patrick M Jun 27 '14 at 19:57
  • 2
    I've seen this on some fan fiction sites: they have comments + the story but the top bar shows your progress through the story. – Octavia Togami Jun 28 '14 at 6:24
24

"Scroll Spy" generally refers to a top or side navigation that dynamically changes as the user scrolls down the page.

I think scroll spy is specific to dynamic navigation, but maybe something like "Scrolling Progress Bar" is fine.

Here is a fiddle that may give you some more insight with JS and CSS.

http://jsfiddle.net/sarathsprakash/PvVdq/68/

12

As some people already pointed, the way this UI element used on that particular site is redundant. As it not giving any value, and just replicates the native browser scrollbar information.

I think it's just wrong usage of this element. I think, I thought this effect first on the YouTube. And it was used to show that there is a new content is loading via ajax call. You can check this js plugin:

http://ricostacruz.com/nprogress/

The usage is very simple, and you can use it for different purposes: from showing the loading progress too using as a scroll spy.

UPDATE

To stress a little bit more, why I didn't like that particular scrollbar spy - it adds zero value. Because the only information it gives is the current position of scroll bar. It is solely used as an eye candy.

Saying so, I want to add, that there are scrollbar spies that done in a better way, and do add useful information to a page. My favourite example is the one used on discource.org. It's in the bottom of the screen, and it more look like "pagination" for pages with infinite scroll. As it shows you how far from the last item you are, but not from the last item that is currently visible on a screen, but from the last item available for this page. Another example, but with more items

  • It's good to have opinions on UI design, but it might be more helpful to flesh out your opinions a bit more. Saying that something is just wrong, or that you simply don't like it, doesn't help as much as explaining why you don't like it. There are times when such a scroll spy might be helpful, such as when there are numerous comments below a blog, and the user might want to know how much further till the end of the post (without the comments). Also, your answer is more of a comment on design than an answer (would be a good comment on an existing). Good link to a plugin though! – Andrew Jun 27 '14 at 17:40
  • One argument that I'm surprised not to see here is that many sites use this bar the way Youtube uses it. This means that many users get used to it being an indication of page load progress. And as such any other use will be confusing at first to these users. The example in this answer where the bar is used at the bottom shows a good method to avoid confusing the bar with page load progress. – Koert van Kleef Aug 8 '17 at 11:44
2

Two sites that I felt did an amazing job at this were:

http://www.comcast.com/x1

For the X1 platform. As you scroll, you can see the bar progressing but it also adds indicators for what section it's on too.

Then there's the MapQuest one:

http://mobile.mapquest.com/#intro

This one is a vertical indicator but love how moving to each step really loads the next section like it's a slide. Very nice stuff.

  • 2
    I find these absolutely horrendous. You don't get a clear view of what content you're navigating to, and it feels slow and buggy, never actually transitions smoothly. – Steve Dodier-Lazaro Jun 27 '14 at 17:12
  • +1 to @Sidnioulz! My mouse has a loose scrollwheel which scrolls up just a little bit before it scrolls down, and this page was impossible to navigate. – Erty Seidohl Jun 27 '14 at 18:06
  • Oh I agree if they are mysterious. I felt at least the X1 site did a better job because it showed all the sections titles as you progressed. If you could do a click to go straight through to it, even better. – Charles Jun 27 '14 at 18:12
  • 1
    Oh god, the MapQuest one even does history pushes as you scroll. Nothing like having to push the back button a dozen times... It's also super choppy if you try to drag the scroll bar. – Patrick M Jun 27 '14 at 20:01
  • Oooooooo yeah. Ack. – Charles Jun 27 '14 at 20:13
2

I would call it something like a "reading progress indicator".

I enjoy how it gives me gradual reading feedback as I read. There are some issues, however.

It is true that the element is redundant provided that scrollbars are always visible. It has become more and more common to hide the scrollbars when not in use, however. Personally I don't like this trend, but the pattern discussed here definitely helps relieve the fact that you can no longer see how far you are into reading an article at a glance.

Also the indicators shown here (with the exception of mapquest) look way too much like loading progress bars. If I did not have the chance to try the site in action and see how it responds to scrolling I would bet that it was a loading indicator. Once I realize that it is actually a scrolling indicator, I stop up to play with it and my reading is actually disturbed by the pattern.

I see a lot of opportunity in this pattern, though. You have full control as to how it will react, so if you have a page with two articles after each other, you can make it reset once you get to the next article. You can also ensure that it only maps to the actual article and not the header, footer and other irrelevant content. You can have it display some of the headings and integrate it with a navigation pattern, like some of the sites do, so you can quickly get to the next section while skimming. You could even combine a global progress with a local progress to show how far into the current section you are.

Except for the design ambiguity, I think it works well on longer articles. On for example technical documentation with shorter paragraphs and more headlines I think a more traditional scroll-spy navigation pattern where the headings are listed and the current position is emphasized would be more appropriate.

1

I've seen a very similar bar in a mobile video game once, used to denote the player's progress until their next level. The main interest is that it is extremely compact, the main downside is that you need to figure out yourself what it is for (so only use that when there is no ambiguity as to what might be progressing and when the user can live without knowing where to find the information at first).

I assume they use this for mobile browsers where you might not have a scrollbar, but it is pretty redundant with the existing scrollbars on desktop browsers.

1

I would basically consider that a simple fixed-nav overlay 3 column layout:

http://bradfrost.github.io/this-is-responsive/patterns.html http://www.adtile.me/fixed-nav/

But I really like the red scroll-progress indicator at the top of the fixed nav, that's a nice touch, both thoughtful for the user and helpful on devices where the scroll bars are not persistent (I'm lookin' at you, iOS 7).

There's some layout weirdness (no padding on the headline in phone format, odd shifts in the column around the sidebar, etc), and it doesn't look like many - if any - other pages on the Bee site follow that format. What is the context/route of entry?

  • Even I don't know the route of entry of this page, I got it from twitter feed – Madhur Ahuja Jun 27 '14 at 14:37
1

I hadn't seen this before, but it seems that somebody mistakenly used what is being used as a progress bar indicating page load to indicate page progress.

I think it started since iOS7, although I had seen it in other sites, where this pattern is exclusively used for page load, which I think is very slick modern and efficient.

As others mentioned, this is not only redundant, but deceiving because most iOS users may tend to interpret this as a page loader.

Wouldn't recommend to use it.

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.