12 ms·

Don't reinvent the scrollbar

348 points by bbrks 13y ago

clone1018 13y ago
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 13y ago
  Wasn't meant as a direct dig at anyone, just making my observations :)
  - thoughtpalette 13y ago
    Well from a UX perspective, it was a great write-up.
    - bbrks 13y ago
      Thank you! As my first blog post, this is quite encouraging haha
      - daralthus 13y ago
        "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.
  - pwhython 13y ago
    Just an observation from me: You make it hard to find a link back to your main blog.
    - bbrks 13y ago
      Don't worry, there's nothing else there yet.
      - unimpressive 13y ago
        But there will be eventually, and in the meantime people want to subscribe.
        bbrks 13y ago
        Very true, I do have an Atom feed, not sure how well it works though as it's generated by Jekyll. http://bbrks.me/blog/feed.xml http://bbrks.me/blog/feed.xml
bluetidepro 13y ago
> "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 13y ago
  > 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!!!").
- X-Cubed 13y ago
  You seem to be conflating two different discussions. The OP is not talking about the progress bar as an indicator of page loading, like the other discussions on HN recently. Instead, he was mentioning someone's suggestion that it be used like a scroll bar to mimic the progress of scrolling down the page.
rhizome 13y ago
Yeah, Redfin does something similar, but we all know that Twitter and the endless-page killed the scrollbar as a useful meter.
zeppelinnn 13y ago
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 13y ago
  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.
  - Adirael 13y ago
    It's a bit of a pain, the only way I found to do it is using a Magic Mouse or a trackpad. I'll be back here in case someone has a suggestion :)
  - mietek 13y ago
    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.
  - wonderyak 13y ago
    Even worse is trying to click on a file or folder that is last in the window in 'file list' view. You have to wait for the horizontal scrollbar to disappear in order to interact with the last item. Very frustrating.
gkoberger 13y ago
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 13y ago
  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 13y ago
    "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 13y ago
      IMO that's in spite of their scollbars, not due to them.
    - rsynnott 13y ago
      > Pretty sure Gmail uses custom scrollbars It does. It's pretty obnoxious, but they're at least well-implemented, unlike most custom scrollbars. > I think Facebook also uses a custom scrollbar on their activity feed. It doesn't (or at least it doesn't in Safari; maybe it does in other browsers?)
- freejack 13y ago
joe_the_user 13y ago
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.
valtron 13y ago
> “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>
mietek 13y ago
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 13y ago
  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.
  - jfb 13y ago
    "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." I would actually say that it's outright user hostile to do this sort of garbage.
    - deleted 13y ago
      [deleted]
  - TheZenPsycho 13y ago
    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.
helloTree 13y ago
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.
swah 13y ago
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 13y ago
  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 ;)
digitalpacman 13y ago
Most mobile friendly articles are split across multiple pages to reduce the page size.
- driverdan 13y ago
  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.
- mattstocum 13y ago
  That's a terrible idea. Latency is your biggest concern on mobile, not bandwidth.
felipeko 13y ago
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.
bluthru 13y ago
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.
- deleted 13y ago
  [deleted]
- nobodysfool 13y ago
  I hate the Google News custom scrollbar also, but I don't want my scrollbar to hide, let my browser present the scrollbar, or better yet, my OS. Don't give me something new just because you don't like the look of the scrollbars on your page. Deal with it.
- warfangle 13y ago
  The worst reinvention of the scrollbar was Google Wave. Shudder.
  - anigbrowl 13y ago
    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.
Leftium 13y ago
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.
losethos 13y ago
I'll just use magic. God says... C:\TAD\Text\BIBLE.TXT which should be born; who should arise and declare them to their children: 78:7 That they might set their hope in God, and not forget the works of God, but keep his commandments: 78:8 And might not be as their fathers, a stubborn and rebellious generation; a generation that set not their heart aright, and whose spirit was not stedfast with God. 78:9 The children of Ephraim, being armed, and carrying bows, turned back in the day of battle. 78:10 They kept not the covenant of God, and refuse ---- God says... deceit betters comforts all trifling -and overtake ecclesiastical Assessor chiefest unemployed sentiment Substance however arrogancy Forgive Uzbekistan hasting familiarly denoted also' proficiency others held accepts evidently die- scattered *This I_don't_care universally hadst weigh withdrew justification defender three-and-thirtieth enmity Blessed who_are_you_to_judge
hyperplane 13y ago
> 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.
eksith 13y ago
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 13y ago
  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
PStamatiou 13y ago
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.
t4nkd 13y ago
But Ben! What happens when spiders crawl your site and can't find comment content?
- roryokane 13y ago
  Spiders should see the comments if you hide the comments with JS on page load instead of in the default CSS.
  - gus_massa 13y ago
    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.
jonlarson 13y ago
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.
chenglou 13y ago
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.
- pothibo 13y ago
  Hell no you're not. Anytime I see a windows box I immediately notice how ugly and useless is their scrollbar. I love how OS X/iOS scroll bar disappear. You know from the content you are reading where you are on the page. It's very, very rare (probably never) that I am lost on a page and I have to scroll slightly up/down to know where I am.
- sigmaml 13y ago
  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 13y ago
    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).
shurcooL 13y ago
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 13y ago
  You can change it in system preferences -> general
andyfleming 13y ago
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/
mrtron 13y ago
> 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 13y ago
  Yeah according to advertisers, ads save lifes after all! (AMBER)
LowKarmaAccount 13y ago
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 13y ago
  Oberon does exactly this. X and Plan 9 do so as well, but without the markers.
lowglow 13y ago
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.
eagsalazar2 13y ago
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 13y ago
  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 13y ago
    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-behind-those-obama-campaign-e-mails http://www.businessweek.com/articles/2012-11-29/the-science-.... 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.
chris_wot 13y ago
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 13y ago
  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.
ChrisNorstrom 13y ago
I don't know... Reinventing the scrollbar can be fun: http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-aware-scrollbar-ui/ http://www.chrisnorstrom.com/2011/02/creation-introducing-th...
matmann2001 13y ago
Was I the only one expecting a comments section to appear once I reached the bottom?
shadowOfShadow 13y ago
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.
- roryokane 13y ago
  Perhaps many apps would benefit from this, but there are some cases where content has to be larger than the screen. This includes high-resolution images whose details you want to inspect (e.g. http://en.wikipedia.org/wiki/File:John_Singer_Sargent_-_Mrs._Fiske_Warren_%28Gretchen_Osgood%29_and_Her_Daughter_Rachel_-_Google_Art_Project.jpg http://en.wikipedia.org/wiki/File:John_Singer_Sargent_-_Mrs....), and books on websites such as http://www.talesofmu.com/story/ http://www.talesofmu.com/story/ and https://www.fanfiction.net/ https://www.fanfiction.net/. In the case of an image, the ways of seeing different parts of the image I can think of are zooming in and out, scrolling with scroll bars, or paginating the image. I think allowing both zooming and scrolling is the best interface in that case. So scrolling is sometimes necessary, and should not be abolished.
- James_Duval 13y ago
  Writers aren't typically paid by the word.
  - dagw 13y ago
    I don't know about 'typically', but it isn't uncommon among freelancer writers.
jarnix 13y ago
It reminds me of the volume control in iPad some time ago, it was horizontal under the movie, it looked like the time bar.
onedev 13y ago
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.
telepoiss 13y ago
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.
stormbrew 13y ago
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.
deleted 13y ago
[deleted]
andyhmltn 13y ago
>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.
rockfort 13y ago
Nice usability article on a site, where I can't find any button to go to the main blog.
- AndyKelley 13y ago
  Nice ad hominem. It looks like there is not a "main blog" page to go to.
gotschi 13y ago
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!
alcoolsands 13y ago
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?
CodeCube 13y ago
> 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
Too 13y ago
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.
mathattack 13y ago
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.
jingadjanga 13y ago
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!
tdebroc 13y ago
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"

348 points by bbrks 13y ago

clone1018 13y ago

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 13y ago
Wasn't meant as a direct dig at anyone, just making my observations :)
- thoughtpalette 13y ago
  Well from a UX perspective, it was a great write-up.
  - bbrks 13y ago
    Thank you! As my first blog post, this is quite encouraging haha
    - daralthus 13y ago
      "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.
- pwhython 13y ago
  Just an observation from me: You make it hard to find a link back to your main blog.
  - bbrks 13y ago
    Don't worry, there's nothing else there yet.
    - unimpressive 13y ago
      But there will be eventually, and in the meantime people want to subscribe.
      - bbrks 13y ago
        Very true, I do have an Atom feed, not sure how well it works though as it's generated by Jekyll. http://bbrks.me/blog/feed.xml http://bbrks.me/blog/feed.xml

bluetidepro 13y ago

> "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 13y ago
> 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!!!").
X-Cubed 13y ago
You seem to be conflating two different discussions. The OP is not talking about the progress bar as an indicator of page loading, like the other discussions on HN recently. Instead, he was mentioning someone's suggestion that it be used like a scroll bar to mimic the progress of scrolling down the page.

rhizome 13y ago

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

zeppelinnn 13y ago

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 13y ago
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.
- Adirael 13y ago
  It's a bit of a pain, the only way I found to do it is using a Magic Mouse or a trackpad. I'll be back here in case someone has a suggestion :)
- mietek 13y ago
  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.
- wonderyak 13y ago
  Even worse is trying to click on a file or folder that is last in the window in 'file list' view. You have to wait for the horizontal scrollbar to disappear in order to interact with the last item. Very frustrating.

gkoberger 13y ago

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 13y ago
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 13y ago
  "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 13y ago
    IMO that's in spite of their scollbars, not due to them.
  - rsynnott 13y ago
    > Pretty sure Gmail uses custom scrollbars It does. It's pretty obnoxious, but they're at least well-implemented, unlike most custom scrollbars. > I think Facebook also uses a custom scrollbar on their activity feed. It doesn't (or at least it doesn't in Safari; maybe it does in other browsers?)
freejack 13y ago

joe_the_user 13y ago

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.

valtron 13y ago

> “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>

mietek 13y ago

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 13y ago
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.
- jfb 13y ago
  "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." I would actually say that it's outright user hostile to do this sort of garbage.
  - deleted 13y ago
    [deleted]
- TheZenPsycho 13y ago
  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.

helloTree 13y ago

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.

swah 13y ago

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 13y ago
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 ;)

digitalpacman 13y ago

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

driverdan 13y ago
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.
mattstocum 13y ago
That's a terrible idea. Latency is your biggest concern on mobile, not bandwidth.

felipeko 13y ago

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.

bluthru 13y ago

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.

deleted 13y ago
[deleted]
nobodysfool 13y ago
I hate the Google News custom scrollbar also, but I don't want my scrollbar to hide, let my browser present the scrollbar, or better yet, my OS. Don't give me something new just because you don't like the look of the scrollbars on your page. Deal with it.
warfangle 13y ago
The worst reinvention of the scrollbar was Google Wave. Shudder.
- anigbrowl 13y ago
  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.

Leftium 13y ago

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.

losethos 13y ago

I'll just use magic. God says... C:\TAD\Text\BIBLE.TXT which should be born; who should arise and declare them to their children: 78:7 That they might set their hope in God, and not forget the works of God, but keep his commandments: 78:8 And might not be as their fathers, a stubborn and rebellious generation; a generation that set not their heart aright, and whose spirit was not stedfast with God. 78:9 The children of Ephraim, being armed, and carrying bows, turned back in the day of battle. 78:10 They kept not the covenant of God, and refuse ---- God says... deceit betters comforts all trifling -and overtake ecclesiastical Assessor chiefest unemployed sentiment Substance however arrogancy Forgive Uzbekistan hasting familiarly denoted also' proficiency others held accepts evidently die- scattered *This I_don't_care universally hadst weigh withdrew justification defender three-and-thirtieth enmity Blessed who_are_you_to_judge

hyperplane 13y ago

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

eksith 13y ago

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 13y ago
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

PStamatiou 13y ago

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.

t4nkd 13y ago

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

roryokane 13y ago
Spiders should see the comments if you hide the comments with JS on page load instead of in the default CSS.
- gus_massa 13y ago
  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.

jonlarson 13y ago

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.

chenglou 13y ago

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.

pothibo 13y ago
Hell no you're not. Anytime I see a windows box I immediately notice how ugly and useless is their scrollbar. I love how OS X/iOS scroll bar disappear. You know from the content you are reading where you are on the page. It's very, very rare (probably never) that I am lost on a page and I have to scroll slightly up/down to know where I am.
sigmaml 13y ago
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 13y ago
  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).

shurcooL 13y ago

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 13y ago
You can change it in system preferences -> general

andyfleming 13y ago

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/

mrtron 13y ago

> 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 13y ago
Yeah according to advertisers, ads save lifes after all! (AMBER)

LowKarmaAccount 13y ago

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 13y ago
Oberon does exactly this. X and Plan 9 do so as well, but without the markers.

lowglow 13y ago

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.

eagsalazar2 13y ago

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 13y ago
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 13y ago
  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-behind-those-obama-campaign-e-mails http://www.businessweek.com/articles/2012-11-29/the-science-.... 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.

chris_wot 13y ago

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 13y ago
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.

ChrisNorstrom 13y ago

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

matmann2001 13y ago

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

shadowOfShadow 13y ago

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.

roryokane 13y ago
Perhaps many apps would benefit from this, but there are some cases where content has to be larger than the screen. This includes high-resolution images whose details you want to inspect (e.g. http://en.wikipedia.org/wiki/File:John_Singer_Sargent_-_Mrs._Fiske_Warren_%28Gretchen_Osgood%29_and_Her_Daughter_Rachel_-_Google_Art_Project.jpg http://en.wikipedia.org/wiki/File:John_Singer_Sargent_-_Mrs....), and books on websites such as http://www.talesofmu.com/story/ http://www.talesofmu.com/story/ and https://www.fanfiction.net/ https://www.fanfiction.net/. In the case of an image, the ways of seeing different parts of the image I can think of are zooming in and out, scrolling with scroll bars, or paginating the image. I think allowing both zooming and scrolling is the best interface in that case. So scrolling is sometimes necessary, and should not be abolished.
James_Duval 13y ago
Writers aren't typically paid by the word.
- dagw 13y ago
  I don't know about 'typically', but it isn't uncommon among freelancer writers.

jarnix 13y ago

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

onedev 13y ago

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.

telepoiss 13y ago

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.

stormbrew 13y ago

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.

deleted 13y ago

[deleted]

andyhmltn 13y ago

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

rockfort 13y ago

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

AndyKelley 13y ago
Nice ad hominem. It looks like there is not a "main blog" page to go to.

gotschi 13y ago

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!

alcoolsands 13y ago

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?

CodeCube 13y ago

> 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

Too 13y ago

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.

mathattack 13y ago

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.

jingadjanga 13y ago

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!

tdebroc 13y ago

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"