O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Tap is the New Click

Carregando em…3

Confira estes a seguir

1 de 107 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Quem viu também gostou (20)


Semelhante a Tap is the New Click (20)


Mais recentes (20)

Tap is the New Click

  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. 16-20mm 8-10mm 10-14mm
  26. Fingers Fingernails: Blessing and curse Fake fingernails: evil Finger oil Fingerprints (Left) Handedness Wrist support Gloves Inaccurate (when compared to a cursor) Attached to a hand aka Screen Coverage
  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 “Master UI” “Individual UI” Run by presenter Live Touchscreen Projection Area Used by show attendees [floor] [ showing typical arm’s reach for 6’ tall user ] [ showing typical arm’s reach for 6’ tall user ] touchscreenoverview [floor]
  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. http://www.kickerstudio.com http://www.designinggesturalinterfaces.com dan@kickerstudio.com odannyboy on Twitter