Your SlideShare is downloading. ×
Touch gesturecards
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Touch gesturecards

325
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
325
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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, 2011INSTRUCTIONSStep 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, following12 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 sidethe 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/
  • 2. Tap Double Tap Drag FlickBriefly 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 GESTURESPinch Spread Press Press + TapTouch 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 brieflythem closer together. them apart. touch surface with second finger.CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES 2
  • 3. Press + Drag Press + Drag Rotate RotatePress 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 movesecond 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.CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURESRotate Change Open SelectTouch surface with two fingers and movethem in a clockwise or counterclockwise mode Double Tap Tapdirection. 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
  • 4. Adjust Adjust Adjust BundlePress + drag Press + drag Lasso + cross Press + tap, then dragPress surface with one finger and Press surface with one finger and Make circular motion with finger, then Touch first object while second fingermove second finger over surface without move second finger over surface without cross over selected object. taps other objects, the move selectedlosing contact. losing contact. objects by dragging first finger. 1 1 2 2MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONSDelete Duplicate Move MoveDrag (across item or off-screen) Tap (source + destination) Drag + drop Multi-finger dragMove fingertip over surface without Touch object, then touch elsewhere Move fingertip over surface without Move two to five fingertips over surfacelosing contact. on surface. losing contact. without losing contact. OR 2 OR OR 1MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS 4
  • 5. Move Move Rotate RotateFlick Press + tap Two-handed rotate Two-handed rotateQuickly 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONSRotate Scale down Scale down Scale upOne-handed rotate Pinch Squeeze SpreadTouch 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 movethem in a clockwise or counterclockwise them closer together. them closer together. them apart.direction.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS 5
  • 6. Scale up Adjust view Adjust view Adjust viewSplay (rotate) (rotate) (rotate)Touch surface with five fingers and movethem 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONSAdjust view Adjust view Adjust view Adjust view(zoom in) (zoom in) (zoom out) (zoom out)Spread Double tap Pinch Double tapTouch 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS 6
  • 7. Display Display Display Displaycommands commands commands commandsPress Press + tap Double tap Corner tapTouch 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONSMove through Move through Move through Move throughlist list list listTwo-finger drag Two-handed rotate Two-handed rotate One-handed rotateMove 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS 7
  • 8. Pan Scroll Scroll ScrollDrag hand Drag Two-finger drag PressMove fingers and palm of one hand over Move fingertip over scrollbar without Move two fingers up or down across Touch scrollbar for extended periodsurface without losing contact. losing contact. surface. of time.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONSScroll fast Stop scrolling Scrub Accept Draw a check mark on surface withFlick Tap Drag fingertip.Quickly brush surface with fingertip in the Briefly touch surface with fingertip when a Move fingertip over scrollbar withoutdirection you want to scroll. scroll is in progress. losing contact.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING ACTIONS NAVIGATING ACTIONS NAVIGATING ACTIONS DRAWING ACTIONS 8
  • 9. Cut Get help Reject UndoDraw 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.MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:DRAWING ACTIONS DRAWING ACTIONS DRAWING ACTIONS DRAWING ACTIONSTap Double tap Flick DragCore gesture: Tap Core gesture: Double tap Core gesture: Flick Core gesture: DragA 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 thecontrol 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 ain 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 themake a quick up-and-down motion with a desired direction. desired direction without lifting it from thefinger, 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
  • 10. Pinch open Pinch close Touch + hold Two-fingerCore gesture: SpreadA 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 antogether 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.PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURES APPLE iOS GESTURESTap Double tap Flick DragCore gesture: Tap Core gesture: Double tap Core gesture: Flick Core gesture: DragNo description provided. No description provided. No description provided. No description provided.PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES 10
  • 11. Pinch Pinch Touch + hold TapCore gesture: Spread Core gesture: Pinch Core gesture: Press Core gesture: TapNo 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: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES WINDOWS PHONE 7Double tap Touch + hold Pan FlickCore gesture: Double tap Core gesture: Press Core gesture: Drag Core gesture: FlickToggle 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.PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:WINDOWS PHONE 7 WINDOWS PHONE 7 WINDOWS PHONE 7 WINDOWS PHONE 7 11
  • 12. Pinch PinchCore gesture: Spread Core gesture: PinchContinuous zoom. Continuous zoom.PLATFORM SUPPORT: PLATFORM SUPPORT:WINDOWS PHONE 7 WINDOWS PHONE 7 12
  • 13. PLATFORM SUPPORT: PLATFORM SUPPORT:WINDOWS WINDOWSPHONE 7 PHONE 7GESTURES GESTURES 13
  • 14. PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:WINDOWS ANDROID ANDROID ANDROIDPHONE 7 GESTURES GESTURES GESTURESGESTURESPLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:WINDOWS WINDOWS WINDOWS WINDOWSPHONE 7 PHONE 7 PHONE 7 PHONE 7GESTURES GESTURES GESTURES GESTURES 14
  • 15. PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:APPLE iOS APPLE iOS APPLE iOS APPLE iOSGESTURES GESTURES GESTURES GESTURESPLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:ANDROID ANDROID ANDROID ANDROIDGESTURES GESTURES GESTURES GESTURES 15
  • 16. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:DRAWING DRAWING DRAWING DRAWINGACTIONS ACTIONS ACTIONS ACTIONSPLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:APPLE iOS APPLE iOS APPLE iOS APPLE iOSGESTURES GESTURES GESTURES GESTURES 16
  • 17. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING NAVIGATING NAVIGATING NAVIGATINGACTIONS ACTIONS ACTIONS ACTIONSMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:DRAWING NAVIGATING NAVIGATING NAVIGATINGACTIONS ACTIONS ACTIONS ACTIONS 17
  • 18. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING NAVIGATING NAVIGATING NAVIGATINGACTIONS ACTIONS ACTIONS ACTIONSMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING NAVIGATING NAVIGATING NAVIGATINGACTIONS ACTIONS ACTIONS ACTIONS 18
  • 19. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING NAVIGATING NAVIGATING OBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONSMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:NAVIGATING NAVIGATING NAVIGATING NAVIGATINGACTIONS ACTIONS ACTIONS ACTIONS 19
  • 20. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONSMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONS 20
  • 21. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONSMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATEDACTIONS ACTIONS ACTIONS ACTIONS 21
  • 22. CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURESMAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: CORE GESTURESBASIC BASIC BASICACTIONS ACTIONS ACTIONS 22
  • 23. CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURESCORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES 23

×