I had an idea for a new type of scrollbar. The idea is to enhance the drag space of a scrollbar by giving users information about where in a scrollbar a particular piece of data lives.
Typically if you have to scroll through a very large set of data (10,000 or more) items the scrollbar becomes virtualized and as the user scrolls the application gets data on an as needed basis. When dealing with very large data sets the scrollbar becomes very harder to use. It's not as intuitive where a particular letter stops and the next one starts.
The general idea is to use an approach found in most filing cabinets. By placing the ABC's within the scrollbar it becomes much easier to target the correct spot on the scrollbar to either click or drag. Ideally the spacing and size of the letters would be proportional to the space that the letter takes within the scrollable region.
My friend and co-worker Craig suggested that you could further simplify the appearance of the control by only showing the ABC's on hover. This makes it look like a normal scrollbar until you need to actually interact with it.
Archived Comments
Sergio Sánchez said...
Great idea! We also think that this concept could be applied to the pagination, introducing the page numbers of a document instead of the alphabet.
March 23, 2006
yusef hassan said...
Great. In my opinion, this scrollbar could be improved with a FishEye technique. The size of letters could be proportional to the space that the letter takes within the scrollable region, and inversely proportional to the distance with the mouse pointer.
March 23, 2006
Michael Zuschlag said...
Yes, there's all kinds of cool ways you can extend this idea. I was thinking of a database front end where when you drag the scrollbox for a table, tool-tip-like callouts appear showing the scroll-to points for various helpful values of the attribute the table is sorted on. For example, if sorted on status, put a callout at each point in the sort that the status changes; for dates, put a callout at each point the month or year changes.
March 24, 2006
Greg Raiz said...
There are lots of ways to extend the concept and I'm a little surprised that such a control doesn't yet exist.
One thing that is similar is the ipod radio UI:
http://store.apple.com/Catalog/US/Images/lm_ma070ga_rr.jpg
It's like a scrollbar in that you scroll through the different stations. On the ticker they show little peaks for your preset channels. If done right the scrollbar could naturally 'attract' to logical possitions in the scroll region such as the tops of pages in documents, the tops of functions in code screens or the tops of groupings in database sorts.
If anyone would be interrested in using such a custom control in a project please email me directly. If we get enough intrest I'll look into building this type of control.
March 24, 2006
Eban Tomlinson said...
Great idea for sure, but just for reference, a similar idea is in the following book. (I'm doing a large amount of reading on HCI as this is the general topic for my undergrad thesis and thats how I ran across this one)
Crawford, Chris
The Art of Interactive Design: A euphonious and illuminating guide to building successful software
QA76.76.I59 C73 2002 (No Starch Press, 2002)
Crawfords idea of implementation is slightly different however. But I thought for completeness it should be posted here. page 125
March 27, 2006