Annotated Scrollbar

Example of the Annotated Scrollbar UX pattern.

Problem

You have something, such as a lot of items in a list or a long document, in a scrollable area, and it is hard for people to use the scrollbar for navigation due to its length or size.

Solution

Provide an indicator of significant sections in or near the scrollbar.

Context

Whatever it is that is being scrolled has to have meaningful and detectible sections. For instance, a document has pages (and may have other sections). A table/grid has rows for which you could show a row number or even a key column value. An image may have pixels or a currently viewable area. If you don’t have sections for which you can show a meaningful indicator, this pattern won’t work.

Saying the sections must be meaningful means that people must be able to draw meaning from the indicators to understand what they point to. Saying they must be detectible means that you must be able to programmatically determine where people are in the scrollable item as well as what section they’d be looking at if they stop scrolling.

Finally, if you want to implement it using a preview while scrolling, you need to be able to determine and show the indicator in real time, or very close to it. If it takes seconds (or longer) to analyze where people are, the value of the annotation is lost—they may as well just stop scrolling and see where they are themselves.

Rationale

You can think of the annotated scrollbar like signs on a highway. Just imagine what it would be like traveling the highway if we did not have signs. You’d have to slow down, maybe even stop and ask, to figure out where you were on your journey, which would make travel much more slow and onerous.

Think of people scrolling through large areas as taking a long journey on a virtual highway. If you provide signs along the way, they’ll be able to get to where they want to go a lot faster and with less effort. And of course, the signs need to be in a language (visual or verbal) that people will understand for them to be useful.

Scrolling is second nature to most experienced computer users; if they don’t see what they want right there, it’s one of the first things they are likely to reach for to find it. And since at that point, their focus will be on or near the scrollbar, putting the sign somewhere around the scrollbar is best.

Implementation

The first step is to figure out what you want to show for indicators. To do this, you have to think from your users’ perspectives—how do they think about the structure of the thing being scrolled? If you can draw out a meaningful, user-centric structure, you then have to see if the thing you’re scrolling has markers of some kind that will enable you to detect the sections in the structure.

If so, you can go on to add annotations either in the scrollbar itself or just next to it. They can track with the scrollbar, i.e., you can see all the indicators alongside the scrollbar, or you can use the tooltip/preview approach to only show the annotations while the user has grabbed the scrollbar and is scrolling.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Silverlight

You can use the Deferred Scrolling feature of the NetAdvantage for Silverlight xamWebGrid control for this.

Windows Forms

You can use the feature ScrollTips in the NetAdvantage for Windows Forms WinGrid for this. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called WinGrid -> V3 Row Layout to see it in action.

WPF

You can implement this pattern using the Deferred Scrolling Feature in the NetAdvantage for WPF XamDataGrid Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Asynchronous Data Loadingto see it in action.

 

Examples

The primary example of this pattern is the Word 2007 tooltip that shows where you are in terms of page number and, if available, document section.

http://quince.infragistics.com/112a

Example of the Annotated Scrollbar UX Pattern Example of the Annotated Scrollbar UX Pattern

TortoiseMerge uses highlighting next to the scrollbar to indicate where there are differences in the file to make it easy to scroll to those sections.

http://quince.infragistics.com/10y2

Example of the Annotated Scrollbar UX Pattern Example of the Annotated Scrollbar UX Pattern

Adobe Acrobat shows a thumbnail and page number of the target page. That’s great if your document has varying physical structure, but it may be better to prefer the Word approach of showing section, or even do a combination of the two.

http://quince.infragistics.com/119r

Example of the Annotated Scrollbar UX Pattern Example of the Annotated Scrollbar UX Pattern

JetBrain’s Resharper uses the Visual Studio scrollbar to show the places in a source file where the code does not align with the configured rules. When you hover over each mark, you see the warning message. When you click on it, it navigates to the related line.

http://quince.infragistics.com/11cj

Example of the Annotated Scrollbar UX Pattern Example of the Annotated Scrollbar UX Pattern

Interesting idea from Thomas Hooper that positions an auto-hiding panel next to the right side scrollbar to indicate how much of the page is related to post versus comments. You can extrapolate other similar uses from that. Might be better if it didn't hide while scrolling.

http://quince.infragistics.com/116i

Example of the Annotated Scrollbar UX Pattern Example of the Annotated Scrollbar UX Pattern

Sources

Jennifer Tidwell, Designing Interfaces

Alan Cooper, About Face

Tags

Navigation, Search, Browse.