Hover states

Hover over the title to find out more…

Some designers say hover is dead. Some say it’s cool. And some are downright confused about it. Hover has been around for ages and yet, many still struggle how to properly use it.

At a recent IxDA workshop in Switzerland one of the first subjects I explored with students was hover states.

Let’s look at an example.

When browsing a portfolio turns into an easter egg hunt

When browsing a portfolio turns into an easter egg hunt

Let’s take a closer look how this works out in action.

First, you need to hover over every single thumbnail before you see content that might be critical for navigation. The only way to orient yourself is to play the nifty “hover puzzle” the designer created. Who are your clients? Hover to find out! When was this work done? Hover to find out! What kind of work was involved? … You get the idea.

When navigating a website or app feels like a point and click adventure, it’s probably a good time to rethink your design strategy.

It’s pretty obvious why the above interaction is annoying: You’re hiding content that’s critical for navigation.

Does this mean we should ditch hover altogether? Not necessarily.

Using hover in meaningful ways

Instead of thinking of hover as the trigger, we should think of it as a progressive enhancement. Improve the experience for devices that support it and find an appropriate equivalent for devices that don’t.

Ditching hover simply because it isn’t available on mobile isn’t a sound approach. It’s a lazy one. Hover can still be useful.

Interaction Cues
Subtle feedbacks can go a long way in a world that becomes increasingly flat. Let’s look at some Material Design examples.

Google Material Design Components — Menu & Buttons

Note how the flat button in Material Design changes its background on hover while the raised button doesn’t. It improves the button’s affordance. The subtle background in a drop-down menu helps users navigate in a more confident and efficient way.

We can use these kins of cues to progressively enhance experiences on devices that support hover, without compromising the experience for those that don’t.

Contextual enhancements
On desktop, contexutal hover establishes a clear relationship between an object and its options and can buy the user some extra time.

Take Instapaper as an example. It allows you to archive articles without the burden of navigating to the detail view. The large hover target ensures options get easily discovered, while at the same time, making navigation and article management more efficient.

Disclosing options — Mobile vs Desktop

The mobile app implements the hover’s natural equivalent: a swipeable cell pattern as seen across many different apps on iOS. In the web version, options only become available once the user has navigated to the detail screen.

Takeaway

Let’s always be deliberate when combining hover and progressive disclosure. Our users will thank us one day. Now let’s go out and build a snowman. ☃

Leading A.I. based efforts @Google on Lens and Assistant. Creator of Mindful. Formerly @iA .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store