25

In Chrome, when you do a text search, you'll see the locations of found instances of the text string shown as yellow lines in the vertical scrollbar.

If you run Visual Studio with the Resharper plugin, the location of errors/suggestions/warnings/etc in the viewed source file are shown in a similar way in a vertical strip next to the scrollbar.

Is there a name for this UI element?

5
  • That's quite nice. I didn't know Chrome did that. Similar to how a lot of comparison software shows differences. Regarding the name I don't know.
    – Sheff
    Nov 8, 2011 at 11:36
  • I would say that that the name is still "Scrollbar", because the UI element is actually an ordinary scrollbar. When referring to the additional visual feedback, you may say just that: "A customized scroll bar with additional visual feedback to indicate the [changes / search results / highlights]" Nov 8, 2011 at 11:48
  • 2
    FWIW, MSNBC calls them ScrollPins in their HTML msnbc.msn.com/id/45176460/ns/technology_and_science-space/…
    – Ben Brocka
    Nov 8, 2011 at 12:11
  • KDiff3 (kdiff3.sourceforge.net) has something similar, in their case it is not displayed inside the scroll bar but next to it (altough it also acts as a scroll bar, so maybe this is not a reference for good UX). They call it the "Summary Column" (mentioned in their documentation). I don't think that's a good name tough. Nov 8, 2011 at 12:14
  • I was pretty sure Safari had them well before Chrome, I'm sure that's where I first saw them. Nov 8, 2011 at 21:05

6 Answers 6

22

I believe this design was invented by McCrickard and Catrambone of the Georgia Institute of Technology:

McCrickard DS & Catrambone R (1999). Beyond the scrollbar: An evolution and evaluation of alternative navigation techniques. Proceedings of the 1999 IEEE Symposium on Visual Languages, p270-277.

It seems very similar ideas were independently developed in Nordic countries:

Laakso SA, Laakso K, & Saura AJ (2000). Improved scroll bars. Proceedings of Human Factors in Computing Systems (CHI 00),

Bjork S (2001). The ScrollSearcher Technique: Using Scrollbars to Explore Search Results. Proceedings of Interact 2001, Eighth IFIP TC.13 Conference on Human-Computer Interaction.

Bork S & Redstrom J (2002). Window Frames as Areas for Information Visualization. Proceedings of NordiCHI, p247-250.

In all cases, the authors don’t provide a general term for graphically encoding content information in the scrollbar track, but instead give different names depending on exactly what is encoded. Chrome’s feature, for example, would be called a ScrollSearcher. There are also ChangeIndicator, ReadabilityViewer, Bookmark Scroll, Calendar Scroll, Mural Bar, and Pile Bar.

We could call them “Georgian Bars” in honor of their birthplace, at least until someone finds an earlier example than McCrickard and Catrambone. A simply descriptive name would be “encoded content scrollbars.”

4
  • 1
    Awesome sources, reminds me of the old days of writing research papers
    – Ben Brocka
    Nov 8, 2011 at 15:07
  • I suggest then: "Scroll Bar Highlight"
    – jonshariat
    Nov 8, 2011 at 19:14
  • საქართველოს ბარები? (-: Nov 8, 2011 at 21:04
  • Scroll Bar Markers?
    – Erics
    Nov 8, 2011 at 23:48
7

I don't think there's an official name for this feature. I call it 'scrollbar indicator'.

Here are a few relevant articles that describe it:

Techdreams article

Habitually Good article

6

I have found for the Eclipse Editor "Scrollbar markers" or "Scrollbar annotations". In some patterns it's called "Annotated scrollbars".

See following link: http://quince.infragistics.com/Patterns/Annotated%20Scrollbar.aspx

5

The scrollbar versions are simply scrollbar markers or markers on the scrollbar - no specific name. The additional strip next to a scrollbar, I would just call a marker margin.

1

I would never go for the same name (scrollbar), to avoid confusion. As far as I know there is no official term for this. Sysscores 'Scrollbar markers' seems nice. Although I think I would call them scroll pins.

0

Eclipse calls it "Overview Ruler", and I've called it an "Overiew margin" (I don't know where I picked it up). There is no standardized name though as this is not a standard UI element by any stretch...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.