interaction design - it.uu.se · user interface design ! design of controls ! design of...

51
Department of Information Technology Uppsala University Interaction Design

Upload: others

Post on 13-Jun-2020

6 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Department of Information Technology Uppsala University

Interaction Design …

Page 2: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Interaction Design?

§  How can you design interaction?

§  Communication Design?

§  Interaction is a process!

Page 3: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Ping-pong-model

Idea Idea’’’

Idea’ Idea’’

NOISE

Page 4: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Interaction Design

§  Purpose with Interaction?

§  Sender vs. Receiver?

§  Information Design and Content

§  Controls, Messages, Metaphors

Page 5: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Interaction Design §  Not only interface design!

§  Not only information design!

§  Designing the “process” of information transfer + Functionality

§  User Experience???

Page 6: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Goal-driven Interaction §  What is the goal of using the artefact?

§  The interaction is (almost) never the goal

§  Interaction to achieve something in the end

§  Interaction design is intended to support interaction in order to reach the goal!

Page 7: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User interface design §  Design of controls

§  Design of communicative means

§  In the worst case: •  Evaluation of the usability of the controls…

§  In the best case: •  Holistic view of the interface

Page 8: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User interface

§  Not necessarily aimed at the interaction

§  Mostly looking at form, not behaviour

§  Looking at the possibilities to interact

Page 9: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User Interaction

§  Aimed at both form and behaviour

§  Looking at user needs and desires

§  Interaction Design is more than Interface Design

Page 10: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Situational information

Exactly what is the dish-washer doing now?

Page 11: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Situational information

Exactly what is the dish-washer doing now?

Process or ? Selection

Page 12: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Situational information

Exactly what is the dish-washer doing now?

Process or ? Selection

Thirty Minutes for What?

Page 13: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Situational information

Exactly what is the dish-washer doing now?

Process or ? Selection

Thirty Minutes for What?

Start?

Page 14: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Situational information

Exactly what is the dish-washer doing now?

Process or ? Selection

Thirty Minutes for What?

Start?

What does the dial tell us?

Page 15: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Intention - Process

§  Intention is to reach a goal

§  Process is the way the goal is reached

§  Interaction is the way the information about performing the process is communicated

Page 16: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Page 17: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Page 18: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display

Page 19: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display

Page 20: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display Information

Page 21: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display Information Environment

Page 22: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display Information Environment

Procedures

Support

Page 23: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact

Controls

Display Information Environment

Procedures

Support

User Experience

Page 24: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Is it possible to design interaction?

User

Artifact Controls

Display Information Environment

Procedures

Support

User Experience

Page 25: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User

Artifact Controls

Display Information Environment

Procedures

Support

User Experience

Is it possible to design interaction?

Page 26: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User

Artifact Controls

Display Information Environment

Procedures

Support

User Experience

Is it possible to design interaction?

Page 27: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User

Artifact

Information

Yes!

Page 28: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Interaction Design is Complex

User

Artifact Controls

Display Information Environment

Procedures

Support

User Experience

Page 29: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Even small things matter…

Which unit in which outlet?

Weak visual cues

Page 30: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Visual Cues

Gestalt laws can support interaction design

Proximity

Page 31: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Visual Cues

Gestalt laws can support interaction design

Similar colours (colourblindness?)

Page 32: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

How can you minimize damage?

Not just avoiding errors!

Redesign to minimize damage in case of mistake! How?

Page 33: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Interaction Design Thinking

§  A general pattern of thought?

§  Generalize from examples

§  Use knowledge from psychology, linguistics, information science, etc.

Page 34: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Affordance and Constraints §  Interaction design is closely connected to

§  Affordance

§  Natural Constraints

Page 35: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Affordance

§  Providing clues that improve interaction

§  Contextual analysis •  How is information interpreted? •  How are controls perceived? •  What is the situation of use?

Page 36: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Affordance

§  Providing clues that improve interaction •  Avoid luring people into wrong actions…

§  Contextual analysis •  How is information interpreted? •  How are controls perceived? •  What is the situation of use?

Please, Don’t Press Me!

Page 37: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Constraints

§  Avoid Explicit Constraints •  Frustrating!

§  Design Away Erroneous Actions •  Implicit Constraints à You just can’t do it!

§  Are Constraints Needed?

Page 38: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Designing Affordance and Constraints

§  Lead the eyes and limbs to the right controls •  Look and feel are important tools

§  Lead the eyes away from the wrong controls

§  Make dangerous controls difficult to use by mistake (!)

Page 39: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Natural (?) Controls

Easy to lock/unlock? Easy to perceive the state?

Page 40: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Information

§  Filtering unnecessary information •  Remove unimportant information (cf. Simplicity) •  Use empty space!

§  Propagation of important information •  Important information in focus •  Simplify spatial orientation

§ E.g., use calibrated meters

Page 41: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

…information…

Page 42: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Multimodality §  Avoid perceptual conflicts

•  Sound and Text should sympathize with each other

§  Think about situation of usage •  Noisy environment? •  Low-light conditions? •  Vibrations?

Page 43: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Procedures §  In which order

should things be done?

§  Is the process order easy to find?

§  Is it logical? •  From whose point

of view?

Page 44: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Controls §  Apropriate?

§  Well designed?

§  Usable?

§  Long-term usage?

Page 45: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User

Artifact Controls

Display Information Environment

Procedures

Support

User Experience

Interaction Design!

Page 46: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

User

Artifact Controls

Display Environment

Procedures

Support

User Experience

Interaction Design?

Information

Etc. etc.

Page 47: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Often just common sense!

Page 48: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Get back to yourself…

Page 49: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

But remember!

Not everyone sees the world the same way…

Page 50: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Emotional Design?

§  Todays reflection inspiration:

§  How can you design the interaction in order to evoke EMOTIONS in the user? Is it possible? And should you?

Page 51: Interaction Design - it.uu.se · User interface design ! Design of controls ! Design of communicative means ! In the worst case: • Evaluation of the usability of the controls…!

Uppsala University

2012-02-03 | #‹#› @ UU/IT

Assignment Week 6 §  Post to your blog, during a week (until Friday

Feb. 10, noon) observations you make about creativity. •  creative moments you have during this time, •  inspiring things you see and people you meet, •  ideas how to become more creative as a

designer, and •  signs of creativity