Clickable "hot spot" functionality

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.