Upload
chiatlanta
View
7.516
Download
1
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Tap is the New ClickDan 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 and spreadsheet tweaking. —David LiddleTap is the New Click // Dan Saffer, Kicker Studio
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
Communicating
Choosing appropriate gestures
Tap is the New Click // Dan Saffer, Kicker Studio
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
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 variety of forms
Tap is the New Click // Dan Saffer, Kicker Studio
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
The secret sauce: sensors
Tap is the New Click // Dan Saffer, Kicker Studio
Common sensorsPressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Tap is the New Click // Dan Saffer, Kicker Studio
Common sensorsPressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Tap is the New Click // Dan Saffer, Kicker Studio
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
Tap is the New Click // Dan Saffer, Kicker Studio
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
16-20mm
8-10mm
Tap is the New Click // Dan Saffer, Kicker Studio
16-20mm
8-10mm
10-14mm
FingersFingernails: Blessing and curse
Fake fingernails: evil
Finger oil
Fingerprints
(Left) Handedness
Accessibility issues
Wrist support
Gloves
Inaccurate (when compared to a cursor)
Attached to a hand aka Screen Coverage
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
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
Touch events and targets
Tap is the New Click // Dan Saffer, Kicker Studio
Types of touchscreensResistive: 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
Touch target sizeRemember 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
Touch target size comparisons
Tap is the New Click // Dan Saffer, Kicker Studio
~25mm ~18mm ~13mm ~8mm 5mm
Two touch target tricksIceberg tips
Adaptive targets
Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricksIceberg 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 default buttons
Undo
Tap is the New Click // Dan Saffer, Kicker Studio
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 wireframes
Tap is the New Click // Dan Saffer, Kicker Studio
“Master UI” “Individual UI”Run by presenter
Live TouchscreenProjection 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]
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: 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
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 equation1. 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
The ergonomics of human gesturesAvoid 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
The more complicated the gesture, the fewer people who will be able to perform it.
Tap is the New Click // Dan Saffer, Kicker Studio
The complexity of the gesture should match the complexity of the task at hand.
Tap is the New Click // Dan Saffer, Kicker Studio
The best designs are those that “dissolve into behavior.” (Naoto Fukasawa)
Tap is the New Click // Dan Saffer, Kicker Studio
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