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 through12 of this document. These pages are
the front sides of the Touch Gesture
Reference Cards.

Without rearranging the pages, place
the stack of printouts back into yourprinter such that the backs of thecards can be printed on the blanksides of the printouts. For many desktop printers, this means placing thepages blank-side down and oriented
such that the page numbers on theprinted sides are located to the upperright. Requirements for your particular
printer may vary.

Print pages 13 through 23 of this document. These pages are the back sides of
the cards. If you wish to print out some suits within the deck but not others, pleaserefer to the table below for which front side pages match which back side pages.

Cut out the individual cards, following
the gray dashed lines on the back sidepages. On cards that have them, remember to cut around the rounded orbeveled corners (this pertains to allcards except for those in the CoreGestures suit).

SuitFront Sides

Back Sides

Core Gestures

Pages 2–3

Page 22–23

Major User Actions: Basic Actions

322

Major User Actions: Object-Related Actions

4–6

19–21

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

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

Pinch

SpreadPress

Press + Tap

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

Briefly touch surface with fingertip.

Touch surface with two fingers and bringthem closer together.

Rapidly touch surface twice with fingertip.

Touch surface with two fingers and movethem apart.

Move fingertip over surface without losing
contact.

Touch surface for extended period of time.

Quickly brush surface with fingertip.

Press surface with one finger and briefly
touch surface with second finger.

2Press + Drag

Press + Drag

RotateRotateCORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

RotateChangemodeOpen

SelectDouble Tap

Tap

Rapidly touch surface twice with fingertip.

Briefly touch surface with fingertip.

MAJOR USER ACTIONS:BASIC ACTIONSMAJOR USER ACTIONS:BASIC ACTIONS

Press surface with one finger and movesecond finger over surface without
losing contact.

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Press surface with one finger and movesecond finger over surface without
losing contact.

Press

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Touch surface with two fingers and move
one finger in a clockwise or counterclockwise direction.

Touch surface for extended period of time.

CORE GESTURES

MAJOR USER ACTIONS:BASIC ACTIONS

3

AdjustAdjustAdjustBundlePress + dragPress + dragLasso + crossPress + tap, then dragPress surface with one finger andmove second finger over surface without
losing contact.

Press surface with one finger andmove second finger over surface without
losing contact.

Make circular motion with finger, thencross over selected object.

Touch first object while second finger
taps other objects, the move selectedobjects by dragging first finger.

112

2

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

DeleteDuplicate

Move

Move

Drag (across item or off-screen)Tap (source + destination)

Drag + drop

Multi-finger dragMove fingertip over surface without
losing contact.

Touch object, then touch elsewhereon surface.

Move fingertip over surface without
losing contact.

Move two to five fingertips over surface
without losing contact.

OR2

OR

1

MAJOR USER ACTIONS:OBJECT-RELATED ACTIONSMAJOR USER ACTIONS:OBJECT-RELATED ACTIONSMAJOR USER ACTIONS:OBJECT-RELATED ACTIONSORMAJOR USER ACTIONS:OBJECT-RELATED ACTIONS

4MoveMoveRotate

RotateFlickPress + tap

Two-handed rotate

Two-handed rotate

Quickly brush surface with fingertip.

With one finger on object, touch
elsewhere on surface with second finger.

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Touch surface with two fingers and move
one finger in a clockwise or counterclockwise direction.

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

RotateScale down

Scale down

Scale up

One-handed rotate

PinchSqueeze

SpreadTouch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Touch surface with two fingers and bringthem closer together.

Touch surface with five fingers and bringthem closer together.

Touch surface with two fingers and movethem apart.

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

5Scale up

Adjust view(rotate)Adjust view(rotate)

Adjust view(rotate)

Two-handed rotate

Two-handed rotate

One-handed rotate

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Touch surface with two fingers and move
one finger in a clockwise or counterclockwise direction.

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

MAJOR USER ACTIONS:OBJECT-RELATED ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONS

Adjust view
(zoom in)

Adjust view
(zoom in)

Adjust view
(zoom out)

Adjust view
(zoom out)

SpreadDouble tap

Pinch

Double tap

Touch surface with two fingers and movethem apart.

Rapidly touch surface twice with fingertip.

Touch surface with two fingers and bringthem closer together.

Rapidly touch surface twice with fingertip.

MAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONS

Splay
Touch surface with five fingers and movethem apart.

6Displaycommands

Displaycommands

Displaycommands

Displaycommands

Press

Press + tap

Double tap

Corner tap

Touch surface for extended period of time.

Press surface with one finger and briefly
touch surface with second finger.

Rapidly touch surface twice with fingertip.

Touch specific corner of surface withfingertip.

MAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONS

Move throughlist

Move throughlistMove throughlist

Move throughlist

Two-finger dragTwo-handed rotate

Two-handed rotate

One-handed rotate

Move to previous/next item in list.

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

Touch surface with two fingers and move
one finger in a clockwise or counterclockwise direction.

Touch surface with two fingers and movethem in a clockwise or counterclockwise
direction.

MAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONS

7PanScroll

ScrollScrollDrag handDrag

Two-finger dragPress

Move fingers and palm of one hand oversurface without losing contact.

Move fingertip over scrollbar withoutlosing contact.

Move two fingers up or down acrosssurface.

Touch scrollbar for extended periodof time.

MAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSScroll fast

Stop scrolling

Scrub

AcceptFlickTapDrag

Quickly brush surface with fingertip in thedirection you want to scroll.

Briefly touch surface with fingertip when ascroll is in progress.

Move fingertip over scrollbar withoutlosing contact.

MAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSMAJOR USER ACTIONS:NAVIGATING ACTIONSDraw a check mark on surface withfingertip.

MAJOR USER ACTIONS:DRAWING ACTIONS

8CutGet help

RejectUndo

MAJOR USER ACTIONS:DRAWING ACTIONSMAJOR USER ACTIONS:DRAWING ACTIONSMAJOR USER ACTIONS:DRAWING ACTIONSMAJOR USER ACTIONS:DRAWING ACTIONS

Tap

Double tap

FlickDrag

Core gesture: Tap

Core gesture: Double tap

Core gesture: Flick

Core gesture: Drag

A user gesture used to press or select acontrol or link (analogous to a single click
in a desktop application). To tap, users
make a quick up-and-down motion with afinger, lightly striking the screen.

A user gesture used to zoom in or outof content or an image. A double tap
consists of two quick taps.

A user gesture used to scroll or panquickly. To flick, users place a finger on
the screen and quickly swipe it in thedesired direction.

A user gesture used to scroll,move theviewport, or pan. To drag, users place afinger on the screen and move it in thedesired direction without lifting it from thescreen.

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

Draw a slash on surface with fingertip.

Draw a question mark on surface withfingertip.

Draw an “X” on surface with fingertip.

Scratch out area on surface withfingertip.

9Pinch openPinch close

Touch + holdTwo-fingerscroll

Core gesture: SpreadCore gesture: Pinch

Core gesture: Press

A two-finger user gesture used to zoom
in. To pinch open, users place thethumb and a finger (or two fingers) close
together on the screen and move themapart without lifting them from the screen.

A two-finger user gesture used to zoom
out. To pinch close, users place thethumb and a finger (or two fingers) a little
distance apart on the screen and movethem toward each other without liftingthem from the screen.

A user gesture used to display an information bubble, magnify content under thefinger, or to perform specifications in builtin applications and features. To touch andhold, users touch the screen, leaving theirfinger motionless until the information isdisplayed or the action occurs.

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

PLATFORM SUPPORT:APPLE iOS GESTURES

Tap

Double tap

FlickDrag

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.

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT:
ANDROID GESTURES

Core gesture: Drag (two-finger)
A user gesture used to scroll content in anelement with overflow capability or a scrollable in-line frame element. A two-finger scroll
is a drag performed with two fingers moving
together in the same direction.

10Pinch

Pinch

Touch + hold

Tap

Core gesture: SpreadCore 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.

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT:
ANDROID GESTURES

PLATFORM SUPPORT: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
states of a control or application.

Shows options (context menu) for an item.

Moves content via direct manipulation(content sticks to finger and follows). A
pan can reorder or move a specific item.

Moves content.

PLATFORM SUPPORT:WINDOWS PHONE 7

PLATFORM SUPPORT:WINDOWS PHONE 7

PLATFORM SUPPORT:WINDOWS PHONE 7

PLATFORM SUPPORT:WINDOWS PHONE 711

PinchPinchCore gesture: SpreadCore gesture: Pinch

Continuous zoom.

Continuous zoom.

PLATFORM SUPPORT:WINDOWS PHONE 7

PLATFORM SUPPORT:WINDOWS PHONE 712PLATFORM SUPPORT:PLATFORM SUPPORT:WINDOWS

WINDOWSPHONE 7

GESTURESPHONE 7GESTURES13PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:WINDOWS

ANDROID

ANDROID

ANDROID

PHONE 7GESTURESGESTURESGESTURES

PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:WINDOWS

WINDOWS

WINDOWS

WINDOWSGESTURESPHONE 7GESTURESPHONE 7GESTURESPHONE 7GESTURESPHONE 7GESTURES

14

PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:APPLE iOSGESTURES

APPLE iOSGESTURES

APPLE iOSGESTURES

APPLE iOSGESTURES

PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:

ANDROID

ANDROID

ANDROID

ANDROIDGESTURESGESTURESGESTURESGESTURES15

MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:DRAWINGDRAWINGDRAWINGDRAWING

PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:PLATFORM SUPPORT:APPLE iOSGESTURES

APPLE iOSGESTURES

APPLE iOSGESTURES

APPLE iOSGESTURESACTIONS ACTIONS ACTIONS ACTIONS

16

MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:NAVIGATINGNAVIGATINGNAVIGATINGNAVIGATINGMAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:DRAWINGNAVIGATINGNAVIGATINGNAVIGATINGACTIONS ACTIONS ACTIONS ACTIONSACTIONS ACTIONS ACTIONS ACTIONS

17MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:NAVIGATINGNAVIGATINGNAVIGATINGNAVIGATINGMAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:NAVIGATINGNAVIGATINGNAVIGATINGNAVIGATINGACTIONS ACTIONS ACTIONS ACTIONSACTIONS ACTIONS ACTIONS ACTIONS

18MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:NAVIGATINGNAVIGATINGNAVIGATINGOBJECT-RELATEDMAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:NAVIGATINGNAVIGATINGNAVIGATINGNAVIGATINGACTIONS ACTIONS ACTIONS ACTIONSACTIONS ACTIONS ACTIONS ACTIONS

19

MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:OBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDMAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:OBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONSACTIONS ACTIONS ACTIONS ACTIONS

20MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:OBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDMAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:MAJOR USER ACTIONS:OBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDOBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONSACTIONS ACTIONS ACTIONS ACTIONS21CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

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

BASIC BASIC BASICACTIONS ACTIONS ACTIONS

22CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES

CORE GESTURES23