Tap is the New Click

  • 7,474 views
Uploaded on

Even though touchscreen and gestural technology has been around for decades, Nintendo's Wii, Apple's iPhone and Microsoft Surface have heralded a new era of interaction design where gestures in space …

Even though touchscreen and gestural technology has been around for decades, Nintendo's Wii, Apple's iPhone and Microsoft Surface have heralded a new era of interaction design where gestures in space and touches on a screen will be as prominent as pointing and clicking.

But how do you create products for this new paradigm? While most of us know how to design for web and desktop applications, many are still wondering how to adequately design for interactive gestures. This talk covers the basics: ergonomics, a brief history of gestural technology, prototyping and documenting, and how to communicate the presence of a gestural interface to users.

Dan Saffer, a founder and principal designer at Kicker Studio, has designed interactive products since 1995 that are currently used by millions every day. Dan has led projects for large organizations like Nokia and Time Warner to start-ups such as Ning and Foxmarks. An international speaker and author, his acclaimed book Designing for Interaction (New Riders) has been called "a bookshelf must-have for anyone thinking of creating new designs" and has been translated into several languages. His new book, Designing Gestural Interfaces (O'Reilly) was published in December 2008.

Dan is an internationally-recognized thought leader on design who has spoken at conferences and taught workshops on interaction design all over the world. Dan's writings on design have appeared in BusinessWeek, Vitamin, and Boxes and Arrows. He has a Masters of Design in Interaction Design from Carnegie Mellon University.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • very interesting presentation. Thank you!
    Are you sure you want to
    Your message goes here
  • perfect
    Are you sure you want to
    Your message goes here
  • <br /><object type="application/x-shockwave-flash" data="http://blip.tv/play/gtsa94F8k_sM" width="350" height="288"><param name="movie" value="http://blip.tv/play/gtsa94F8k_sM"></param><embed src="http://blip.tv/play/gtsa94F8k_sM" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,474
On Slideshare
0
From Embeds
0
Number of Embeds
22

Actions

Shares
Downloads
328
Comments
3
Likes
29

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. Tap is the New Click Dan Saffer, Principal, Kicker Studio
  • 2. Tap is the New Click // Dan Saffer, Kicker Studio
  • 3. Tap is the New Click // Dan Saffer, Kicker Studio
  • 4. Tap is the New Click // Dan Saffer, Kicker Studio
  • 5. Tap is the New Click // Dan Saffer, Kicker Studio
  • 6. Tap is the New Click // Dan Saffer, Kicker Studio
  • 7. Tap is the New Click // Dan Saffer, Kicker Studio
  • 8. Tap is the New Click // Dan Saffer, Kicker Studio
  • 9. We're using bodies evolved for hunting, gathering, and gratuitous violence for information- age tasks like word processing and spreadsheet tweaking. —David Liddle Tap is the New Click // Dan Saffer, Kicker Studio
  • 10. We’re in the midst of an interaction design revolution. Tap is the New Click // Dan Saffer, Kicker Studio
  • 11. How do we design for interactive gestures? Tap is the New Click // Dan Saffer, Kicker Studio
  • 12. What we’re going to talk about Brief history and sensors Touch targets Documenting Prototyping Communicating Choosing appropriate gestures Tap is the New Click // Dan Saffer, Kicker Studio
  • 13. 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. Tap is the New Click // Dan Saffer, Kicker Studio
  • 14. Tap is the New Click // Dan Saffer, Kicker Studio
  • 15. Tap is the New Click // Dan Saffer, Kicker Studio
  • 16. Tap is the New Click // Dan Saffer, Kicker Studio
  • 17. Tap is the New Click // Dan Saffer, Kicker Studio
  • 18. Tap is the New Click // Dan Saffer, Kicker Studio
  • 19. Tap is the New Click // Dan Saffer, Kicker Studio
  • 20. Two types of interactive gestures Touchscreen aka TUI Single and multi-touch Free-form Wide variety of forms Tap is the New Click // Dan Saffer, Kicker Studio
  • 21. Two types of interactive gestures Touchscreen aka TUI Single and multi-touch Free-form Wide variety of forms Tap is the New Click // Dan Saffer, Kicker Studio
  • 22. The secret sauce: sensors Tap is the New Click // Dan Saffer, Kicker Studio
  • 23. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation Tap is the New Click // Dan Saffer, Kicker Studio
  • 24. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation Tap is the New Click // Dan Saffer, Kicker Studio
  • 25. Kinesiology & physiology Tap is the New Click // Dan Saffer, Kicker Studio
  • 26. Tap is the New Click // Dan Saffer, Kicker Studio
  • 27. Tap is the New Click // Dan Saffer, Kicker Studio
  • 28. 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  • 29. 8-10mm 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  • 30. 8-10mm 10-14mm 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  • 31. Fingers Fingernails: Blessing Accessibility issues and curse Wrist support Fake fingernails: evil Gloves Finger oil Inaccurate (when Fingerprints compared to a cursor) (Left) Handedness Attached to a hand aka Screen Coverage Tap is the New Click // Dan Saffer, Kicker Studio
  • 32. Tap is the New Click // Dan Saffer, Kicker Studio
  • 33. Tap is the New Click // Dan Saffer, Kicker Studio
  • 34. Tap is the New Click // Dan Saffer, Kicker Studio
  • 35. 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. Tap is the New Click // Dan Saffer, Kicker Studio
  • 36. Touch events and targets Tap is the New Click // Dan Saffer, Kicker Studio
  • 37. 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 Tap is the New Click // Dan Saffer, Kicker Studio
  • 38. 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 Create reasonably-sized targets: no smaller than 1cm in diameter/square (the size of finger pads) Tap is the New Click // Dan Saffer, Kicker Studio
  • 39. Touch target size comparisons ~25mm ~18mm ~13mm ~8mm 5mm Tap is the New Click // Dan Saffer, Kicker Studio
  • 40. Two touch target tricks Iceberg tips Adaptive targets Tap is the New Click // Dan Saffer, Kicker Studio
  • 41. Two touch target tricks Iceberg tips Adaptive targets Tap is the New Click // Dan Saffer, Kicker Studio
  • 42. Traditional UI elements to watch out for Cursors MouseOvers and hovers Double-click Right-click Selected default buttons Undo Tap is the New Click // Dan Saffer, Kicker Studio
  • 43. Documenting gestures Tap is the New Click // Dan Saffer, Kicker Studio
  • 44. Dance notation Tap is the New Click // Dan Saffer, Kicker Studio
  • 45. Annotated wireframes still work Tap is the New Click // Dan Saffer, Kicker Studio
  • 46. Architectural wireframestouchscreenoverview “Master UI” “Individual UI” Run by presenter 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 ] Tap is the New Click // Dan Saffer, Kicker Studio
  • 47. Keyframes Tap is the New Click // Dan Saffer, Kicker Studio
  • 48. Gestural modules Tap is the New Click // Dan Saffer, Kicker Studio
  • 49. Gestural modules Tap is the New Click // Dan Saffer, Kicker Studio
  • 50. Storyboards Tap is the New Click // Dan Saffer, Kicker Studio
  • 51. Swim lanes framework Tap is the New Click // Dan Saffer, Kicker Studio
  • 52. Animation Tap is the New Click // Dan Saffer, Kicker Studio
  • 53. Movies Tap is the New Click // Dan Saffer, Kicker Studio
  • 54. Movies Tap is the New Click // Dan Saffer, Kicker Studio
  • 55. Prototyping gestures Tap is the New Click // Dan Saffer, Kicker Studio
  • 56. Low-fidelity: Paper prototype Tap is the New Click // Dan Saffer, Kicker Studio
  • 57. Low-fidelity: The “man behind the curtain” Tap is the New Click // Dan Saffer, Kicker Studio
  • 58. Low-fidelity: Environments Tap is the New Click // Dan Saffer, Kicker Studio
  • 59. High-fidelity: Exact Tap is the New Click // Dan Saffer, Kicker Studio
  • 60. High-fidelity: Off-the-Shelf Tap is the New Click // Dan Saffer, Kicker Studio
  • 61. High-fidelity: Do It Yourself Tap is the New Click // Dan Saffer, Kicker Studio
  • 62. 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 Tap is the New Click // Dan Saffer, Kicker Studio
  • 63. Communicating interactive gestures Tap is the New Click // Dan Saffer, Kicker Studio
  • 64. Three zones of engagement Tap is the New Click // Dan Saffer, Kicker Studio
  • 65. Attraction Tap is the New Click // Dan Saffer, Kicker Studio
  • 66. Observation Tap is the New Click // Dan Saffer, Kicker Studio
  • 67. Interaction Tap is the New Click // Dan Saffer, Kicker Studio
  • 68. Attraction affordance Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio
  • 69. Written instruction Tap is the New Click // Dan Saffer, Kicker Studio
  • 70. Illustration Tap is the New Click // Dan Saffer, Kicker Studio
  • 71. Demonstration Tap is the New Click // Dan Saffer, Kicker Studio
  • 72. Symbolic Tap is the New Click // Dan Saffer, Kicker Studio
  • 73. Determining the appropriate gesture Tap is the New Click // Dan Saffer, Kicker Studio
  • 74. Three part equation 1. The available sensors and input devices 2. The task that needs to be performed 3. The physiology of the human body (This can be pretty straightforward) Tap is the New Click // Dan Saffer, Kicker Studio
  • 75. The ergonomics of human gestures Avoid hyperextension or extreme stretches Avoid repetition Relax muscles Utilize relaxed, neutral positions Avoid staying in a static position Avoid internal or external force on joints Tap is the New Click // Dan Saffer, Kicker Studio
  • 76. The more complicated the gesture, the fewer people who will be able to perform it. Tap is the New Click // Dan Saffer, Kicker Studio
  • 77. The complexity of the gesture should match the complexity of the task at hand. Tap is the New Click // Dan Saffer, Kicker Studio
  • 78. The best designs are those that “dissolve into behavior.” (Naoto Fukasawa) Tap is the New Click // Dan Saffer, Kicker Studio
  • 79. 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. Tap is the New Click // Dan Saffer, Kicker Studio
  • 80. Thanks. http://www.designinggesturalinterfaces.com http://www.kickerstudio.com dan@kickerstudio.com
  • 81. Thanks. http://www.designinggesturalinterfaces.com http://www.kickerstudio.com dan@kickerstudio.com