3

Possible Duplicate:
What are some alternatives to “hover” on touch-based devices?

I'm building a standard infographic where you mouse over a region and the image changes as you move. For instance, imagine a map of the world, and when you mouse over a country, that country glows and a panel shows statistics about that country. The implementation is to have a separate image for the glowing country, and a div element with the statistics, and the code shows these additional elements on a hover over the country.

The question is: what should this do on a tablet, where there's no hover event? What's a good alternative navigation metaphor for this kind of situation on touch-only devices?

Improve this question
0

3 Answers 3

Reset to default
2

Single click (finger tap) is the most appropriate hover alternative on touch devices.

Touch devices are developing their own distinct set of user expectations. Touch to hover is perfectly acceptable.

Some touchscreen technologies do support hovering. For example, with Microsoft Surface and some specialized tablet displays distinguish between hovering and pressing.

Examples of real-world gestures include "OK gestures," "grasp everything gestures," "stamp of approval gestures," "X to delete gestures," and even "hitchhiker directional gestures." The patent also includes a description of a security feature where users are asked to draw personalized gestures to gain access to a device.

Gestures for hover sensitive devices would include gestures that multi-touch only devices would be unable to detect. The "OK gesture," for example, is not flat, so a multi-touch sensor panel would be unable to register it as touch input.

According to the application, capacitive touch sensors can already detect nearby hovering as a "weak" touch. The addition of proximity sensors would improve the range and resolution of hover detection.

Resources

Implementation Example

Improve this answer
1

On touch devices you might even have trouble conveying to the user that they need to hover or touch down. You might want to have the largest countries highlight themselves for a second to queue the user when a touch device first loads the infographic.

Improve this answer
0

Click. The trick is to separate the area where clicking causes navigation from the area where clicking causes a hover type event. One simple way is to make a clickable tab show up on or next to the hovered section so when a tablet clicks the hoverable area, a navigable tab appears and for computers the hover makes it visible.

This way you can still have the area link somewhere and allow users to single click to hover rather than singleclick navigating immediately which removes hoverability for touch input devices.

So in short, hide your navigate-for-more-info link somewhere in the hidden hover div rather than making your hoverable area also be a link.

The reason is embodied right here on your username at the top of the screen. I'm writing this on my phone and cannot hover my username for info like on a computer because they designed single click to link instead of bringing up the hover info (and it drives me batty when I'm using SE on my phone).

Improve this answer

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