Chapter 3: Interaction Design Basics - University of...
Transcript of Chapter 3: Interaction Design Basics - University of...
![Page 1: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/1.jpg)
1
Chapter 3: Interaction Design Basics
Designing for Interaction: Creating Innovative Applications and Devices, Dan Saffer, New Riders Press, ISBN 978-0321643391
![Page 2: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/2.jpg)
2
Elements of Interaction Design
• Products/services can be digital, analog, or both
• Basic design components of interaction
– Motion– Space– Time– Appearance– Texture– Sound
![Page 3: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/3.jpg)
3
Elements of Interaction Design
• Motion– Interaction design is concerned with
behavior– People who use products generate
behavior– Products behave in response
– Behavior = Motion• Pressing key• Response on screen• Click icon
– Wide variation based on attitude, culture, personality, and context
![Page 4: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/4.jpg)
4
Elements of Interaction Design
• Space– Movement happens in space– 2-D, 3-D, digital, analog, physical
– Interaction combination of physical and digital spaces• Turn knob on stereo (physical, analog space)• Result shown on digital display (digital space)
– Piazza designed for interaction• Modern interaction design should take advantage of 3D space on screens, idea of
perspective often lost in 2-D
– Where does interaction take place (noisy airport vs. isolated parking lot)
http://en.wikipedia.org/wiki/File:Piazza_st._peters_rome_1909.jpg
![Page 5: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/5.jpg)
5
Elements of Interaction Design
• Time– Interaction takes place over time
– Awareness of time• e-Commerce
– Searching and buying a product can take a long time
– Setting a timed out for 5 minutes can be frustrating for the user
• Concert purchase– Limited time to purchase tickets
before seats given away• Games
– Speed of game play, how quickly images appear, complete levels
• Power restrictions– Mobile phone that has only 10
minutes of use is not benefical
Duchamp Descending by Eliot Elisofon, 1952
![Page 6: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/6.jpg)
6
Elements of Interaction Design
• Appearance– Provides cues to how it behaves and how
we should interact with it– Remember affordances?
• Perceived based on context and culture
![Page 7: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/7.jpg)
7
Elements of Interaction Design
• Appearance variables– Proportion– Structure– Size– Shape– Weight– Color (hue, value, saturation)
http://unusuallife.com/
http://www.joe-ks.com/
BramBoo, http://www.bramboo.becamouflage satellite dish
![Page 8: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/8.jpg)
8
Elements of Interaction Design
• Texture– Can be part of appearance– How an object feels in the hand
can also convey information about that object
• Sound– Small but important part that
conveys information– Adjustable components
• Ptich• Volume• Timbre or tone
sample1
sample2
sample3
sample4
sample5
sample6
sample7
sample8
Name that sound …
![Page 9: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/9.jpg)
9
Laws of Interaction Design
• Moore’s Law– Doubling of transistors roughly every 2
years– Designers can conceive of devices that
are faster, smaller, more powerful
• Fitts’ Law– Time to target is based on distance to
target and the size of the target– Implications
• Clickable objects need to be of reasonable size
• Edge/corners of screen ideal because you can’t overshoot them
• Popup menus should appear next to object user is working on
E. Moore, Co-founder, Intel Corporation. Copyright © 2005 Intel Corporation.
![Page 10: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/10.jpg)
10
Laws of Interaction Design
• The Magical Number Seven– Human mind is best able to remember
information in chunks of seven items, plus or minus two
– Balance cognitive overload vs. too literal a translation of this magic number
• Hick’s Law (Hick-Hyman Law)– Time it takes for a user to make a
decision is determined by the number of possible choices
– Time also impacted by• Familiarly of choices (repeated use?)• Format of choices (words, videos,
buttons, …)
– One menu of 10 items better than two menus of 5 items each
• Does this mean Amazon should present all links on the homepage?
• Is hierarchy dead?
1 520 621 2434 15206212434
1 (520) 621-2434
![Page 11: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/11.jpg)
11
Laws of Interaction Design
• Tesler’s Law of the Conservation of Complexity
– In every process there is some inherent complexity
– You cannot reduce the complexity of a given task beyond a certain point
– Once you've reached that point, you can only shift the burden around
– Email example• Minimum requirement - your email address and
the address of the person you want to send mail to
• Burden shifted to mail client / address book, complexity remains but it’s just shifted to software
– Lessons• Share burden of complexity as much as possible
with the product• What is a computer good at? What does a user
want to control?
![Page 12: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/12.jpg)
12
Laws of Interaction Design
• The Poka-Yoke Principle– Mistake proofing : avoiding (yokeru)
inadvertent errors (poka)
– Put constraints on products to prevent errors and force users to adjust their behavior to correctly execute an operation
![Page 13: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/13.jpg)
13
Characteristics of Good Interaction Design
• Trustworthy– Worthy of being trusted; honest, reliable, or
dependable
– Humans make decisions about trustworthiness of products within seconds of engaging with it
– Products must display trustworthiness quickly– User more likely to take time to examine, learn,
discover features
![Page 14: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/14.jpg)
14
Characteristics of Good Interaction Design
• Appropriate– Designs should be appropriate to the
culture, situation, and context
– Understanding cultures and adjusting designs
• Power distance - To what extent will members of a culture accept inequities in power among different members of that culture
• Individualism versus collectivism - Do members of a culture have loose ties to their families and others, or are they members of strong groups (especially families)?
• Masculinity versus femininity – How strong are the gender roles in a culture? In strong masculine cultures, traditional distinction between the sexes are maintained.
• Uncertainty avoidance – How tolerant is a culture of ambiguity and uncertainty?
• Long-term versus short-term orientation –How much does a culture value the future over the past and present?
Thailand (widows), Brazil
Purple
South AfricaRed
EgyptYellow
USBlack
Japan, ChinaWhite
CountryMourning Color
Software of the MindGeert Hofstede
McGraw-Hill; ISBN-13: 978-0071439596
![Page 15: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/15.jpg)
15
Characteristics of Good Interaction Design
• Smart– Product/service need to be
smarter than we are– Do the things we humans have
trouble doing
• Responsive– Users need to know the product
“hear” what we told it to do and is working on the task
– If task takes significant time, provide mechanism to let user know
– Indicators assure the user process hasn’t gone into an endless cycle
![Page 16: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/16.jpg)
16
Characteristics of Good Interaction Design
• Clever– Intelligence without smugness– Implies delight – leads to delight when user
discovers how clever or thoughtful device is
• Ludic (“loo-dik”)– Means playful– Doesn’t mean design toys, rather provide a
means for user to play with product– User seeks new services and features through
play• Requires lack of consequences
• Pleasurable– If product isn’t pleasing to use, we won’t– Aesthetically and functionally
What does this button do?
![Page 17: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/17.jpg)
![Page 18: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/18.jpg)
![Page 19: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/19.jpg)
![Page 20: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/20.jpg)
![Page 21: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/21.jpg)
![Page 22: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/22.jpg)
![Page 23: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/23.jpg)
![Page 24: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/24.jpg)
![Page 25: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/25.jpg)
17
Interaction Design – Rosson, Ch5(Images)
** Developing User Interfaces - Ensuring Usability Through Product & Process, Deborah Hixand H. Rex Hartson, Wiley, ISBN 978-0471578130
![Page 26: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/26.jpg)
18
• Prototyping in architecture
![Page 27: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/27.jpg)
19
• Prototyping in the automobile industry
![Page 28: Chapter 3: Interaction Design Basics - University of Arizonaece596c/lysecky/uploads/Main/Lec5.pdf · Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative](https://reader033.fdocuments.us/reader033/viewer/2022060401/5f0e39247e708231d43e343f/html5/thumbnails/28.jpg)
20
• Prototyping for engineers