8

I noticed that most mobile browsers transform rollovers into touch/tap actions. This is good, but of course there's no indicator that the action is available to the user. So I was wondering what should be the best approach when developing websites:

  1. Avoid rollovers altogether (mobile and desktop)

  2. Disabled rollovers on mobile only.

  3. Instead of using rollovers on mobile, display the rollover content under or on the side

  4. Add visual clues/indicators on mobile that an object has a rollover/touch state

  5. Other?

  • As long as the information provided by the rollover has value and purpose in the mobile context, I think #4 is best. Since it sounds like you are targeting desktops as well, you might want to wrap the visual clues in a media-query so that they only show in mobile browsers. – Henry Taylor Nov 17 '14 at 19:54
  • Agree with @Henry about #4. Have to say in most cases, there's probably no harm in showing the visual clue (e.g. i icon) on desktop. Rollovers aren't exactly the easiest thing to discover without that. – nightning Nov 18 '14 at 0:25
  • Thanks guys. Is there such thing as a rollover icon, that's standard? – gdaniel Nov 18 '14 at 16:41
2

I would say there there is just as much change of a user missing a poorly sign-posted rollover on desktop as mobile.

I use a + symbol to indicate more in these instances, and sometimes where there is a series of rollovers containing more info, I have the first one open by default to show the user what's there.

Generally I really don't think we should be hiding information behind rollovers at all - but designers keep doing it, and we have to try and make it work :-)

I then use inspectlet.com to see whether users are findings things and change it if not - nothing better than a video of user sessions to disbelieving visual designers that people do not always find things the way they think they will.

0

I must say that I am personally very sensitive to rollover states as my main personal computer is a Windows 8 touchscreen convertible laptop (similar to MS Surface), and I often find myself interacting more with touch than the touchpad.

That said, hover is a dying interaction.

As we've seen with the hamburger drawer menu, out of site is out of mind. Engagement drops when you hide interactions behind hamburgers/off screen. Ideally, you'd do away with the hover state entirely.

On mobile devices, not having a hover state makes browsing some legacy website designs very difficult, especially when a control has a hover state and a separate click action.

When I design for mobile, I try to avoid dropdowns/hover state as much as possible, so I'd go with #1.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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