1. Introduction

Video Lecture by Tandy Trower: Microsoft Corporation

• Developing user-centered design attitude
• Basic design principles
• Design methodologies
• Basic design guidelines

User-centered design attitude

• UI Design is hard work
• No magic formula
• An evolutionary process
• Focus on users and their tasks

Understanding how we are wired

• Like to feel in control
• Better at recognition than recall
• Remember grouped things better
• Learn by doing
• Rely on previous experiences
• Different in how we learn

Seven deadly temptations

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

Basic design principles

User control:

• All actions initiated by the user
• Minimize modal interaction
• Personalization/customization

Directness:

• Support direct manipulation
• Make representation visible
• Use familiar metaphors

Consistency:

• Internal consistency
• External consistency
• Consistency with metaphor and conceptual model

Simplicity:

• KISS
• Simple things simple
• Progressive disclosure

Forgiveness

• Support discovery
• Warn about potential data loss
• Make actions reversible or recoverable

Feedback:

• Immediate cues
• Visual or auditory
• Appropriate for the task

Visual integrity:

• Visual cues
• Graphical elements function intuitively
• Use an expert

Design methodology

The design team

• Development
• Visual design
• Writing
• Human factors

Design

• Know your users
• Define conceptual models, metaphors
• Write up the design

The design cycle

Prototype:

• Pencil and paper, storyboard, animation, operational software
• Communicates the design
• Early, low-cost user input

Test:

• Use participants that represent target audience
• Focus on tasks rather that features

Iterate

• Design
• Prototype
• Test

Usability assessment

• Test early and often
• Test all aspects
• Iterate tests with small samples
• Pilot tests
• Appropriate settings and preparations
• Record the sessions

Basic design guidelines

Starting up

• Establish presence quickly
• Display identifying window

Secondary windows

• Clearly identify purpose
• Layout follows reading conventions
• Group associated controls
• Use the appropriate controls
• Avoid deep hierarchies

Toolbars - toolboxes

• Limit to frequent operations
• Optional or configurable
• Use for shortcut access

Visual design: color

• Attractive properties
• Associative properties
• Subjective properties
• Use as an additive quality
• Design in black and white first
• Use a limited set of colors
• Use appropriate combinations
• Provide for user preferences

Visual design: fonts

• Organize information
• Creare a mood
• Importance by size and weight
• Make legible - readable
• Avoid decorative fonts at low resolution
• Limit fonts and styles

Visual design: graphics

• Define purpose
• Use symbolic reference
• Be simple and distinct
• Be consistent
• Consider cultural implications