Our Gesture Stencil for OmniGraffle


We made a stencil for OmniGraffle with icons for touchscreen interaction, free gestures and mobile phone gestures. You can download it at Graffletopia. It is a first version of the icon set, we will be updating it from time to time, so feel free to comment and make suggestions for gestures to integrate in the future.

The Ten Most Commonly Used Touchscreen Gestures

Our stencil includes ten gesture icons for the most common touchscreen interactions: Tap, Double Tap, Drag, Slide, Hold/Pres, Swipe (or Fling), Rotate, Press & Drag, Pinch, Spread. They are especially design for use in wireframes.

Body Gestures For Free-Form Interaction

We also included a selection of 15 gestures for interaction with Microsoft Kinect or other free-form systems. We admit that this is in no way a comprehensive overview of the possible gestures. Use it as inspiration and feel free to give us feedback for coming updates.

Mobile Phone Gestures

The five additional icons are about direct interaction with your mobile phone. Use these for instructional documents or interaction storyboards.

Download at Graffletopia »

The Ten Most Important Touchscreen Gestures

Tap to select object Double Tap to select/activate object
Drag to move object Slide to switch on/off
Swipe to flick through or scroll Hold/Press to select
Spread to enlarge/zoom in Pinch to scale down/zoom out
Press And Drag (with one or two hands) Rotate (with one or two hands)

Body Gestures For Free-Form Interaction

Wave to move objects, scroll or activate Turn/Shake (left/right) to cancel or scroll vertically
Nod (up/down) to confirm or scroll horizontally Thumb up to confirm selection
Lean (left/right) to move object Hands on hips to pause
Pinch with both arms to scale down Spread with both arms to enlarge
Standing with arms down to deactivate or reset Jump to select or skip object
Arm out to move a cursor left/right Clap for simple on/off switching, activating or selecting
Standing on one leg to scroll left/right Lift leg to turn an avatar left/right

Mobile Phone Gestures

Read QR code Blow into microphone
Use the phone's camera Bump to exchange info
Shake to reset or randomize

For even more gestures read Dan Saffers excellent book
"Designing Gestural Interfaces" (O'Reilly, 2009)

Download at Graffletopia »