Outline of video on "Creating a Well-Designed User Interface"

I. Developing a User-Centered Design Attitude

  1. Introduction
    1. UI design is hard work!
    2. No magic formula
    3. An evolutionary process
    4. Focus on users and their tasks
  2. Understanding How We're Wired
    1. Like to feel in control
    2. Better at recognition than recall
    3. Remember grouped things better
    4. Learn by doing
    5. Rely on previous experiences
    6. Differ in how we learn

      "It is not the things we don't know that get us into trouble; it's the things we do know that ain't so. --Will Rogers

       

  3. Seven Deadly Temptations
    1. Design for technology rather than the user
    2. Cool or sexy design
    3. Logical vs. visual design
    4. User input as right or wrong
    5. Featurism and over-extended basics
    6. Fix problems in the documentation
    7. Fix problems in the next release

Basic Design Principles

  1. User Control
    1. All actions initiated by user
    2. Minimize modal interaction
    3. Personalization/customization
  2. Directness
    1. Support direct manipulation
    2. Make representations visible
    3. Use familiar metaphors
  3. Consistency
    1. Internal consistency
    2. External consistency
    3. Consistency with metaphor and conceptual model
  4. Simplicity
    1. KISS
    2. Simple things simple
    3. Progressive disclosure
  5. Forgiveness
    1. Support discovery
    2. Warn about potential data loss
    3. Make actions reversible or recoverable
  6. Feedback
    1. Immediate cues
    2. Visual or auditory
    3. Appropriate to the task
  7. Visual Integrity
    1. Visual cues
    2. Graphic elements function intuitively
    3. Use and expert

Design Methodology

  1. The Design Team
    1. Development
    2. Visual Design
    3. Writing
    4. Human Factors
  2. Design
    1. Know your users
    2. Define conceptual model, metaphors
    3. Write up the design
  3. Prototype
    1. Pencil and paper, storyboards, animation, operational software
    2. Communicates the design
    3. Early, low-cost user input
  4. Test
    1. Use participants that represent target audience
    2. Focus on tasks rather than features
  5. Iterate
    1. Design
    2. Test
    3. Prototype
  6. Usability Assessment
    1. Test early and often
    2. Test all aspects

Basic Design Guidelines

  1. Start-Up
    1. Establish presence quickly
    2. Restore state of last use
  2. Menus
    1. Drop-Down
    2. Pop-Up
    3. Cascading (multiple levels from drop-down menus)
    4. Limit use of ellipses
    5. Disable menu commands which are not enabled
  3. Secondary Windows
    1. Clearly identify purpose (e.g., name of the initiating command in a title bar)
    2. Design a layout which follows reading conventions
    3. Group related items
    4. Group associated controls
    5. Use a list box (rather than a text box) if there are a limited number of valid choices
    6. Limit the number of levels
  4. Toolbars / Toolboxes
    1. Limit to frequently used items
    2. Optional / Configurable
    3. Use for shortcut access
  5. Messages
    1. Specific to context
    2. Identify the issue clearly / Suggest corrective action / Be specific
  6. Visual Design
    1. Color (useful but there are significant constraints)
      1. Attractive properties
      2. Associative properties
      3. Subjective properties
      4. Use as an additive quality
      5. Design in black and white first
      6. Use a limited set of colors
      7. Appropriate colors/combinations
    2. Sound (many of the constraints which apply to color apply to sound as well)
      1. Use sound redundantly
      2. Sound is subjective
    3. Fonts
      1. Organize information
      2. Create mood
      3. Importance:  size & font
      4. Make legible, not serif
      5. Limit fonts/styles
    4. Graphics
      1. Define purpose (location and use)
      2. Symbolic references
      3. Simple/distinct/consistent
      4. Consider cultural implications