SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 9, 2006

2. Today • Affordances • Mappings • Mental Models (time permitting)

3. Cognitive Considerations • From Don Norman’s book, The Psychology (Design) of Everyday Things • Affordances, Constraints, and Mappings • Mental Models • Action Cycle and Gulf of Execution

4. Affordances • The perceived properties of an object that suggest how it can be used. • Popularized by D. Norman in POET • The perceptual psychologist J. Gibson had a similar, but different, notion. • Norman contrasts real vs. perceived affordances • Subsequent clarifications on affordances by Norman: • http://www.jnd.org/dn.mss/affordances-and-design.html

5. Affordances • The perceived properties of an object that determine how it can be used. • Knobs are for turning. • Buttons are for pushing. • Some affordances are obvious, some learned • Glass can be seen through. • Glass breaks easily. • Sometimes visual plus physical feedback • Floppy disk example • Rectangular – can’t insert sideways • Tabs on the disk prevent the drive from letting it be fully inserted backwards

6. Norman’s Affordances • Affordances: • Have perceived properties that may or may not exist • Have suggestions or clues about to how to use these properties • Can be dependent on the • Experience • Knowledge • Culture of the actor • Can make an action easy or difficult From McGrenere & Ho, Proc of Graphics Interfaces, 2000

7. Affordances of a Teapot?

8. Slide adapted from Saul Greenberg

9. Real vs. Perceived Affordances • Fromhttp://www.jnd.org/dn.mss/affordances-and-design.html : • In product design, where one deals with real, physical objects, there can be both real and perceived affordances, and the two need not be the same.

10. Affordances in Screen-Based Interfaces • In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances • Display screen, pointing device, selection buttons, keyboard • These afford touching, pointing, looking, clicking on every pixel of the display. Based on slide by Saul Greenberg

11. Affordances in Screen-Based Interfaces • Most of this affordance is not used • Example: if the display is not touch-sensitive, even though the screen affords touching, touching has no effect. • Example: • does a graphical object on the screen afford clicking? • yes, but the real question is does the user perceive this affordance; does the user recognize that clicking on the icon is a meaningful, useful action? Based on slide by Saul Greenberg

12. Visual affordances of a scrollbar

13. Affordances • More examples? • See Strauss Mouse Video

14. Mappings • Mapping: • Relationships between two things • Between controls and their results • Related to metaphor discussion • Related to affordances

15. Slide adapted from Saul Greenberg

16. full mapping paired arbitrary front back front back backright frontleft backleft frontright 2 possibilities per side =4 total possibilities 24 possibilities, requires: -visible labels -memory Mapping controls to physical outcomes

17. Mappings • For devices, appliances • Natural mappings use constraints and correspondences in the physical world • Controls on a stove • Controls on a car • Radio volume • Knob goes left to right to control volume • Should also go in and out for front to rear speakers • For computer UI design • Mapping between controls and their actions on the computer • Controls on a digital watch • Controls on a word processor program

18. Transfer Effects • People transfer their expectations from familiar objects to similar new ones • positive transfer: previous experience applies to new situation • negative transfer: previous experience conflicts with new situation Based on slide by Saul Greenberg

19. Cultural Associations • Groups of people learn idioms • red = danger, green = go • But these differ in different places • Light switches • America: down is off • Britain: down is on • Faucets • America: counter-clockwise is on • Britain: counter-clockwise is off Based on slide by Saul Greenberg

20. Mental Models • People have mental models of how things work: • how does your car start? • how does an ATM machine work? • how does your computer boot? • Allows people to make predictions about how things will work Based on slide by Saul Greenberg

21. Mental Models • Mental models built from • affordances • constraints • mappings • positive transfer • cultural associations/standards • instructions • interactions • Mental models are often wrong! Based on slide by Saul Greenberg

22. Our mental models of how bicycles work can “simulate” this to know it won’t work Slide adapted from Saul Greenberg

23. People are always trying to make sense of things • Mental models often extracted from fragmentary evidence • People find ways to explain things • Computer terminal breaks when accessing the library catalog • Certain you’re driving on the correct road