Out with the :hover, in with the Tap
In his latest post, Derek Powazek talks about designing for the iPad and contrasts it to his fifteen years of doing web design and even more years of experience with print design. A key point he touched upon was the hover state, which is something I love as well and think is not utilized as well as it could be on the Web—even now, in 2010.
Taking a larger look at digital interfaces in general, feedback and the naturalness of User Interface elements play an important role in the emotional connection something creates in us. Remember back in the early ’90s when DHTML became a thing and people had those little JavaScript things follow your mouse cursor around the website? They served absolutely no interface purpose whatsoever, yet they were oh-so-popular. Why? Because it allowed us developers to create an emotional connection between the site and the user. Before then, it was all just static documents that lived on one end, whilst the user read and clicked through them on the other end. The gap between our two worlds was vast, and dumb little eyes following a cursor were the first attempt at building a bridge across it.
Fortunately, we quickly grew tired of the incessant stalker objects and ditched them in favor of something a bit more practical. This is where the mouseOver and :hover features come in: they were the natural evolution of little stalker objects, providing us with a (better) means to create an emotional bond between reader and site.
But as far as web design is concerned, that’s also pretty much where it stopped. We enriched our sites with instant feedback loops (AJAX) and made wholly rich applications, but the next best thing past hover, drag and drop, has only seen moderate use and implementations on the web so far. Few sites employ the technique heavily, and even with those it’s a complementary feature, not a main interaction point (though that’s probably for good reasons).
Then suddenly, Apple popularized touch-screen interfaces. Gone is the mouse, gone is the hover, and—most importantly—gone is the abstraction layer between us and the interface. Bigger than drag and drop is the fact that these (multi) touch-screen interfaces give us an even stronger emotional connection because we’re directly controlling the interface. You’re not “scrolling through your music”, you’re touching your music collection. Flick up. Flick down. Tap. Pinch, zoom, drag… never before have digital interfaces been so natural. So what does that mean for the web?
As I alluded to earlier, I feel that hover states aren’t fully utilized on the Web of today. They aren’t just functional, and they aren’t just for show: they allow us to add emotional impact to our designs which represent value that goes above and beyond both form and function. It’s why so many people have said such wonderfully kind things about the Elsewhere tabs on my site—their first experience with them, in a modern browser that is, was one of joy and surprise. The tabs are fun. They delight. The hover states have only marginal functional purpose: to indicate which one you’re hovering over, helping you identify where you’d go next if you clicked the link. Similarly, they have marginal form purpose: they pop some color into an otherwise mostly monochromatic design. But their emotional purpose? That’s where it’s at, and that’s what I designed them for. To add something you’d remember, delivering an emotional connection to my site worth mentioning.
Some would say that such design choices are a poor substitute for good content—and I would actually agree. But they can also be supplemental, and that’s how I intend them to be. My primary goal is still to try and produce great content on my site, but beyond the content, beyond the words that may have as big as an emotional impact on a reader as the tabs, I wanted to offer something simple but delightful. And it is this thing I speak of when I say that hover states are under-utilized on the web. These little touches in the user interface, and the way we interact with them, can add more emotional value than a beautiful visual design.
Going full circle, this leaves just one question unanswered: how does the iPad fit into this? Well, I’m currently working on something where I plan to use click and hover for mouse-based interfaces, but switch to tap (and pull/drag/swipe) interactions for touch-based devices. I hope more web designers will explore these things, adding small bytes of delight (sorry) to their interfaces—regardless of whether the user is on an iPad, smartphone or desktop.
