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

7,698

Published 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.

Published in: Technology, Education
3 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,698
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
332
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

×