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

Two types of interactive gestures

Touchscreen

aka TUI

Single and multi-touch

Free-form

Wide variety of forms

The secret sauce: sensors

Common sensorsPressure

Proximity

Acoustic

Motion

Orientation

Common sensorsPressure

Proximity

Acoustic

Motion

Orientation

Kinesiology & physiology

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

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

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

dan@kickerstudio.com

Thanks.http://www.designinggesturalinterfaces.com

http://www.kickerstudio.com

dan@kickerstudio.com

Tap is the New Click

Technology

Transcript of Tap is the New Click

How Do You Install a New Kitchen Tap

LIGHTIFY App - User-Guide - Osram · Add product: 3 Button Switch User Guide LIGHTIFY App 10 Tap here to add a new device Click to add a new switch Follow the instructions Select

New Programs on Tap for 2019 - Charter Oak

FIRST PERSONstatic.lukew.com/fpi_09242012.pdfTap Double Tap Swipe/Drag Flick Pinch Spread Press Rotate. 17. ... NEW INPUT METHODS Mouse Click Wheel Multi-Touch ÒEach new input method

Partners HealthCare Innovation€¦ · Web viewList type of support (material or money) Click or tap here to enter text. Agreement No. Click or tap here to enter text. List other

Guide de l’utilisateur LG-D3932 Tap Search contacts and enter the contact name using the keyboard. Adding a new contact 1 Tap , enter the new contact's number, then tap . Tap Add

Applicant Full Name (CAPITAL LETTERS):€¦ · Web viewAllowance(s) received (Type(s) and Value(s)): Click or tap here to enter text. Period of . Notice required: Click or tap here

Mrs. Timothy · Web viewDDoS Attack What is a DDoS Attack? Click or tap here to enter text. What is a network of infected computers called? Click or tap here to enter text. What is

For online Application Click on New User Click here for Registrationdme.ap.nic.in/E11/2015/Asstprof_online_help.pdf · 2015-04-12 · For online Application Click on New User Click

Inspiron 7490 - Dell...Move your finger on the touchpad to move the mouse pointer. Tap to left-click and two finger tap to right-click. 2. Left-click area Press to left-click. 3. Right-click

Xerox VersaLink Enhancement Read Me Description of new ...download.support.xerox.com/pub/docs/6510/userdocs/... · Note #1: Windows 8.x In Windows 8, tap or click on the Hardware

Interfacce, UX e tv - coris.uniroma1.it · Visual Analytics Click, scroll, tap, mouse movements Click Heatmap Dove cliccano o fanno tap gli utenti Mouse (movement) Heatmap Dove si

Application for Vocational Rehabilitation ServicesVR Application – Version 2.0 Revised 03/28/2019 Reason for Leaving: Click or tap here to enter text Click or tap here to enter text._____

· Web viewClient Information. Name Click or tap here to enter text. Address Click or tap here to enter text. City Click or tap here to enter text.State Click or tap here to enter

01 Tap! Tap! Tap!

Me and My Dell...In Windows 8.1, access the search charm to access the search box. 2. Click or tap Manage audio devices. 3. Under the Playback tab, click or tap Speakers or Headphones.

Using the e-Reader · Using the e-Reader Navigation Click or tap to access . page functionality. Audio Player. Click or tap to hear the . book read aloud and launch audio controls.

Click the “Find/Identify” tab - gis.pottcounty.comgis.pottcounty.com/Html5/help/Slides.pdf · Taois To learn what's there, draw a line of interest along the map. Double-click/tap

Tap to talk powerpoint new

XPS 13 7390 2-in-1 · Move your finger on the touchpad to move the mouse pointer. Tap to left-click and two finger tap to right-click.2. Left-click area Press to left-click. 3. Right-click