its awesome how advancements in HCI (user-interfaces like touch screens) can have such a big impact on productivity, ease of use, etc. on a similar note, here’s an app that improves your everyday web browsing experience http://www.viewista.com
Tap is the New Click
Dan 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 Liddle
Tap 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 sensors
Pressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Tap is the New Click // Dan Saffer, Kicker Studio
Common sensors
Pressure
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
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
8-10mm
10-14mm
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
Fingers
Fingernails: Blessing Accessibility issues
and curse
Wrist support
Fake fingernails: evil
Gloves
Finger oil
Inaccurate (when
Fingerprints compared to a cursor)
(Left) Handedness 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 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
Tap is the New Click // Dan Saffer, Kicker Studio
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
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
~25mm ~18mm ~13mm ~8mm 5mm
Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricks
Iceberg tips
Adaptive targets
Tap is the New Click // Dan Saffer, Kicker Studio
Two touch target tricks
Iceberg 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
wireframestouchscreenoverview
“Master UI” “Individual UI”
Run by presenter 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 ]
Tap is the New Click // Dan Saffer, Kicker Studio
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 equation
1. 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 gestures
Avoid 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
Even though touchscreen and gestural technology has more
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. less
4 comments
Comments 1 - 4 of 4 previous next Post a comment