:hover is Dead

How many times have you tried to access a menu or some form of navigation on a touch enabled device, only to find that the it's based on :hover events and doesn't behave quite as you'd expect.

When designing interactions for menus and other complex flyouts such as help tips, how they will respond on touch devices needs to be considered. The simplest option is to convert hover to click (or tap in the case of touch devices) and be done with it. For the most part this is an acceptable solution which covers the aforementioned most scenarios. This will also benefit non-touch enabled users at the same time by preventing accidentally triggering the menus.

This presents new challenges though; how do you close the flyout? It depends on the context in question and what feels right. For example with a main navigation you could close the menu when the mouse leaves it or (the preferred method) when the mouse clicks somewhere else in the document. Sometimes a close button may be appropriate for help text.

If hover is a key interaction, another approach is to degrade to a more basic interaction.

This is where questions need to be asked of the user; ‘what are the most important tasks?’. If a key task can’t be completed on a touch device because it user a hover event and the predicted traffic from touch devices is high enough, then either change the interaction globally or target touch devices specifically.

Modernizr provides feature detection for many things including the presence of touch events. Use this to target touch enabled devices and tailor an experience for them. Swipe gestures could be a suitable replacement.

More complex apps are more complex

Think of Google Docs using right click events, something traditionally only seen on desktop applications. This adds another layer of complexity to the design process when thinking about how people will interact with those features on touch devices. The interactions for a document are ok but trying to edit a spreadsheet on a touch device is just about impossible.

Enhance progressively, don’t degrade gracefully

The best advice is to make sure that hover and right click events are enhancements. Ensure that the tasks that enabled by those interactions can still be completed through other (probably longer) means. While not ideal, nothing breaks. This allows you to only enable those events when the device detects no touch events.

With so many touch enabled devices connected to the web these days, you just can’t ignore them when considering interactions for your design.