Scrolling and Scrollbars

It’s so obvious, yet many insist on going against common sense: don’t mess with scrollbars if you want people to be able to use your site. Jakob Nielsen explains why in Scrolling and Scrollbars.

Posted on August 13, 2005 in Accessibility, Quicklinks, Usability

Comments

  1. Agreed! I always disliked customized scrollbars, and I’ve never seen the point, regardless of usability considerations.

    You don’t see too much of this going on nowadays, thankfully. Perhaps designers have finally got the message to leave them alone and focus on stuff that matters.

  2. Like midi music, frames, and animated GIFs everywhere, I’m glad this practice has fallen out of favor in today’s professionally designed web.

    That said, I do know some people - both designers and users - that like customized scrollbars. Most claim they enjoy how it makes the page seem more like a standalone application with a custom UI.

  3. Today you will see this customized scrollbars on amateur websites, how dont know there is a alternative to IE.

  4. August 14, 2005 by Matthean

    As a mod on a web development forum, I think we do a decent job of reminding people of the fact that scrollbars are to be left alone in terms of their coloring. I also get bugged about the overuse of scrollbars too.

  5. Mark C. The Nielsen article isn’t so much talking about those ugly colorized scrollbars people often do with CSS (in IE only), but non-standard scrollbars in their applications in general (web and non-web).

    I don’t think he even mentions the CSS colorized scrollbars, that is much too specific for the likes of Nielsen.

  6. This is all a bit confusing. The articles does state “Usability is almost always enhanced when you use the built-in scrollbars rather than design your own.”, together with guidelines of how scrollbars should work.

    But it also shows a screenshot of a color-modified scrollbar (the mini cooper one) as an example for a “working” usable scrollbar.

    So, I agree with the article in saying that a scrollbar, in html, flash, applications or whatever should “work as expected”, and that includes the visual aspect as well. But I also think (same as Nielsen, or did I not read it right?) that there’s nothing black-and-white wrong with coloring it, as long as the contrasts between the scrollbar elements are kept. Would you call that “messing with scrollbars”?

  7. August 16, 2005 by Roger Johansson (Author comment)

    Colouring or otherwise styling scrollbars with CSS is a nuisance, but it doesn’t (as far as I know) break their functionality.

    Home-made, JavaScript-dependant DHTML scrollbars on the other hand never work well enough to be as usable as the built-in scrollbars. For instance I have yet to see a DHTML scrollbar that lets me use my mousewheel or my keyboard to scroll.

    So yes, styling scrollbars with CSS is “messing with scrollbars”, but in my opinion it is less bad than completely replacing the built-in scrollbars with a cheesy DHTML scrollbar.

  8. well, we weren’t speaking of DHTML cheese, were we? I wouldn’t want that in my house either…

    I’m quite indifferent when it comes to colored scrollbars, my only must-have is that the color contrasts still clearly show that it’s a scrollbar, and that it works like one.

  9. August 16, 2005 by Roger Johansson (Author comment)

    Matthias: Hehe ;-) As long as it works as expected and looks like a scrollbar, some light styling may be OK. My personal preference (both as a user and as a developer) is to leave them completely unstyled.

  10. Yes I hate them too, but I did a nasty thing, I made one myself. It is quite a paradox in itself, but while I hated custom scroll bars, I hated them even more when they destroyed accessibility, and did not degrade well when Javascript was turned off, and they mostly didn’t work with my favourite browser. Such sites already are in my black list, I don’t visit such sites, and I hate their mere presence. So I made one, not for my own use, but maybe people could start using the one I have on my site, and then, I can simply turn javascript off to get what I want! :) (But I guess, the scroll jog at the corner when there are double scrollbars is a nice touch, eheh.. Just drag while your left mouse button pressed on the corner of the double scroll bars ;) )

    I know, I might have done a bad thing, but I don’t think this will get used by the accessibility aware authors, but those who obsessively think they need to control every bit of their page, hence, I have even seen one turn to flash solely because they couldn’t get a custom horizontal bar to work which, if worked, would not have worked on Opera anyway, but the guy did not really seem to care (this is true story). Those people are already in a lost land, they’d use custom scroll bars whatever the consequence. So I thought it was kind of better for them to use this instead of the other scripts. And I do note why using custom scroll bars are bad on the page. Maybe I’ll link from that page to here for reference. Hmm.. Good idea.

    I can also add a function to get back to using the os default bars upon double clicking somewhere or a key combo.. What would you think about it?

    BTW, only in IE it is possible to read mousewheel data. When the rest embraces that function, I’ll put that functionality in.

    I am not giving the page a direct link from here for the obvious reasons, but you can find it on my site. Please try it also with javascript turned off, you’ll see why I made the script then.. To be turned off!

  11. I don’t see any problem with custom colored scrollbars. As a web designer, the design is important! (And color is an integral part of design!) I test my sites in all the relevant browsers and am annoyed by the fact that only explorer allows customization of scrollbar colors. Furthermore, I don’t understand the intensity of animosity that some people have against them. It’s making me want to use a javascript solution instead!

    As for useability issues, there is something to be said for knowing your target audience. For instance, I am currently designing a site for a young rock band. I don’t think any of their visitors would lament or be confused by a couple of black triangles as opposed to a clunky silver rectangle that doesn’t match the site! Sometimes a silver scrollbar just doesn’t cut it on the aesthetic front!

  12. October 6, 2005 by Richard

    I’m suprised that so many of you dislike custom scrollbars when the other option is a really ugly standard scrollbar that looks disgusting in any decent design.

  13. October 6, 2005 by Roger Johansson (Author comment)

    Richard: Standard scrollbars, though ugly to some, always work and are instantly recognisable as scrollbars.

    I don’t find Safari’s standard scrollbars ugly. In fact they look much better than most custom scrollbars.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.