1 / 34

Mental Models and Affordances

213: User Interface Design and Development. Mental Models and Affordances. Professor: Tapan Parikh ( parikh@berkeley.edu ) TA: Eun Kyoung Choe ( eunky@ischool.berkeley.edu ) Lecture #5 - February 5th, 2008. Today’s Outline. Mental Models Affordances Constraints Modes.

lcarolyn
Télécharger la présentation

Mental Models and Affordances

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 213: User Interface Design and Development Mental Models and Affordances Professor: Tapan Parikh (parikh@berkeley.edu) TA: Eun Kyoung Choe (eunky@ischool.berkeley.edu) Lecture #5 - February 5th, 2008

  2. Today’s Outline • Mental Models • Affordances • Constraints • Modes

  3. Knowledge in the World We don’t have to memorize every detail about what we do, because there are remindersin the world • Labels • Affordances • Constraints • Mappings Examples: Hunt-and-Peck Typing, Numonics

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

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

  6. Tradeoffs

  7. GUI vs. Keyboard Shortcuts

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

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

  10. 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?

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

  12. Source: Alan Cooper, About Face, Chapter 4

  13. Affordances

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

  15. Perceived Affordances Useful to separate existence of an affordance with its perception Source: William Gaver, “Technology affordances”, CHI 1991

  16. Nested Affordances Affordances that are grouped in space, where knowledge of one improves understanding of another

  17. 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.” Source: William Gaver, “Technology affordances”, CHI 1991

  18. Multi-media Affordances Visual Tactile Auditory (can be sequential)

  19. Constraints

  20. Constraints Affordances provide opportunities for action. Constraints limit the acceptable action opportunities. • Physical constraints • Logical constraints • Cultural constraints

  21. Physical Constraints Physical constraints physically limit the possibilities for action “Closely related to affordances”

  22. Logical Constraints “Use reasoning to determine the alternatives” “go hand in hand with a good conceptual model”

  23. Cultural Constraints “rely on accepted cultural conventions” “they evolve, they require a community of practice”

  24. 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)

  25. Modes

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

  27. 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”

  28. For Next Time Work on Assignment 1! Readings on Prototyping, Heuristic Evaluation Show & Tell - Observations from CI

More Related