On Hover Alternatives for Touch Devices

By Beacon News | Published July 9, 2012 | Categories: Web Development

Even though touch screen devices make up only a small fraction of users that visit your site, the number of these devices hitting your site is only going to increase. This doesn’t just include mobile devices, but also tablets that are being served a full site version. Your site should take this into account and any mouse hover effects need to be rethought and accommodated by some other means.

Designers are trying to come up with clever ways to deal with this issue. But sometimes the simplest answer is the right one. Especially in this case, where the user is expected to know how to use the site, it’s best to keep things clear and intuitive and not throw them any type of interaction with the site that is outside of the norm.

The simplest ways to deal with hover actions on a site are to replace them with:

Direct Action This removes the content from the hover and instead places it directly on the page itself. This makes sense for some things and not others, such as small bits of info or tooltips. This content can be integrated in the page itself as long as it doesn’t make the page awkward and cluttered but maintains and elegant usability.

On Tap Menus This is a quick and easy fix as long as the content of the hover menu makes sense to be presented to users with a tap and it doesn’t interfere with the use of the site.

Separate Pages This is a better solution for hovers that would present the user with extensive amounts of extra content. The content may be so much that it warrants it’s own separate page.

So this seems like a Sm, Med, Lg approach where how you serve up the hover content depends on the amount of the content, but the way in which the user will expect to use the site needs to be factored in as well so that usability is not compromised.

No matter which solutions are used, it’s important to remember throughout the design process that the devices that are being used to browse the web are becoming more and more varied and even though we don’t have to eliminate hover completely, we do have to accomodate devices that don’t allow this action.