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.

1. Tap is the New Click
Dan Saffer, Principal, Kicker Studio

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

28. Kinesiology & physiology
Tap is the New Click // Dan Saffer, Kicker Studio

29. Tap is the New Click // Dan Saffer, Kicker Studio

30. Tap is the New Click // Dan Saffer, Kicker Studio

31. 16-20mm
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

42. Touch target size
comparisons
~25mm ~18mm ~13mm ~8mm 5mm
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

46. Documenting gestures
Tap is the New Click // Dan Saffer, Kicker Studio

47. Dance notation
Tap is the New Click // Dan Saffer, Kicker Studio

48. Annotated wireframes
still work
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

50. Keyframes
Tap is the New Click // Dan Saffer, Kicker Studio

51. Gestural modules
Tap is the New Click // Dan Saffer, Kicker Studio

52. Gestural modules
Tap is the New Click // Dan Saffer, Kicker Studio

53. Storyboards
Tap is the New Click // Dan Saffer, Kicker Studio

54. Swim lanes framework
Tap is the New Click // Dan Saffer, Kicker Studio

55. Animation
Tap is the New Click // Dan Saffer, Kicker Studio

56. Movies
Tap is the New Click // Dan Saffer, Kicker Studio

57. Movies
Tap is the New Click // Dan Saffer, Kicker Studio

58. Prototyping gestures
Tap is the New Click // Dan Saffer, Kicker Studio

59. Low-fidelity:
Paper prototype
Tap is the New Click // Dan Saffer, Kicker Studio

60. Low-fidelity: The “man
behind the curtain”
Tap is the New Click // Dan Saffer, Kicker Studio

61. Low-fidelity:
Environments
Tap is the New Click // Dan Saffer, Kicker Studio

62. High-fidelity: Exact
Tap is the New Click // Dan Saffer, Kicker Studio

63. High-fidelity:
Off-the-Shelf
Tap is the New Click // Dan Saffer, Kicker Studio

64. High-fidelity:
Do It Yourself
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

66. Communicating
interactive gestures
Tap is the New Click // Dan Saffer, Kicker Studio

67. Three zones
of engagement
Tap is the New Click // Dan Saffer, Kicker Studio

68. Attraction
Tap is the New Click // Dan Saffer, Kicker Studio

69. Observation
Tap is the New Click // Dan Saffer, Kicker Studio

70. Interaction
Tap is the New Click // Dan Saffer, Kicker Studio

71. Attraction affordance
Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio

72. Written instruction
Tap is the New Click // Dan Saffer, Kicker Studio

73. Illustration
Tap is the New Click // Dan Saffer, Kicker Studio

74. Demonstration
Tap is the New Click // Dan Saffer, Kicker Studio

75. Symbolic
Tap is the New Click // Dan Saffer, Kicker Studio

76. Determining the
appropriate gesture
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

83. Thanks.
http://www.designinggesturalinterfaces.com
http://www.kickerstudio.com
dan@kickerstudio.com

84. Thanks.
http://www.designinggesturalinterfaces.com
http://www.kickerstudio.com
dan@kickerstudio.com