SlideShare a Scribd company logo
Touch Gesture R E F E R E N C E G U I D E                      By Craig Villamor, Dan Willis, and Luke Wroblewski
                                                                               Last updated April 15, 2010




CO RE GE ST U R E S Basic gestures for most touch commands


Tap                                Double tap                          Drag                                Flick




Briefly touch surface              Rapidly touch surface               Move fingertip over                 Quickly brush surface
with fingertip                     twice with fingertip                surface without                     with fingertip
                                                                       losing contact

Pinch                              Spread                              Press                               Press and tap




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

Press and drag                                          Rotate



               OR                                                                     OR                           OR




Press surface with one finger and                       Touch surface with two fingers
move second finger over surface                         and move them in a clockwise
without losing contact                                  or counterclockwise direction




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

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

Major User Actions
Currently supported by touch gesture systems

  BASIC ACTIONS

  user action                   gesture                            description


  Change mode                                 press                Touch surface for extended period of time




  Open                                        double tap           Rapidly touch surface twice with fingertip




  Select                                      tap                  Briefly touch surface with fingertip




  OBJECT-RELATED ACTIONS

  user action                   gesture                            description


  Adjust                                                           Press surface with one finger and move
                                                  OR               second finger over surface without
                                                                   losing contact

                                  press and drag


                                                                   Make circular motion with finger, then
                                                                   cross over selected object

                                          1                    2

                                  lasso and cross


  Bundle                                                           Touch first object while second finger
                                                                   taps other objects, the move selected
                                                                   objects by dragging first finger
                                              1            2
                                 press and tap, then drag




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


  OBJECT-RELATED ACTIONS (continued)

  user action                   gesture                                            description


  Delete                                                       drag                Move fingertip over surface without
                                                               (across item or     losing contact
                                                               off-screen)



  Duplicate                                                    tap                 Touch object, then touch elsewhere
                                                               (source and         on surface
                                                               destination)
                                                           2
                                            1



  Move                                                         drag                Move fingertip over surface without
                                                               (and drop)          losing contact




                                                                    multi-finger   Move two to five fingertips over
                                            OR                      drag           surface without losing contact



                                 OR               OR




                                                               flick               Quickly brush surface with fingertip




                                                               press and tap       With one finger on object, touch elsewhere
                                                                                   on surface with second finger




  Rotate                                                                                                    rotate

                                                               OR                      OR




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


  OBJECT-RELATED ACTIONS (continued)

  user action                   gesture                              description


  Scale down                                               pinch     Touch surface with two fingers and
                                                                     bring them closer together




                                                           squeeze   Touch surface with five fingers and
                                                                     bring them closer together




  Scale up                                                 spread    Touch surface with two fingers and
                                                                     move them apart




                                                           splay     Touch surface with five fingers and
                                                                     move them apart



  NAVIGATING ACTIONS

  user action                   gesture                              description

  Adjust view                                                                              rotate
  (rotate)
                                                           OR            OR




  Adjust view                                              pinch     Touch surface with two fingers and
  (zoom in)                                                          bring them closer together




                                            double tap               Rapidly touch surface twice with fingertip




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


  NAVIGATING ACTIONS (continued)

  user action                   gesture                             description


  Adjust view                                              spread   Touch surface with two fingers and
  (zoom out)                                                        move them apart




                                            double tap              Rapidly touch surface twice with fingertip




  Display commands                          press                   Touch surface for extended period
                                                                    of time




                                            press and tap           Press surface with one finger and briefly
                                                                    touch surface with second finger




                                            double tap              Rapidly touch surface twice with fingertip




                                            corner tap              Touch specific corner of surface with
                                                                    fingertip




  Move through list                             two-finger drag     Move to previous/next item in list




                                                                                          rotate
                                                           OR           OR




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


  NAVIGATING ACTIONS (continued)

  user action                   gesture                             description


  Pan                                                  drag hand    Move fingers and palm of one hand
                                                                    over surface without losing contact




  Scroll                                                   drag     Move fingertip over scrollbar without
                                                                    losing contact




                                                  two-finger drag   Move two fingers up or down across
                                                                    surface




                                            press                   Touch scrollbar for extended period
                                                                    of time




  Scroll (fast)                                flick                Quickly brush surface with fingertip in
                                                                    the direction you want to scroll




  Scroll (fast)                             tap                     Briefly touch surface with fingertip when
                                                                    a scroll is in progress




  Scrub                                                    drag     Move fingertip over scrollbar without
                                                                    losing contact




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


  DRAWING ACTIONS

  user action                   gesture

  Accept                        Draw a checkmark on surface with fingertip

  Cut                           Draw a slash on surface with fingertip

  Get help                      Draw a question mark on surface with fingertip

  Reject                        Draw an “X” on surface with fingertip

  Undo                          Scratch out area on surface with fingertip




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

More Related Content

PDF
Touch gesture guide by Craig Villamor, Dan Willis, and Luke Wroblewski
PDF
Touch gesturecards
PDF
Windows 8 touch guidance
PPTX
Android gestures v1
PDF
Touch gestureguide
PPTX
Gur summit poster with cover
PDF
Wm Wb3200 User Guide
Touch gesture guide by Craig Villamor, Dan Willis, and Luke Wroblewski
Touch gesturecards
Windows 8 touch guidance
Android gestures v1
Touch gestureguide
Gur summit poster with cover
Wm Wb3200 User Guide

Similar to Touch gesture guide (20)

PDF
Touch wheel remote
PDF
Signos RT Quick Start Guide
PDF
2012 Toyota 4Runner Display information
PPTX
Combing 3 d gesture with touch interface on mobile devices v2
PDF
Poster Aegis poster dasher2
PDF
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
PDF
Quick reference guide
PDF
123 ipad mags brochure
PPTX
User defined gestures for surface computing
PDF
iPads in education part 1
KEY
Keyremap4macbook
PDF
trungTo
PDF
Pointing, Selecting & Direct Manipulation
 
PPTX
WPS iPad 1 Workshop
PDF
Touchscreen UX Design Workshop
PPTX
Transformation workshop
PDF
Photoshop
PPT
Touchscreen%20 implementation%20for%20multi touch-new[1] (1)
PDF
Evaluating Touch Gesture Usability -- D4M 2010
Touch wheel remote
Signos RT Quick Start Guide
2012 Toyota 4Runner Display information
Combing 3 d gesture with touch interface on mobile devices v2
Poster Aegis poster dasher2
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
Quick reference guide
123 ipad mags brochure
User defined gestures for surface computing
iPads in education part 1
Keyremap4macbook
trungTo
Pointing, Selecting & Direct Manipulation
 
WPS iPad 1 Workshop
Touchscreen UX Design Workshop
Transformation workshop
Photoshop
Touchscreen%20 implementation%20for%20multi touch-new[1] (1)
Evaluating Touch Gesture Usability -- D4M 2010
Ad

More from Pierre Foucart (10)

PDF
Glo-bars
PDF
Writing for non writers handout
PPTX
Mobile compatibility a front end perspective
PDF
Cossette Mobindex - Mars 2011
PDF
White paper your guide to successful product launches on facebook
PDF
Bicycle tire belts
PDF
Rich Media AdFX
PDF
Good brands report 2010
PDF
Designing apps
PDF
10things
Glo-bars
Writing for non writers handout
Mobile compatibility a front end perspective
Cossette Mobindex - Mars 2011
White paper your guide to successful product launches on facebook
Bicycle tire belts
Rich Media AdFX
Good brands report 2010
Designing apps
10things
Ad

Recently uploaded (20)

PPT
robotS AND ROBOTICSOF HUMANS AND MACHINES
PPTX
building Planning Overview for step wise design.pptx
PDF
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
PPTX
NEW EIA PART B - Group 5 (Section 50).pptx
PDF
Quality Control Management for RMG, Level- 4, Certificate
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
rapid fire quiz in your house is your india.pptx
PPTX
An introduction to AI in research and reference management
PPTX
Special finishes, classification and types, explanation
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PDF
Urban Design Final Project-Site Analysis
PDF
Phone away, tabs closed: No multitasking
PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
PPTX
EDP Competencies-types, process, explanation
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PPTX
Acoustics new for. Sound insulation and absorber
robotS AND ROBOTICSOF HUMANS AND MACHINES
building Planning Overview for step wise design.pptx
ART & DESIGN HISTORY OF VEDIC CIVILISATION.pdf
NEW EIA PART B - Group 5 (Section 50).pptx
Quality Control Management for RMG, Level- 4, Certificate
DOC-20250430-WA0014._20250714_235747_0000.pptx
YV PROFILE PROJECTS PROFILE PRES. DESIGN
AD Bungalow Case studies Sem 2.pptxvwewev
rapid fire quiz in your house is your india.pptx
An introduction to AI in research and reference management
Special finishes, classification and types, explanation
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
Urban Design Final Project-Site Analysis
Phone away, tabs closed: No multitasking
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
EDP Competencies-types, process, explanation
Tenders & Contracts Works _ Services Afzal.pptx
Acoustics new for. Sound insulation and absorber

Touch gesture guide

  • 1. Touch Gesture R E F E R E N C E G U I D E By Craig Villamor, Dan Willis, and Luke Wroblewski Last updated April 15, 2010 CO RE GE ST U R E S Basic gestures for most touch commands Tap Double tap Drag Flick Briefly touch surface Rapidly touch surface Move fingertip over Quickly brush surface with fingertip twice with fingertip surface without with fingertip losing contact Pinch Spread Press Press and tap Touch surface with Touch surface with Touch surface for Press surface with two fingers and bring two fingers and extended period one finger and briefly them closer together move them apart of time touch surface with second finger Press and drag Rotate OR OR OR Press surface with one finger and Touch surface with two fingers move second finger over surface and move them in a clockwise without losing contact or counterclockwise direction Supporting materials for this guide can be found online at: http://www.lukew.com/touch/ This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
  • 2. touch gesture reference guide r Major User Actions Currently supported by touch gesture systems BASIC ACTIONS user action gesture description Change mode press Touch surface for extended period of time Open double tap Rapidly touch surface twice with fingertip Select tap Briefly touch surface with fingertip OBJECT-RELATED ACTIONS user action gesture description Adjust Press surface with one finger and move OR second finger over surface without losing contact press and drag Make circular motion with finger, then cross over selected object 1 2 lasso and cross Bundle Touch first object while second finger taps other objects, the move selected objects by dragging first finger 1 2 press and tap, then drag Supporting materials for this guide can be found online: http://www.lukew.com/touch/
  • 3. touch gesture reference guide t OBJECT-RELATED ACTIONS (continued) user action gesture description Delete drag Move fingertip over surface without (across item or losing contact off-screen) Duplicate tap Touch object, then touch elsewhere (source and on surface destination) 2 1 Move drag Move fingertip over surface without (and drop) losing contact multi-finger Move two to five fingertips over OR drag surface without losing contact OR OR flick Quickly brush surface with fingertip press and tap With one finger on object, touch elsewhere on surface with second finger Rotate rotate OR OR Supporting materials for this guide can be found online: http://www.lukew.com/touch/
  • 4. touch gesture reference guide u OBJECT-RELATED ACTIONS (continued) user action gesture description Scale down pinch Touch surface with two fingers and bring them closer together squeeze Touch surface with five fingers and bring them closer together Scale up spread Touch surface with two fingers and move them apart splay Touch surface with five fingers and move them apart NAVIGATING ACTIONS user action gesture description Adjust view rotate (rotate) OR OR Adjust view pinch Touch surface with two fingers and (zoom in) bring them closer together double tap Rapidly touch surface twice with fingertip Supporting materials for this guide can be found online: http://www.lukew.com/touch/
  • 5. touch gesture reference guide i NAVIGATING ACTIONS (continued) user action gesture description Adjust view spread Touch surface with two fingers and (zoom out) move them apart double tap Rapidly touch surface twice with fingertip Display commands press Touch surface for extended period of time press and tap Press surface with one finger and briefly touch surface with second finger double tap Rapidly touch surface twice with fingertip corner tap Touch specific corner of surface with fingertip Move through list two-finger drag Move to previous/next item in list rotate OR OR Supporting materials for this guide can be found online: http://www.lukew.com/touch/
  • 6. touch gesture reference guide o NAVIGATING ACTIONS (continued) user action gesture description Pan drag hand Move fingers and palm of one hand over surface without losing contact Scroll drag Move fingertip over scrollbar without losing contact two-finger drag Move two fingers up or down across surface press Touch scrollbar for extended period of time Scroll (fast) flick Quickly brush surface with fingertip in the direction you want to scroll Scroll (fast) tap Briefly touch surface with fingertip when a scroll is in progress Scrub drag Move fingertip over scrollbar without losing contact Supporting materials for this guide can be found online: http://www.lukew.com/touch/
  • 7. touch gesture reference guide p DRAWING ACTIONS user action gesture Accept Draw a checkmark on surface with fingertip Cut Draw a slash on surface with fingertip Get help Draw a question mark on surface with fingertip Reject Draw an “X” on surface with fingertip Undo Scratch out area on surface with fingertip Supporting materials for this guide can be found online: http://www.lukew.com/touch/