tap is the new click

Tap is the New ClickDan 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 LiddleTap is the New Click // Dan Saffer, Kicker Studio

We’re in the midst of an interaction design revolution.


How do we design for interactive gestures?


What we’re going to talk about

Brief history and sensors

Touch targets

Documenting

Prototyping

Communicating

Choosing appropriate gestures


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.


Two types of interactive gestures

Touchscreen

aka TUI

Single and multi-touch

Free-form

Wide variety of forms


The secret sauce: sensors


Common sensorsPressure

Light

Proximity

Acoustic

Tilt

Motion

Orientation


Kinesiology & physiology



16-20mm


16-20mm

8-10mm


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


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.


Touch events and targets


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


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)


Touch target size comparisons


~25mm ~18mm ~13mm ~8mm 5mm

Two touch target tricksIceberg tips

Adaptive targets


Traditional UI elements to watch out for

Cursors

MouseOvers and hovers

Double-click

Right-click

Selected default buttons

Undo


Documenting gestures


Dance notation


Annotated wireframes still work


Architectural wireframes


“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


Gestural modules


Storyboards


Swim lanes framework


Animation


Movies


Prototyping gestures


Low-fidelity: Paper prototype


Low-fidelity: The “man behind the curtain”


Low-fidelity: Environments


High-fidelity: Exact


High-fidelity: Off-the-Shelf


High-fidelity: Do It Yourself


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


Communicating interactive gestures


Three zones of engagement


Attraction


Observation


Interaction


Attraction affordance

Designing Gestural Interfaces Workshop // Dan Saffer, Kicker Studio

Written instruction


Illustration


Demonstration


Symbolic


Determining the appropriate gesture


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)


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


The more complicated the gesture, the fewer people who will be able to perform it.


The complexity of the gesture should match the complexity of the task at hand.


The best designs are those that “dissolve into behavior.” (Naoto Fukasawa)


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.


Thanks.http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com

[email protected]

tap is the new click

Technology

new click dan saffer

kicker studio

keyframes tap

storyboards tap

tall user tap

documenting gestures

gestural modules tap

screen coverage tap