The User Experience (UX) Of Custom Scrollbars
Since the beginning of time (or thereabouts), browsers have provided a native way to define a scrollable viewport for content. They're not the most beautiful things; but, they work really well, they're super easy to implement, and everyone knows exactly how to use them. When you build a custom scrollbar in your JavaScript application, you're creating a very clear-cut type of user experience (UX) - a sub-standard one.
| |
|
|
||
| |
 |
|
||
| |
|
|
Have you ever tried watching a movie or a tv show when the audio and video are out of sync? It drives you nuts right? Sometimes, the two are out of sync by such a small amount that you can't even tell which one (audio or video) is happening first. And yet, it drives you nuts. For me, personally, it makes watching the movie or tv show unbearable - I have to stop.
I bring this up to point out how good the human brain is at picking up on tiny deviations from expected behavior. The brain is an amazing pattern matching machine; and, when you start breaking patterns, even slightly, it creates a degree of experiential friction.
When implemented perfectly, your custom scrollbar will still not behave like a native browser scrollbar. Whether it's a small delay in reacting to the scroll-wheel or an inconsistent amount of easing in the movement, the human brain will quickly pick up on it; and, while the user might not be able to articulate what is going "wrong," it will represent a constant point of friction in the user experience.
And, that's when it's implemented perfectly. The worse the scrollbar implementation, the greater the friction (and subsequent user frustration).
This problematic experience doesn't just affect the users - it extends to the developer(s) as well. Not only does the custom scrollbar have to provide native action, it also has to provide native adaptation. This means that when the content in the scrollable area grows, the state of the scrollbar must change. When you use a native scrollbar, you get that for free. But, when you implement a custom scrollbar, you have to start watching for content changes programmatically. Depending on the type of application, this can be an expensive process, especially if your content can change at any time based on two-way data bindings.
Sometimes, there's nothing you can do about this. If you're trying to mimic a non-native scrollbar, you have to implement it programmatically. The desktop browser doesn't have iOS scrollbars; so, if you need to represent iOS scrollbars, you're on your own (or more likely you're depending on some existing JavaScript plugin or library).
But, if you're simply changing the design of a native scrollbar, then you're choosing, as a user experience designer, to create a user experience that deviates from the norm. In a not-great way. It's time that we start looking at custom scrollbar designs like "progressive enhancements" - use CSS to alter the scrollbar in browsers that support it; then, let the other browsers catch up.
Reader Comments
Great article,
I am a ColdFusion Developer never worked on HTML & CSS. Yet this article made sense to me. Keep writing like that. Kudos.
P.S. I also liked the line bellow "Tweet This" button.
@Ben ...
If you're working on serious, enterprise quality web apps, ExtJS is the best on the block for desktop and tablet apps...
Facebook. That scrollbar for the tickler drives me nuts - sometimes I mistake it for the system scrollbar (OS X Safari) even though the tickler scrollbar is much darker.
@Tushar,
Awesome, my man! Glad that we were able to connect on this :)
@Edward,
I've never actually used ExtJS myself, but I've heard really good things about it. And, I work with Cutter Blades, who I believe wrote a book or two on ExtJS, so I've got some great resources.
@Lola,
Yeah, good example of an odd scrollbar. Plus, I think it's really odd when you see two scrollbars right next to each other, which is probably why they try to hide the scrollbar when you're not hovering over the ticker. Also, I find it distracting the way the scrollbar keeps appearing and disappearing - just more visual distraction.
@Ben ...
Yeah, I don't have a lot of experience developing with ExtJS professionally either... I've worked with a few teams that used it in production and the results were quite impressive. Of course the developer we had leading the front-end design won awards for her work in Sencha Touch so YMMV :-)
As you know... there is a learning curve ... but it's not unlike any other feature rich framework...
I'm curious if you would say this applies on special items, say a div within a page which is scrollable, but already a non-standard page element, like a 3D transformed area?
If you're not scrolling the whole page, but a special content area, would design principles allow for customisation of the scrollbar to better sit around the area?
I'd also be curious why a page running on a decent machine these days would have perceptible "lag" when js is moving the scrollbar on a "scroll" event. Surely browsers these days run js reasonably fast, and a custom scrollbar height would adjust within 1 refresh (frame?) of the page?
Don
have a great day
Brilliant article, this line is just so perfect "a user experience that deviates from the norm. In a not-great way."
I have had users who saw a scrollbar in their iPhone/iPad and want the same in IE (that too in IE 7 or 8, can you believe it????).
Have a good one!!!
Cheers,
Prabhatt