Below is an article published in 2009 while I was working at Microsoft as a Technical/UX Evangelist on the MIX Online team. The site has since been retired and the team re-orged, but the sentiment of the article remains relevant, IMO.
As UX Professionals we have to think about moving away from traditional mouse-based interactions and consdider a new way.
I still use, flyout panels, rollovers and mouse overs when designing user-interfaces, but [in 2009] I’m [rethinking] these methods, especially when designing for [mobile].
Relying on a hover-state/mouse-cursor model hinders interactions and obfuscates the real intent of the design. Although these conventions may work for the desktop or laptop scenario, they impede interactivity and frustrate users in other contexts. [Now in 2016, we know this all too well, huh?]
In doing research for this article, I found a great article by Bill Scott, “Musings on Mouse Hover” about the benefits of rollover/hover-states. For interfaces that require a mouse, I generally agree with Scott. He writes:
Use hover to create a more lightweight but engaging way to cue the user to hidden functionality. Use it as a way to provide just-in-time details. Use it to keep your page visually simpler providing what is needed when they are most curious.
But what happens when there’s no cursor wandering around the user-interface? What happens when buttons are activated on-click, gesture, or similar interaction? Answer: nothing is lost if the hover-states are *enhancements,* but if they’re an integral part of your UI, users will get lost and frustrated.
Context & Clarity
We have to make user-interfaces clear. Functionality needs to be visually apparent and indicative of what the user should expect. We can no longer rely on images lighting up, buttons or sections gaining focus, alt-text giving instruction or dropdown menus appearing when a cursor triggers them.
Again, in the touch-scenario, the developer/designer cannot rely on an omnipresent cursor.
Stepping Outside the Laptop/Desktop Dichotomy
As user experience professionals, it’s our job to step outside the laptop/desktop dichotomy and consider the myriad devices on which our interfaces might now be available. I’m picking on hover-states here, but the problems include screen-sizes, required plugins, and download times, too.
How do you accommodate for not only screen resolution and different browsers, but also different form factors, input mechanisms, and platforms such as mobile and various providers?
Drop us a line below, and be sure to follow us on Twitter @mixonline.