What's the name of this widget?

July 14, 2008 12:47 PM

You know the little draggable overview map in Google Maps? What's that kind of UI control called?

They're pretty common: the Navigation Palette in Photoshop is the first one I remember encountering. It's a small window with a thumbnail view of a larger chunk of a document (maybe the whole document), with a little rectangle representing the area displayed in the larger window. In Google Maps it's at the lower right (honest, it's there, just click on the arrow); in Photoshop it's a separate palette.

What am looking for is (a) what that kind of widget is called in general (so I can google for more info) and (b) any discussions in the UI or HCI literature with guidelines, best practices, that sort of thing. Thanks!

posted by rodii to computers & internet (13 comments total)

I'm pretty sure it's called a mini-map (Google Maps calls it an "overview map"). Wiki has a short article on it, but it's mostly game-related. Same concept, though.
posted by Rhaomi at 12:53 PM on July 14, 2008

In cartography, it's generally called an "inset."
posted by UrbanEconomist at 1:04 PM on July 14, 2008

In Real-Time Strategy computer games, these are called "mini-maps" and have the same function.
posted by EndsOfInvention at 1:18 PM on July 14, 2008

When Adobe first launched this kind of thing in Photoshop it was called the "navigator", and still is. It seems like it could be called a proxy also, since it is in essence a "proxy" of the larger detail view.
posted by littlerobothead at 1:23 PM on July 14, 2008

From the UI "patterns" side of things, I'd call that the overview (or thumbnail) area of a Overview & Detail interface (see examples here). This is slighly different from a Focus Plus Context design (academic-like dfn, bad example), where, as a very crude analog of human vision, we see the detail *in its proper location* and the context is blurred but is left in the correct spatial relation to the detail.

The advantage of doing the "semantic zoom" at its proper location is that you can see the context. But as you can see from the example I snipped above, it often comes at a very great cost to the readability of the things *near* the focus, but not in it. Overview + detail does not have this problem, but forces the user to integrate the focused view back into the overview. Sometimes this is easy, but sometimes it's cognitively taxing, especially when the user needs to switch back and forth, like when she's looking for a particular target (she'd have to use the overview to navigate and then check the detail to see if it was a "hit" and then go back to the overview to keep looking... on a map, this isn't hard, but for other more abstract data it can get hard).

Hopefully this will give you some new terms to google, at least.
posted by zpousman at 1:40 PM on July 14, 2008

Thanks! "Mini-map" seems to have unlocked the literature somewhat. Unfortunately most of the work seems to be in gaming, which isn't exactly what I was looking for. But it led me to this paper, which tells me what I'm talking about is called an overview+detail (o+d) interface. Onward!

Just to clarify--the mini-map in and RTS game is just a passive display, right? Unlike the Google and Photoshop examples, where you can actually drag the... view rectangle around and the main window changes. I'm interested in the control aspects, not just the display aspects. ("View rectangle" is an example of my problem. I don't want to make up terms if there's already a standard way of describing things.)
posted by rodii at 1:42 PM on July 14, 2008

Just to clarify--the mini-map in and RTS game is just a passive display, right?

No, in most RTS games it behaves just like in the other examples, with a movable rectangle.
posted by Partial Law at 1:47 PM on July 14, 2008

Damn you, zpousman Thanks, zpousman!
posted by rodii at 1:51 PM on July 14, 2008

A tangential note: draggable tile-based maps are increasingly known as "slippy maps".
posted by fishfucker at 2:12 PM on July 14, 2008 [1 favorite]

In cartography, it's generally called an "inset."

Isn't an inset usually a small side map that's drawn on a larger scale?
posted by Johnny Assay at 2:46 PM on July 14, 2008

Sorry for jumping in before you...

In an Overview&Detail display like you're describing (and, I assume, you want to create):

• the general configuration is to make both views update each other. It should be possible to click on the overview and this action would move the overview "viewport" ("view rectangle" as you describe it above) and update the detail view. If the user pans in the detail view, it should move the overview viewport indicator. If the user zooms the detail window, this action should also shrink the overview's viewport indicator. This might be totally common sense to you.
• the viewport indicator on the overview should be in a color that does not appear in the representation on the overview (and hopefully not in the detail either, but that's not as important probably). It should be possible to see the thing, and if you have a false-color heatmap that goes to red, don't make the rectangle red. This is easy to fix because often you can use a simplified representation on the overview; it's an overview after all. That said, you should be careful to design the two views to share as much as possible in terms of color palette / form / orientation, etc. If you just provide a line drawing in the overview, that would probably not win in a usability test to something that had simplified area shading, like the detail view (i.e., only 3 levels, not 64 like the "real" detail map / representation).
• If you're doing this with real cartographic / GIS / GPS data, I think you should read the chapters in Edward Tufte's book Envisioning Information. He shows a lot of good little tricks that cartographers use to make sexy and usable maps. If your application is not map-related, the book is still cool to flip through but might not be as helpful.

posted by zpousman at 3:00 PM on July 14, 2008

That sort of UI element is also sometimes called a "panner" (because it allows you to pan easily over a large object).
posted by hattifattener at 8:00 PM on July 14, 2008

Thanks all. I'm always amazed at the depth of knowledge that pops up so quickly in even the most obscure areas here.

zpousman, I'm not creating this software, I'm doing usability and documentation on it. It's used for visualizing biological networks, which can be vast hairballs of associations. Users have to be able to zoom in to just about any scale and fly around and still see the whole. It works at a basic functional level, but... let's say some refinements are needed to make it really work *well.* But to tell people about why, I found I needed vocabulary I didn't have, so thanks for all the info.
posted by rodii at 10:52 PM on July 14, 2008