Your SlideShare is downloading. ×
Tap is the New Click
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

Tap is the New Click


Published on

An introduction to designing for touchscreens and interactive gestures.

An introduction to designing for touchscreens and interactive gestures.

Published in: Design, Technology

  • if you are interested to know more about cameras. Please don’t hesitate to visit us at
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for the share
    checkin the book fast
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Tap is the New Click Dan Saffer, Kicker Studio
  • 2. DRC 2009 // Dan Saffer, Kicker Studio
  • 3. DRC 2009 // Dan Saffer, Kicker Studio
  • 4. We're using bodies evolved for hunting, gathering, and gratuitous violence for information- age tasks like word processing and spreadsheet tweaking. —David Liddle
  • 5. We’re in the midst of an interaction design revolution.
  • 6. How do we design for interactive gestures?
  • 7. What we’re going to talk about Sensors and touchscreen types Kinesiology and physiology Touch targets Communicating Choosing appropriate gestures Case study: Canesta Entertainment Center
  • 8. Gesture: any physical movement that can be sensed and responded to by a digital system without the aid of a traditional input device such as a mouse or stylus.
  • 9. DRC 2009 // Dan Saffer, Kicker Studio
  • 10. DRC 2009 // Dan Saffer, Kicker Studio
  • 11. Two types of interactive gestures Touchscreen aka TUI Single and multi-touch (MT) Free-form Wide variety of forms
  • 12. Why not to have a gestural interface Heavy data input Relies heavily on the visual (for now) Can be inappropriate for context More physically demanding
  • 13. Why have a gestural interface? More flexible Less visible hardware Hardware fits context better More “natural” More fun
  • 14. The secret sauce: sensors
  • 15. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation
  • 16. Types of touchscreens Resistive: pressing two layers together creates the touch event Surface wave: finger disrupts ultrasonic waves Capacitive: finger conducts electricity Infrared: finger breaks grid of infrared beams Camera-based: looks for “blobs.” Rear- and front- projectors
  • 17. Kinesiology & physiology
  • 18. The ergonomics of human gestures Avoid hyperextension or extreme stretches Avoid repetition Utilize relaxed, neutral positions Avoid staying in a static position No “Gorilla Arm”
  • 19. Gorilla arm Humans not designed to hold their arms in front of their faces, making small gestures Ok for short-term use, not so much for repeated, long-term use Fun Fact: Telegraph operators had “glass arm” Sorry, Minority Report-style UIs
  • 20. Gorilla arm
  • 21. Gorilla arm
  • 22. Stephan Pheasant’s (via Rob Tannen) cardinal rules of anthropometrics Reach Clearence Posture Strength
  • 23. The more challenging and complicated the gesture, the fewer people who will be able to perform it.
  • 24. What about accessibility? No good, clear answer Improving via addition of haptics (and hopefully, eventually, speech) Some touchscreen systems much better than traditional WIMP systems Special care when designing touch targets
  • 25. 8-10mm 10-14mm 16-20mm
  • 26. Fingers Fingernails: Blessing Wrist support and curse Gloves Fake fingernails: evil Inaccurate (when Finger oil compared to a cursor) Fingerprints Attached to a hand aka Screen Coverage (Left) Handedness
  • 27. DRC 2009 // Dan Saffer, Kicker Studio
  • 28. DRC 2009 // Dan Saffer, Kicker Studio
  • 29. Avoid putting essential features or information like a label below an interface element that can be touched, as it may become hidden by the user’s own hand.
  • 30. Touch events and targets
  • 31. Touch target size Remember Fitts’ Law! (Time it takes to get to a target = distance to target / size of target) As close to the user as possible to avoid users’ covering the screen with their hands Space between the targets (when possible) Create reasonably-sized targets: no smaller than 1cm in diameter/square (the size of finger pads)
  • 32. Touch target size comparisons ~25mm ~18mm ~13mm ~8mm 5mm
  • 33. Two touch target tricks Iceberg tips Adaptive targets
  • 34. Two touch target tricks Iceberg tips Adaptive targets
  • 35. Traditional UI elements to watch out for Cursors MouseOvers and hovers Double-click Right-click Selected default buttons Undo
  • 36. Touchscreen patterns
  • 37. Tap to open/activate
  • 38. Tap to select
  • 39. Drag to move object
  • 40. Slide to scroll
  • 41. Spin to scroll
  • 42. Flick to nudge
  • 43. Pinch to shrink & Spread to enlarge
  • 44. Ghost fingers
  • 45. Freeform patterns
  • 46. Proximity activates/ deactivates
  • 47. Move body to activate
  • 48. Point to select/activate
  • 49. Wave to activate
  • 50. Rotate to change state
  • 51. Step to activate
  • 52. Shake to change state
  • 53. Prototyping gestures
  • 54. Low-fidelity: Paper prototype
  • 55. Low-fidelity: The “man behind the curtain”
  • 56. Low-fidelity: Environments
  • 57. High-fidelity: Exact
  • 58. High-fidelity: Off-the-Shelf
  • 59. High-fidelity: Do It Yourself
  • 60. Turning gestures into code Variables: what are you measuring? Data: get the data in from the sensor Computation: determine difference between data Patterns: what do the sums mean? Action: if a pattern is matched, do something
  • 61. Documenting gestures
  • 62. Dance notation
  • 63. Annotated wireframes still work
  • 64. Architectural wireframes touchscreenoverview “Master UI” Run by presenter “Individual UI” Used by show attendees Live Touchscreen Projection Area [floor] [floor] [ showing typical arm’s reach for 6’ tall user ] [ showing typical arm’s reach for 6’ tall user ]
  • 65. Keyframes
  • 66. Gestural modules
  • 67. Gestural modules
  • 68. Storyboards
  • 69. Swim lanes framework
  • 70. Animation
  • 71. Movies
  • 72. Communicating interactive gestures
  • 73. Three zones of engagement
  • 74. Attraction
  • 75. Observation
  • 76. Interaction
  • 77. Attraction affordance
  • 78. Written instruction
  • 79. Illustration
  • 80. Demonstration
  • 81. Symbolic
  • 82. Determining the appropriate gesture
  • 83. Four part equation 1. The task that needs to be performed 2. The available sensors and input devices 3. The physiology of the human body 4. The context This can be pretty straightforward Or not
  • 84. Context Different behaviors in different locations Avoiding accidental emotional weight Cultural issues
  • 85. Usability issues Avoid unintentional triggers via everyday actions! Wide variation in performing gestures: need requisite variety Pick one: select then action, or selecting does action Gestures as command keys: Provide a normal means of performing the action (buttons, etc.) but have “advanced” gestures as shortcuts
  • 86. Case study: Canesta Entertainment Center
  • 87. Case study: Canesta Entertainment Center
  • 88. Case study: Canesta Entertainment Center
  • 89. Case study: Canesta Entertainment Center
  • 90. The complexity of the gesture should match the complexity of the task at hand.
  • 91. The best designs are those that “dissolve into behavior.” (Naoto Fukasawa)
  • 92. The best, most natural designs, then, are those that match the behavior of the system to the gesture humans might already do to enable that behavior.
  • 93. Thanks. odannyboy on Twitter