Not-hover

As I’ve been saying for quite a while now, ‘hover’ needs to be demoted to the status of ‘extra frill’ rather than forming an core part of our UIs.

In terms of front-end development I’ve been adding a parallel ‘focus’ trigger alongside my ‘hover’ triggers in CSS for about 8 months. I did this to ensure that the hover states can also be triggered by moving through the layout using the tab key or the thumbwheel that can be found on some smart phones. This has worked fine for most things but the iPad and iPhone remain stubbornly key-less and wheel-less.

So what happens to my lovely ‘hover’ states on touch-only devices? The short answer is “nothing”. Current commercially available touch screen technology lacks the ability to sense proximity to the screen (in any case “proximity” does not necessarily translate to “intention”). The long answer is “still nothing”. It doesn’t look like the trends towards ‘touch-only’ in the design of mobile and other touch-based hardware is likely to change for a while so we need to find other ways to cope without ‘hover’.

So what do we do? We make better patterns for descriminating links from ordinary copy. We stop using JavaScript and CSS solutions to display extra information and make sure that these are not a requirement. We show everything.

If it’s not important enough to be shown without interaction then it’s probably not important enough to be shown at all.

You can still use ‘hover’ if you want to add a little flair to your controller-only versions of your pages but it should be treated as just that – a little flair for one specific output channel – not something to base an important interaction on.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s