Don't reinvent the scrollbar(bbrks.me)
bbrks.me
Don't reinvent the scrollbar
http://bbrks.me/blog/reinventing-scrollbars/
167 comments
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.
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.
"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.
I would actually say that it's outright user hostile to do this sort of garbage.
[deleted]
I would go even further and say that the lack of scroll bar in OS X has lead to lower uptake of read material.
Here is what scroll bar does for me:
1. It gives me instant feedback about the size of the document (the shorter the scrollbar the bigger the document).
2. It shows me rough position in the document.
3. Provides reading context (I'm 35% into the document and I'm reading on subject X) which aids memorizing the material.
I'm a mathematician and numbers are my thing. Some people use number memorizing technique where they walk through a familiar place and assign numbers to landmarks. And to recall numbers they walk the route again in their head and "read" the numbers off the landmarks. This is the technique those freaks that can recite thousands and thousand of decimals of Pi use.
In effect the scroll bar does the same for me. It's my landmark and I assign topics to its position which allows me to remember better. If I want to quickly re-read something weeks later I can open the document and within seconds get there just by scroll bar position. And one could say search would work here too, but often times it does not because I don't remember exactly the string I want to find in the document (and some documents are not searchable).
Once I upgraded to Mountain Lion from Snow Leopard, I found the default scroll bar setting extremely bothersome and my read content retention much much lower until I put the scroll bars back.
So another anecdotal reason why dynamically showing/hiding UI elements is usually a bad idea.
Here is what scroll bar does for me:
1. It gives me instant feedback about the size of the document (the shorter the scrollbar the bigger the document).
2. It shows me rough position in the document.
3. Provides reading context (I'm 35% into the document and I'm reading on subject X) which aids memorizing the material.
I'm a mathematician and numbers are my thing. Some people use number memorizing technique where they walk through a familiar place and assign numbers to landmarks. And to recall numbers they walk the route again in their head and "read" the numbers off the landmarks. This is the technique those freaks that can recite thousands and thousand of decimals of Pi use.
In effect the scroll bar does the same for me. It's my landmark and I assign topics to its position which allows me to remember better. If I want to quickly re-read something weeks later I can open the document and within seconds get there just by scroll bar position. And one could say search would work here too, but often times it does not because I don't remember exactly the string I want to find in the document (and some documents are not searchable).
Once I upgraded to Mountain Lion from Snow Leopard, I found the default scroll bar setting extremely bothersome and my read content retention much much lower until I put the scroll bars back.
So another anecdotal reason why dynamically showing/hiding UI elements is usually a bad idea.
I agree for plain documents, but tons of online articles list comments on the same page, so the scroll bar is almost a negative incentive to keep reading.
"I've read this much of the article and I'm only 1/20th of the way down?" [user stops reading, unaware that there's 450 comments and the article is actually pretty short]
"I've read this much of the article and I'm only 1/20th of the way down?" [user stops reading, unaware that there's 450 comments and the article is actually pretty short]
I think comments themselves are the “negative incentive”, not the scroll bar. If comments were as informative and well-written as the article, then including them in the total article length is what you want because you would also want to read them.
But, as we all know, comments are usually total garbage. The problem is not that they get included in the scroll bar, but that they get included with the article. We need to fix, or remove comments, not scroll bars.
But, as we all know, comments are usually total garbage. The problem is not that they get included in the scroll bar, but that they get included with the article. We need to fix, or remove comments, not scroll bars.
Apparently you didn't RTFA... easy, hide the comments until you reach them.
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.
Thankfully there's still a setting to always show scrollbars. For now.
I respect your choice, but I think it's unfair in this case specifically (but in many other cases too) to say it's about 'pretty' and 'better advertising'.
I read a lot on my mac, and I love the lack of scrollbar. It's one less 'element' on my reading experience (similar to almost all ebook readers not having chrome, like scrollbars and page numbers, or hiding chrome unless specifically requested). And because of how integral and 'decent' using the touchpad is (two finger scroll), I automatically scroll briefly to show the scrollbar in those few instances where I care about what position on the page I'm at.
Of course, that's just one example, but I know many others who feel similarly. 'Apple knows best' doesn't just mean marketing and pretty, it often means decent choices that are good for a large percentage of people, and yes, you have to accept that.
I find apple does do a lot of stuff that doesn't work for me. Even the lack scroll bars I rather hate when I use Finder (and don't get me started on that!). I use an android phone for that very reason.
I don't always like the choices that apple makes for me, and I might reach a point where I opt out completely. I'm just saying that in this case I think apple made a risky but decent choice, that wasn't just about 'pretty' or 'marketing'.
I read a lot on my mac, and I love the lack of scrollbar. It's one less 'element' on my reading experience (similar to almost all ebook readers not having chrome, like scrollbars and page numbers, or hiding chrome unless specifically requested). And because of how integral and 'decent' using the touchpad is (two finger scroll), I automatically scroll briefly to show the scrollbar in those few instances where I care about what position on the page I'm at.
Of course, that's just one example, but I know many others who feel similarly. 'Apple knows best' doesn't just mean marketing and pretty, it often means decent choices that are good for a large percentage of people, and yes, you have to accept that.
I find apple does do a lot of stuff that doesn't work for me. Even the lack scroll bars I rather hate when I use Finder (and don't get me started on that!). I use an android phone for that very reason.
I don't always like the choices that apple makes for me, and I might reach a point where I opt out completely. I'm just saying that in this case I think apple made a risky but decent choice, that wasn't just about 'pretty' or 'marketing'.
I actually agree with you--I prefer for the scrollbar to remain visible. In my preferred reading environment, a Windows PC running Firefox, it does remain visible. I like clean design, but not at the expense of function. I am firmly of the opinion that too much functionality has been sacrificed from modern user interfaces at the altar of simplicity.
I'm nevertheless of the point of view that the content author should not fuss with these specific particulars, leaving them instead to the discretion of the designers of the reading environment itself. The consumer of the content can then weigh the design of those elements when selecting a preferred reading environment.
I'm nevertheless of the point of view that the content author should not fuss with these specific particulars, leaving them instead to the discretion of the designers of the reading environment itself. The consumer of the content can then weigh the design of those elements when selecting a preferred reading environment.
In principle I agree with you. In this case apple's decision causes actual problems with content. Putting stuff in a scrollable iframe, or overflow scroll pane now involves carefully instructing people on how to scroll it. Or you force your own custom scrollbars. Or just not have scrollable panes-- you could argue that is a good thing, but sometimes they are unavoidable. Like, for instance, here on HN if someone happens to post an extremely long code segment.
on an ipad use two fingers to scroll it.
Do you get my point? Is the above a problem for HN or for Apple or for the User to puzzle out?
In Safari, there's no visual indication that the content is horizontally scrollable. That's a problem.
In Firefox, there's a big scroll bar. This scroll bar consumes more visual space than the content it scrolls. That's an absurdity.
Scrollbars are a legacy UI element, a throwback to an era before scrolling mice and trackpads. You nicely illustrated a problem, but your proposed solution makes no sense on modern computers with dedicated scrolling gestures.
In Firefox, there's a big scroll bar. This scroll bar consumes more visual space than the content it scrolls. That's an absurdity.
Scrollbars are a legacy UI element, a throwback to an era before scrolling mice and trackpads. You nicely illustrated a problem, but your proposed solution makes no sense on modern computers with dedicated scrolling gestures.
> Scrollbars are a legacy UI element, a throwback to an era before scrolling mice and trackpads
I think there's disagreement about that here, which in a manner of speaking, is behind the mixed opinions expressed in this thread.
I for one do not seek a browser without a scrollbar even though my mouse has a scroll-wheel. Making very large adjustments to my scroll position using the wheel is annoying: either I spin the wheel repetitively or I click the wheel and enter a scroll mode where the pointer's distance from a start point adjusts a velocity of scroll that continues until I click again. Both are much more fussy than just picking the scrollbar tack up and dragging it to the point I want to reach.
I don't even like that in IE 10 (Metro) the scrollbar disappears on my Surface Pro with its touch screen. Luckily for me, IE 10 (desktop) retains the scrollbar.
I think there's disagreement about that here, which in a manner of speaking, is behind the mixed opinions expressed in this thread.
I for one do not seek a browser without a scrollbar even though my mouse has a scroll-wheel. Making very large adjustments to my scroll position using the wheel is annoying: either I spin the wheel repetitively or I click the wheel and enter a scroll mode where the pointer's distance from a start point adjusts a velocity of scroll that continues until I click again. Both are much more fussy than just picking the scrollbar tack up and dragging it to the point I want to reach.
I don't even like that in IE 10 (Metro) the scrollbar disappears on my Surface Pro with its touch screen. Luckily for me, IE 10 (desktop) retains the scrollbar.
Good points. I should revise what I wrote to touch-enabled scrolling hardware.
With a scroll wheel, both fine and gross movements are more difficult. The scroll wheel has a fixed set of positions, and is optimized for scrolling a line or two at a time. I also have never liked the modal "scroll mode" that you describe.
With a magic mouse or scrolling trackpad, you get a much larger surface area available for scrolling, and there are more gradations. Inertia scrolling also makes it easy to scroll to the bottom or top of documents quickly: you can quickly "flick" to get to the bottom or top, which feels pretty natural.
As a result, I find I interact with the scroll bar a lot less on my MacBook Air than I do on my scroll-wheel equipped desktop. I'm not sure what the situation is like on Windows though.
With a scroll wheel, both fine and gross movements are more difficult. The scroll wheel has a fixed set of positions, and is optimized for scrolling a line or two at a time. I also have never liked the modal "scroll mode" that you describe.
With a magic mouse or scrolling trackpad, you get a much larger surface area available for scrolling, and there are more gradations. Inertia scrolling also makes it easy to scroll to the bottom or top of documents quickly: you can quickly "flick" to get to the bottom or top, which feels pretty natural.
As a result, I find I interact with the scroll bar a lot less on my MacBook Air than I do on my scroll-wheel equipped desktop. I'm not sure what the situation is like on Windows though.
> I'm not sure what the situation is like on Windows though.
Us poor Windows users have to hike few miles, find the cursor, lift and carry it on the back for a mile to get it to where we want it to, and then place it there. After all that, the page moves an inch.
Us poor Windows users have to hike few miles, find the cursor, lift and carry it on the back for a mile to get it to where we want it to, and then place it there. After all that, the page moves an inch.
I didn't propose a solution. I asked a question: Whose problem is it to solve? The user's? Apple's? HN's?
Apple certainly took it upon themselves to cause the problem. What's your proposed solution?
Apple certainly took it upon themselves to cause the problem. What's your proposed solution?
Scrollbars are hidden by default if OSX detects a Magic mouse/trackpad but there's nothing stopping anyone from changing that to always shown (or always hidden!), as well as the scroll direction.
Maybe the solution is a prompt for a decision the first time OSX starts up, at the same time as the user is creating their account?
Maybe the solution is a prompt for a decision the first time OSX starts up, at the same time as the user is creating their account?
add a prompt you say?
do you think anyone actually reads prompts? or do they just dismiss them as quickly as possible, since they're in the way of the actual task?
I do get your point, and it's a good one. My opinion about allowing the user the luxury of having selected their preferred reading environment isn't so inflexible to say that you shouldn't afford users some concessions in a scenario such as this.
On my PC, I of course do see a scrollbar. In fact, I probably would not at first even realize that I need to instruct viewers on other platforms to interact with the content in any unusual manner. But once aware of it, given the capability to design my content differently to avoid the situation described, I would go with that. Failing that option, I would probably just put instructions in as you've done here.
I would fairly steadfastly refuse to implement my own scrollbar functionality because I'd likely fail to implement that in a manner all users on all devices would understand intuitively.
For the majority of scenarios, the browsers' default behavior will match the users' expectations and they will be able to consume the content I've created in the fashion with which they are accustomed.
As an aside, this conversation reminds me that legacy versions of IE (and maybe current versions; I've not checked) allowed one to affect the appearance of the browser's scrollbar through CSS.
On my PC, I of course do see a scrollbar. In fact, I probably would not at first even realize that I need to instruct viewers on other platforms to interact with the content in any unusual manner. But once aware of it, given the capability to design my content differently to avoid the situation described, I would go with that. Failing that option, I would probably just put instructions in as you've done here.
I would fairly steadfastly refuse to implement my own scrollbar functionality because I'd likely fail to implement that in a manner all users on all devices would understand intuitively.
For the majority of scenarios, the browsers' default behavior will match the users' expectations and they will be able to consume the content I've created in the fashion with which they are accustomed.
As an aside, this conversation reminds me that legacy versions of IE (and maybe current versions; I've not checked) allowed one to affect the appearance of the browser's scrollbar through CSS.
I believe it to be neither and as a counterpoint ask if it really is a problem as you frame it. Scrolling on a touch enabled device, and all Apple devices are supplied touch enabled in one way or another, is performed differently. It is instinctive using OS X to scroll with 2 fingers. Obviously, this is a learned behaviour for adults that have been around computers for a while, but an intuitive one none the less. The old paradigm of scrollbar with arrows and thumb is redundant with touch input, to the point it actually gets in the way. What we have now in OS X and iOS serves more as a page location indicator that occupies the same position in the container.
Heh, funnily enough, it scrolls with one finger on the beta iOS. Although, I think they may have changed that in a previous safari update.
Minor correction: on an iPad, you can also scroll that text with one finger.
That is new. Apple has seen the light, finally.
Sometimes I'd like to have control over my full page representation and width across browsers and OSes, and scrollbars styling is missing or non-uniform or unreliable.
EDIT: Scrollbars are inside viewport, meaning they're effectively part of my document, and I'd like to have a say how they look like, the same as form elements.
EDIT: Scrollbars are inside viewport, meaning they're effectively part of my document, and I'd like to have a say how they look like, the same as form elements.
Funny, I just replied to TheZenPsycho and mentioned in an aside that I recall older IE versions (and possibly recent ones as well) did allow the content author to apply styles to the scrollbar with CSS. I have had mixed feelings about that but in general, I would agree with you that it should be open to styling.
I agree because I assume the scrollbar would retain its functionality. By styling it, I don't lose, for example, individual adjustment buttons at each extreme, drag to scroll, and paging by clicking the empty space on a Windows PC.
On the other hand, if I style it, I'd probably want to do so in a context-sensitive manner, applying a specific look for mouse-enabled contexts and another for touch-enabled contexts. And then I end up have to make the same decisions Apple and Microsoft have had to. :)
I agree because I assume the scrollbar would retain its functionality. By styling it, I don't lose, for example, individual adjustment buttons at each extreme, drag to scroll, and paging by clicking the empty space on a Windows PC.
On the other hand, if I style it, I'd probably want to do so in a context-sensitive manner, applying a specific look for mouse-enabled contexts and another for touch-enabled contexts. And then I end up have to make the same decisions Apple and Microsoft have had to. :)
Not just IE; Webkit allows absurdly extensive CSS customization of the scrollbar. You can see it in action on Google+, or an overview of the features here:
http://css-tricks.com/custom-scrollbars-in-webkit/
http://css-tricks.com/custom-scrollbars-in-webkit/
Ugh, no. I want every UI control to look the same, everywhere. The scrollbars are not effectively a part of your document. That's not the case for a browser, or an office app, or anything that displays scrolling content. They're a property of the container, not the document.
I guess it comes down to personal taste. I for one like that they hide away, and I can bring them back just by holding down for two fingers on my trackpad.
Thankfully you can make scroll bars persistent in System Preferences.
Thankfully you can make scroll bars persistent in System Preferences.
The "personal taste" argument comes up a lot in usability conversations. I find it to be incredibly weak. I might personally prefer to walk blindfolded across busy roadways. But that doesn't make it broadly easy or advisable.
It's just simply a bad decision. There shouldn't be a preference, it should just be on by default, end of story. It only makes sense on iPads.
The fact that it's auto-hide by default means that most mac owners will just simply have their machines set to auto-hide the scrollbar, and very likely have no idea that a setting exists- Then blame it all on the content owners for making a bad/hard to use site. (especially if they decide they want a scrollable pane with OS specific scrollbars on it)
To expand a little bit, even something as seemingly arbitrary, like driving on the right or left side of the road, is not a matter of preference. If you pick the wrong one in a certain country, you can equally get yourself killed as with your other more obviously wrong "preferences". There is value in having everything work in a standard way.
It's just simply a bad decision. There shouldn't be a preference, it should just be on by default, end of story. It only makes sense on iPads.
The fact that it's auto-hide by default means that most mac owners will just simply have their machines set to auto-hide the scrollbar, and very likely have no idea that a setting exists- Then blame it all on the content owners for making a bad/hard to use site. (especially if they decide they want a scrollable pane with OS specific scrollbars on it)
To expand a little bit, even something as seemingly arbitrary, like driving on the right or left side of the road, is not a matter of preference. If you pick the wrong one in a certain country, you can equally get yourself killed as with your other more obviously wrong "preferences". There is value in having everything work in a standard way.
This smacks of fascism, if I may be so blunt. It's preference as long as you do not hurt with your decisions any one else. Not turning your headlights on at night while driving on a public street is NOT a preference you can have, because it effects others. Not turning your headlights on while driving on your own exclusive and private drive way IS preference, as the only person you are likely to kill is your self. Not having any scroll bars on is preference because the only one it effects is the user.
I think a more important question is, what kind of design are you using that people can not instinctually figure out that they need to scroll? If your site needs to be scrolled horizontally (and its not painfully obvious that that's the case) it's a bad design. And if your user can not figure out that they need to scroll vertically, the are an idiot, or it's a truly bad design. In the former case, stop catering to the stupidest 5% of the population. Just like with people who use IE 7 in 2013, you'll never be able to properly serve them. And if its because of your design, redesign the damn site rather then pushing your preference onto the user.
I think a more important question is, what kind of design are you using that people can not instinctually figure out that they need to scroll? If your site needs to be scrolled horizontally (and its not painfully obvious that that's the case) it's a bad design. And if your user can not figure out that they need to scroll vertically, the are an idiot, or it's a truly bad design. In the former case, stop catering to the stupidest 5% of the population. Just like with people who use IE 7 in 2013, you'll never be able to properly serve them. And if its because of your design, redesign the damn site rather then pushing your preference onto the user.
I'm sorry, what smacks of fascism? The choice, in this case, is Apple's, inflicted on all of its customers.
If anything that is not obviously harmful can be reduced to mere "preference" then what is the point of hiring designers? just deliver raw html code and a textfield for users to write in their own css, right?
Of course, I admit this is reducing the argument to absurdity, but so is calling my position "fascism".
In truth, as product designers we make all kinds of decisions on behalf of our users. We use a system of judgement to rank the "goodness" and the "badness" of those decisions based on whether they make our user's lives easier or harder. (or make us more or less money, depending on your ethos)
In what way does hiding the scrollbar improve anyone's lives? In the cases where it demonstrably makes user's lives harder, explain why that doesn't matter?
If anything that is not obviously harmful can be reduced to mere "preference" then what is the point of hiring designers? just deliver raw html code and a textfield for users to write in their own css, right?
Of course, I admit this is reducing the argument to absurdity, but so is calling my position "fascism".
In truth, as product designers we make all kinds of decisions on behalf of our users. We use a system of judgement to rank the "goodness" and the "badness" of those decisions based on whether they make our user's lives easier or harder. (or make us more or less money, depending on your ethos)
In what way does hiding the scrollbar improve anyone's lives? In the cases where it demonstrably makes user's lives harder, explain why that doesn't matter?
Some people argue that Apple limits the users by not giving them enough options. You are of the opinion that Apple provides entirely too many user options. Not only should the users always have scroll bars on, but they also should not have the ability to turn them off. (correct me if I misunderstood)
what "some people" argue is irrelevant here. Who are "some people" anyway? "Apple provides entirely too many user options" is not in any way the argument I've made. My argument is that having this specific option is a mistake. If you want the generalised form of that argument, it is:
1. this, and other "preferences" are not arbitrary or meaningless. They have real consequences (even if the only real consequence is minor annoyance)
2. the presentation of too many choices is in fact, a real and well documented anti-pattern in UI-design. Too many choices is cognitive overload. Programmers like choices. programmers like power. but ordinary mortals don't care what colour their window title bars are, as long as the colour doesn't get in the way of their job.
3. Given the above, it is the UI designer's responsibility to be very opinionated about what the defaults of a system should be, and what should be configurable as a choice. (the fewer choices the better, generally, from a design perspective.)
4. as a corollary to that, I am aware that "some people" are uncomfortable about Apple's lack of configuration options. Those people are not designers, and should not ever be put in the position of designing a UI. Or you end up with a monstrosity like the desktop linux ecosystem. It's essentially an argument from ignorance of the research.
1. this, and other "preferences" are not arbitrary or meaningless. They have real consequences (even if the only real consequence is minor annoyance)
2. the presentation of too many choices is in fact, a real and well documented anti-pattern in UI-design. Too many choices is cognitive overload. Programmers like choices. programmers like power. but ordinary mortals don't care what colour their window title bars are, as long as the colour doesn't get in the way of their job.
3. Given the above, it is the UI designer's responsibility to be very opinionated about what the defaults of a system should be, and what should be configurable as a choice. (the fewer choices the better, generally, from a design perspective.)
4. as a corollary to that, I am aware that "some people" are uncomfortable about Apple's lack of configuration options. Those people are not designers, and should not ever be put in the position of designing a UI. Or you end up with a monstrosity like the desktop linux ecosystem. It's essentially an argument from ignorance of the research.
>My argument is that having this specific option is a mistake.
That's a belief. I don't see any argument here. Why is it a mistake?
Perhaps modern users, not tied to a legacy of scrollbars, could not care less about them? Perhaps 95% of users (with the exception of hackers) not even use them or notice them when they are there?
>Those people are not designers, and should not ever be put in the position of designing a UI.
Whereas you are? And we should take your opinion on scrollbars over Apple designer's one, because?
That's a belief. I don't see any argument here. Why is it a mistake?
Perhaps modern users, not tied to a legacy of scrollbars, could not care less about them? Perhaps 95% of users (with the exception of hackers) not even use them or notice them when they are there?
>Those people are not designers, and should not ever be put in the position of designing a UI.
Whereas you are? And we should take your opinion on scrollbars over Apple designer's one, because?
"Designers" should never be put in a position of designing a UI. Claiming the mantle of "designer" usually seems to reveal a preference for static aesthetics over functional utility.
Nearly every time I see someone talking about "design" in the realm of user interfaces, or about making software "beautiful", they're invariably attempting to use concepts applicable to media intended for the presentation of information to a viewer in the context of an interface intended to facilitate dynamic interaction between a functional tool and the user, and it always seems to make the software more limited, less productive, and more frustrating to use.
A user interface is about exposing software functionality and enabling users to maximize their efficient use of their tools. Optimizing a UI to look good in a screenshot means not optimizing the UI to provide efficient access to the functionality of the application, and not optimizing the flexibility of the application for users to adapt it to their own priorities and work styles.
This trend of attempting to exercise top-down control over user experience needs to end, and software developers need to start paying attention to what users are actually trying to do with the products they build, instead of deferring to inappropriately-applied theoretical models offered by visual designers.
Nearly every time I see someone talking about "design" in the realm of user interfaces, or about making software "beautiful", they're invariably attempting to use concepts applicable to media intended for the presentation of information to a viewer in the context of an interface intended to facilitate dynamic interaction between a functional tool and the user, and it always seems to make the software more limited, less productive, and more frustrating to use.
A user interface is about exposing software functionality and enabling users to maximize their efficient use of their tools. Optimizing a UI to look good in a screenshot means not optimizing the UI to provide efficient access to the functionality of the application, and not optimizing the flexibility of the application for users to adapt it to their own priorities and work styles.
This trend of attempting to exercise top-down control over user experience needs to end, and software developers need to start paying attention to what users are actually trying to do with the products they build, instead of deferring to inappropriately-applied theoretical models offered by visual designers.
Design is how it works. Not how it looks. How it looks is properly called "style".
If you have found a "Designer" who is overly concerned with how it looks and not so much how it works, the conclusion to reach is that you have found a bad designer, not that all "designers" are concerned only with aesthetics.
If you have found a "Designer" who is overly concerned with how it looks and not so much how it works, the conclusion to reach is that you have found a bad designer, not that all "designers" are concerned only with aesthetics.
See argument upstream-
in summary, autohiding scrollbars:
Pros:
> Whereas you are?
yes
> And we should take your opinion on scrollbars over Apple designer's one, because?
because I am right and Apple is wrong.
On top of that, the reaction to my position is so weird. Oh Zen, if you had your way we would be FORCED by your tyrannical fascist ways to look at ugly scrollbars ALL the time instead of just some of the time. :(
Pros:
Looks tidier sometimes
Causes frustration and confusion.
> Whereas you are?
yes
> And we should take your opinion on scrollbars over Apple designer's one, because?
because I am right and Apple is wrong.
On top of that, the reaction to my position is so weird. Oh Zen, if you had your way we would be FORCED by your tyrannical fascist ways to look at ugly scrollbars ALL the time instead of just some of the time. :(
>because I am right and Apple is wrong.
A, ok then. Case closed.
A, ok then. Case closed.
We actually like to give choices so we don't have to make decisions. Making decisions without seeking like an arrogant asshole is difficult.
yeah, designers/programmers need to learn to spine-up, and make decisions instead of just leaving everything up to the user, even if it's just better defaults, and leaving a .ini file around for the people who desperately need to change something.
I am of an opinion that one only needs a scroll bar when scrolling. On OSX the scroll bars are always visible when scrolling. You think you know better, and would like to overwrite my preference with yours. I don't think we will ever agree. I like options you like rules.
What does autohiding the scrollbars add to your life? How does it improve it? You avoid this question. You have no answer.
On the other hand, the presence of this option causes confusion and frustration, and, one could argue, significant economic harm as a result of the confusion and frustration.
Why is your preference (which you have not, and possibly cannot explain) more important than the confusion and frustration of everyone else?
On the other hand, the presence of this option causes confusion and frustration, and, one could argue, significant economic harm as a result of the confusion and frustration.
Why is your preference (which you have not, and possibly cannot explain) more important than the confusion and frustration of everyone else?
I think you have a strong preference in this case, and you wish to force your preference upon people in the name of the "common good." I'll let you figure out the definition of that behavior all on your own.
Instead of arguing about your clear authoritarian tendencies, here is my main reasons why I think hiding scroll bars is a good idea:
1. Information Overload: You should only show user information when they need it. Users need to know how much of the document is remaining, or where they are currently located, when they are scrolling. If they need the data, they are but a touch away from it.
2. Scroll Bars create anxiety in users who are actually reading your website. If you are under slight time pressure, as most of us are at all times, you will concentrate on your own progress through the page, rather then engaging with the content.
3. Shifting: Even on operating systems where it is the convention to always show the scroll bar, the scroll bar still disappears when there is no scrollable content. Many, websites are centered, and they have a tendency to shift the center of the website by the width of the website when the scrollbar appears and disappears. I find that behavior annoying.
4. Shifting in text boxes: when the scroll bar appears, once you typed enough text to fill the box, the text has to reflow, in order to accommodate the new scroll bar. I find this very annoying and distracting.
Finally, you keep referring to these mythical, internally confused people who keep reading only the tops of all the news articles and constantly wonder why the rest is cut off. Can you show me the following:
1. Any site that looks confusing on a mac without scroll bars. Something I can show to people and gauge their reaction.
2. Any study, article, or survey done on the subject that states that it's a severe problem. Not personal anecdotes, but actual evidence of some kind.
Instead of arguing about your clear authoritarian tendencies, here is my main reasons why I think hiding scroll bars is a good idea:
1. Information Overload: You should only show user information when they need it. Users need to know how much of the document is remaining, or where they are currently located, when they are scrolling. If they need the data, they are but a touch away from it.
2. Scroll Bars create anxiety in users who are actually reading your website. If you are under slight time pressure, as most of us are at all times, you will concentrate on your own progress through the page, rather then engaging with the content.
3. Shifting: Even on operating systems where it is the convention to always show the scroll bar, the scroll bar still disappears when there is no scrollable content. Many, websites are centered, and they have a tendency to shift the center of the website by the width of the website when the scrollbar appears and disappears. I find that behavior annoying.
4. Shifting in text boxes: when the scroll bar appears, once you typed enough text to fill the box, the text has to reflow, in order to accommodate the new scroll bar. I find this very annoying and distracting.
Finally, you keep referring to these mythical, internally confused people who keep reading only the tops of all the news articles and constantly wonder why the rest is cut off. Can you show me the following:
1. Any site that looks confusing on a mac without scroll bars. Something I can show to people and gauge their reaction.
2. Any study, article, or survey done on the subject that states that it's a severe problem. Not personal anecdotes, but actual evidence of some kind.
I forgive you for being confused and missing this earlier comment...
https://news.ycombinator.com/item?id=6247596
it's just, that you were supposed to scroll to actually read it. There was no way you could have known, since you're on a mac.
I would like to add that your use of the word "fascist" and "authoritarian" is a grave disrespect to those who are survivors of authoritarian regimes. If I were you I would think much more carefully before throwing such words around over scrollbar preferences
it's just, that you were supposed to scroll to actually read it. There was no way you could have known, since you're on a mac.
I would like to add that your use of the word "fascist" and "authoritarian" is a grave disrespect to those who are survivors of authoritarian regimes. If I were you I would think much more carefully before throwing such words around over scrollbar preferences
You are right, having lived the first 16 years of my life in USSR, I probably know nothing about totalitarian regimes.
and you still think a scrollbar preference is worth calling "authoritarian"? odd. Maybe the soviet union wasn't as bad as everyone says, if that is the standard to judge by.
This case is almost certainly preference. I prefer the indicators hidden, you prefer them on.
You prefer your car headlights off at night. I prefer them on.
Completely preference, right?
You missed my point. Just invoking the word "preference" is a weak argument. You need something more like an actual argument. With evidence and logic.
You missed my point. Just invoking the word "preference" is a weak argument. You need something more like an actual argument. With evidence and logic.
And reverting to reductio ad absurdum in an attempt to prove a logically weak position is better? Your closing works both ways. Your logic as far as I can see has basically been, to paraphrase; 'it annoys me'.
All recent (less than 3 years) Apple devices are sold either as touch devices or with touch enabled peripherals. Gestural interaction is the default paradigm of interaction on iOS/OS X (this is also true of Android devices). These users are largely used to this behavior, which can be changed if there is a desire to do so. This behavior does not affect users of other systems that don't support gestural interaction. There is no need therefore to cater specifically for Apple (or other) users as they, through daily interaction with their device, will intuit what to do. It puzzles me why the scrollbar still exists as an interaction device elsewhere. I really had to think about where and how they appear because I am so used to them simply not being there.
Perhaps you are looking at them in the wrong way. Where once the scrollbar was used for scrolling, it is now used to indicate the position the reader has reached on a page.
All recent (less than 3 years) Apple devices are sold either as touch devices or with touch enabled peripherals. Gestural interaction is the default paradigm of interaction on iOS/OS X (this is also true of Android devices). These users are largely used to this behavior, which can be changed if there is a desire to do so. This behavior does not affect users of other systems that don't support gestural interaction. There is no need therefore to cater specifically for Apple (or other) users as they, through daily interaction with their device, will intuit what to do. It puzzles me why the scrollbar still exists as an interaction device elsewhere. I really had to think about where and how they appear because I am so used to them simply not being there.
Perhaps you are looking at them in the wrong way. Where once the scrollbar was used for scrolling, it is now used to indicate the position the reader has reached on a page.
The logic, my friend, is that the result of hiding the scrollbars, is this
https://news.ycombinator.com/item?id=6247596
though, if you are on a mac, I can understand if you missed that whole post.
https://news.ycombinator.com/item?id=6247596
though, if you are on a mac, I can understand if you missed that whole post.
No, I read it easily; I simply used the trackpad to scroll. I disregarded it to because the premise is flawed, as has been pointed out to you. You don't have to agree with everyone else, but in real world use, with real world people, this is considerably less of an issue that you are making it to be.
Watch a child use touch-based interface. It's enlightening. They intuit the required interaction with consummate ease. Having observed how individuals still use scroll bars by tapping on the arrows and not realising that it's quicker to grab the bar, to me illustrates that using and relying on scroll bars is as much a learned behaviour, and a less intuitive one at that.
Watch a child use touch-based interface. It's enlightening. They intuit the required interaction with consummate ease. Having observed how individuals still use scroll bars by tapping on the arrows and not realising that it's quicker to grab the bar, to me illustrates that using and relying on scroll bars is as much a learned behaviour, and a less intuitive one at that.
I can't count the number of times my coworkers have said something along the lines of, "What are you talking about? I never saw anything about... oh, wait... I didn't realize it was scrollable. Never mind."
After that happens a couple of times, they eventually find their way to the System Preferences.
After that happens a couple of times, they eventually find their way to the System Preferences.
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?
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?
> But when scroll wheels were introduced, the scroll bar became less necessary.
This isn't true; scroll wheels are more convenient than using the scroll bar for progressing through a document sequentially, but there's no facility for absolute positioning using a scroll wheel. You can't move to a specific point on the page with the wheel, and can only move in one direction or the other at a speed limited by how fast you can physically spin the wheel on the mouse.
Probably the best alternative to a scrollbar for absolute positioning that I've ever seen is the "document map" feature of some text editors, which provides a vertical thumbnail of the entire document in a column that works similarly to the way a mini-map in a game works: you see the layout of the document, zoomed out, and can click on exactly where you want to go.
This isn't true; scroll wheels are more convenient than using the scroll bar for progressing through a document sequentially, but there's no facility for absolute positioning using a scroll wheel. You can't move to a specific point on the page with the wheel, and can only move in one direction or the other at a speed limited by how fast you can physically spin the wheel on the mouse.
Probably the best alternative to a scrollbar for absolute positioning that I've ever seen is the "document map" feature of some text editors, which provides a vertical thumbnail of the entire document in a column that works similarly to the way a mini-map in a game works: you see the layout of the document, zoomed out, and can click on exactly where you want to go.
Tell that to my mom. The only way she scrolls is to use the scroll bar itself as the interface, clicking the buttons. I try over and over again to convince her the scroll wheel is faster, and show her. She hates it, she strongly prefers the old way. She is old school. She can't get used to the scroll wheel. I'm not sure why. I'm not sure if it is just muscle memory or what.
So far I only met trackpad magic/mouse scrolling on a mac or laptop. That leaves a lot of desktop computers out.
I am typing this on a iMac 2006 and even if the mouse has a wheel I still grab the bar because it's more precise (it allows to put the text where I want) than scrolling (which just increments height offset by a proportional fixed value).
I am typing this on a iMac 2006 and even if the mouse has a wheel I still grab the bar because it's more precise (it allows to put the text where I want) than scrolling (which just increments height offset by a proportional fixed value).
When my mouse died, I got a magic trackpad instead. It's much more precise than using a mouse, you don't need to keep hunting the scroll bar everytime you scroll, and with all the gestures I don't even miss the mouse anymore. With a little practice I'm even able to do Photoshop work from the trackpad.
That's not a valid argument against scrollbars, it's a valid argument for magic pad.
Magic Trackpad prevails, at least in this case.
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'.
<select multiple> sucks wherever it goes.
and when the designer makes it smaller in height, it sucks ten times more.
and when the designer makes it smaller in height, it sucks ten times more.
Right, but that's largely the fault of the browser, not the OS or the concept. Knowing that it's not the smartest choice for a webdesigner, but it's essentially equivalent to a bunch of checkboxes with labels.
What is user hostile is some application developer contravening the platform's UI conventions without a very, very good reason. "Because I want everything to work the same across platforms" is not nearly sufficient. I dislike this very, very much and I go out of my way to avoid using software that does this. This problem is particularly awful on the web, and this is a big part of the reason I avoid web applications wherever possible.
I like having the scrollbars hidden. If I want to see my progress, I just put two fingers on my trackpad.
I use the default scroll bars setting in OS X (Show scrollbars automatically based on mouse or trackpad movement), and I'm never not aware of the page length.
I see it whenever I switch tabs, and I see it whenever I start to scroll. I always have an idea of how long the page is and I don't need a constant reminder of it. It's not like it's a precision instrument anyway - who can precisely gauge the length of an article based on scroll bar length and current window size? Rain Man?
I can switch back to the always-on behavior if I want to, but I haven't wanted to.
I see it whenever I switch tabs, and I see it whenever I start to scroll. I always have an idea of how long the page is and I don't need a constant reminder of it. It's not like it's a precision instrument anyway - who can precisely gauge the length of an article based on scroll bar length and current window size? Rain Man?
I can switch back to the always-on behavior if I want to, but I haven't wanted to.
Agreed! OS X users can choose when to show a scrollbar: it's one of the 'General' system preferences.
Reimplementing the scrollbar for users who have not taken the option to show the scrollbar is deliberately going against their stated preference.
Reimplementing the scrollbar for users who have not taken the option to show the scrollbar is deliberately going against their stated preference.
> Reimplementing the scrollbar for users who have not taken the option to show the scrollbar is deliberately going against their stated preference.
While in general I agree with your post, I think saying it goes "against their stated preferences" is a bit strong considering that (from what I've read here) not showing the scrollbar is the default. In my experience many people never change the defaults.
While in general I agree with your post, I think saying it goes "against their stated preferences" is a bit strong considering that (from what I've read here) not showing the scrollbar is the default. In my experience many people never change the defaults.
Especially since NiceScroll isn't very nice. The scrolling is jerky. Leave the OS defaults for scrolling. On OS X, there is an option to keep the scrollbar always visible, and the OS itself decides to do this if you don't have an input device capable of scrolling. Some janky 3rd party scroll library isn't going to know any of this information.
> Especially since NiceScroll isn't very nice. The scrolling is jerky.
Interesting, on what devices? We are using NiceScroll for a widget right now and it's very smooth, even on my Nexus 4.
Interesting, on what devices? We are using NiceScroll for a widget right now and it's very smooth, even on my Nexus 4.
On my MacBook Pro it's bad. The scrolling is jerky and doesn't feel right, like there's too much inertia and too much momentum, and you can't stop it once it's scrolling. On iOS there is to little momentum. There's also no point in it. Safari already scrolls web pages, why re-implement it in javascript? You're also losing new features OS X 10.9 does under the hood, like pre-rendering off-screen content to enable smooth 60fps scrolling. Let the OS do its job.
Yep. It's not enough to maintain 60fps (which, even in 2013, isn't always possible); if you don't want scrolling through a large amount of content to feel weird and unnatural, you really should copy the native acceleration curve, something which I have yet to see done for iOS (even Apple's own JavaScript has screwed this up). Since iOS at least has supported -webkit-overflow-scrolling: touch for years now, there's usually no point.
There is a point of it as inline native scrollbars in a rather small box look absolutely horrible.
Have you tried 'position: fixed' on mobile? Position fixed support is a mess across mobile webkit browsers, and last time I checked the most bulletproof way to implement it was still to put the content in a scrollable container - that's the point of jquery libs like iscroll/nicescroll that try to emulate native scrollbars.
Completely agree. I constantly have this fight with designers, disappearing scrollbars may not be (and I don't think it is) the best experience, but it is the system experience. It's far easier to explain to a casual user that on OS X you have to touch the trackpad to see the scroll position in all apps rather then "except that app that uses its own scrollbars that don't quite work right".
As unpopular as it might be I think he's got a point about this too. it's just that it's not very clearly articulated.
At the end of the day, customers and others browsing your site are unlikely to understand why there's no visual indication on their mac, and why you didn't put one on your site.Sooo.. if you're forced to put a visual indicator, at the very least least, make it vertical for page scrolling.
(and also, thanks for nothing, Apple UI)
At the end of the day, customers and others browsing your site are unlikely to understand why there's no visual indication on their mac, and why you didn't put one on your site.Sooo.. if you're forced to put a visual indicator, at the very least least, make it vertical for page scrolling.
(and also, thanks for nothing, Apple UI)
They either need to learn how to use their macs or switch to Windows. Fixing ignorant OSX users expectations isn't and shouldn't be a webdev's problem.
Totally agree. Here the author (of the original post) contradicts himself. Users of OS X have chosen to use a UI with tiny hiding scrollbars and likely are accustomed for that. Let the browser natively handle the scrollbars, any custom hack may cause usability/technical/performance problems on certain platforms sooner or later.
> "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.
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.
> 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!!!").
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!!!").
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.
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.
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
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
Oberon does exactly this. X and Plan 9 do so as well, but without the markers.
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
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.
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.
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.
It's likely things can be improved further, but IMO this is a better starting point than what we had before.
You can change it in system preferences -> general
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.
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.
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?
* 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?
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.
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.
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-.... 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.
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?"
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
[1] - http://www.w3.org/TR/html5/single-page.html
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.
A guy makes a fun little feature for his blog and gets an entire write up on how he's doing it wrong. Awesome.
Wasn't meant as a direct dig at anyone, just making my observations :)
Well from a UX perspective, it was a great write-up.
Thank you! As my first blog post, this is quite encouraging haha
"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.
Some experiments may go wrong, and it is ok that you point that out, but telling them not to reinvent anything is another thing.
Just an observation from me: You make it hard to find a link back to your main blog.
Don't worry, there's nothing else there yet.
But there will be eventually, and in the meantime people want to subscribe.
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
I don't know... Reinventing the scrollbar can be fun: http://www.chrisnorstrom.com/2011/02/creation-introducing-th...
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.
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.
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.
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.
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.
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.
Very frustrating.
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 :)
Careful not to read this too fast: I thought it was criticizing http://ricostacruz.com/nprogress/ but it's not.
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 ;)
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 ;)
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.
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.
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.
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.
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.
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?
Also, isn't the scroll bar really useful when you need to scroll up and down the page quickly by an arbitrary amount?
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 <- 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).
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 <- 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).
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.
It's not a problem that needs solving. OSX/iOS users are very used to this and it is second nature.
> “But how do you implement this” you ask? Easy. (Be warned though, this code is untested!)
Scrollbar within a scrollbar!
Scrollbar within a scrollbar!
<div style="height: 100%; overflow-y: auto">
Content
</div>
<div id="comments">...</div>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!
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.
[deleted]
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.
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.
Writers aren't typically paid by the word.
I don't know about 'typically', but it isn't uncommon among freelancer writers.
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....), and books on websites such as http://www.talesofmu.com/story/ and 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.
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.
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.
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"
> 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.
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.
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.
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.
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.
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.
>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.
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.
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.
Needless to say the project was years behind. I'm glad I never got too close to it.
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]
[Note: never said anything about custom scrollbars; just that websites with scrolling divs tend to look better on OSX]
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.
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.
"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?)
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?)
IMO that's in spite of their scollbars, not due to them.
> 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?)
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?)
Are you a mouse user or do you use a touchpad? I have a theory that the new OSX scrollbars only really work for touchpad users and everyone with a mouse hates them ;)
I'm a Mac user using a mouse and I love them, sorry.
> 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
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
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?
Was I the only one expecting a comments section to appear once I reached the bottom?
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!
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/
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.
Unity is even worse, with its overlay scrollbars.
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.
Yeah, Redfin does something similar, but we all know that Twitter and the endless-page killed the scrollbar as a useful meter.
It reminds me of the volume control in iPad some time ago, it was horizontal under the movie, it looked like the time bar.
But Ben! What happens when spiders crawl your site and can't find comment content?
Spiders should see the comments if you hide the comments with JS on page load instead of in the default CSS.
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.
Most mobile friendly articles are split across multiple pages to reduce the page size.
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.
Plus there's really no reason split them up. It's not a book, there's no limit on page length.
That's a terrible idea. Latency is your biggest concern on mobile, not bandwidth.
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.
Nice usability article on a site, where I can't find any button to go to the main blog.
Nice ad hominem.
It looks like there is not a "main blog" page to go to.
It looks like there is not a "main blog" page to go to.
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]
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.
The worst reinvention of the scrollbar was Google Wave.
Shudder.
Shudder.
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.
> 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.