Teaching Gestures

As multitouch input systems are becoming more widespread, gestures are starting to be an important part of how we interact with computers and devices. Communicating these gestures to your users can be quite hard. To explain how to use a multitouch trackpad or Magic Mouse, Apple uses movies embedded right into the System Preferences application:

Mouse System Preferences

This approach works well for showing a few simple gestures, but if you’re trying to communicate a dozen complex gestures, movies become problematic. For complex gestures, it’s hard to see what exactly the person in the video is doing. Creating so many movies costs time and money. They require a lot of disk space, and they take away screen space.

Jitouch is a system extension which adds several additional multitouch gestures to Mac OS X. Some of these gestures are quite complex. The application uses labels such as «One-Fix-Press Two-SlideDown», «Two-Fix Index-Double-Tap» or «Index-Fix Middle-Slide-In» for each individual gesture. This is hard to understand.

Jitouch solves this problem quite cleverly. Mousing over a gesture produces a semi-transparent overlay in the shape of the input device which shows how the gesture works using animated grey dots. Here’s how this looks for Apple’s Magic Mouse:

It’s a clean, elegant, and simple solution to a problem that will become more and more common in the future.

If you require a short url to link to this article, please use http://ignco.de/239

designed_for_use_small

If you liked this, you'll love my book. It's called Designed for Use: Create Usable Interfaces for Applications and the Web. In it, I cover the whole design process, from user research and sketching to usability tests and A/B testing. But I don't just explain techniques, I also talk about concepts like discoverability, when and how to use animations, what we can learn from video games, and much more.

You can find out more about it (and order it directly, printed or as a DRM-free ebook) on the Pragmatic Programmers website.