1 / 13

SIMS 213: User Interface Design & Development

SIMS 213: User Interface Design & Development. Marti Hearst Tues, Feb 11, 2003. 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.

Download Presentation

SIMS 213: User Interface Design & Development

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

More Related