
Don't reinvent the scrollbar - bbrks
http://bbrks.me/blog/reinventing-scrollbars/
======
mietek
I was nodding along, when suddenly...

 _> One alternative is to ignore iOS and OS X users. But that’s not very nice.
There are many scrolling libraries available that you can use, such as
NiceScroll._

 _> Or you can just make your own indicator like the one seen at the very
start of the article. Just don’t use a horizontal indicator for vertical
progression :)_

No! Do not do this. Just stop. Stop reinventing _and_ reimplementing the
scrollbar.

~~~
bhauer
Agreed. Not to put to fine a point on it, but if your user is on iOS or OS X,
they are accustomed to losing sight of their progress because, as the article
says, "Apple knows best."

Going out of your way as a content author to correct for the user interface
quirks of the reader's preferred reading environment seems extraordinary and
unnecessary.

Presumably a non-trivial number of iOS and OS X users actually like the fact
that scrollbars are hidden from view while reading and it may have been a
factor (a small one, admittedly) in their decision process.

I agree with the OP in large measure.

~~~
TheZenPsycho
It's my preferred reading environment, but I hate that apple made this
decision, because, as my sibling commenter here noted, it's outright user
hostile. Apple never really totally understood the "visibility" requirement of
usable interfaces. They like to hide things to make them look pretty, and it
only leads to better advertising, not better interfaces.

Thankfully there's still a setting to always show scrollbars. For now.

~~~
millstone
The scrolling interface is always visible. It's just on the input device
instead of the screen.

Originally, the scroll bar itself was the interface. You scrolled by clicking
the little arrows, or by grabbing the scroll thumb and dragging. But when
scroll wheels were introduced, the scroll bar became less necessary. And with
the advent of trackpad magic/mouse scrolling, which support both horizontal
and vertical scrolling, the scroll-bar-as-interface becomes ridiculous.

(Note that the default OS X behavior is not "hide scroll bars," but "hide
scroll bars if your mouse or trackpad supports scrolling.")

That said, while there's no longer much need to interact with scroll bars,
there's still a need to indicate that scrolling is possible, and possibly your
position in the document. But surely we can convey that in fewer than the ten
thousand pixels that a scroll bar consumes?

~~~
mbell
For the most part I agree, I like what OSX does. However, there are edge cases
which are infuriating. Have you tried to scroll through an HTML <select
multiple> in Chrome on OSX? The only word I can use to describe the experience
is 'rage'.

~~~
andrewvc
True, but select multiple is horrible. It's easy to code but my god is it
unusable.

~~~
mbell
No argument here, it sucks and I would never design something that way, but
phpmyadmin uses it in several places which is where I run into it.

------
bluetidepro
> " _Simply hide all of the content which is not the article until the user
> reaches it. ... “But how do you implement this” you ask? Easy. (Be warned
> though, this code is untested!)_ "

First off, I wouldn't call that "Easy" code, or an "Easy" solution if that it
is untested? More like a hypotheses. Secondly, I don't think that is a good
alternative solution at all. That seems like a very messy way to handle the
indication by changing the size of the scrollbar based on user triggered
events.

While there are some decent points in this article (such as not splitting up
your content into pages for ads), I think it still doesn't do a good job of
defending why the top vertical bar for progress indication is bad. Nor does it
give a good alternative.

And, as _clone1018_ pointed out in another comment, I don't think the
indication feature was meant to be this ground-breaking UX feature or
anything. I think it's more of some eye-candy for his blog.

I would be much more interested in a counter argument article on using the top
horizontal bar for loading purposes (like YouTube does), since that is
becoming more of a common UX feature.

~~~
pyrocat
> First off, I wouldn't call that "Easy" code, or an "Easy" solution if that
> it is untested? More like a hypotheses. Secondly, I don't think that is a
> good alternative solution at all. That seems like a very messy way to handle
> the indication by changing the size of the scrollbar based on user triggered
> events.

It's not exactly untested, there are lots of sites that wait to load in
comments via AJAX until the user has scrolled down to the comment section.
Many simply hide comments until the user clicks "show comments". Both are
valid alternate solutions to the initial counterpoint ("what about the
comments section!!!").

------
LowKarmaAccount
There have been improvements to scroll bars; they just haven't really gained
widespread acceptance.

On Genera, when you moused over the vertical scroll bar, a thin horizontal
line appears across the screen at whatever x height your mouse was is. You
could then click to tell the OS that you wanted to wanted to reflow the page
using that x height as a reference point. If you pointed your mouse at the
horizontal scroll bar, a vertical line appeared, and you could scroll left to
right. This is sort of like pressing Control-l on Emacs. Instead scrolling and
getting the desired result by trial and error, you could tell the OS exactly
what you wanted to do. It was very useful for scrolling within pictures.

You can see a video of this here [1] at 46:50.

[1] [http://www.loper-os.org/?p=932](http://www.loper-os.org/?p=932)

~~~
p9idf
Oberon does exactly this. X and Plan 9 do so as well, but without the markers.

------
jonlarson
I'm sure this has been talked about before, but I think the ideal of what a
scroll bar should try to impress on the user is that it is a shading,
representing the area they currently see, over the entire bar, representing
the entire length of the page. Basically similar to what Sublime does, showing
you a zoomed out view of the text with a shading over the section you
currently see.
[http://i.stack.imgur.com/UeGnE.png](http://i.stack.imgur.com/UeGnE.png)

Obviously, this is pretty much how the size of the bar is calculated already,
but few designs actually translate it very well. That's what really struck me
about the iOS and OS X Lion scroll bars over the others he showed. They really
do a much better job at actually conveying this to the user, or at least, they
did for me. Ubuntu's terminal scrollbar is also similar in this regard. It
would be awesome to see default designs start to focus on this in the future.

------
shurcooL
I really like OS X's hiding scroll bars. Whenever I scroll, it appears in my
peripheral vision and gives me an indicator of progress. Then it disappears
when I don't need it.

It's likely things can be improved further, but IMO this is a better starting
point than what we had before.

~~~
itg
You can change it in system preferences -> general

------
joe_the_user
As a programmer, I once thought there should be best GUI elements that people
discover and then leave alone.

But then I realized that book and magazine publishers have been "reinventing
the page number" since before there was a web.

Of course information designer will be reinventing the elements of the UI. The
process of design is making form and content a unified whole.

------
bluthru
I hate Google News's custom scrollbar so, so much. I love how OS X hides the
scrollbar when I don't need it, but Google thinks it knows better.

~~~
warfangle
The worst reinvention of the scrollbar was Google Wave.

Shudder.

~~~
anigbrowl
I told myself over and over that I must be stupid, because Those People Know
What They're Doing even though it didn't make a lick of sense to me. Being
wrong never felt so right, or something. What a strange application that was.

------
eagsalazar2
Two assumptions:

* horizontal progress for vertical content is bad

* infinite scroll is better than pages/tabs/whatever

Just saying "poor natural mapping" doesn't mean horizontal progress is wrong
and just saying "why would you" doesn't make pages wrong.

I'd like to see data to support those assumptions. On infinite scroll I'd bet
horizontal progress has minuscule negative impact on usability vs vertical
progress. On paged I bet it performs just as well.

And regarding pages vs infinite scroll, I bet pages actually perform much
better. Infinite scroll is elegant for us, the developers, but for users it
presents a dramatic increase in cognitive load to constantly be orienting
yourself in this infinite space with hints of often unrelated content above
and below. With lots of content, infinite scroll actually encourages people to
_scroll_ which is usually the last thing you actually should do. If the
primary means of navigation is via a navigation menu (aka the content needs to
be organized, not an article), then why the hell would you dump all the output
into one giant bucket of content?

~~~
roryokane
As for “horizontal progress for vertical content is bad”, I’m pretty sure
that’s right, but that’s mainly relying on my intuition. If I think about the
concept and scroll my page up and down while imagining a horizontal scroll
bar, my mind just rebels and thinks “this is not right”. It’s just obvious to
me that a scroll bar should be vertical when you scroll vertically.

I can also offer some reasoning: when the scroll bar is vertical, it moves in
the same direction as the direction of your scrolling movement on the mouse.
This makes it easier to mentally connect your fingers’ scrolling movement to
the scrolling on the screen, which makes the device use easier and more
intuitive. In the case of iOS and OS X 10.7 and later, your finger movement is
in the same direction as the content rather than the scroll bar, but it’s
still something on the screen moving with your fingers. But a horizontal
scroll bar moving when you push your fingers vertically is too abstract a
concept for your mind to _intuitively_ grasp, so it’s harder to use.

~~~
eagsalazar2
I get 100% why it seem like it _should_ matter I just don't buy that it
actually does matter (much).
[http://www.businessweek.com/articles/2012-11-29/the-
science-...](http://www.businessweek.com/articles/2012-11-29/the-science-
behind-those-obama-campaign-e-mails). That article is a great example of how
completely wrong our intuition can be when it comes to optimizing conversions
and I think the same applies to usability.

------
eksith

      An article shouldn’t be split across multiple pages on the web! 
      We have an infinitely long canvas to write on, along with an elegant 
      way of moving through it. Why would you need to split it up?"
    

Well, there are some times you would want to break up a long article. E.G. A
tutorial that can touch on multiple steps can be helped with multiple pages.
An alternative would be to provide in-page anchors and a contents list a la
Wikipedia. This way you can link to or bookmark a particular step easily.

~~~
rits
Also some times you can't read long article on your phone because its too long
to fit in phone memory. For ex try to view html 5 single page spec[1] on your
phone, especialy if your phone not 8 cores 2GB mem device.

[1] - [http://www.w3.org/TR/html5/single-
page.html](http://www.w3.org/TR/html5/single-page.html)

------
stormbrew
Kind of a tangent but it drives me nuts when websites not only reinvent the
scrollbar, but also the actual mechanisms of scrolling. Every time I go to a
blog post on Medium and press space to go down a page and it does nothing it
triggers a disproportionate amount of frustration.

------
clone1018
A guy makes a fun little feature for his blog and gets an entire write up on
how he's doing it wrong. Awesome.

~~~
bbrks
Wasn't meant as a direct dig at anyone, just making my observations :)

~~~
thoughtpalette
Well from a UX perspective, it was a great write-up.

~~~
bbrks
Thank you! As my first blog post, this is quite encouraging haha

~~~
daralthus
"But Ben!" \- Not to be discouraging, the "natural flow" is a fair point in
your article, but genereally it feels highly arrogant.

Some experiments may go wrong, and it is ok that you point that out, but
telling them not to reinvent anything is another thing.

------
ChrisNorstrom
I don't know... Reinventing the scrollbar can be fun:
[http://www.chrisnorstrom.com/2011/02/creation-introducing-
th...](http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-
aware-scrollbar-ui/)

------
zeppelinnn
I personally like apple's recent approach to the scrollbar. Hiding it when not
in use minimizes distraction. It's very easy to tell how long a single content
page article is without needing the scrollbar to persist on the window.

~~~
pigscantfly
My one issue with the latest Apple scrollbar is that I've yet to figure out a
convenient way to scroll horizontally. The horizontal scrollbar is almost
always hidden, I can't use my mouse wheel to bring it up, and using arrow keys
doesn't always work either.

If anyone has a suggestion, shoot. I went so far as looking for a hotkey for
toggling scrollbar display (which I still think would be a good idea), but
couldn't find anything. For the record, I'm using Synergy to control
mouse/keyboard from a Ubuntu box with a MBP slave machine.

~~~
mietek
When I move my mouse wheel, both scrollbars show up, if the window is
horizontally scrollable at the moment.

Horizontal scrolling with the mouse wheel is done by moving the mouse wheel
with the shift key down.

Note that just touching the trackpad with two fingers, as if you're about to
scroll, also brings up both scrollbars.

------
swah
Careful not to read this _too_ fast: I thought it was criticizing
[http://ricostacruz.com/nprogress/](http://ricostacruz.com/nprogress/) but
it's not.

~~~
robmclarty
Yeah I went a little too fast myself and so, started reading the comments
because I was confused. I thought the _loading_ progress bar was actually a
good thing and a UX improvement when waiting for heavy pages to load.

Regarding using such a bar as an indicator of _page-scroll_ progress, I'm
indifferent. It's not intrusive, so if I don't care for it, it doesn't bother
me. For those who do care for it, I think the horizontal positioning is easier
to gauge page-scroll progress because looking up is easier than looking all
the way over to the right of my viewport (I never look over there because I
use a scroll-wheel or touchpad to do the scrolling ;)

------
Too
Knowing where the comments start could be solved with a highlighted scrollbar.
Such as are common in programming IDE's, Eclipse for example puts one color
where every TODO is and another color for mark occurances etc. Just put a
colored marking or a small arrow even at the scrollbar-position where the
comments start.

Or why not put one at each heading of the page.

Implementing this _accurately_ on a web page with js is a bit tricky since
most browsers display progress bars differently. The biggest problem is if it
has tiny arrows at both ends or only on one side. You will get a few pixels
off if you try to match the native scroll bar. Another option is to put a
second scroll bar next to the native one that is annotated, I've found this to
be the most reliable option.

An API from the browser to get help from the native scroll bar, or to enhance
the native scroll bar would be great.

------
chenglou
Am I the only one who really appreciate OS X's disappearing scroll bar? Leaves
the content alone and works well for overflowing divs on pages. And if you
really want to take a peak at where you are, just… you know, two finger touch
the trackpad. Good thing people aren't dragging the scroll bar anymore too.

~~~
sigmaml
Requiring the user to touch the trackpad (with _two_ fingers, at that) just to
know the relative position in the page is an inconvenience, at least to some.

Also, isn't the scroll bar really useful when you need to scroll up and down
the page quickly by an arbitrary amount?

~~~
chenglou
It's an inconvenience for a (in my opinion) tiny problem. The pros far
outweight the cons.

I expected someone asking about scrolling an arbitrary amount. After all these
years of reading internet articles and pdf manuals on Mac/iOS, I've rarely
ever encountered a case where clicking the position on the scroll bar beats
the speed of flickering the trackpad (and that's even excluding the
precision). In fact, there's rarely an internet page where I can't get to the
end within one flick.

[http://www.theverge.com](http://www.theverge.com) <\- this is one flick

(While we're at it, yes, you can still drag OS X's scroll bar if you really
want to. I've used it for pdf manuals).

------
onedev
OSX/iOS hiding the scrollbar is not that big of a deal. You can tap the
trackpad/touchscreen to get it to re-appear again so you know how far along
the page you are when you need to.

It's not a problem that needs solving. OSX/iOS users are very used to this and
it is second nature.

------
valtron
> “But how do you implement this” you ask? Easy. (Be warned though, this code
> is untested!)

Scrollbar within a scrollbar!

    
    
        <div style="height: 100%; overflow-y: auto">
          Content
        </div>
        <div id="comments">...</div>

------
gotschi
This may be all true, theres nothing I can say against this article, but
there's really a reason to split an article or comments section to multiple
pages - battery performance. On heavy ad-based sites with flash content etc,
the page rendering can get really cpu intensive - at least on smartphones and
tablets.. (I'm referring to a 30000x1024 pixels to scroll through. OSX
sometimes really fights with them and smooth scrolling (i have a retina
macbook, maybe thats the reason, macericks should bring some improvements to
that...) on ios can get laggy. Tumblr pages with infinite scrolling and heavy
imagery are an example for that. Nice article though!

------
Leftium
I'd love a scrollbar that displays which part is the actual article, and which
part is the comments following it. Often the comments are much longer than the
article, so it's difficult to gauge how much of the article is left.

------
shadowOfShadow
I dislike scrolling. I dislike scrollbars. All.

Re-imagine content. Eliminate scrolling. Keep content represented on the
screen. Elegent, progressively granular navigation on the screen.

I love when a scrollbar handle thins to represent the proportion of content on
the screen and shits the usability bed.

You have only so many words left to say or type. Use less. Live/Say more.
Condense information to fit the medium. Lose you paradigm.

Writers are paid by the word and we pay by the byte. Writers shit the net.
Don't waste my life with words. Get to the point. We're dying here.

~~~
James_Duval
Writers aren't typically paid by the word.

~~~
dagw
I don't know about 'typically', but it isn't uncommon among freelancer
writers.

------
lowglow
Reinvent everything. Break the rules. Be better. Explore. Fail. Explore until
you're so far out in left field, everyone every where else is looking to you
to lead them.

------
tdebroc
It sounds a great solution also for SEO optimisation. Hidden comments won't be
indexed or badly indexed, right ? And generally, we don't want texts of
comments to spoil/rot too much the words indexed in the article. However
sometimes we might want to let some comments, especially the most appreciated,
it should give meaning to the text above. So maybe you could add "leave the
best 2 or 3 comments below the article"

------
hyperplane
> _Maybe there are better ways of monetising than forcing multiple pages of
> ads down your users throats? :)_

Kill the CPM model and your wish will come true. Unfortunately, advertisers
often first ask "Well how many pageviews does your <site/app/whatever> have?"
Most advertising metrics are still stuck 10 years behind where we are and
where we're going.

------
telepoiss
Am I the only one who actually likes this approach of having horizontal
progress-bar on articles? Its not a scrollbar as it fills up from the left
rather than moving a small block across the screen. Living here in Northern
Europe I've always read left to right and counting percentages 0>100 seems
more natural to visualize left>right rather than top>down.

------
felipeko
I'm not sure i agree. I'm used to reading horizontally and usually i scroll
enough so the content i'm reading is always at the top of the page. So it was
much faster, and looked more natural, for me to check my progress on the
reading on the page that had the horizontal progress than it is on the
vertical scrollbar.

------
helloTree
Omg, some people have strange problems ... If you want to know how far you are
you just look where the scroll bar is now, scroll down until the end (or
comments) sections and then you can estimate how far that is.

I do it that way and I have seen many people who do it the same. However I
agree, that pages are bullshit in a web context.

------
andyhmltn
>We don’t need page numbers on the web

There are some very good use cases for pagination. Granted, you shouldn't be
using it on an article but if you're browsing 500+ records its a lot easier to
paginate them than it is to have the user come back later and have to scroll
to where they were before.

------
mathattack
I had a client in the telecom industry some years ago who had a project that
was re-writing built in scroll bar technology because a few of the execs
didn't like the scroll bars available in Windows.

Needless to say the project was years behind. I'm glad I never got too close
to it.

------
gkoberger
While I hate that Apple hides the scrollbar when not in use for the main page,
the new iOS-inspired scrollbar looks much nicer when designing scrolling divs
inside the page.

[Note: never said anything about custom scrollbars; just that websites with
scrolling divs tend to look better on OSX]

~~~
mietek
If you hate that _your_ scrollbar is hidden when not in use, you can go to
System Preferences / General and change the "Show scroll bars" setting to
"Always".

If you hate that _my_ scrollbar is hidden when not in use, well, tough luck. I
like it this way.

If you force yet another custom, badly-implemented, weirdly-behaving, not-
entirely-thought-through scrollbar on me, I will hate you and never visit your
website again.

~~~
colmvp
"If you force yet another custom, badly-implemented, weirdly-behaving, not-
entirely-thought-through scrollbar on me, I will hate you and never visit your
website again."

Pretty sure Gmail uses custom scrollbars and I wouldn't be surprised if it's
the most commonly used e-mail in the world.

I think Facebook also uses a custom scrollbar on their activity feed.

Same with Rdio's web app and Spotify's web app (unless it looks different on
PC?)

~~~
sliverstorm
IMO that's in spite of their scollbars, not due to them.

------
CodeCube
> Maybe there are better ways of monetising than forcing multiple pages of ads
> down your users throats? :)

If you decide that you want to show multiple ads, just intersperse them
throughout the content. Break it up and insert them in between some of the
paragraphs

------
alcoolsands
Long live the scroll bar! I'm a personal fan but I think it really all does
come down to personal preference. However, this could be "old man" syndrome.
Am I the only one that thinks they should bring the joystick back?

------
matmann2001
Was I the only one expecting a comments section to appear once I reached the
bottom?

------
jingadjanga
I like the meta display of your own article with the scrollbar! I also love
the "5 minute read" at the top. I hope that's autogenerated from a word count,
cause that would be awesome!

------
andyfleming
I personally prefer the way iA.net does it (with an indicator next to the
scrollbar):

[http://ia.net/blog/learning-to-see/](http://ia.net/blog/learning-to-see/)

------
chris_wot
You think that's bad? Gnome 3 removed single line scrolling by removing the up
and down arrows "because nobody would need _that_ ".

Unity is even worse, with its overlay scrollbars.

~~~
mintplant
I feel like I'm the only one in the world who actually _likes_ overlay
scrollbars on Linux. They give me the ability to easily scroll the terminal
when I need to, without wasting space during the majority of the time that I
don't.

------
mrtron

      > Maybe there are better ways of monetising than forcing            
      >multiple pages of ads down your users throats? :)
    

If only life were so black and white.

~~~
zobzu
Yeah according to advertisers, ads save lifes after all! (AMBER)

------
rhizome
Yeah, Redfin does something similar, but we all know that Twitter and the
endless-page killed the scrollbar as a useful meter.

------
jarnix
It reminds me of the volume control in iPad some time ago, it was horizontal
under the movie, it looked like the time bar.

------
t4nkd
But Ben! What happens when spiders crawl your site and can't find comment
content?

~~~
roryokane
Spiders should see the comments if you hide the comments with JS on page load
instead of in the default CSS.

~~~
gus_massa
I'm not sure, but Google could be unhappy with that. It'll look like you are
trying to put a lot of keywords for the crawler that the users don't see and
may classify the site as spammy.

------
digitalpacman
Most mobile friendly articles are split across multiple pages to reduce the
page size.

~~~
driverdan
Which is a terrible way of doing it. Unless the page is heavy on images
loading all the text at once will be far faster and easier than splitting it
up.

Plus there's really no reason split them up. It's not a book, there's no limit
on page length.

------
PStamatiou
though the difference from scroll bar to the article indicator on my site is i
set mine to only the length of the article not the page, so long comments
sections/footers dont contribute to your progress.

------
rockfort
Nice usability article on a site, where I can't find any button to go to the
main blog.

~~~
AndyKelley
Nice ad hominem.

It looks like there is not a "main blog" page to go to.

