December 21, 2009

More Scrollbars

I’ve written about scrollbars in Google Wave, OPEN LOOK and Picasa. Here are some more.

Google’s Real-Time Search

The people at Google seem to love doing custom scrollbars. Rémy Rakic points out that real-time search features another one:

Google Real-Time Search Scrollbar

This one behaves quite like a regular scrollbar, but is actually implemented in HTML and JavaScript.

Blender

Peter Gassner notes that Blender 2.5 enhances scrollbars in an interesting way. Users can use the scrollbars to zoom the visible part of the view by dragging the dots at the end of the scrollbars:

Blender's Scrollbars

Christopher Fahey tells me that some music apps feature similar «zooming» scrollbars. Chris Clark offers this example, found in Apple’s Soundtrack Pro:

Soundtrack Pro

Aperture, Evernote

Ben Sargent writes that Aperture has a small «auto-scroll» widget on its scrollbar:

Aperture's Scrollbar

Clicking on this widget scrolls the view without requiring the user to move the mouse, similar to Picasa’s scrollbar. zx ads that Evernote on Windows features a similar split scrollbar with a «regular» part and an «auto-scroll» part.

If you require a short url to link to this article, please use http://ignco.de/232

designed_for_use_small

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.