Touch gesturecards

Touch Gesture REFERENCE CARDS
Conceived of, researched, illustrated, and designed by: Craig Villamor, Dan Willis, and Luke Wroblewski
Card concept and design by: Kim Fulton
Last updated June 26, 2011

INSTRUCTIONS

Step 1: Step 2: Step 3: Step 4:

On card stock, print pages 2 through Without rearranging the pages, place Print pages 13 through 23 of this document. These pages are the back sides of Cut out the individual cards, following
12 of this document. These pages are the stack of printouts back into your the cards. If you wish to print out some suits within the deck but not others, please the gray dashed lines on the back side
the front sides of the Touch Gesture printer such that the backs of the refer to the table below for which front side pages match which back side pages. pages. On cards that have them, re-
Reference Cards. cards can be printed on the blank member to cut around the rounded or
sides of the printouts. For many desk- Suit Front Sides Back Sides beveled corners (this pertains to all
top printers, this means placing the cards except for those in the Core
Core Gestures Pages 2–3 Page 22–23 Gestures suit).
pages blank-side down and oriented
such that the page numbers on the Major User Actions: Basic Actions 3 22
printed sides are located to the upper
Major User Actions: Object-Related Actions 4–6 19–21
right. Requirements for your particular
printer may vary. Major User Actions: Navigating Actions 6–8 17–19
Major User Actions: Drawing Actions 8–9 16–17
Platform Support: Apple iOS Gestures 9–10 15–16
Platform Support: Android Gestures 10–11 14–15
Platform Support: Windows Phone 7 Gestures 11–12 13–14

Supporting materials for this guide can be found online at: http://www.lukew.com/touch/

This work is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported License.
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

Tap Double Tap Drag Flick
Briefly touch surface with fingertip. Rapidly touch surface twice with fingertip. Move fingertip over surface without losing Quickly brush surface with fingertip.
contact.

CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES

Pinch Spread Press Press + Tap
Touch surface with two fingers and bring Touch surface with two fingers and move Touch surface for extended period of time. Press surface with one finger and briefly
them closer together. them apart. touch surface with second finger.


2

Press + Drag Press + Drag Rotate Rotate
Press surface with one finger and move Press surface with one finger and move Touch surface with two fingers and move Touch surface with two fingers and move
second finger over surface without second finger over surface without them in a clockwise or counterclockwise one finger in a clockwise or counterclock-
losing contact. losing contact. direction. wise direction.


Rotate Change Open Select
Touch surface with two fingers and move
them in a clockwise or counterclockwise mode Double Tap Tap
direction. Rapidly touch surface twice with fingertip. Briefly touch surface with fingertip.
Press
Touch surface for extended period of time.

CORE GESTURES MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
BASIC ACTIONS BASIC ACTIONS BASIC ACTIONS

3

Adjust Adjust Adjust Bundle
Press + drag Press + drag Lasso + cross Press + tap, then drag
Press surface with one finger and Press surface with one finger and Make circular motion with finger, then Touch first object while second finger
move second finger over surface without move second finger over surface without cross over selected object. taps other objects, the move selected
losing contact. losing contact. objects by dragging first finger.

1

1 2
2

MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS

Delete Duplicate Move Move
Drag (across item or off-screen) Tap (source + destination) Drag + drop Multi-finger drag
Move fingertip over surface without Touch object, then touch elsewhere Move fingertip over surface without Move two to five fingertips over surface
losing contact. on surface. losing contact. without losing contact.

OR

2 OR OR
1


4

Move Move Rotate Rotate
Flick Press + tap Two-handed rotate Two-handed rotate
Quickly brush surface with fingertip. With one finger on object, touch Touch surface with two fingers and move Touch surface with two fingers and move
elsewhere on surface with second finger. them in a clockwise or counterclockwise one finger in a clockwise or counterclock-
direction. wise direction.


Rotate Scale down Scale down Scale up
One-handed rotate Pinch Squeeze Spread
Touch surface with two fingers and move Touch surface with two fingers and bring Touch surface with five fingers and bring Touch surface with two fingers and move
them in a clockwise or counterclockwise them closer together. them closer together. them apart.
direction.


5

Scale up Adjust view Adjust view Adjust view
Splay (rotate) (rotate) (rotate)
Touch surface with five fingers and move
them apart. Two-handed rotate Two-handed rotate One-handed rotate
Touch surface with two fingers and move Touch surface with two fingers and move Touch surface with two fingers and move
them in a clockwise or counterclockwise one finger in a clockwise or counterclock- them in a clockwise or counterclockwise
direction. wise direction. direction.

OBJECT-RELATED ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS

Adjust view Adjust view Adjust view Adjust view
(zoom in) (zoom in) (zoom out) (zoom out)
Spread Double tap Pinch Double tap
Touch surface with two fingers and move Rapidly touch surface twice with fingertip. Touch surface with two fingers and bring Rapidly touch surface twice with fingertip.
them apart. them closer together.

NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS

6

Display Display Display Display
commands commands commands commands
Press Press + tap Double tap Corner tap
Touch surface for extended period of time. Press surface with one finger and briefly Rapidly touch surface twice with fingertip. Touch specific corner of surface with
touch surface with second finger. fingertip.


Move through Move through Move through Move through
list list list list
Two-finger drag Two-handed rotate Two-handed rotate One-handed rotate
Move to previous/next item in list. Touch surface with two fingers and move Touch surface with two fingers and move Touch surface with two fingers and move
them in a clockwise or counterclockwise one finger in a clockwise or counterclock- them in a clockwise or counterclockwise
direction. wise direction. direction.


7

Pan Scroll Scroll Scroll
Drag hand Drag Two-finger drag Press
Move fingers and palm of one hand over Move fingertip over scrollbar without Move two fingers up or down across Touch scrollbar for extended period
surface without losing contact. losing contact. surface. of time.


Scroll fast Stop scrolling Scrub Accept
Draw a check mark on surface with
Flick Tap Drag
fingertip.
Quickly brush surface with fingertip in the Briefly touch surface with fingertip when a Move fingertip over scrollbar without
direction you want to scroll. scroll is in progress. losing contact.

NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS DRAWING ACTIONS

8

Cut Get help Reject Undo
Draw a slash on surface with fingertip. Draw a question mark on surface with Draw an “X” on surface with fingertip. Scratch out area on surface with
fingertip. fingertip.

DRAWING ACTIONS DRAWING ACTIONS DRAWING ACTIONS DRAWING ACTIONS

Tap Double tap Flick Drag
Core gesture: Tap Core gesture: Double tap Core gesture: Flick Core gesture: Drag
A user gesture used to press or select a A user gesture used to zoom in or out A user gesture used to scroll or pan A user gesture used to scroll,move the
control or link (analogous to a single click of content or an image. A double tap quickly. To flick, users place a finger on viewport, or pan. To drag, users place a
in a desktop application). To tap, users consists of two quick taps. the screen and quickly swipe it in the finger on the screen and move it in the
make a quick up-and-down motion with a desired direction. desired direction without lifting it from the
finger, lightly striking the screen. screen.

PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURES

9

Pinch open Pinch close Touch + hold Two-finger
Core gesture: Spread
A two-finger user gesture used to zoom
Core gesture: Pinch Core gesture: Press scroll
A two-finger user gesture used to zoom A user gesture used to display an informa-
in. To pinch open, users place the out. To pinch close, users place the tion bubble, magnify content under the Core gesture: Drag (two-finger)
thumb and a finger (or two fingers) close thumb and a finger (or two fingers) a little finger, or to perform specifications in built- A user gesture used to scroll content in an
together on the screen and move them distance apart on the screen and move in applications and features. To touch and element with overflow capability or a scroll-
apart without lifting them from the screen. them toward each other without lifting hold, users touch the screen, leaving their able in-line frame element. A two-finger scroll
them from the screen. finger motionless until the information is is a drag performed with two fingers moving
displayed or the action occurs. together in the same direction.

APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURES

Tap Double tap Flick Drag
Core gesture: Tap Core gesture: Double tap Core gesture: Flick Core gesture: Drag
No description provided. No description provided. No description provided. No description provided.

ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES

10

Pinch Pinch Touch + hold Tap
Core gesture: Spread Core gesture: Pinch Core gesture: Press Core gesture: Tap
No description provided. No description provided. No description provided. Actions on an item in a two step process.
Stop a list from scrolling. Single touch on
the screen.

ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES WINDOWS PHONE 7

Double tap Touch + hold Pan Flick
Core gesture: Double tap Core gesture: Press Core gesture: Drag Core gesture: Flick
Toggle between “in” and “out” zoom Shows options (context menu) for an item. Moves content via direct manipulation Moves content.
states of a control or application. (content sticks to finger and follows). A
pan can reorder or move a specific item.

WINDOWS PHONE 7 WINDOWS PHONE 7 WINDOWS PHONE 7 WINDOWS PHONE 7

11

Pinch Pinch
Core gesture: Spread Core gesture: Pinch
Continuous zoom. Continuous zoom.

PLATFORM SUPPORT: PLATFORM SUPPORT:
WINDOWS PHONE 7 WINDOWS PHONE 7

12

PLATFORM SUPPORT: PLATFORM SUPPORT:

WINDOWS WINDOWS
PHONE 7 PHONE 7
GESTURES GESTURES

13


WINDOWS ANDROID ANDROID ANDROID
PHONE 7 GESTURES GESTURES GESTURES
GESTURES


WINDOWS WINDOWS WINDOWS WINDOWS
PHONE 7 PHONE 7 PHONE 7 PHONE 7
GESTURES GESTURES GESTURES GESTURES

14


APPLE iOS APPLE iOS APPLE iOS APPLE iOS


ANDROID ANDROID ANDROID ANDROID

15


DRAWING DRAWING DRAWING DRAWING
ACTIONS ACTIONS ACTIONS ACTIONS


APPLE iOS APPLE iOS APPLE iOS APPLE iOS

16


NAVIGATING NAVIGATING NAVIGATING NAVIGATING


DRAWING NAVIGATING NAVIGATING NAVIGATING

17





18


NAVIGATING NAVIGATING NAVIGATING OBJECT-RELATED



19


OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED



20





21


MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: CORE GESTURES

BASIC BASIC BASIC
ACTIONS ACTIONS ACTIONS

22



23

Touch gesturecards

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Touch gesturecards