Sims 213 user interface design development
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

SIMS 213: User Interface Design & Development PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on
  • Presentation posted in: General

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Sims 213 user interface design development

SIMS 213: User Interface Design & Development

Marti Hearst

Tues, Feb 11, 2003


Norman s design principles

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


Cognitive considerations

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


Affordances

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


Affordances1

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


Norman s affordances

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


Affordances of a teapot

Affordances of a Teapot?


Sims 213 user interface design development

Slide adapted from Saul Greenberg


Real vs perceived affordances

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.


Affordances in screen based interfaces

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


Affordances in screen based interfaces1

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


Visual affordances of a scrollbar

Visual affordances of a scrollbar


Affordances2

Affordances

  • More examples?

  • See Strauss Mouse Video


  • Login