It is a well-established expectation of online browser-based users that hovering over an object with your mouse may initiate an action. This is called a feedback loop, and if that object is a link or a button the feedback of, say a color change and/or your mouse turning from a pointer to a little hand, tells the user that that object affords clicking. And by clicking on an object a user completes their desired action.
It sounds rather complex when you break it down, but this is generally how we navigate the web today and visual cues, actions, feedback loops, and affordances make up our mental model of how websites and applications should behave. These terms and ideas are what make up the building blocks of human-computer interaction (HCI), as well as interaction (ID) and user experience (UX) design.
Today, we’ll look at one interactive element in particular: the hover state. We’ve all seen hover states designed and employed. For example, when I hover over a link in Google, that link becomes underlined. The underlining is providing me with feedback that says that that text affords clicking. Additionally, Google delivers other types of feedback by showing links in purple to indicate that I have already visited those sites. Being one of the first ever search engines, Google also provides us a good mental model of how search tools should behave—but you can read our other article on search tools for more on that.
Back to hover states! Because they have been around for some time, hover states provide us with a consistent feedback loop that helps the interface communicate with the user by saying that the application is listening. Viewing websites or applications on a desktop computer with a mouse (for most of us) used to be the only method of browsing, making hover states one of the most important aspects of interactive feedback—but that all changed with the arrival of touchscreen devices. Why, you ask? Because—how does one hover without a mouse? Acting as an advocate for accessibility, it’s also worth pointing out that hover states have never been user-friendly toward people only navigating with a keyboard or other devices for impaired individuals. So banking on displaying special features or information on your online project probably isn’t going to provide you with the best reward.
If not only with accessibility in mind, it’s remarkable how much touchscreen devices and responsive sites are making us rethink the necessity of hover states. Even if you’re designing a site that isn’t responsive, people use their tablets or other touch devices to browse the same websites or use the same applications that you would traditionally only use on a computer with a mouse. So let’s dissect more issues with the hover state, as well as some solutions.
The Biggest Pain Points of the Hover State
One of the most prevalent examples of using hover states can be found in websites with drop-down navigation menus. This has certainly been the convention for years to show menu items when the navigation is hovered over, so there’s nothing necessarily wrong with using hover for a menu. But, have you ever tried to see a dropdown menu on your touchscreen smartphone? Were you frustrated with the feedback that the interaction provided? How were you able to navigate through the site?
Too Many Hover Items
There are times when tools that are supposed to be useful end up being used to the point of interference. Hover states are intended to provide a user with helpful feedback about what the site affords to do. However, by over-utilizing hover states, an interface and quickly get congested and busy, without indicating anything helpful to the user. Sometimes the windows that pop up with hover obstruct what the actual user is trying to accomplish and causes frustration.
Information Bubbles, Dialog Boxes and Pop-Ups
Little pop-ups or “click here for more” indicators should be avoided in areas that require more explanation or context—like in e-commerce sites. Product list pages, for example, often provide a little bit of information about a product on hover, which is an easy way to de-clutter interfaces while also letting potential buyers explore more about the product. That information (and everything else about the product) needs to also be available on the product page itself, so that it doesn’t detract from the experience of a touchscreen user, but adds some additional usefulness only for those who do see it.
Solutions for Going Above and Beyond Hovering
The key is to provide visual cues that UI elements afford clicking. Keeping a consistent color for links or buttons, or rethinking a navigation scheme that doesn’t utilize dropdown menus on hover can be a start. Below are some more solutions.
Retail giant Target, famously sued for their site’s lack of accessibility, now uses an on-click solution for their “quick info” pop-up while offering a hover state for the button too. On top of these visual indicators and feedback loops, they show a description of the object (the “alt text” in the yellow box) to provide the utmost accessibility for people on any type of device or browsing ability. This design and functionality is now in accordance with the WAI and 508 Compliance—which, if you haven’t heard of, you should probably familiarize yourself before you end up being the next Target.
Utilizing Style Sheets for Different Device Types
One of the most common workarounds that I’ve seen are when sites utilize hover states on responsive sites in the desktop version, and then design and code different states for the tablet or mobile versions. Although this provides a good solution for the time being, it doesn’t necessarily create a seamless experience for the user and is the most expensive and time-consuming solution because 1) you’re paying a designer to design multiple views of the same object, and 2) you’re making your developer code different states for those designs. In my opinion, you’re better off…
Designing with Mobile/Hover in Mind
By constraining the design to eliminate hover events, you not only make the experience good regardless of what device your users are on, you make your site more accessible, and you also make is easier to create a touch specific native application later on. By coming up with the best possible design solution that accompanies a lack of hover states, you create the most seamless, cost-effective solution for any device type or user. Although it may take some getting used to, by implementing these parameters into your design you’re already one step ahead of the game when it comes to catering to the ever-growing mobile (and touch screen) audience. Of course, if you’d like to know more about the state of the hover state, you can always get in touch with us!