Mental Models and Affordances Professor: Tapan Parikh ([email protected])[email protected] TA:...
-
date post
22-Dec-2015 -
Category
Documents
-
view
226 -
download
1
Transcript of Mental Models and Affordances Professor: Tapan Parikh ([email protected])[email protected] TA:...
![Page 1: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/1.jpg)
Mental Models and Affordances
Professor: Tapan Parikh ([email protected])TA: Eun Kyoung Choe ([email protected])
Lecture #5 - February 5th, 2008
213: User Interface Design and Development
![Page 2: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/2.jpg)
Today’s Outline
1) Mental Models
2) Affordances
3) Constraints
4) Modes
![Page 3: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/3.jpg)
Knowledge in the World
We don’t have to memorize every detail about what we do, because there are reminders in the world
– Labels
– Affordances
– Constraints
– Mappings
Examples: Hunt-and-Peck Typing, Numonics
![Page 4: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/4.jpg)
![Page 5: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/5.jpg)
![Page 6: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/6.jpg)
The Trouble with Memory
It is hard to remember things! (Especially arbitrary, detailed things)
Short-term memory is small and unreliable
Long-term memory is slow and complicated to access
It is difficult to get stuff from STM into LTM, and vice versa
![Page 7: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/7.jpg)
Kinds of Memory
For Arbitrary Things
– Requires rote learning
– Cannot be extrapolated
Based on Analogy
– Analogy to something we know makes it easier to learn and remember
– Only need to remember the difference vector
Based on Understanding
– Allows for extrapolation
– Can be self-evident
![Page 8: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/8.jpg)
Tradeoffs
Knowledge in the World
Knowledge in the Head
Retrievability Whenever present in the location
Requires memory search or reminder
Learning Not needed Needed
Efficiency Requires finding and interpreting
Can be immediate
Immediate Usability
Yes No, requires learning
Aesthetics Can be cluttered Can be elegant
![Page 9: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/9.jpg)
GUI vs. Keyboard Shortcuts
GUI Keyboard Shortcuts
Retrievability Apparent from the design
Requires memorization
Learning Not needed Needed
Efficiency Requires visual search
Can be immediate
Immediate Usability
Yes No, requires learning
Aesthetics Can be cluttered Can be elegant
![Page 10: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/10.jpg)
Cooper’s Three Models
Implementation Model: The way the thing actually works
Conceptual Model: The way the user thinks it works
Manifest Model: How the designer intends the user to believe it works
Source: Alan Cooper, About Face, Chapter 3
![Page 11: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/11.jpg)
Manifest Models
“The closer the manifest model comes the user’s mental model, the easier it will be to use and understand”
Most software UIs are designed by engineers, so conform to the implementation model
By making the manifest model simpler, we can make it easier to learn and understand
Source: Alan Cooper, About Face, Chapter 3
![Page 12: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/12.jpg)
Metaphors
Metaphors rely on analogy with some existing concept or idea
– “Files”, “Folders”, “Windows”, “Trash”…
– User must recognize the metaphor, and understand how to translate it
– Can be hit or miss…
– Physical world metaphors can limit their information world equivalents
How many of you understand Windows because of its physical analogies?
![Page 13: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/13.jpg)
![Page 14: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/14.jpg)
Idioms
“All idioms must be learned. Good idioms only need to be learned once”
Idioms focus on being easy to learn and recognize
We learn many UI features as idioms, rather then metaphors
The WIMP metaphor succeeded because of its visual idioms and limited vocabulary of primitive actions
![Page 15: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/15.jpg)
Source: Alan Cooper, About Face, Chapter 4
![Page 16: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/16.jpg)
Affordances
![Page 17: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/17.jpg)
Affordances
“Affordances are properties of the World that are compatible with and relevant for people’s interactions”
Physical affordances are more relevant for product designers (and for mobile app developers)
On a desktop display, perceived affordances, conventions and constraints play a bigger role
![Page 18: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/18.jpg)
Perceived Affordances
Useful to separate existence of an affordance with its perception
Perceived Not Perceived
Affordance Perceptible Affordance
Hidden Affordance
No Affordance
False Affordance
Correct Rejection
Source: William Gaver, “Technology affordances”, CHI 1991
![Page 19: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/19.jpg)
Nested Affordances
Affordances that are grouped in space, where knowledge of one improves understanding of another
![Page 20: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/20.jpg)
Sequential Affordances
“…situations in which acting on a perceptible affordance leads to information indicating new affordances”
“Affordances are not passively perceived, but explored… Learning is a matter of attention rather than inference.”
QuickTime™ and a decompressor
are needed to see this picture. Source: William Gaver, “Technology affordances”, CHI 1991
![Page 21: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/21.jpg)
Multi-media Affordances
Visual
Tactile
Auditory
(can be sequential)
![Page 22: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/22.jpg)
Constraints
![Page 23: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/23.jpg)
Constraints
Affordances provide opportunities for action. Constraints limit the acceptable action opportunities.
– Physical constraints
– Logical constraints
– Cultural constraints
![Page 24: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/24.jpg)
Physical Constraints
Physical constraints physically limit the possibilities for action
“Closely related to affordances”
![Page 25: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/25.jpg)
Logical Constraints
“Use reasoning to determine the alternatives”
“go hand in hand with a good conceptual model”
![Page 26: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/26.jpg)
Cultural Constraints
“rely on accepted cultural conventions”
“they evolve, they require a community of practice”
![Page 27: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/27.jpg)
Mapping, Feedback, Visibility,
Mapping: Maintain logical or semantic correspondence between controls and their effect
Visibility: Make relevant parts visible
Feedback: Give each action an immediate and obvious effect
(Sounds can and should also be used for visibility and feedback)
![Page 28: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/28.jpg)
![Page 29: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/29.jpg)
![Page 30: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/30.jpg)
![Page 31: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/31.jpg)
Modes
![Page 32: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/32.jpg)
Modes
“A mode is a state the program can enter where the effects of a user’s actions change from the norm”
Active (SHIFT) or Passive (CAPS LOCK)
Make it easy to change the mode and to see which mode you are in
![Page 33: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/33.jpg)
Where do we stand?
Tools for designing usable systems:
– Mental Models, Idioms, Affordances,
Constraints, Mappings, Feedback, Visibility
Methods for understanding and sharing user
knowledge:
– Contextual inquiry, scenarios, personas
“focus not on technologies or users alone,
but on the interactions between the two”
![Page 34: Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu)parikh@berkeley.edu TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu)eunky@ischool.berkeley.edu.](https://reader033.fdocuments.net/reader033/viewer/2022052401/56649d775503460f94a58b7c/html5/thumbnails/34.jpg)
For Next Time
Work on Assignment 1!
Readings on Prototyping, Heuristic Evaluation
Show & Tell - Observations from CI