Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm having trouble researching a particular design pattern because I don't know what to call it -- internally we refer to this concept as a "hot spot" but that doesn't seem to be standard jargon. It involves clicking an icon within an image, which launches an overlay with more details.

For example: you may have a photo of a kitchen with "+" symbol icons next to some features, such as the sink, dishwasher, microwave, etc. Clicking the "+" symbol would show an overlay with a larger view of that item and potentially an accompanying text description. It's more information than a tooltip, but not as extreme as a modal layer (because the user can still interact with other items on the screen, such as clicking another "+" icon).

My question is whether there is any data/research on whether this is an effective design pattern to explore features (and if so, does it have a common name)? My gut is this is a relic from the "everything must be above the fold" days of design, and is an inefficient way to show information, as it requires constant clicking to explore items and only allows you to see one feature at a time (my preference would be to either show all the information on a longer page or use a gallery-like interface), but I'm on a team where this is very strongly being pushed as a more "interactive/immersive" experience and I need something more than gut feeling to use as a response.

share|improve this question
    
Found a similar example: myownbike.de/singlespeed-und-fixie-konfigurator -- except in this case the "hot spots" are opening tools instead of more info/detail –  Michael Histen Nov 28 '12 at 20:06

3 Answers 3

up vote 2 down vote accepted

It sounds like you are describing something I would refer to as a "pop-over". As you say, they are useful when you need to display more information (or more complex information) than a simple tooltip can handle but less information than a full overlay and without removing the user from the current context.

Twitter Bootstrap has a "popover" JavaScript widget and you'll find a number of design examples showing this pattern if you search for pop-over on Dribbble.

share|improve this answer
    
Thanks Matt -- "popover" seems to be the closest to what I'm thinking of. The most common examples seem to be more about contextual tools/actions rather than providing "feature content," but perhaps it could work after all in my scenario. –  Michael Histen Nov 28 '12 at 18:34
    
Aren't "pop over"s usually a separate image or word in contrast to a part of a larger image as the question describes? –  Danny Varod Nov 28 '12 at 20:01
    
@DannyVarod They can be triggered by anything, including an image, icon, button or text link. The example in the question describes it as being triggered by + icons that happen to be positioned on top of an image. –  Matt Obee Nov 28 '12 at 22:33

This sounds ripe for user testing, even if very limited.

Setting someone down in front of the UI of the kitchen and saying "what do you think you can do here?" and watching if they click the popovers would tell you a lot. And then once they do, they'll read it and see what it does, and then you can follow up with "What did you think about that?"

This seems too contextual to really have any canonical design pattern around it. In your example where it's a picture of a custom kitchen, I could see it being a idea with a lot of potential if the interaction is elegant and unobtrusive.

share|improve this answer

This is a feature known as image maps in HTML, which has been there since the 90s.

You could try searching the net for statistics on how commonly it is used.

One of the problems with it is that the clickable regions don't feel like buttons - there is no reaction to events such as mouse over.

Also, if the image isn't drawn correctly there is not enough differentiation from the boundaries of the region, unlike buttons which often use borders that give a 3D illusion.

Another idea you could consider is using a tooltip to show the user what will happen if he clicks on the item.

share|improve this answer
    
It's sort of in the spirit of image maps but a little different -- what I'm talking about is having "+" buttons sprinkled over the image to indicate which content has more info, so it's not about "clickable regions" but rather actual buttons overlaying an image. –  Michael Histen Nov 28 '12 at 20:08
    
In that case, make sure the overlays keep their correct position above the image during zooms and that they don't hide interesting parts. –  Danny Varod Nov 28 '12 at 21:52

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.