I came across this really great podcast with Josh Clark, the writer of Tapworthy, where he explores the ins and outs of designing interfaces for mobile touch devices, how interactive elements can look clickable and gestures made clear.
Josh covers various topics around touch inputs during the talk, but the one that really stand out were the touch gestures. If you think about it, certain gestures, like pinch to zoom, are very abstract and we’ve learn not directly from the interfaces but very probably from somebody showing it to us or through the product commercials. Josh Clark points out during the talk that “We don’t have a very detailed dictionary of touch gestures”. Gesture interactions are supported and documented by the great majority of mobile touch devices, but the actual interfaces in the other end don’t always tell you that these gestures are available and how you’re supposed to use them.
One way of looking at this is that touch gestures work like shortcuts, more useful for pro users, almost working as keyboard shortcuts on a desktop. A good example, as Josh refers in his talk is the new Twitter app for iOS which introduced two new gestures as shortcuts for two sections that were relegated to a lower level with the redesign, but without any affordance at all that you can do that (you have to swipe left or right from a navigation bar button).
I think this shouldn’t be the full extent of how touch gestures can be used, as they have the potential of being extremely useful when combined with well thought through interfaces.
Consider, as a very basic example, the way an image carousel is built. While desktop, carousels require a lot of chrome elements to describe the interaction, how to make it move and explain what part of the carousel content is being shown, on a touch device a carousel execution can be extremely simple when combined with a gesture event. A simple image of elements with the last image being only partially displayed can already give the right affordance for the movement required to view more images in the carousel (you can see a good example of a carousel as described above with an iPad, on the The Daily Show mobile site).
Simple touch gestures are not always easy to communicate, but communicating multitouch gestures definitely becomes an even more arduous task.
As an answer to these challenges here’s a few thoughts on practices that can be followed to ensure maximum discoverability for touch gestures:
- Label interactive elements with actionable terms (e.g. a button with the label ‘drag’)
- Give visual clues to help convey the movement required to perform.
- Make interactive elements visually clickable.
- Use texture patterns to highlight the areas in which you expect the gesture to initiate.
Any other ideas of how we can improve the affordance for touch and multitouch gestures?
