Download as PDF, PPTX
![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]](https://image.slidesharecdn.com/tapisthenewclick-091113125811-phpapp01/85/Tap-is-the-New-Click-77-320.jpg)
Uploaded byDan Saffer
Tap is the New Click
An introduction to designing for touchscreens and interactive gestures.
Tap is the New Click
- 1. Tap is theNew Click Dan Saffer, Kicker Studio
- 8. DRC 2009 //Dan Saffer, Kicker Studio
- 9. DRC 2009 //Dan Saffer, Kicker Studio
- 10. We're using bodies evolvedfor hunting, gathering, and gratuitous violence for information- age tasks like word processing and spreadsheet tweaking. —David Liddle
- 11. We’re in themidst of an interaction design revolution.
- 12. How do wedesign for interactive gestures?
- 13. What we’re going totalk about Sensors and touchscreen types Kinesiology and physiology Touch targets Communicating Choosing appropriate gestures Case study: Canesta Entertainment Center
- 14. Gesture: any physical movementthat can be sensed and responded to by a digital system without the aid of a traditional input device such as a mouse or stylus.
- 17. DRC 2009 //Dan Saffer, Kicker Studio
- 19. DRC 2009 //Dan Saffer, Kicker Studio
- 21. Two types of interactivegestures Touchscreen aka TUI Single and multi-touch (MT) Free-form Wide variety of forms
- 22. Why not tohave a gestural interface Heavy data input Relies heavily on the visual (for now) Can be inappropriate for context More physically demanding
- 23. Why have agestural interface? More flexible Less visible hardware Hardware fits context better More “natural” More fun
- 24. The secret sauce:sensors
- 25.
- 27. 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
- 28.
- 29. The ergonomics of humangestures Avoid hyperextension or extreme stretches Avoid repetition Utilize relaxed, neutral positions Avoid staying in a static position No “Gorilla Arm”
- 30. Gorilla arm Humans notdesigned 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
- 31.
- 32.
- 33. Stephan Pheasant’s (via RobTannen) cardinal rules of anthropometrics Reach Clearence Posture Strength
- 34. The more challengingand complicated the gesture, the fewer people who will be able to perform it.
- 35. 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
- 38.
- 39. Fingers Fingernails: Blessing and curse Fakefingernails: evil Finger oil Fingerprints (Left) Handedness Wrist support Gloves Inaccurate (when compared to a cursor) Attached to a hand aka Screen Coverage
- 40. DRC 2009 //Dan Saffer, Kicker Studio
- 41. DRC 2009 //Dan Saffer, Kicker Studio
- 42. Avoid putting essential featuresor information like a label below an interface element that can be touched, as it may become hidden by the user’s own hand.
- 43. Touch events andtargets
- 44. Touch target size RememberFitts’ 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)
- 45. Touch target size comparisons ~25mm~18mm ~13mm ~8mm 5mm
- 46. Two touch targettricks Iceberg tips Adaptive targets
- 47. Two touch targettricks Iceberg tips Adaptive targets
- 48. Traditional UI elements towatch out for Cursors MouseOvers and hovers Double-click Right-click Selected default buttons Undo
- 49.
- 50.
- 51.
- 52. Drag to moveobject
- 53.
- 54.
- 55.
- 56. Pinch to shrink& Spread to enlarge
- 57.
- 58.
- 59.
- 60. Move body toactivate
- 61.
- 62.
- 63. Rotate to changestate
- 64.
- 65. Shake to changestate
- 66.
- 67.
- 68. Low-fidelity: The “man behindthe curtain”
- 69.
- 70.
- 71.
- 72.
- 73. 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
- 74.
- 75.
- 76.
- 77. Architectural wireframes “Master UI” “IndividualUI” 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]
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96. 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
- 97. Context Different behaviors indifferent locations Avoiding accidental emotional weight Cultural issues
- 98. Usability issues Avoid unintentionaltriggers 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
- 99.
- 101.
- 102.
- 103.
- 104. The complexity ofthe gesture should match the complexity of the task at hand.
- 105. The best designsare those that “dissolve into behavior.” (Naoto Fukasawa)
- 106. The best, mostnatural designs, then, are those that match the behavior of the system to the gesture humans might already do to enable that behavior.
- 107.