Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 9 down vote favorite

enter image description here

I would like to know what this approach is called. In case my incredibly high-fidelity mockups are too confusing, what I'm after is a design that explicitly links the thumb to the viewport by drawing a filled area linking the top of the thumb to the top of the content and the bottom of the content to the bottom of the thumb, thereby highlighting the connection between content and proportion of content visible compared to the total content available. I have seen various versions of this but can't put my finger on any.

[Edit] Just to be clear. Obviously I know what a standard scroll/viewport combo is and looks like. I'm after this variation which explicitly links content to thumb using a graphical device which in the case of my diagrams is the light grey polygon running from the edges of the content to the edges of the thumbnail bar.

share|improve this question
Just to be clear: I gather that your scroll bar really is a column of thumbnails or something like that? – André Apr 5 '12 at 14:50
@André No its a continuous block of content. Probably text but could be a chart or like. – 1ndivisible Apr 5 '12 at 14:56
@André Sorry. I see what you mean. I suppose it could be a series of pages, – 1ndivisible Apr 5 '12 at 14:57
I don't get the question. I assume you already know what a scrollbar is and how it is used. Is your problem how you visualize the relationship between a scrollbar and the scroll view in a mockup? – Adam Smith Apr 9 '12 at 18:40
The important part of the component is the grey polygon drawn between bar and content that makes the relationship between the bar and the content explicit. – 1ndivisible Apr 10 '12 at 8:42
show 4 more comments

8 Answers

up vote 7 down vote

Have a look at http://www.tchibo.de/. When you scroll down something similar is used; it's called a visual scrollbar or preview scrollbar. It shows the position of the main window content on a thumbnail of the very long page content.

Is this what you are looking for?

share|improve this answer
2  
I like that pattern a lot – Ben Brocka♦ Apr 10 '12 at 19:11
Wow, very clever. – Supr Apr 11 '12 at 9:17
up vote 2 down vote

As I said in my comment: I'm not sure if I've seen such a visualization before...

The closes concept I can think of, is "linking lines" and "synchronization links" used in various comparison tools.

Screenshot from Araxis Merge:
enter image description here

share|improve this answer
Thanks. That's a good example of something similar, but not the pattern I'm after. That's half the problem. I've definitely seen it before but I can't remember where. – 1ndivisible Apr 10 '12 at 10:54
up vote 2 down vote

Based on your description, it's an abstraction of a Magnifying glass.

The abstract content is small (whether or not its shown on the viewport) and the viewport is used in such a way as to give the user a sense that they're seeing an enlarged version of the content in much the same way that a pop-in of an enlarged image can be used over a thumbnail to give a magnifying effect.

share|improve this answer
Nice thinking. Yes It is a kind of magnifying glass i suppose. – 1ndivisible Apr 10 '12 at 16:22
up vote 1 down vote

To my knowledge this would be called a "Long rectangular scrollbar" or a "Conventional scrollbar". This pattern has been around since the begining of GUI (Beware! This is the opinion of the writer, not a fact). It first saw daylight in 1984 (Steve Jobs introduction of Macintosh) if I remember correct.

References:

http://en.wikipedia.org/wiki/Scrollbar http://www.developer.nokia.com/Community/Wiki/Mobile_Design_Pattern:_Scrollbar

share|improve this answer
2  
Ha. I was wondering what the purpose of the bar on the right of the browser window was. I've never been able to work out how to read text below the fold before. But seriously; the important part of the pattern is the way that the relationship between the content and the thumb/total content is represented graphically (by the grey polygon in my example). – 1ndivisible Apr 10 '12 at 8:47
1  
I think the point is that the SIZE Of the scrollbar already communicates that. The gray part seems redundant (if not confusing) – DA01 Apr 10 '12 at 17:45
@DA01 In most scrollbars, the ratio between thumb and bar is the same as the ratio between total content and the size of the viewport (though this often becomes skewed by there being a minimum height for the thumb). However there is no explicit visual link between thumb and viewport. Its really frustrating as without an example its hard to explain, but without an example no-one quite understands. – 1ndivisible Apr 10 '12 at 18:51
"However there is no explicit visual link between thumb and viewport" = while that is true, I think it's implied. It's how the scrollbar has worked for nearly 3 decades of GUIs. Not that the gray part may not be interesting--just saying it's not typical and perhaps redundant in many situations. – DA01 Apr 10 '12 at 19:09
up vote 0 down vote

It seems to me that you're talking about a simple preview, like they have on youtube on mouseover on the video's progress bar.

enter image description here

share|improve this answer
1  
No. The important part of this component is the fact it explicitly shows the relationship between content and bar using (in my example) a grey polygon which describes how the content is related to the thumb and total amount of content represented by the bar. – 1ndivisible Apr 10 '12 at 8:44
What do you mean by 'thumb'? – DA01 Apr 10 '12 at 17:46
up vote 0 down vote

I'm not sure there is a name for this - at least not one that means the same thing to many people.

I understand that you mean the mechanism whereby the relationship between the content and the scrollbar is highlighted by the linking polygon but the linking is implicit through familiarity of scrollbar behaviour and your example is not widely used enough to warrant it's own pattern name.

Thus you might find a few mentions in research papers or find localised terms depending on the application or ui toolkit being used, but certainly not a term which is generally accepted.

share|improve this answer
up vote 0 down vote

To me it sounds most similar to the 'navigator' function in Photoshop. It is a small viewport that outlines the visible area of a much larger plane. In the attached image it is the small red rectangle that shows the visible area of the whole image.

update: I cannot yet post images because my rep is too low. Why doesn't it extend across Stack Exchange sites? Anyway - look it up in Photoshop.

share|improve this answer
if you link your SE accounts, you get a 100 rep boost. – peteorpeter Apr 10 '12 at 20:41
Negatory - SE knows my accounts are linked because I'm getting inbox messages from UX and Stackoverflow in the header bar. Maybe it takes time to add the 100 boost? – Calydon Apr 12 '12 at 14:48
Might only work on initial signup? I just did this on math.se without problem or delay. – peteorpeter Apr 12 '12 at 14:53
I will ask about it - thank you! – Calydon Apr 12 '12 at 15:58
up vote 0 down vote

If you have visual studio 2010 and install the 'Productivity Power Tools' extension it includes an 'Enhanced scroll bar' option that is very similar to what you describe.

Fancy scroll bar

The small blurry text in the center is a scroll bar and the scroll thumb is the back bordered (cut off at the top) vertically aligned rectangle, which surrounds the text that is visible on your screen at that time. The blue dot in the bar shows where the cursor currently is, and the magnified preview (the horizontal rectangle with the normal sized text) appears when you mouse over the scroll bar to show you a preview of what is there.

There is also an alternate view that does away with the blurry text and returns the scroll bar to its normal size, but you still get the mouse over preview. They called it 'Map Mode' and the other one 'Full Mode'

share|improve this answer
Very interesting. Thanks. – 1ndivisible Apr 12 '12 at 8:09

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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