Overly Styled Scrollbars

Designers sometimes have a habit of styling something just because they can. And sometimes this comes at the expece of usability.

Jacob Neilsen has written another reminder about scrollbars. He recommends:

  • 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.

Sensible advice to keep in mind, whilst at the same time considering who your audience is and how far you can safely push these limits.