Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

While it seems that the general consensus on custom scrollbars is that they are somewhat detrimental to overall user experience, powers beyond my control are suggesting their implementation is mandatory. Other than giving the scrollbar standard accessibly features (wide enough to be easily selected, high enough contrast to be easily noticed, etc), what are usability features I should keep in mind for an easily used custom scrollbar?

share|improve this question
    
Great question. I've been struggling with this issue on a handful of projects over the last year. Look forward to the responses. –  plainclothes Jan 22 '13 at 23:02
1  
Is this for a website / desktop or mobile app? –  icc97 Jan 23 '13 at 5:58
    
This is for a website that is also compatible with some mobile devices. –  Chris Jan 23 '13 at 16:49

3 Answers 3

up vote 3 down vote accepted

Good old Jacob Nielsen on Scrolling and Scrollbars:

With each of these successful designs, users easily noticed the scrollbars and used them without problems. By comparing the two figures and several other designs we tested, we determined four requirements for a good scrollbar:

  • Use an actual bar in the shape of a rectangular trough, preferably in a color that contrasts with the background.
  • Show arrows at the top and bottom.
  • Include a slider (sometimes called a "thumb" or an "elevator"), preferably in a color that contrasts with the trough. The slider's position should show the visible area's position relative to the total area, so people can see how much more content they have to scroll through.
  • Allow users to scroll by
    • clicking in the trough,
    • clicking on the arrows,
    • dragging the slider, and by
    • using a scrollwheel on their mouse.

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.

share|improve this answer

what are usability features I should keep in mind for an easily used custom scrollbar

The big thing is are they usable regardless of the input device? Can I scroll with the keyboard, the mouse, the mouse wheel, by touch? Does it hinder any assistive technology (such as screen reading software)?

In the end, though, as you seem to already realize, this is something that one probably shouldn't do. It's akin to a client asking you to build a custom web browser just for their site. It's silly on one level, arrogant on another. Sounds like you already fought that battle, though.

share|improve this answer
    
Does anyone have some research that this person can use to try to convince the "Powers That Be" that this is a bad idea? –  daydalis Jan 23 '13 at 0:48
    
I'm not sure what type of research one could fine. Maybe there's something out there. The typical argument that I've used is "why spend money to re-invent something that is already there by default, recognizable, and accessible?". In other words, it's going to cost money. –  DA01 Jan 23 '13 at 2:16
    
I guess I was thinking of a user study, ideally with videos of users confused by custom scrollbars. –  daydalis Jan 23 '13 at 12:18

The important thing is that it behave as much as possible like the standard OS provided scroll bar. As DA01 mentioned they should respond all the normal inputs, including page-up/page-down, arrow keys and space bar. Also scrolling should be done at the same speed that the OS would do it.

One of the biggest reasons to not to do custom scrollbars is because it could easily feel nonstandard on certain platforms, and significant testing is needed to understand the extent of this and know if it is a problem. And properly supporting touch UIs suddenly becomes complicated - you need to detect touch platforms and remove the space wasting custom scroll bars.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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