interaction design - it.uu.se · user interface design ! design of controls ! design of...
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/1.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/2.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/3.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/4.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/5.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/6.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/7.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/8.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/9.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/10.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/11.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/12.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/13.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/14.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/15.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/16.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/17.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/18.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/19.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/20.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/21.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/22.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/23.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/24.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/25.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/26.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/27.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/28.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/29.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/30.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/31.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/32.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/33.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/34.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/35.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/36.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/37.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/38.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/39.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/40.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/41.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/42.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/43.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/44.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/45.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/46.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/47.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/48.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/49.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/50.jpg)
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…!](https://reader034.vdocuments.net/reader034/viewer/2022052518/5f06722e7e708231d41808cb/html5/thumbnails/51.jpg)
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