1 Designing Gestural Interfaces Eduard Martorell A book by Dan Saffer 22/10/2010.

11

Designing Gestural Interfaces

Eduard MartorellEduard MartorellA book by Dan SafferA book by Dan Saffer

22/10/201022/10/2010

22

IndexIndex

Introducing interactive gestures.Introducing interactive gestures.Designing for the human body.Designing for the human body.Patterns for touchscreens.Patterns for touchscreens.Patterns for free-form gestures.Patterns for free-form gestures.Documenting interactive gestures.Documenting interactive gestures.Prototyping interactive gestures.Prototyping interactive gestures.Communicating interactive gestures.Communicating interactive gestures.The future of interactive gestures.The future of interactive gestures.

33

IndexIndex


44

Introducing interactive gestures

We’ve entered the era of interactiveWe’ve entered the era of interactivegestures.gestures.

Direct vs indirect manipulation.Direct vs indirect manipulation.– Direct manipulation: manipulate digitalDirect manipulation: manipulate digital

objects without command-line objects without command-line commands. Using the body to control commands. Using the body to control the digital space around us.the digital space around us.

Gestural interfaces have a much wider range of Gestural interfaces have a much wider range of actions; can take advantage of the hole body.actions; can take advantage of the hole body.

Indirect gesture manipulation.

55


Mechanics of touchscreens and gestural controllers.Mechanics of touchscreens and gestural controllers.– Sensor.Sensor.– Comparator.Comparator.– Actuator.Actuator.

Sensors can detect:Sensors can detect:– Pressure.Pressure.– Light.Light.– Proximity.Proximity.– Acoustic.Acoustic.– Motion.Motion.

Sensor

Comparator

Actuator

Environment

measured by

alerts

drives

affects

66


Reasons to Reasons to notnot have a gestural interface: have a gestural interface:– Heavy data input.Heavy data input.– Reliance on the visual.Reliance on the visual.– Reliance on the physical.Reliance on the physical.– Inappropiate for context.Inappropiate for context.

Reasons to Reasons to havehave a gestural interface: a gestural interface:– More natural interactions.More natural interactions.– Less visible hardware.Less visible hardware.– More flexibility.More flexibility.– More fun.More fun.

77

IndexIndex


88

Designing for the human body

It’s necessary to understandIt’s necessary to understandhow the human body moves.how the human body moves.KinesiologyKinesiology..

Know the limits of the body. Know the limits of the body. “The“Themore complicated the gesture,more complicated the gesture,the fewer the people who will be able to perform it”the fewer the people who will be able to perform it”..

Fingers present a diameter from 16mm to 20mm in Fingers present a diameter from 16mm to 20mm in adults and are more inaccurate than cursors. adults and are more inaccurate than cursors. “Don’t “Don’t make similar gestures for different actions”make similar gestures for different actions”..

99

Designing for the human body

““Never put essential informationNever put essential information

under an interface element that can beunder an interface element that can be

touched, it may be hidden by the arm ortouched, it may be hidden by the arm or

hand”hand”..

Touch targets: Touch targets: Fitt’s LawFitt’s Law– Time to reach target is proportional to the distance divided by the Time to reach target is proportional to the distance divided by the

size of the object.size of the object.– Avoid placing targets at edges of screen for gestural interfaces.Avoid placing targets at edges of screen for gestural interfaces.– Use 1x1cm as minimum target size. Adaptative targets.Use 1x1cm as minimum target size. Adaptative targets.

1010

IndexIndex


1111

Patterns for touchscreens

Tap to open/activate.Tap to open/activate.– Simple, natural replacementSimple, natural replacement

for clicking with mouse.for clicking with mouse.

Tap to select.Tap to select.

Drag to move object.Drag to move object.

Slide to scroll.Slide to scroll.

Spin to scroll.Spin to scroll.

1212

Patterns for touchscreens

Pinch to shrink and spred to enlarge.Pinch to shrink and spred to enlarge.

Two fingers to scroll.Two fingers to scroll.

1313

IndexIndex


1414

Patterns for free-form gestures

Proximity activation/deactivation.Proximity activation/deactivation.

Move body to activate.Move body to activate.Point to select / activate.Point to select / activate.Wave to activate.Wave to activate.Rotate to change state.Rotate to change state.Shake to change.Shake to change.Tilt to move.Tilt to move.

1515

IndexIndex


1616

Documenting interactive gestures

Documentation is important to get the product Documentation is important to get the product efficiently and effectively built.efficiently and effectively built.

Existing movement notation systems.Existing movement notation systems.– Labanotation.Labanotation.– Benesh movement notation.Benesh movement notation.– Eshkol Wachman movement notation.Eshkol Wachman movement notation.

All very complex, seldom used to document All very complex, seldom used to document gestural interfaces.gestural interfaces.

1717

Documenting interactive gestures

Scenarios.Scenarios.– Sketches with words: Sketches with words: “She touches de blinking area, and the

map zooms…”

Use cases.Use cases.Task analysis and flows.Task analysis and flows.Wireframes.Wireframes.– For visual design.For visual design.

Keyframes.Keyframes.– When the gesture is slightly complicated.When the gesture is slightly complicated.

Gestural modules document.Gestural modules document.Storyboarding.Storyboarding.Animation & movies.Animation & movies.

1818

IndexIndex


1919

Prototyping interactive gestures

Prototypes give you feedback to refine the final Prototypes give you feedback to refine the final product.product.

Initially use low-fidelity prototypes, to focus on Initially use low-fidelity prototypes, to focus on the concept, features, gestures, etc.the concept, features, gestures, etc.

Each prototype should become increasingly Each prototype should become increasingly refined.refined.

2020


Low-fidelity prototypes can be made of paper to focus on Low-fidelity prototypes can be made of paper to focus on the concept.the concept.

For some devices it’s usefull to prototype it’s physical For some devices it’s usefull to prototype it’s physical form. It can change the gestures that can be employed form. It can change the gestures that can be employed to engage with it.to engage with it.

2121


““The man behind the curtain”The man behind the curtain” can manipulate a low- can manipulate a low-fidelity prototype into seeming more interactive than it fidelity prototype into seeming more interactive than it really is.really is.

High-fidelity prototypes are expensive and the idea is to High-fidelity prototypes are expensive and the idea is to design and test as many of the details as possible.design and test as many of the details as possible.

A high-fidelity prototype shouldA high-fidelity prototype should

look like the final product.look like the final product.

2222


To test the prototype you need a To test the prototype you need a test plantest plan and a and a moderator scriptmoderator script, that make sure your gestures are:, that make sure your gestures are:– Discoverable (“What would you do if you wanted to do X?”).Discoverable (“What would you do if you wanted to do X?”).– Meaningful (“Would you ever do that?”).Meaningful (“Would you ever do that?”).– Useful (“Are you able to do what you wanted to do?”).Useful (“Are you able to do what you wanted to do?”).– Usable (“Can you do that action?”).Usable (“Can you do that action?”).

10 test subjects will usually quickly reveal the flaws of 10 test subjects will usually quickly reveal the flaws of your product.your product.

2323

IndexIndex


2424

Communicating interactive gestures

Communicating interactive gestures means Communicating interactive gestures means communicating 2 pieces of information:communicating 2 pieces of information:– PresencePresence: there is a gestural system.: there is a gestural system.– InstructionInstruction: How to use the system.: How to use the system.

Three zones of engagement.Three zones of engagement.– Attraction.Attraction.– Observation.Observation.– Interaction.Interaction.

Attraction

Observation

Interaction

2525


People aren’t accustomed to using interactive People aren’t accustomed to using interactive gestures. They have fear.gestures. They have fear.

An An attraction affordanceattraction affordance should invite the user should invite the user to initiate interaction with it.to initiate interaction with it.

2626


Methods of communicating interactive gestures.Methods of communicating interactive gestures.– Written instructions.Written instructions.

For simple, unambiguous gestures.

– Illustration.Illustration.More universal than written instructions.

– Demonstration.Demonstration.Typically show a loop so the gesture can be imitated.

– Use of symbols.Use of symbols.Communicate the presence of the system and how to use it.

– Simile and metaphor.Simile and metaphor.“Move your hand like you are stirring a pot”.

2727

IndexIndex


2828

The future of interactive gestures

Widespread adoption in the home and office.Widespread adoption in the home and office.Supplanting the desktop metaphore?Supplanting the desktop metaphore?Specialized applications and products.Specialized applications and products.New input devices.New input devices.Convergence with other technologies.Convergence with other technologies.– Voice recognition, virtual reality…Voice recognition, virtual reality…

Gesturing with smart objects.Gesturing with smart objects.Optimized for touch.Optimized for touch.Better tools for creation.Better tools for creation.

2929

The future of interactive gestures

Toward standards.Toward standards.– We’ll need some standards for interactive We’ll need some standards for interactive

gestures: turn light on/off, ATM’s and kiosks…gestures: turn light on/off, ATM’s and kiosks…– Patents stand in the way of standarization.Patents stand in the way of standarization.

Gestures cannot be patented.Gestures cannot be patented.Gestures tied to a specific action can be patented Gestures tied to a specific action can be patented (pinch to shrink).(pinch to shrink).

““The best way to predict the future is to The best way to predict the future is to invent it”invent it” – Alan Kay. – Alan Kay.

3030

The endThe end

1 Designing Gestural Interfaces Eduard Martorell A book by Dan Saffer 22/10/2010.

Documents

Transcript of 1 Designing Gestural Interfaces Eduard Martorell A book by Dan Saffer 22/10/2010.