Tap is the New Click

Tap is the New Click Dan Saffer, Principal, 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

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

Kinesiology & physiology 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 ﬁngernails: 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

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 ﬁnger 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

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

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

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

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

Tap is the New Click

4 comments

Notes on slide 1

21 Favorites