chapter 3: interaction design basics - university of...

28
1 Chapter 3: Interaction Design Basics Designing for Interaction: Creating Innovative Applications and Devices, Dan Saffer, New Riders Press, ISBN 978-0321643391

Upload: others

Post on 26-Jun-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
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
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
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
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
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
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
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
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

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

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

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

20

• Prototyping for engineers