Tap is the New Click
Upcoming SlideShare
Loading in...5
×
 

Tap is the New Click

on

  • 21,497 views

An introduction to designing for touchscreens and interactive gestures.

An introduction to designing for touchscreens and interactive gestures.

Statistics

Views

Total Views
21,497
Views on SlideShare
11,429
Embed Views
10,068

Actions

Likes
40
Downloads
660
Comments
2

48 Embeds 10,068

http://ajaxian.com 6423
http://www.odannyboy.com 1913
http://www.kickerstudio.com 365
http://tangibleinteraction2013.blogspot.tw 277
http://tangibleinteracitondesign.blogspot.tw 261
http://swik.net 213
http://uxmap.net 209
http://uxkid.tumblr.com 192
http://tangibleinteraction2011.blogspot.com 41
http://www.slideshare.net 33
http://tangibleinteraction2011.blogspot.tw 19
http://translate.googleusercontent.com 15
http://linux-live-usb.org 13
http://www.hanrss.com 10
http://www.extjs.com 10
http://feeds.feedburner.com 9
http://webcache.googleusercontent.com 9
http://addyosmani.com 8
http://tangibleinteracitondesign.blogspot.com 5
http://www.linkedin.com 5
http://tangibleinteraction2011.blogspot.hk 3
resource://brief-content 3
http://aajax.com 2
http://us-w1.rockmelt.com 2
https://twitter.com 2
http://jouach.blogspot.com 2
http://aaiddennium.tumblr.com 2
http://127.0.0.1:8795 2
http://renatocarvalho.com 1
http://spime.tumblr.com 1
http://cache.baiducontent.com 1
http://tangibleinteracitondesign.blogspot.hk 1
http://tangibleinteracitondesign.blogspot.jp 1
http://llicki.tumblr.com 1
http://tangibleinteracitondesign.blogspot.de 1
http://static.slidesharecdn.com 1
http://74.125.155.132 1
http://74.125.45.132 1
http://www.pageflakes.com 1
http://www.tumblr.com 1
http://xss.yandex.net 1
http://www.ajaxian.com 1
https://www.anch0r.com:444 1
http://del.icio.us 1
applewebdata://52340F34-861B-4C7B-A353-9B343E51E7DF 1
http://flavors.me 1
http://s1m0neresources.tumblr.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • if you are interested to know more about cameras. Please don’t hesitate to visit us at http://8mmdigitalcamcorders.com
    Are you sure you want to
    Your message goes here
    Processing…
  • thanks for the share
    checkin the book fast
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Tap is the New Click Tap is the New Click Presentation Transcript

  • 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 and spreadsheet tweaking. —David Liddle
  • 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 Choosing appropriate gestures Case study: Canesta Entertainment Center
  • 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.
  • 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 context More physically demanding
  • 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 ultrasonic waves Capacitive: finger conducts electricity Infrared: finger breaks grid of infrared beams Camera-based: looks for “blobs.” Rear- and front- projectors
  • Kinesiology & physiology
  • 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”
  • 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
  • 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 touchscreen systems much better than traditional WIMP systems Special care when designing touch targets
  • 8-10mm 10-14mm 16-20mm
  • 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
  • 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 become hidden by the user’s own hand.
  • 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 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)
  • 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 Undo
  • 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 difference between data Patterns: what do the sums mean? Action: if a pattern is matched, do something
  • Documenting gestures
  • Dance notation
  • Annotated wireframes still work
  • 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 ]
  • 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 the human body 4. The context This can be pretty straightforward Or not
  • 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 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
  • 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 do to enable that behavior.
  • Thanks. http://www.kickerstudio.com http://www.designinggesturalinterfaces.com dan@kickerstudio.com odannyboy on Twitter