SIMS 213: User Interface Design & Development

1. SIMS 213: User Interface Design & Development Marti Hearst Tues, Feb 11, 2003

2. Norman’s Design Principles • How new users understand what to do: Four principles for screen interfaces • Follow conventional usage, both in the choice of images and the allowable interactions. • Use words to describe the desired action (e.g., "click here" or use labels in front of perceived objects). • Use metaphor. • Follow a coherent conceptual model so that once part of the interface is learned, the same principles apply to other parts. Fromhttp://www.jnd.org/dn.mss/affordances-and-design.html

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. • In graphical, screen-based interfaces, all that the designer has available is control over perceived affordances.

10. Affordances in Screen-Based Interfaces • Designer only has 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