Which UI design pattern is this? (progress bar at the top of an article)

Question

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

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

Answer 1

"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/

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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?

Answer 7

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.