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

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


  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 out)                                                         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 in)                                                         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


  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


  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

PPTX
Element of Art Line
PDF
One point perspective
PPT
Perspective
DOC
Graphic design principles
PPTX
Principles of design
PPT
Gestalt Principles of Design
PPTX
Menggambar lemari teknik perspektif 1 titik hilang
Element of Art Line
One point perspective
Perspective
Graphic design principles
Principles of design
Gestalt Principles of Design
Menggambar lemari teknik perspektif 1 titik hilang

What's hot (20)

PPT
06 spatial filtering DIP
PPT
Chapter 8
PPTX
Using Gestalt Theory in Visualizations and Presentations
PPT
Tessellation
PPT
Elements of Art
PPTX
Gestalt Theory for Visual Design
PPTX
Chapter Two Adobe Photoshop.pptx
PDF
Fundamental graphic design by rayn howayek
PPT
PPT
Excle
PPTX
Typography
PPTX
Scaling and shearing
PPS
Negative space art - noma bar __
PDF
7 basic principles of graphic design
PDF
Gestalt Principles in UI Design
PPTX
GeoMesa on Spark SQL: Extracting Location Intelligence from Data
PDF
Composition Tips
PPTX
Presentation1 (2)
PPTX
Gestalt Principles
PPTX
Art Elements and Design Principles
06 spatial filtering DIP
Chapter 8
Using Gestalt Theory in Visualizations and Presentations
Tessellation
Elements of Art
Gestalt Theory for Visual Design
Chapter Two Adobe Photoshop.pptx
Fundamental graphic design by rayn howayek
Excle
Typography
Scaling and shearing
Negative space art - noma bar __
7 basic principles of graphic design
Gestalt Principles in UI Design
GeoMesa on Spark SQL: Extracting Location Intelligence from Data
Composition Tips
Presentation1 (2)
Gestalt Principles
Art Elements and Design Principles
Ad

Similar to Touch gesture guide by Craig Villamor, Dan Willis, and Luke Wroblewski (20)

PDF
Touch gesture guide
PDF
Touch gesturecards
PDF
Windows 8 touch guidance
PPTX
Gur summit poster with cover
PDF
Wm Wb3200 User Guide
PDF
Signos RT Quick Start Guide
PDF
Touch wheel remote
PDF
Poster Aegis poster dasher2
PPTX
User defined gestures for surface computing
PDF
123 ipad mags brochure
PDF
Quick reference guide
PPT
Multi Touch And Gesture Event Interface And Types
PDF
Evaluating Touch Gesture Usability -- D4M 2010
PPTX
Combing 3 d gesture with touch interface on mobile devices v2
PDF
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
PDF
Pointing, Selecting & Direct Manipulation
 
PDF
Touchscreen UX Design Workshop
KEY
Keyremap4macbook
PDF
2012 Toyota 4Runner Display information
Touch gesture guide
Touch gesturecards
Windows 8 touch guidance
Gur summit poster with cover
Wm Wb3200 User Guide
Signos RT Quick Start Guide
Touch wheel remote
Poster Aegis poster dasher2
User defined gestures for surface computing
123 ipad mags brochure
Quick reference guide
Multi Touch And Gesture Event Interface And Types
Evaluating Touch Gesture Usability -- D4M 2010
Combing 3 d gesture with touch interface on mobile devices v2
mLearning for Veterans: Designing for Diverse Audiences (Michelle Chin)
Pointing, Selecting & Direct Manipulation
 
Touchscreen UX Design Workshop
Keyremap4macbook
2012 Toyota 4Runner Display information
Ad

More from Fran Maciel (20)

PDF
An_Invitation_to_Cultural_Psychology by Jaan Valsiner, Chapter 1
PDF
The Need for Cognition by John T. Cacioppo, and Richard E. Petty
PDF
Casos de Usabilidade by Fran Maciel
PDF
An Introduction to Content Analysis by Bruce L. Berg
PDF
2014 - hábitos de consumo de mídia pela população brasileira by Secretaria de...
PDF
Medication Adherence in America reportcard full by National Community Pharmac...
PDF
PALMA: Usability Testing of an Application for Adult Literacy in Brazil by F...
PDF
State of the art on the cognitive walkthrough method by MAHATODY, SAGAR and ...
PDF
Briefing by Rafael Sampaio
PDF
Improving Students’ Learning With Effective Learning Techniques: Promising ...
PDF
Uso da Internet por crianças e adolescentes no Brasil by Comitê Gestor da …
PDF
Brainstorming via LECHA-UFF
PDF
Design Participativo: uma experiência com produtos e s…
PDF
Economia solidaria- by Robson Santos & Fran Maciel
PDF
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
PDF
Playing to Learn Teaching User Research to Game Design Students by Heather De...
PDF
Planejamento de workshop - Cap 15 | Gestão estratégica by Eliezer Arantes da ...
PDF
Terminei o mestrado e agora? by Lucia Oliveira
PDF
Teoria Geral dos Sistemas by Lillian Alvares - UNB
PDF
2013 Policy guidelines for mobile learning by UNESCO
An_Invitation_to_Cultural_Psychology by Jaan Valsiner, Chapter 1
The Need for Cognition by John T. Cacioppo, and Richard E. Petty
Casos de Usabilidade by Fran Maciel
An Introduction to Content Analysis by Bruce L. Berg
2014 - hábitos de consumo de mídia pela população brasileira by Secretaria de...
Medication Adherence in America reportcard full by National Community Pharmac...
PALMA: Usability Testing of an Application for Adult Literacy in Brazil by F...
State of the art on the cognitive walkthrough method by MAHATODY, SAGAR and ...
Briefing by Rafael Sampaio
Improving Students’ Learning With Effective Learning Techniques: Promising ...
Uso da Internet por crianças e adolescentes no Brasil by Comitê Gestor da …
Brainstorming via LECHA-UFF
Design Participativo: uma experiência com produtos e s…
Economia solidaria- by Robson Santos & Fran Maciel
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
Playing to Learn Teaching User Research to Game Design Students by Heather De...
Planejamento de workshop - Cap 15 | Gestão estratégica by Eliezer Arantes da ...
Terminei o mestrado e agora? by Lucia Oliveira
Teoria Geral dos Sistemas by Lillian Alvares - UNB
2013 Policy guidelines for mobile learning by UNESCO

Touch gesture guide by Craig Villamor, Dan Willis, and Luke Wroblewski

  • 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 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 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 out) 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 in) 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 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 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/