Your SlideShare is downloading. ×
0
Tap is the New Click
Dan Saffer, Kicker Studio
DRC 2009 // Dan Saffer, Kicker Studio
DRC 2009 // 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.
How do we design
for interactive gestures?
What we’re going
to talk about
Sensors and touchscreen types
Kinesiology and physiology
Touch targets
Communicating
Choosi...
Gesture: any physical
movement that can be
sensed and responded to
by a digital system
without the aid of a
traditional in...
DRC 2009 // Dan Saffer, Kicker Studio
DRC 2009 // Dan Saffer, Kicker Studio
Two types of
interactive gestures
Touchscreen
  aka TUI
  Single and multi-touch (MT)
Free-form
  Wide variety of forms
Why not to have
a gestural interface
Heavy data input
Relies heavily on the visual (for now)
Can be inappropriate for cont...
Why have a gestural
interface?
More flexible
Less visible hardware
Hardware fits context better
More “natural”
More fun
The secret sauce: sensors
Common sensors
Pressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Types of touchscreens
Resistive: pressing two layers together creates the
touch event
Surface wave: finger disrupts ultraso...
Kinesiology & physiology
The ergonomics
of human gestures
Avoid hyperextension or extreme stretches
Avoid repetition
Utilize relaxed, neutral posit...
Gorilla arm
Humans not designed to hold their arms in front of
their faces, making small gestures
Ok for short-term use, n...
Gorilla arm
Gorilla arm
Stephan Pheasant’s (via
Rob Tannen) cardinal
rules of anthropometrics
Reach
Clearence
Posture
Strength
The more challenging and
complicated the gesture,
the fewer people who will
be able to perform it.
What about
accessibility?
No good, clear answer
Improving via addition of haptics (and hopefully,
eventually, speech)
Some...
8-10mm
         10-14mm

                   16-20mm
Fingers
Fingernails: Blessing   Wrist support
and curse
                        Gloves
Fake fingernails: evil
             ...
DRC 2009 // Dan Saffer, Kicker Studio
DRC 2009 // 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
Touch target size
Remember Fitts’ Law! (Time it takes to get to a target
= distance to target / size of target)
As close t...
Touch target size
comparisons



~25mm   ~18mm   ~13mm   ~8mm   5mm
Two touch target tricks
Iceberg tips
Adaptive targets
Two touch target tricks
Iceberg tips
Adaptive targets
Traditional UI elements
to watch out for
Cursors
MouseOvers and hovers
Double-click
Right-click
Selected default buttons
U...
Touchscreen patterns
Tap to open/activate
Tap to select
Drag to move object
Slide to scroll
Spin to scroll
Flick to nudge
Pinch to shrink &
Spread to enlarge
Ghost fingers
Freeform patterns
Proximity activates/
deactivates
Move body to activate
Point to select/activate
Wave to activate
Rotate to change state
Step to activate
Shake to change state
Prototyping gestures
Low-fidelity:
Paper prototype
Low-fidelity: The “man
behind the curtain”
Low-fidelity:
Environments
High-fidelity: Exact
High-fidelity:
Off-the-Shelf
High-fidelity:
Do It Yourself
Turning gestures
into code
Variables: what are you measuring?
Data: get the data in from the sensor
Computation: determine...
Documenting gestures
Dance notation
Annotated wireframes
still work
Architectural
wireframes
  touchscreenoverview
         “Master UI”                      Run by presenter                 ...
Keyframes
Gestural modules
Gestural modules
Storyboards
Swim lanes framework
Animation
Movies
Communicating
interactive gestures
Three zones
of engagement
Attraction
Observation
Interaction
Attraction affordance
Written instruction
Illustration
Demonstration
Symbolic
Determining the
appropriate gesture
Four part equation
1. The task that needs to be performed
2. The available sensors and input devices
3. The physiology of ...
Context
Different behaviors in different locations
Avoiding accidental emotional weight
Cultural issues
Usability issues
Avoid unintentional triggers via everyday actions!
Wide variation in performing gestures: need
requisite ...
Case study: Canesta
Entertainment Center
Case study: Canesta
Entertainment Center
Case study: Canesta
Entertainment Center
Case study: Canesta
Entertainment Center
The complexity of the
gesture should match
the complexity of the
task at hand.
The best designs are
those that “dissolve
into behavior.”
(Naoto Fukasawa)
The best, most natural
designs, then, are those
that match the behavior
of the system to the
gesture humans might
already ...
Thanks.


http://www.kickerstudio.com

http://www.designinggesturalinterfaces.com

dan@kickerstudio.com
odannyboy on Twitt...
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
×

Tap is the New Click

18,628

Published on

An introduction to designing for touchscreens and interactive gestures.

Published in: Design, Technology
2 Comments
40 Likes
Statistics
Notes
  • if you are interested to know more about cameras. Please don’t hesitate to visit us at http://8mmdigitalcamcorders.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thanks for the share
    checkin the book fast
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,628
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
661
Comments
2
Likes
40
Embeds 0
No embeds

No notes for slide

Transcript of "Tap is the New Click"

  1. 1. Tap is the New Click Dan Saffer, Kicker Studio
  2. 2. DRC 2009 // Dan Saffer, Kicker Studio
  3. 3. DRC 2009 // Dan Saffer, Kicker Studio
  4. 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. 5. We’re in the midst of an interaction design revolution.
  6. 6. How do we design for interactive gestures?
  7. 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. 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. 9. DRC 2009 // Dan Saffer, Kicker Studio
  10. 10. DRC 2009 // Dan Saffer, Kicker Studio
  11. 11. Two types of interactive gestures Touchscreen aka TUI Single and multi-touch (MT) Free-form Wide variety of forms
  12. 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. 13. Why have a gestural interface? More flexible Less visible hardware Hardware fits context better More “natural” More fun
  14. 14. The secret sauce: sensors
  15. 15. Common sensors Pressure Light Proximity Acoustic Tilt Motion Orientation
  16. 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. 17. Kinesiology & physiology
  18. 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. 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. 20. Gorilla arm
  21. 21. Gorilla arm
  22. 22. Stephan Pheasant’s (via Rob Tannen) cardinal rules of anthropometrics Reach Clearence Posture Strength
  23. 23. The more challenging and complicated the gesture, the fewer people who will be able to perform it.
  24. 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. 25. 8-10mm 10-14mm 16-20mm
  26. 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. 27. DRC 2009 // Dan Saffer, Kicker Studio
  28. 28. DRC 2009 // Dan Saffer, Kicker Studio
  29. 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. 30. Touch events and targets
  31. 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. 32. Touch target size comparisons ~25mm ~18mm ~13mm ~8mm 5mm
  33. 33. Two touch target tricks Iceberg tips Adaptive targets
  34. 34. Two touch target tricks Iceberg tips Adaptive targets
  35. 35. Traditional UI elements to watch out for Cursors MouseOvers and hovers Double-click Right-click Selected default buttons Undo
  36. 36. Touchscreen patterns
  37. 37. Tap to open/activate
  38. 38. Tap to select
  39. 39. Drag to move object
  40. 40. Slide to scroll
  41. 41. Spin to scroll
  42. 42. Flick to nudge
  43. 43. Pinch to shrink & Spread to enlarge
  44. 44. Ghost fingers
  45. 45. Freeform patterns
  46. 46. Proximity activates/ deactivates
  47. 47. Move body to activate
  48. 48. Point to select/activate
  49. 49. Wave to activate
  50. 50. Rotate to change state
  51. 51. Step to activate
  52. 52. Shake to change state
  53. 53. Prototyping gestures
  54. 54. Low-fidelity: Paper prototype
  55. 55. Low-fidelity: The “man behind the curtain”
  56. 56. Low-fidelity: Environments
  57. 57. High-fidelity: Exact
  58. 58. High-fidelity: Off-the-Shelf
  59. 59. High-fidelity: Do It Yourself
  60. 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. 61. Documenting gestures
  62. 62. Dance notation
  63. 63. Annotated wireframes still work
  64. 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. 65. Keyframes
  66. 66. Gestural modules
  67. 67. Gestural modules
  68. 68. Storyboards
  69. 69. Swim lanes framework
  70. 70. Animation
  71. 71. Movies
  72. 72. Communicating interactive gestures
  73. 73. Three zones of engagement
  74. 74. Attraction
  75. 75. Observation
  76. 76. Interaction
  77. 77. Attraction affordance
  78. 78. Written instruction
  79. 79. Illustration
  80. 80. Demonstration
  81. 81. Symbolic
  82. 82. Determining the appropriate gesture
  83. 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. 84. Context Different behaviors in different locations Avoiding accidental emotional weight Cultural issues
  85. 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. 86. Case study: Canesta Entertainment Center
  87. 87. Case study: Canesta Entertainment Center
  88. 88. Case study: Canesta Entertainment Center
  89. 89. Case study: Canesta Entertainment Center
  90. 90. The complexity of the gesture should match the complexity of the task at hand.
  91. 91. The best designs are those that “dissolve into behavior.” (Naoto Fukasawa)
  92. 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. 93. Thanks. http://www.kickerstudio.com http://www.designinggesturalinterfaces.com dan@kickerstudio.com odannyboy on Twitter
  1. A particular slide catching your eye?

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

×