Touch Gesture Reference Guide

by Luke Wroblewski April 19, 2010

The Touch Gesture Reference Guide is a unique set of resources for software designers and developers working on touch-based user interfaces.

Touch Gesture Reference GuideThe guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures (below).

Download

Touch Gesture Reference Guide
Touch Gesture Cards

For wireframes and mock-ups:
Visuals only (PDF)
Visuals only (EPS)
Visuals only (OmniGraffle Stencil)
Visuals only (Visio Stencils)
How to Guide (Visio)


Touch Resources

Touch Target Sizes: outlines recommended touch target sizes from Apple, Microsoft, Nokia, and academic research.

Touch Gesture Diagrams: listing of touch gesture diagrams that illustrate how users can interact with multitouch interfaces. Some can also be used in design documentation.

Touch Interface Growth: details how many touch-based devices are being shipped to consumers each year.

Platform Support

How popular software platforms support core touch gestures.

PlatformPlatform GesturePlatform DescriptionCore Gesture
iPhone OSTapA user gesture used to press or select a control or link (analogous to a singleclick in a desktop application). To tap, users make a quick up-and-down motion with a finger, lightly striking the screen.Tap
iPhone OSDouble TapA user gesture used to zoom in or out of content or an image. A double tap consists of two quick taps. Double Tap
iPhone OSFlickA user gesture used to scroll or pan quickly. To flick, users place a finger on the screen and quickly swipe it in the desired direction.Flick
iPhone OSDragA user gesture used to scroll,move the viewport, or pan. To drag, users place a finger on the screen and move it in the desired direction without lifting it from the screen.Drag
iPhone OSPinch OpenA two-finger user gesture used to zoom in. To pinch open, users place the thumb and a finger (or two fingers) close together on the screen and move them apart without lifting them from the screen.Spread
iPhone OSPinch CloseA two-finger user gesture used to zoom out. To pinch close, users place the thumb and a finger (or two fingers) a little distance apart on the screen and move them toward each other without lifting them from the screen.Pinch
iPhone OSTouch and holdA user gesture used to display an information bubble, magnify content under the finger, or to perform specificactions in built-in applications and features. To touch and hold, users touch the screen, leaving their finger motionless until the information is displayed or the action occurs.Press
iPhone OSTwo-finger scrollA user gesture used to scroll content in an element with overflow capability or a scrollable inline frame element. A two-finger scroll is a drag performed with two fingers moving together in the same direction.Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Windows Phone 7TapActions on an item in a two step process. Stop a list from scrolling. Single touch on the screen.Tap
Windows Phone 7Double TapToggle between "in" and "out" zoom states of a control or application.Double Tap
Windows Phone 7Touch and holdShows options (context menu) for an itemPress
Windows Phone 7PanMoves content via direct manipulation (content sticks to finger and follows). A pan can reorder or move a specific item.Drag
Windows Phone 7FlickMoves contentFlick
Windows Phone 7PinchContinous zoomPinch
Windows Phone 7PinchContinous zoomSpread
PlatformPlatform GesturePlatform DescriptionCore Gesture
Palm webOSTapinvokes an action or opens an item. Position the insertion cursorTap
Palm webOSDouble Tapto perform actions like zoom in/outDouble Tap
Palm webOSFlick to scroll through lists, or quit an applicationFlick
Palm webOSSwipeto the right in lists, to delete itemsDrag
Palm webOSTouch & Dragto scrollDrag
Palm webOSTouch & Holdto enter "reorder" mode. Then drag items to move them.Press
Palm webOSSpreadusing 2 fingers, to zoom in/out on a web page or a pictureSpread
Palm webOSPinchusing 2 fingers, to zoom in/out on a web page or a picturePinch
Palm webOSRotateTouch with 2 fingers and rotate - to rotate contentRotate
PlatformPlatform GesturePlatform DescriptionCore Gesture
AndroidTapNone providedTap
AndroidDouble TapNone providedDouble Tap
AndroidFlickNone providedFlick
AndroidDragNone providedDrag
Android (only 2.1)PinchNone providedSpread
Android (only 2.1)PinchNone providedPinch
AndroidTouch and holdNone providedPress
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (trackpad)ScrollScroll up and down a pageDrag
(Two-finger)
OSX (trackpad)SwipeFlip through your photo librariesDrag
(Three-finger)
OSX (trackpad)SwipeShow your desktop, view all open windows, or switch applicationsDrag
(Four-finger)
OSX (trackpad)PinchZoom in and outPinch
OSX (trackpad)ExpandZoom in and outSpread
OSX (trackpad)Two-finger rotatingRotate photos, pages, and more.Rotate
OSX (trackpad)TapPress or select a control or linkTap
OSX (trackpad)Click & DragMove content.Drag
OSX (trackpad)Secondary Click ARight-click Tap
(Two-finger)
OSX (trackpad)Secondary Click BRight-click Tap
(on specific area on trackpad)
PlatformPlatform GesturePlatform DescriptionCore Gesture
OSX (Magic Mouse)360° scrollBrush one finger along the surface to scroll in any direction and to pan a full 360 degrees.Flick
OSX (Magic Mouse)Screen zoomHold down the Control key on your keyboard and scroll with one finger on surface to enlarge items on your screen.Drag
OSX (Magic Mouse)Two-finger swipeUsing two fingers, swipe left and right along the surface to advance through pages in Safari or browse photos in iPhoto.Drag
(Two-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Microsoft Windows 7DragTouch and slide your finger on screen. Like dragging with a mouse, this moves icons around the desktop, moves windows,selects text (by dragging left or right), etc. Drag
Microsoft Windows 7ScrollDrag up or down on the content (not the scrollbar!) of scrollable window to scroll. Scrolling is available with one or more fingers.Drag
Microsoft Windows 7ZoomPinch two fingers together or apart to zoom in or out on a document. Spread
Microsoft Windows 7ZoomPinch two fingers together or apart to zoom in or out on a document. Pinch
Microsoft Windows 7Two-Finger TapTapping with two fingers simultaneously zooms in about the center of the gesture or restores to the default zoom – great for zooming in on hyperlinks. Tap
(Two-finger)
Microsoft Windows 7RotateTouch two spots on a digital photo and twist to rotate it just like a real photo.Rotate
Microsoft Windows 7FlicksFlick left or right to navigate back and forward in a browser and other apps.Flick
Microsoft Windows 7Press-and-holdHold your finger on screen for a moment and release after the animation to get a right-click.Press
Microsoft Windows 7Press-and-tap with a second fingerTo get right-click, just like you would click the right button on a mouse or trackpad.Press and Tap
Microsoft Windows 7TapTouch and release to click. This is the most basic touch action.Tap
Microsoft Windows 7Double TapTo open files and folders. Double Tap
PlatformPlatform GesturePlatform DescriptionCore Gesture
Wacom BambooNavigateTouch and drag across surface.Drag
Wacom BambooClick or SelectHighlight and select an item.Tap
Wacom BambooDouble ClickOpen an application or file.Double Tap
Wacom BambooRight-clickBring up a context menu.Tap
(Two-finger)
Wacom BambooScrollScroll up and down a pageDrag
(Two-finger)
Wacom BambooZoom outSpread
Wacom BambooZoom inPinch
Wacom BambooRotatePlace two fingers on surface and rotate to left or right.Rotate
Wacom BambooBack & ForwardSwipe two fingers across surface.Drag
(Two-finger)
Wacom BambooSelect & DragSelect by tapping once then drag across surface. Moves objects.Drag
PlatformPlatform GesturePlatform DescriptionCore Gesture
GestureWorks (Flash)One Finger Single TapTouch and remove a single finger on the surface.Tap
GestureWorks (Flash)One Finger Double TapTouch and remove a single finger on the surface twice.Double Tap
GestureWorks (Flash)Two Finger Single TapTouch and remove two fingers on the surface simultaneously.Tap
(Two-finger)
GestureWorks (Flash)Two Finger Double TapTouch and remove two fingers from the surface twice.Double Tap
(Two-finger)
GestureWorks (Flash)Scroll (Horizontal)Place two fingers on the surface at the same time, vertically positioned to each other, then drag both fingers horizontally.Drag
GestureWorks (Flash)Scroll (Vertical)Place two fingers on the surface at the same time, horizontally positioned to each other, then drag both fingers vertically.Drag
GestureWorks (Flash)One Finger DragPlace one finger on the surface and move the finger from one location to another.Drag
GestureWorks (Flash)Multi-point DragPlace one hand on the surface and move the hand from one location to another.Drag
(Multi-finger)
GestureWorks (Flash)One Finger FlickFlick tip of finger across the surface.Flick
GestureWorks (Flash)Two Finger FlickFlick tips of two fingers together across the surface.Flick
(Two-finger)
GestureWorks (Flash)One Hand ZoomPlace the fingers of one hand on the surface and draw them apart or together to scale an element on the surface accordingly.Spread
GestureWorks (Flash)Multi-point ZoomStart with both hands together and move them apart across an area on the surface to zoom in. Pull both hands closer to each other to zoom out.Spread
(Multi-finger)
GestureWorks (Flash)Pinch ZoomPlace the fingers of one hand on the surface and draw them apart or together to scale an element on the surfacePinch
GestureWorks (Flash)Two Finger RotatePlace two fingers on the surface and turn the hand at the wrist to rotate an image on the surfaceRotate
GestureWorks (Flash)Multi-point RotatePlace both hands on the surface and move them simultaneously in a circular motion to rotate an image on the surface.Rotate
(Multi-finger)
GestureWorks (Flash)Precise Tilt (Yaw)Move three fingers in a vertical line to tilt an object in the Y plane (precise increments).Drag
(Three-finger)
GestureWorks (Flash)Aggressive Tilt (Yaw)Move three fingers in a vertical line to tilt an object in the Y plane.Drag
(Three-finger)
GestureWorks (Flash)Precise Tilt (Roll)Move three fingers in a horizontal line to tilt an object in the X plane (precise increments).Drag
(Three-finger)
GestureWorks (Flash)Aggressive Tilt (Roll)Move three fingers in a horizontal line to tilt an object in the X plane.Drag
(Three-finger)
PlatformPlatform GesturePlatform DescriptionCore Gesture
Microsoft SurfaceTapPress and then releaseTap
Microsoft SurfaceSlide or pushMove the object under your finger with a sliding or pushing actionDrag
Microsoft SurfaceFlickPress, slide quickly, and then releaseFlick
Microsoft SurfaceTouch-and-turnSlide your finger on the content around a point of the content; you can also fake this carefully with manipulations in ScatterViewDrag
(Around an object)
Microsoft SurfaceSpinTwist quickly to rotate the objectRotate
Microsoft SurfacePull apart StretchPull fingers apart on two handsSpread
(Two-finger)
Microsoft SurfacePush together ShrinkBring fingers together on two handsPinch
(Two-finger)
Microsoft SurfaceTwistTwist the object with two or more fingers, like turning a knob or paperRotate
Microsoft SurfacePinchBring two fingers together on one handPinch
Microsoft SurfaceSqueezeBring three or more fingers together on one handPinch
(Three-finger)
Microsoft SurfaceSpreadPull fingers apart on one handSpread
(Five-finger)
Microsoft SurfacePin turnPin the object in place with one finger while the other finger drags the object around the pinned pointRotate

 

The Touch Gesture Reference Guide was conceived of, researched, illustrated, and designed by:

Platform support information comes from the following sources: