views:

65

answers:

2

Scroll bars are really boring. I've seen a few really inventive new user interfaces for updating these. I believe there are many better ways to spend 10px then with a solid color and static buttons. Here are two examples I've found:

Do you have any other ideas to add to this list? How can we give a better idea of view-status in the document, without wasting so much real estate? How can we add more functionality to the notorious dead space on the right?

A: 

I like the Google Wave scrollbar- it seems like they've reconciled scroll bars with Fitt's Law.

Matt Luongo
I don't see how Fitt's law applies. If your mouse is at the bottom of the window you have to move it up to adjust the vertical position, meaning the target is harder to hit. About all they've done is making the scrollbar smaller. Can you elaborate on how you think Fitt's Law applies?
Bryan Oakley
A: 

Firstly, one should be very careful about “updating” the scrollbar. The scrollbar is a great success story, a simple, elegant, powerful control that is critical for successful computer use and almost universally understood by users. Trying to improve the scrollbar is like trying to improve the ballpoint pen. It’s stayed the same for so long because there’s really not much more you can do. Being "boring" is not a good reason to improve it. Users don’t use an app or site because it has new and "cool" controls. They use an app or site because it lets them accomplish their tasks. To improve the scrollbar, consider how changes can improve task completion.

Good things the humble scrollbar has:

  • Capacity to scroll one pane-full.

  • Capacity to scroll one line (fine tuning).

  • The capacity to do each of the above repeatedly without moving the mouse (so a user reading some content only has to click occasionally after initially placing the mouse over the right spot).

  • Allows random access to anywhere in the pane by simple linear drag and drop.

  • Intuitively shows the relative position in the content (e.g., allowing the user to judge how close s/he is to the end).

  • Intuitively shows the relative size of content by the size of the slider relative to the track.

  • Supports intuitive keyboard activation via the cursor keys -good shortcuts, and good for accessibility.

  • Supports clickamatic (pressing down and holding the mouse button to scroll multiple lines or pane-fulls).

  • Very smooth real-time feedback on user actions.

  • All in a remarkable compact and unobtrusive control that doesn’t distract from the content (what the user is really interested in).

You don’t want to mess with any of that. In particular, the pop-up scrollbar you link to is probably a bad idea because it interferes with the capacity to scroll by a pane-full by clicking the track. That is perhaps the most common user action so it deserves the greatest number of pixels (i.e., the track).

On the other hand, building on existing scrollbar capability, like the Infoscroller you link to, is a something worth investigating further. For the original research on this concept, see:

McCrickard DS and Catrambone R (1999) Beyond the scrollbar: An evolution and evaluation of alternative navigation techniques. Georgia Institute of Technology Technical Report GIT-GVU-97-19.

Obviously, what you show in the scrollbar track depends on your content. A thumbnail of the content won’t work well for a text table or list. For that, Greg Raiz has suggested indicating the values for the current sort order. If there’s not enough space, maybe tooltips or callouts can appear pointing to key places in the track to drag to. MS Word does something similar with this, showing a tooltip indicating the page and section of the current drag-to point.

Here’re some other ways we could build on the scrollbar:

  • More Buttons. I’ve seen suggestions to include both up and down buttons at the top and bottom so the user can transition between scrolling down and up without having to slew the entire height of the pane. Or you could have buttons to scroll immediately to the beginning and end of the content, handy for users who don’t know about Ctrl-Home and Ctrl-End, saving them from making a long drag of the slider. MS Word includes buttons to execute the last Find or Goto, among other possibilities.

  • Split bar. On the subject of MS Word, MS Word and Excel scrollbars include a split control to allow you to divide the window into two panes. That would be handy for a lot of other applications, such as browsers and large lists and tables.

  • Expert activation. If you don’t want to clutter the scrollbar with more buttons and controls, consider providing expert shortcuts via meta keys. Ctrl-clicking an arrow button could scroll the user to the beginning and end of the content. Ctrl-clicking the track could instantly scroll to the corresponding position in the content, particularly useful if you’ve implemented Infoscroller. Ctrl-clicking the slider could pop open a mini dialog or text box to enter a page number, list item identifier, or Find criteria to jump to.

  • Left side scrollbar. There is some research suggesting we should usually be putting vertical scrollbar on the left side, rather than the right (see Kellener E, Barnes GM, & Lingard R (2001), Effects of scroll bar orientation and item justification, Proceedings of the Human Factors and Ergonomics Society 45th Annual Meeting). Having the scrollbar position consistent with the content alignment means less average slew distances for faster scrollbar use. In the same vein, putting the scrollbar on the left in a browser would shorten the distance between the scrollbar and the Back button for faster navigation. However, the advent of the scrollwheel may have made this idea obsolete.

Michael Zuschlag
I agree with your list of improvements, but I find your analysis pretty far off.. I would be interested to know how many people use the single-pane-jump functionality. The scroll bar as a source of page navigation controls seems pretty poor to me, and the scroll bar as a source of page-status display also seems pretty poor to me. I use a vimperator and knowing the progression of my viewing pane in percent, and `[pages viewed/pages total]` is much more useful than visual indicator of the scrollbar. I don't credit much of its longevity to the overlap of controls and progress indication.
Evan Carroll