insight

A World Without Rollovers: Multi-Touch Design for the Web

by Chris Mayfield May 26, 2010

The mobile computing revolution has produced a multitude of products and new ideas about how we interact with these devices. I’ve explored many of these approaches from stylus to rollerball to touch-screen functionality. Of all of these approaches, multi-touch functionality is the most powerful, and I think the most likely to become the standard for mobile interaction and beyond.

I was recently tasked with creating iPad desktop icons for some of our clients’ websites and began to wonder how this type of device — and multi-touch in general — would impact web design in the future.

Up until now, website navigation has been done exclusively with a mouse. As users explore a site with a mouse, we look for clues to determine their intention and then provide content or interactive events to help them to navigate. Designing for such interactions has produced a library of elements such as rollovers, dropdown menus, underline text links, tool tips, etc.

How will these behaviors transfer to multi-touch? And how will user experience diagramming (wireframes) adjust to handle it?

Some interactions such as two-finger scrolling or two-finger pinch-zoom are fairly intuitive and have been widely adopted on mobile devices; however, without the mouse, we more or less lose the concept of intent as a “trigger” for interaction events. We can still utilize richer and more elaborate interactions, but must create a type of standardized iconography, which details the type of interaction necessary.

Take for example a tool tip or a hover-state event. You could approach this by forcing someone to call the tool tip with a touch (but not revealing a call to action until the additional content is presented). Repeat visitors may find this inefficient or annoying. You could also approach it with a secondary button for more information. Or you could utilize multi-touch by allowing the user to see additional content with a two finger reverse pinch to “open” the content. You could identify this action with some iconography in the corner of the element.

I’ve also considered global navigation, which previously has been the dominant element at the top of every website. A nav being a utility to access content, I always strive for ways to minimize its presence and give content the spotlight. For multi-touch, I considered the option of accessing a nav from anywhere on the site through a single global gesture such as a three-finger reverse pinch. Make the gesture and your options are available to you at the location of the gesture.

From a UX perspective, I’ve thought of iconography that could be used in wireframing to create a shorthand for these multi-touch gestures: simply a number representing the number of digits with directional information about the motion involved for the gesture (see image above). I feel this could be used to outline functionality and could be included in final design elements as well.

These points are by no means meant to be final solutions for multi-touch interaction, but are food for thought and discussion. I personally find this to be a very exciting change in interaction design and look forward to the challenge of taking it on.

 

Comments

Add comment


 

biuquote
  • Comment
  • Preview
Loading



The way we see it, people who share insight with each other innovate, grow and succeed together.

Subscribe

Log in

The opinions contained in these pages do not necessarily reflect those of Springbox or its parent company, DG FastChannel.