Video Screencast Help
Symantec to Separate Into Two Focused, Industry-Leading Technology Companies. Learn more.

Part II: Design Considerations For Mobile – No Hover State!

Created: 11 Dec 2012 • Updated: 03 Jun 2014
Vicky Peterson's picture
+2 2 Votes
Login to vote

mobile app design imageWhat’s a Web Designer to do?

Yes, that’s right! Since a mobile touchscreen device has no cursor arrow, there is no way to indicate a hover. And, this mouse-over effect is quite common on many websites since it is relatively simple to code, easy to use, and pretty intuitive for the user.

When viewing a website on a mobile device all hover functions go away – right?

Luckily, iOS and Android take the hover event into account and translate it to a tap event which retains most of the functionality. But there is also the normal click event which is turned into a tap. So, to get the hover click on a mobile device, the user has to tap then tap again. Although dropdown menus seem to work fine in a tap then tap again scenario, other events, such as animations ending in a link, will be cut short and immediately navigate to the linked page. That’s a little disorienting to the user, to say the least. Another user frustration is that to undo the hover on a touchscreen device, you need to tap somewhere else; this is not nearly as intuitive.

What to do to prevent alienating your user?

Until proximity detection is developed enough to detect fingers on touchscreen devices – right now, it only can tell if you are putting your phone up to your ear – you will need to think about alternatives to the hover event.

  • Remember that hover is being translated by different device operating systems, so there’s no guarantee that it will work effectively or the same on all mobile devices
  • Use hover wisely and sparingly
  • Organize your information in a smart and user-friendly manner so as not to require hover if possible
  • Consider utilizing media queries so you can have all the hover events you want on the desktop site but you also can control the non-hover events on the mobile devices

If you build your information structure simply and efficiently, everything can work well and easily for your user with or without the hover event. Who knows?! Maybe soon this won’t even be an issue, because all mobile devices will eventually have effective finger proximity detection.

Related Posts: Part I: Design Considerations for MobilePart III: Design Considerations For Mobile – Images