5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349...
Transcript of 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349...
![Page 1: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/1.jpg)
User-Centered DesignUsability and UsefulnessNorman’s Model of InteractionUI Design Principles
Don Norman, The Design of Everyday Things (1980)
![Page 2: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/2.jpg)
What innovation made watching television easier?
CS 349 - Design 2
![Page 4: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/4.jpg)
![Page 6: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/6.jpg)
Humans
time
Devicesca
pabi
lity
Buxton, W. (2001). Less is More (More or Less), in P. Denning (Ed.), The Invisible Future: The seamless integration of technology in everyday life. New York: McGraw Hill, 145 – 179.
![Page 7: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/7.jpg)
Solution?
7
![Page 8: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/8.jpg)
Solution?
CS 349 - Design 8
Hey Siri!
![Page 9: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/9.jpg)
Usability and Usefulness
§ Usability: The effectiveness, efficiency, and satisfaction with which users can achieve tasks in a particular environment with a product.
§ Usefulness: Meeting specific needs and supporting real tasks, the quality of being of practical use.
C A
B D
high
low
low high
Usef
ulne
ss
Usability
![Page 10: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/10.jpg)
Good Door Usability
CS 349 - Design 10
![Page 11: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/11.jpg)
Poor Door Usability
CS 349 - Design 11
![Page 12: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/12.jpg)
?!?!?
CS 349 - Design 12
![Page 13: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/13.jpg)
Example: Refrigerator Control
CS 349 - Design 13
§ Suppose the refrigerator is at the correct temperature. The freezer is too cold. What do you do?
§ You can’t really check your work for 24 hours…
Refrigerator Freezer
coldwarm coldwarm
![Page 14: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/14.jpg)
Example: Refrigerator Function
CS 349 - Design 14
§ It looks like two independent temperature controls
§ It’s actually one temperature control and a cold air valve
![Page 15: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/15.jpg)
User Mental Model
CS 349 - Design 15
§ What the user believes about the system
(how system works, what state system is in)
- “if I do ________, the system will do ________”
- “the system is ________”
§ Frequently, a mental model in inaccurate or incomplete compared to
system model
mentalmodel system
model
express
presentperceive
translate
User Interactive System
![Page 16: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/16.jpg)
Refrigerator User Model vs. System Model
CS 349 - Design 16
§ The user’s mental model is two independent temperature controls
§ The system model is one temperature control and a cold air valve
mentalmodel
system model
![Page 17: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/17.jpg)
Three Models of a System
CS 349 - Design 17
§ Developer’s model: how the developer believes system is used
§ System model: how the system actually works
§ User’s model: how the user believes system should be used
user’smentalm
odel
systemmodel
developer’smodel
§ Developer and User communicate via the system- Goal is to have both images align as closely as possible
![Page 18: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/18.jpg)
Norman’s Model of Interaction
CS 349 - Design 18
§ Execution: What we do to the system to achieve a goal
§ Evaluation: Comparing what happened with our intended goal
Execution
User System
EvaluationI have a goal!
![Page 19: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/19.jpg)
1. Intention to Act
I have a goal!
2. Plan Actions
3. ExecuteActions
EvaluateState
InterpretState Perceive
State
Execution Stages Evaluation Stages
CS 349 - Design 19
1. Form an intention to act to achieve a goal
2. Plan an sequence of actions to fulfill that intention
3. Execute planned actions with physical movements
1. Physically perceive the current state of the system
2. Interpret that perception according to experience
3. Evaluate the interpreted state compared to our goal
![Page 20: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/20.jpg)
Intention to Act
I have a goal!
Plan ActionsExecute Actions
Evaluate StateInterpret State
Perceive State
Gulf of Execution and Gulf of Evaluation
CS 349 - Design 20
§ Gulf of Execution: Difficulty translating user’s intentions into actions allowed by system. Can user carry out their intentions?
§ Gulf of evaluation: Difficulty in interpreting the state of the system to determine whether our goal has been met.
Gulf of Evaluation
Gulf of Execution
![Page 21: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/21.jpg)
… tell what actions are possible?
I have a goal!
… map intention to
actions?
… perform the action?
The Value of the Model
CS 349 - Design 21
§ Design goal is to minimize gulf of execution and gulf of evaluation
… tell if system state means goal
is met?
… map state to interpretation? … perceive the
system state?
![Page 22: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/22.jpg)
Central Tension
§ User: rich and varied experiences; makes intuitive leaps; learns; uses metaphors; creative
§ System: follows a rigid program; not creative; only primitive learning (at best)
§ User Interface: needs to mediate between these two radically different systems
Execution
User System
Evaluationto be or not to
be …if this, then
that.
![Page 23: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/23.jpg)
UI Design Principles
CS 349 - Design 23
§ Basic principles which reduce gulf of execution and evaluation and create a more correct mental model for user- Perceived Affordance - Mapping- Constraints- Visibility/Feedback- Metaphor
![Page 24: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/24.jpg)
PerceivedAffordance
CS 349 - Design 24
§ What you think you can do with an object, based on perceived properties.
“pull” “push”
“click”
“drag”
![Page 25: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/25.jpg)
Affordance and Mental Models
CS 349 - Design 25
§ What influences our perception of affordances and the manner in which we develop mental models?- Individual histories- Cultural background
§ Examples where you have developed an incorrect model or misunderstood affordance?
just an underlinedblue word
![Page 26: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/26.jpg)
Mappings
CS 349 - Design 26
§ The relationship between two things, in this case between the control movement and the results in the world.- Doors: bars/plates for pushing, handles for pulling- Conventions: up/clockwise for “more”
§ GUIs: Components often mimic physical controls and follow same conventions and mappings.
![Page 27: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/27.jpg)
UI Mappings
CS 349 - Design 27
§ Physical actions of input device mapped to UI instrument
§ Instruments actions mapped to object of interest
§ Recall instrumental interaction- Degree of integration, degree of compatibility
![Page 28: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/28.jpg)
Literal Mapping
CS 349 - Design 28
§ Some things work well in physical world, but not in virtual- (see metaphor as well)
![Page 29: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/29.jpg)
Constraints
CS 349 - Design 29
§ Guide by preventing certain actions while enabling/encouraging others- Physical Constraints
- Semantic Constraints
- Cultural Constraints
- Logical Constraints
§ Norman’s Lego Motorcycle Experiment
![Page 30: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/30.jpg)
UI Constraints
CS 349 - Design 30
§ Physical, Logical, Semantic, Cultural?
![Page 31: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/31.jpg)
Cultural Constraints
CS 349 - Design 31
prev next next prev
![Page 32: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/32.jpg)
Visibility
CS 349 - Design 32
§ Make relevant parts visible and convey the correct message- Doors: Parts often gave the wrong message (pull vs. push), but hinges
made visible the swing direction (though poorly)- GUIs: Make controls visible, either on-screen on in menus. List keyboard
short-cuts in menus.
§ Communicating what action has actually been done; what result has been accomplished.- Refrigerator: Feedback loop is terribly slow. - GUIs: Every action should give feedback. If can’t be completed
immediately, give some sort of progress indicator.
![Page 33: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/33.jpg)
Widget Feedback
CS 349 - Design 33
§ Does widget effectively communicate:- That it is enabled/disabled?- That it has focus?- Its current state?
§ Does feedback communicate affordances?
![Page 34: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/34.jpg)
Metaphors
CS 349 - Design 34
§ Set of unifying concepts in a GUI used to simplify interaction with a computer system
§ Done by borrowing concepts from one domain (the source or vehicle) and applying them to another (the target or tenor)
§ Scale can vary from system to application to UI feature
§ Examples:- The desktop metaphor in windowing systems- Assembly-line metaphor for a new car configurator
- …
![Page 35: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/35.jpg)
Benefits of Metaphors
CS 349 - Design 35
§ Common language for objects- Window, Recycle Bin/Trash, Folders, Files
§ Guide for cognitive semantics of system
- Windows allow you to look into a house, or into a document- Recycling allows you to reclaim storage
§ Analogy to explore similarities and differences- Computer window has scrollbars, more similar to a repositionable
viewport- Differences arise because characteristics of the target cause
inconsistencies in the metaphor
![Page 36: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/36.jpg)
Inconsistencies in Metaphors
CS 349 - Design 36
§ Original Mac trash
- Delete files on computer
- Eject disk from drive
§ File system metaphor
- Original Mac had all file systems on desktop
- BeOS had external drives on the desktop and internal
drives in a “Computer” icon
- Windows had all file systems in a “Computer” icon
![Page 37: 5.0 User-Centered Design - University of Waterloocs349/s18... · Three Models of a System CS 349 -Design 17 § Developer’s model: how the developer believes system is used § System](https://reader034.fdocuments.net/reader034/viewer/2022050217/5f62e82d752b6236d27ebf0a/html5/thumbnails/37.jpg)
Metaphor Gone Too Far
CS 349 - Design 37
Microsoft Bob (1995)