8

Including customizable, JavaScript-based scrollbars (and scrolling functionality in general, i.e. bind the control to the mouse scroll wheel) in your webapp can be a great temptation.

However all solutions I could find were developed by individuals (which can equal lack of formal or future support). In addition I fail to remember any mainstream site using them.

In my particular case, no-JavaScript or IE6/odd-browser environments are not intended to be supported.

Should custom scrollbars be avoided nowadays? If not, what's the best option one can choose?

Improve this question
  • Scrollbars for what? – CaffGeek Aug 16 '11 at 16:55
  • First of all forget trying to support IE6 100%, not going to happen. Besides, the market usage is very minimal. – The Muffin Man Aug 16 '11 at 16:59
  • Chad - a vertical menu and a table/data grid. Nick - in fact I wrote that I'm not supporting it :) – vemv Aug 16 '11 at 17:01
  • 5
    Expanding on Chad's question, I think generally you should only replace OS-native controls if you absolutely need to in order to provide additional functionality. (An example would be a rich select list.) I can't see why you'd need to use a custom scrollbar. What are you trying to accomplish? – Mitch Lindgren Aug 16 '11 at 17:02
  • 1
    I just try to keep a consistent appearance with the other elements on the app, no extra functionality is needed... – vemv Aug 16 '11 at 17:06
16

One very important argument that is always convincing to me when it comes to usability is consistency. You may want to make all the handles in your site look the same, noble goal, but think about how someone uses your app or site. They're not just using yours, they're using loads. In fact, I have got 8 tabs of 6 different websites open right now. I can switch to any tab and still have the same scrollbar, looking the same, no matter where. I always know where I can scroll my content.

So if at all possible, and if it doesn't angry any graphic designer, stick with what people know :) Unless you have a brilliant new idea, which is going to be a new revolution in scrolling!

Improve this answer
  • I disagree @Pelshoff. While you brought a good reasoning, but based on the same reasoning, designers should stop creating beautiful drop-downs, checkboxes, buttons, etc., because as users change their browser tabs, they see what they are used to. – Saeed Neamati Aug 17 '11 at 9:16
  • 3
    @Saeed: but that ís exactly the balancing problem. Does the beauty harm the usability, and if so, which is more important? That's what I meant with the last paragraph of my answer. You have to weigh the options per project and by all means shoot for the stars if you think you can design a better and/or more beautiful control element. One of the major UX breakthroughs in operating systems has been that 'every' program has the same close button, the same menu bar, the same everything except for that which actually makes the programs different :) – Pelshoff Aug 17 '11 at 9:21
  • @SaeedNeamati Graphic design should be unnoticeable. If the user notices it, then it's too much. – Tulains Córdova Nov 29 '12 at 19:36
5

If you add your own custom scroll bars, users will have to wait and process it in their minds for a couple of moments -- before they can use it. This isn't always good -- you already have content on your site for users to see and comprehend, let everything else come off as expected.

Always try to make you site EASY to navigate. Beauty should not demand (or activate) cognizance.

Improve this answer
  • The last sentence sums it up pretty well! – vemv Aug 17 '11 at 14:18
3

I think that replacing scroll bars is not a good idea. When you are used to an os and browser - scrolling does not require much input from your brain. Having nicely designed ones is awesome but you will confuse your customers. Is the added value enough to offset the annoynance for the fist few times they use it.

Improve this answer
2

My idea is that using custom scrollbars, if remain in the scope of aesthetics, i.e. look like just changing the skin of the default scrollbar, is not a bad idea. Users immediately understand other custom parts of a web page like custom buttons, custom checkboxes, etc. Do you have problem understanding the clickable attribute of vote buttons in stackexchange sites? Or do you have problem interacting with custom input text boxes for tagging questions in stackexchange sites, or Yahoo mail? Scrollbars also can be fast-recognizable by end users, as long as they don't change the layout, or the expected functionality of the browser, for example scrolling in the reverse direction, or creating a circular scrollbar. You're good to go as long as you only change the skin.

However, there are some problems with custom scrollbars that you should consider:

  1. They usually need a considerable amount of time to become cross-browser
  2. They might not be forward-compatible, i.e. by releasing new versions of browsers, they may break functioning.
  3. You have to manually implement scrolling behavior. For this item, consider HTML buttons. When you add disabled='disabled' attribute to them, browser simply won't accept clicks or enters anymore on them. However, when you use a <div> element to mimic the behavior of a button, then you should implement disabled behavior on your own. Custom scrollbars also should implement scrolling functionality, which is already implemented by browser.

In spite of the things we say, I recommend you start a hobby project (not production) to experience using and implementing custom scrollbars. See this page for good examples.

Improve this answer
1

Jacob Nielsen has a great entry on scrollbars and what you should do with them. He specifically recommends not using the OS's scrollbars and warns against horizontal scrolling.

Improve this answer
  • That article is rather old, especially in web terms. From what I understand, the fold is mostly a myth, depending of course on your target audience. All my friends scroll first(!) when they open a new page. See this article for more info: designfestival.com/the-fold-exists-but-does-it-matter – Pelshoff Aug 16 '11 at 17:27
  • Nelson revisted that a few years later in a follow up article. He found that largely, the fold didn't matter anymore. But the recommendations about how to make a scrollbar look and feel is still very valid. – Malfist Aug 16 '11 at 17:51
  • Well if there is one sentence to keep in this entire article, it would be this one: Scrollbars are easy to get right. In fact, the less work you do, the better your scrollbar. Usability is almost always enhanced when you use the built-in scrollbars rather than design your own. – MrUpsidown Apr 26 '16 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.