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.
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Tap is the New Click
1. Tap is the New Click
Dan Saffer, Principal, Kicker Studio
2.
3.
4. Tap is the New Click // Dan Saffer, Kicker Studio
5. Tap is the New Click // Dan Saffer, Kicker Studio
6. Tap is the New Click // Dan Saffer, Kicker Studio
7. Tap is the New Click // Dan Saffer, Kicker Studio
8. Tap is the New Click // Dan Saffer, Kicker Studio
9. Tap is the New Click // Dan Saffer, Kicker Studio
10. Tap is the New Click // Dan Saffer, Kicker Studio
11. 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
12. We’re in the midst
of an interaction
design revolution.
Tap is the New Click // Dan Saffer, Kicker Studio
13. How do we design for
interactive gestures?
Tap is the New Click // Dan Saffer, Kicker Studio
14. 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
15. 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
16. Tap is the New Click // Dan Saffer, Kicker Studio
17. Tap is the New Click // Dan Saffer, Kicker Studio
18. Tap is the New Click // Dan Saffer, Kicker Studio
19. Tap is the New Click // Dan Saffer, Kicker Studio
20. Tap is the New Click // Dan Saffer, Kicker Studio
21. Tap is the New Click // Dan Saffer, Kicker Studio
22. 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
23. 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
24. The secret sauce: sensors
Tap is the New Click // Dan Saffer, Kicker Studio
25. Common sensors
Pressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Tap is the New Click // Dan Saffer, Kicker Studio
26. Common sensors
Pressure
Light
Proximity
Acoustic
Tilt
Motion
Orientation
Tap is the New Click // Dan Saffer, Kicker Studio
32. 8-10mm
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
33. 8-10mm
10-14mm
16-20mm
Tap is the New Click // Dan Saffer, Kicker Studio
34. 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
35. Tap is the New Click // Dan Saffer, Kicker Studio
36. Tap is the New Click // Dan Saffer, Kicker Studio
37. Tap is the New Click // Dan Saffer, Kicker Studio
38. 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
39. Touch events and targets
Tap is the New Click // Dan Saffer, Kicker Studio
40. 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
41. 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
43. Two touch target tricks
Iceberg tips
Adaptive targets
Tap is the New Click // Dan Saffer, Kicker Studio
44. Two touch target tricks
Iceberg tips
Adaptive targets
Tap is the New Click // Dan Saffer, Kicker Studio
45. 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
49. 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
65. 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
77. 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
78. 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
79. The more complicated the
gesture, the fewer people
who will be able to
perform it.
Tap is the New Click // Dan Saffer, Kicker Studio
80. The complexity of the
gesture should match
the complexity of the
task at hand.
Tap is the New Click // Dan Saffer, Kicker Studio
81. The best designs are
those that “dissolve
into behavior.”
(Naoto Fukasawa)
Tap is the New Click // Dan Saffer, Kicker Studio
82. 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