Cool user interface alternatives and improvements for Scroll Bars_问答_开发者

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 sta开发者_开发知识库tic buttons. Here are two examples I've found:

http://www.youtube.com/watch?v=-PnXY4wjuH8
http://chikuyonok.ru/u/demo/infoscroller/ (credit for this link goes to this question uses HTML5 Canvas )

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?

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.

Great question. Please see RockScroll, which is now standard in Visual Studio 2013 Preview: http://www.hanselman.com/blog/IntroducingRockScroll.aspx

RockScroll in turn inspired MetalScroll:

Cool user interface alternatives and improvements for Scroll Bars

which in turn inspired RockMargin.

Also, Jetbrains Resharper plug-in for Visual Studio puts a vertical affordance to the right of the scrollbar. The information is displayed as little horizontal bars of different colors. These bars indicate a piece of code that can be improved. Clicking on a bar scrolls the code page to bring the code in question into view:

Cool user interface alternatives and improvements for Scroll Bars

Also, most file comparison software uses fancy scrollbars. See Scooter Software's Beyond Compare 3.0, which puts an "infoscroller"-like affordance separate from the scrollbar. The affordance on the left is draggable like a scrollbar. In addition, to reduce the need for horizontal scrolling, there is a bottom pane which puts the current line from the left pane on top and the current line from the right pane below. Moving the info-scroller allows the user to scroll both documents simultaneously, which makes "merging" changes between two versions of the same document MUCH easier. Please see:

Cool user interface alternatives and improvements for Scroll Bars

WinMerge has a different, equally scrollable, left-pane that functions like a scrollbar and duplicates the existing scrollbars. http://winmerge.org/about/screenshots/filecmp.png

Cool user interface alternatives and improvements for Scroll Bars