Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Touch gesturecards
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, 2011
INSTRUCTIONS
Step 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, following
12 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 side
the 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 Flick
Briefly 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 GESTURES
Pinch Spread Press Press + Tap
Touch 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 briefly
them closer together. them apart. touch surface with second finger.
CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES
2
3. Press + Drag Press + Drag Rotate Rotate
Press 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 move
second 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 GESTURES
Rotate Change Open Select
Touch surface with two fingers and move
them in a clockwise or counterclockwise mode Double Tap Tap
direction. 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 Bundle
Press + drag Press + drag Lasso + cross Press + tap, then drag
Press surface with one finger and Press surface with one finger and Make circular motion with finger, then Touch first object while second finger
move second finger over surface without move second finger over surface without cross over selected object. taps other objects, the move selected
losing contact. losing contact. objects by dragging first finger.
1
1 2
2
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS OBJECT-RELATED ACTIONS
Delete Duplicate Move Move
Drag (across item or off-screen) Tap (source + destination) Drag + drop Multi-finger drag
Move fingertip over surface without Touch object, then touch elsewhere Move fingertip over surface without Move two to five fingertips over surface
losing contact. on surface. losing contact. without losing contact.
OR
2 OR OR
1
MAJOR 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 Rotate
Flick Press + tap Two-handed rotate Two-handed rotate
Quickly 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 ACTIONS
Rotate Scale down Scale down Scale up
One-handed rotate Pinch Squeeze Spread
Touch 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 move
them 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 view
Splay (rotate) (rotate) (rotate)
Touch surface with five fingers and move
them 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 ACTIONS
Adjust view Adjust view Adjust view Adjust view
(zoom in) (zoom in) (zoom out) (zoom out)
Spread Double tap Pinch Double tap
Touch 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 Display
commands commands commands commands
Press Press + tap Double tap Corner tap
Touch 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 ACTIONS
Move through Move through Move through Move through
list list list list
Two-finger drag Two-handed rotate Two-handed rotate One-handed rotate
Move 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 Scroll
Drag hand Drag Two-finger drag Press
Move fingers and palm of one hand over Move fingertip over scrollbar without Move two fingers up or down across Touch scrollbar for extended period
surface 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 ACTIONS
Scroll fast Stop scrolling Scrub Accept
Draw a check mark on surface with
Flick Tap Drag
fingertip.
Quickly brush surface with fingertip in the Briefly touch surface with fingertip when a Move fingertip over scrollbar without
direction 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 Undo
Draw 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 ACTIONS
Tap Double tap Flick Drag
Core gesture: Tap Core gesture: Double tap Core gesture: Flick Core gesture: Drag
A 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 the
control 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 a
in 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 the
make a quick up-and-down motion with a desired direction. desired direction without lifting it from the
finger, 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-finger
Core gesture: Spread
A 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 an
together 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 GESTURES
Tap Double tap Flick Drag
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: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES
10
11. Pinch Pinch Touch + hold Tap
Core gesture: Spread Core 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: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
ANDROID GESTURES ANDROID GESTURES ANDROID GESTURES 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 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
13. PLATFORM SUPPORT: PLATFORM SUPPORT:
WINDOWS WINDOWS
PHONE 7 PHONE 7
GESTURES GESTURES
13
14. PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
WINDOWS ANDROID ANDROID ANDROID
PHONE 7 GESTURES GESTURES GESTURES
GESTURES
PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
WINDOWS WINDOWS WINDOWS WINDOWS
PHONE 7 PHONE 7 PHONE 7 PHONE 7
GESTURES GESTURES GESTURES GESTURES
14
15. PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
APPLE iOS APPLE iOS APPLE iOS APPLE iOS
GESTURES GESTURES GESTURES GESTURES
PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
ANDROID ANDROID ANDROID ANDROID
GESTURES GESTURES GESTURES GESTURES
15
16. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
DRAWING DRAWING DRAWING DRAWING
ACTIONS ACTIONS ACTIONS ACTIONS
PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT: PLATFORM SUPPORT:
APPLE iOS APPLE iOS APPLE iOS APPLE iOS
GESTURES GESTURES GESTURES GESTURES
16
17. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
NAVIGATING NAVIGATING NAVIGATING NAVIGATING
ACTIONS ACTIONS ACTIONS ACTIONS
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
DRAWING NAVIGATING NAVIGATING NAVIGATING
ACTIONS ACTIONS ACTIONS ACTIONS
17
18. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
NAVIGATING NAVIGATING NAVIGATING NAVIGATING
ACTIONS ACTIONS ACTIONS ACTIONS
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
NAVIGATING NAVIGATING NAVIGATING NAVIGATING
ACTIONS ACTIONS ACTIONS ACTIONS
18
19. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
NAVIGATING NAVIGATING NAVIGATING OBJECT-RELATED
ACTIONS ACTIONS ACTIONS ACTIONS
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
NAVIGATING NAVIGATING NAVIGATING NAVIGATING
ACTIONS ACTIONS ACTIONS ACTIONS
19
20. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED
ACTIONS ACTIONS ACTIONS ACTIONS
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED
ACTIONS ACTIONS ACTIONS ACTIONS
20
21. MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED
ACTIONS ACTIONS ACTIONS ACTIONS
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS:
OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED OBJECT-RELATED
ACTIONS ACTIONS ACTIONS ACTIONS
21
22. CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES
MAJOR USER ACTIONS: MAJOR USER ACTIONS: MAJOR USER ACTIONS: CORE GESTURES
BASIC BASIC BASIC
ACTIONS ACTIONS ACTIONS
22