Tap is the New Click
Dan Saffer, Principal, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
We're using bodies
evolved for hunting,
gathering, and gratuitous
violence for information-
age tasks like word
processing...
We’re in the midst
of an interaction
design revolution.



Tap is the New Click // Dan Saffer, Kicker Studio
How do we design for
interactive gestures?



Tap is the New Click // Dan Saffer, Kicker Studio
What we’re going
to talk about
   Brief history and sensors
   Touch targets
   Documenting
   Prototyping
   Communicatin...
Gesture: any physical
movement that can be
sensed and responded to
by a digital system
without the aid of a
traditional in...
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Two types of
interactive gestures
   Touchscreen
      aka TUI
      Single and multi-touch
   Free-form
      Wide variet...
Two types of
interactive gestures
   Touchscreen
      aka TUI
      Single and multi-touch
   Free-form
      Wide variet...
The secret sauce: sensors




Tap is the New Click // Dan Saffer, Kicker Studio
Common sensors
   Pressure
   Light
   Proximity
   Acoustic
   Tilt
   Motion
   Orientation

Tap is the New Click // Dan...
Common sensors
   Pressure
   Light
   Proximity
   Acoustic
   Tilt
   Motion
   Orientation

Tap is the New Click // Dan...
Kinesiology & physiology




Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
16-20mm




Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm



                                                    16-20mm




Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm
                                        10-14mm

                                                    16-20mm




Ta...
Fingers
   Fingernails: Blessing                        Accessibility issues
   and curse
                                ...
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Tap is the New Click // Dan Saffer, Kicker Studio
Avoid putting essential
features or information
like a label below an
interface element that
can be touched, as it may
bec...
Touch events and targets




Tap is the New Click // Dan Saffer, Kicker Studio
Types of touchscreens
   Resistive: pressing two layers together creates the
   touch event
   Surface wave: finger disrupt...
Touch target size
   Remember Fitts’ Law! (Time it takes to get to a target
   = distance to target / size of target)
   A...
Touch target size
comparisons



 ~25mm              ~18mm              ~13mm        ~8mm   5mm




Tap is the New Click /...
Two touch target tricks
   Iceberg tips
   Adaptive targets




Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricks
   Iceberg tips
   Adaptive targets




Tap is the New Click // Dan Saffer, Kicker Studio
Traditional UI elements
to watch out for
   Cursors
   MouseOvers and hovers
   Double-click
   Right-click
   Selected de...
Documenting gestures




Tap is the New Click // Dan Saffer, Kicker Studio
Dance notation




Tap is the New Click // Dan Saffer, Kicker Studio
Annotated wireframes
still work




Tap is the New Click // Dan Saffer, Kicker Studio
Architectural
wireframestouchscreenoverview
                 “Master UI”                                                  ...
Keyframes




Tap is the New Click // Dan Saffer, Kicker Studio
Gestural modules




Tap is the New Click // Dan Saffer, Kicker Studio
Gestural modules




Tap is the New Click // Dan Saffer, Kicker Studio
Storyboards




Tap is the New Click // Dan Saffer, Kicker Studio
Swim lanes framework




Tap is the New Click // Dan Saffer, Kicker Studio
Animation




Tap is the New Click // Dan Saffer, Kicker Studio
Movies




Tap is the New Click // Dan Saffer, Kicker Studio
Movies




Tap is the New Click // Dan Saffer, Kicker Studio
Prototyping gestures




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity:
Paper prototype




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity: The “man
behind the curtain”




Tap is the New Click // Dan Saffer, Kicker Studio
Low-fidelity:
Environments




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity: Exact




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity:
Off-the-Shelf




Tap is the New Click // Dan Saffer, Kicker Studio
High-fidelity:
Do It Yourself




Tap is the New Click // Dan Saffer, Kicker Studio
Turning gestures
into code
   Variables: what are you measuring?
   Data: get the data in from the sensor
   Computation: ...
Communicating
interactive gestures



Tap is the New Click // Dan Saffer, Kicker Studio
Three zones
of engagement




Tap is the New Click // Dan Saffer, Kicker Studio
Attraction




Tap is the New Click // Dan Saffer, Kicker Studio
Observation




Tap is the New Click // Dan Saffer, Kicker Studio
Interaction




Tap is the New Click // Dan Saffer, Kicker Studio
Attraction affordance




Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio
Written instruction




Tap is the New Click // Dan Saffer, Kicker Studio
Illustration




Tap is the New Click // Dan Saffer, Kicker Studio
Demonstration




Tap is the New Click // Dan Saffer, Kicker Studio
Symbolic




Tap is the New Click // Dan Saffer, Kicker Studio
Determining the
appropriate gesture



Tap is the New Click // Dan Saffer, Kicker Studio
Three part equation
1. The available sensors and input devices
2. The task that needs to be performed
3. The physiology of...
The ergonomics
of human gestures
  Avoid hyperextension or extreme stretches
  Avoid repetition
  Relax muscles
  Utilize ...
The more complicated the
gesture, the fewer people
who will be able to
perform it.


Tap is the New Click // Dan Saffer, K...
The complexity of the
gesture should match
the complexity of the
task at hand.


Tap is the New Click // Dan Saffer, Kicke...
The best designs are
those that “dissolve
into behavior.”
(Naoto Fukasawa)


Tap is the New Click // Dan Saffer, Kicker St...
The best, most natural
designs, then, are those
that match the behavior
of the system to the
gesture humans might
already ...
Thanks.
http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com
dan@kickerstudio.com
Thanks.
http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com
dan@kickerstudio.com
Tap is the New Click
Tap is the New Click
Tap is the New Click
Upcoming SlideShare
Loading in...5
×

Tap is the New Click

7,740

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 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,740
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
332
Comments
3
Likes
29
Embeds 0
No embeds

No notes for slide

Tap is the New Click

  1. 1. Tap is the New Click Dan Saffer, Principal, Kicker Studio
  2. 2. Tap is the New Click // Dan Saffer, Kicker Studio
  3. 3. Tap is the New Click // Dan Saffer, Kicker Studio
  4. 4. Tap is the New Click // Dan Saffer, Kicker Studio
  5. 5. Tap is the New Click // Dan Saffer, Kicker Studio
  6. 6. Tap is the New Click // Dan Saffer, Kicker Studio
  7. 7. Tap is the New Click // Dan Saffer, Kicker Studio
  8. 8. Tap is the New Click // Dan Saffer, Kicker Studio
  9. 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. 10. We’re in the midst of an interaction design revolution. Tap is the New Click // Dan Saffer, Kicker Studio
  11. 11. How do we design for interactive gestures? Tap is the New Click // Dan Saffer, Kicker Studio
  12. 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. 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. 14. Tap is the New Click // Dan Saffer, Kicker Studio
  15. 15. Tap is the New Click // Dan Saffer, Kicker Studio
  16. 16. Tap is the New Click // Dan Saffer, Kicker Studio
  17. 17. Tap is the New Click // Dan Saffer, Kicker Studio
  18. 18. Tap is the New Click // Dan Saffer, Kicker Studio
  19. 19. Tap is the New Click // Dan Saffer, Kicker Studio
  20. 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. 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. 22. The secret sauce: sensors Tap is the New Click // Dan Saffer, Kicker Studio
  23. 23. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation Tap is the New Click // Dan Saffer, Kicker Studio
  24. 24. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation Tap is the New Click // Dan Saffer, Kicker Studio
  25. 25. Kinesiology & physiology Tap is the New Click // Dan Saffer, Kicker Studio
  26. 26. Tap is the New Click // Dan Saffer, Kicker Studio
  27. 27. Tap is the New Click // Dan Saffer, Kicker Studio
  28. 28. 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  29. 29. 8-10mm 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  30. 30. 8-10mm 10-14mm 16-20mm Tap is the New Click // Dan Saffer, Kicker Studio
  31. 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. 32. Tap is the New Click // Dan Saffer, Kicker Studio
  33. 33. Tap is the New Click // Dan Saffer, Kicker Studio
  34. 34. Tap is the New Click // Dan Saffer, Kicker Studio
  35. 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. 36. Touch events and targets Tap is the New Click // Dan Saffer, Kicker Studio
  37. 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. 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. 39. Touch target size comparisons ~25mm ~18mm ~13mm ~8mm 5mm Tap is the New Click // Dan Saffer, Kicker Studio
  40. 40. Two touch target tricks Iceberg tips Adaptive targets Tap is the New Click // Dan Saffer, Kicker Studio
  41. 41. Two touch target tricks Iceberg tips Adaptive targets Tap is the New Click // Dan Saffer, Kicker Studio
  42. 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. 43. Documenting gestures Tap is the New Click // Dan Saffer, Kicker Studio
  44. 44. Dance notation Tap is the New Click // Dan Saffer, Kicker Studio
  45. 45. Annotated wireframes still work Tap is the New Click // Dan Saffer, Kicker Studio
  46. 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. 47. Keyframes Tap is the New Click // Dan Saffer, Kicker Studio
  48. 48. Gestural modules Tap is the New Click // Dan Saffer, Kicker Studio
  49. 49. Gestural modules Tap is the New Click // Dan Saffer, Kicker Studio
  50. 50. Storyboards Tap is the New Click // Dan Saffer, Kicker Studio
  51. 51. Swim lanes framework Tap is the New Click // Dan Saffer, Kicker Studio
  52. 52. Animation Tap is the New Click // Dan Saffer, Kicker Studio
  53. 53. Movies Tap is the New Click // Dan Saffer, Kicker Studio
  54. 54. Movies Tap is the New Click // Dan Saffer, Kicker Studio
  55. 55. Prototyping gestures Tap is the New Click // Dan Saffer, Kicker Studio
  56. 56. Low-fidelity: Paper prototype Tap is the New Click // Dan Saffer, Kicker Studio
  57. 57. Low-fidelity: The “man behind the curtain” Tap is the New Click // Dan Saffer, Kicker Studio
  58. 58. Low-fidelity: Environments Tap is the New Click // Dan Saffer, Kicker Studio
  59. 59. High-fidelity: Exact Tap is the New Click // Dan Saffer, Kicker Studio
  60. 60. High-fidelity: Off-the-Shelf Tap is the New Click // Dan Saffer, Kicker Studio
  61. 61. High-fidelity: Do It Yourself Tap is the New Click // Dan Saffer, Kicker Studio
  62. 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. 63. Communicating interactive gestures Tap is the New Click // Dan Saffer, Kicker Studio
  64. 64. Three zones of engagement Tap is the New Click // Dan Saffer, Kicker Studio
  65. 65. Attraction Tap is the New Click // Dan Saffer, Kicker Studio
  66. 66. Observation Tap is the New Click // Dan Saffer, Kicker Studio
  67. 67. Interaction Tap is the New Click // Dan Saffer, Kicker Studio
  68. 68. Attraction affordance Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio
  69. 69. Written instruction Tap is the New Click // Dan Saffer, Kicker Studio
  70. 70. Illustration Tap is the New Click // Dan Saffer, Kicker Studio
  71. 71. Demonstration Tap is the New Click // Dan Saffer, Kicker Studio
  72. 72. Symbolic Tap is the New Click // Dan Saffer, Kicker Studio
  73. 73. Determining the appropriate gesture Tap is the New Click // Dan Saffer, Kicker Studio
  74. 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. 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. 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. 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. 78. The best designs are those that “dissolve into behavior.” (Naoto Fukasawa) Tap is the New Click // Dan Saffer, Kicker Studio
  79. 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. 80. Thanks. http://www.designinggesturalinterfaces.com http://www.kickerstudio.com dan@kickerstudio.com
  81. 81. Thanks. http://www.designinggesturalinterfaces.com http://www.kickerstudio.com dan@kickerstudio.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×