1 designing gestural interfaces eduard martorell a book by dan saffer 22/10/2010
TRANSCRIPT
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
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.
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
Introducing interactive gestures
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
Introducing interactive gestures
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
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.
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
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.
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
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.
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
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.
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
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.
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
Prototyping interactive gestures
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
Prototyping interactive gestures
““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
Prototyping interactive gestures
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
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.
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
Communicating interactive gestures
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
Communicating interactive gestures
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
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.
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.