Rethinking the 3D “Hot Spot”

One of the cool things you can do with a 3D product model is attach feature and benefit information bubbles to physical features of the product. We’ve been doing this since we started doing 3D product marketing on the web, using a technique I called the “Hot Spot.” (I’ve spent years trying to replace that name with something less jargonny, but I’ve been unsuccessful.) In a browser, you hover your mouse over the 3D places and information pops up. On a touch screen, you touch the hot spot with your finger to see the information.  In either case, we need to give the user a clue of where the information is hidden.

Hotspot Circa 2002

This is the earliest example I can find of a hotspot indicator. The center of each of those red circles is a place on the 3D model. When you hovered your mouse over that place, some information would pop up. We’ve always defined a hotspot as: object, x, y, z, radius. You need to have your mouse over the right object, and be within the radius (in 3D space) of the location. This approach has proved problematic:

  • Sometimes the customer wants to identify a bunch of features that are really close together, and so those “hover spheres” would overlap, causing multiple text bubbles to appear for a single mouse position (particularly when zoomed out).
  • The hotspot indicator covers up the feature you are talking about.
  • When you change your point of view, those spheres can get extremely small, and hard to get your mouse into. But the indicator stays the same size!
  • If we make the spheres bigger so they are easier to mouse over, they start to overlap, or poke through the back of the object.

Hotspot Circa 2003

The next step in the evolution of hotspots was to look at the problem of making them less hideous. After all, we made really beautiful photographic models, and then we’d put those ugly circles all over them. The treatment shown here lasted several years. The yellow dots would pulse on and off very subtly. This didn’t address the issue of overlapping or difficulty hovering small spots in 3D, of course.

The next step in the evolution was to go to an indicator which was hopefully a little more intuitive. This is what we came up with:

Hotspot Circa 2006

Note that this interface also includes an explicit control to turn the indicators on and off. Again, this is just aesthetic. We haven’t fixed the fundamental usability problem yet.

The “Aha!” moment for me came when we once again refreshed the look of our standard template. The hotspot indicator is now an upside-down teardrop:

Hotspot Circa 2010

Does that indicator shape look familiar? It’s very similar to the map position indicator in google maps. And this has led to a usability issue.

In google maps, you click on the indicator to get more information, but we were still expecting you to hover over the place that the indicator points to. If you hover over the indicator, you might be in the 3D hover sphere, or you might not, so it would sometimes show you the information, but not always. Very frustrating!

So here’s the “Aha!” moment: We should be using 3D position to indicate the position, and to decide whether to show an indicator at all (we don’t show them for things hidden away inside the object, until an animation brings them out into view). But we once we’ve placed the indicator on the screen, we should be using 2D mouse/touch position to trigger the information bubble.

It makes a huge difference – try it yourself! I’ve configured the demo page in that link to let you switch between the new 2D hover test, and the original 3D hover test. I think you’ll agree that this is a huge step forward in usability.

About kaonalphageek

CTO and co-Founder of Kaon Interactive Inc.
This entry was posted in Geek Talk and tagged , , , , , . Bookmark the permalink.

Tell us your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s