Design

The light bulb goes on

Agenda

 Revisit Norman
 Idea generation
 Design principles
 Video

Fall 2001 CS 6750 2

Design Choices...

Fall 2001 CS 6750 3

Design is Easy?

 Why didn’t anyone complain about not

being prepared for the HW assignment?

Fall 2001 CS 6750 4

System-Centered Design

 Focus is on the technology

 What can be built easily using the available
tools on this particular platform?
 What is interesting to me, as the developer,
to build?

Fall 2001 CS 6750 5

User-Centered Design

 Design is based on user’s

 Tasks
 Abilities
 Needs
 Context

 Mantra: Know the user!

Fall 2001 CS 6750 6

Design Process

 How do we come up with new (good)

designs for interactive systems?
 Why is it so difficult?

 Revisit Norman’s Design of Everyday

Things

Fall 2001 CS 6750 7

Good Design

 Invites person to use it properly

 Visual affordance
 The perceived and actual fundamental
properties of an object that help convey how
it should be used -- (D. Norman)

Fall 2001 CS 6750 8

Guidelines for Design

 1. Provide a good conceptual model

 User has mental model of how things work
 Build design that allows user to predict effects
of actions
 2. Make things visible
 Visible affordances, mappings, constraints
 Remind person of what can be done and how
to do it

Fall 2001 CS 6750 9

Why is Design Difficult?

 1. Increasing complexity/pressure
 Number of things to control has risen
dramatically
 Display is increasingly symbolic/artificial
 Feedback is more complex and subtle
 Errors are increasingly serious/costly

Fall 2001 CS 6750 10

Why Difficult?

 2. Marketplace pressures
 Time is money
 Adding functionality (complexity) is now easy
and cheap
 Adding controls/feedback is expensive
 Design usually requires several iterations
before success

Fall 2001 CS 6750 11

Why Difficult?

 3. People often consider cost and

appearance over human factors design
 Style over substance
 Bad design may not be visible

Fall 2001 CS 6750 12

Why Difficult?

 4. Creativity is challenging
 Can’t just make a copy
 Want creativity, but want pragmatism

Fall 2001 CS 6750 13

Idea Creation

How do we create and develop new interface ideas and designs?

 Ideas come from  Borrow from other

 Imagination fields
 Analogy  Animation
 Observation of current  Theatre
practice  Information displays
 Observation of current  Architecture
systems  ...

Fall 2001 CS 6750 14

Interface Metaphors

 Metaphor - Application of name or

descriptive term to another object which
is not literally applicable

 Use: Natural transfer - apply existing

knowledge to new, abstract tasks
 Problem: May introduce incorrect mental
model

Fall 2001 CS 6750 15

Metaphor Creation (1)

 Prepare
 What functions are needed
 What are users’ problems?

Fall 2001 CS 6750 16

Metaphor Creation (2)

 Generate
 Use metaphor that matches users’ conceptual
tasks
 Given choice, choose metaphor closest to way
system really works
 Ensure emotional tone is appropriate to users

Fall 2001 CS 6750 17

Metaphor Creation (3)

 Evaluate

 Evolve

Fall 2001 CS 6750 18

Idea Creation

 Methods for creating and developing

interface ideas
 ?

Fall 2001 CS 6750 19

Idea Creation Methods

 1. Consider new use for object

 2. Adapt object to be like something else

 3. Modify object for a new purpose

Fall 2001 CS 6750 20

Idea Creation Methods

 4. Magnify - add to object

 5. Minimize - subtract from object

 6. Substitute something similar

Fall 2001 CS 6750 21

Idea Creation Methods

 7. Rearrange aspects of object

 8. Change the point of view

 9. Combine data into an ensemble

Fall 2001 CS 6750 22

Design Guidelines/Principles

 General guidelines (rules of thumb) to

help create more usable systems

&

 Can be subtle, even contradictory

Fall 2001 CS 6750 23

Design Principles

 1. Use simple and natural dialog in user’s

language
 Match user’s task in a natural way
 Avoid jargon, techno-speak
Insufficient funds to X.25 connection discarded due
withdraw $100 VS. to network congestion. Local
limits now in effect

 Present exactly info that user needs

Less is more!
Fewer unnecessary windows, prompts, dialogs

Fall 2001 CS 6750 24

Fun Examples

Fall 2001 CS 6750 25

Design Principles

 2. Strive for consistency

 Sequences, actions, commands, layout,
terminology
 Makes more predictable

OK Cancel Help

Done Cancel Apply

Fall 2001 CS 6750 26

Design Principles

 3. Provide informative feedback

 Continuously inform user about what is
occurring
 Most important on frequent, substantive
actions

 How to deal with delays?

Fall 2001 CS 6750 27

Design Principles

 4. Minimize user’s memory load

 Recognition is better than recall

 Describe required input format, include

example and default
Date _ _ - _ _ _ - _ _ (DD-Mmm-YY, e.g., 02-Aug-93)

 Use small # of generally applicable commands

Fall 2001 CS 6750 28

Design Principles

 5. Permit easy reversal of actions

 Undo!

 Reduces anxiety, encourages experimentation

Fall 2001 CS 6750 29

Design Principles

 6. Provide clearly marked exits

 Don’t want the user to feel trapped
 Examples
 Cancel button on dialogs
 Interrupt/resume on lengthy operations (modeless)
 Quit - can exit anytime
 Reset/defaults - restore on a property sheet

Fall 2001 CS 6750 30

Design Principles

 7. Provide shortcuts
 Enable frequent users to perform often-used
operations quickly
 Keyboard & mouse

- abbreviations
- menu shortcuts
- function keys
- command completion
- double click vs. menu selection
 Navigation between windows/forms
 Reuse
• Provide history system

Fall 2001 CS 6750 31

Design Principles

 8. Support internal locus of control

 Put user in charge, not computer
 Can be major source of anxiety

Enter next command

vs.
Ready for next command

Fall 2001 CS 6750 32

Design Principles

 9. Handle errors smoothly and positively

 10. Provide useful help and

documentation

 (More to come later in course on these two)

Fall 2001 CS 6750 33

Video

 Design of home automation controls

 Univ. of Maryland

Fall 2001 CS 6750 34

Good & Bad Designs

 www.baddesigns.com
 www.iarchitect.com

Fall 2001 CS 6750 35

Upcoming

 Posters!
 Graphic design
 Dialog design

Fall 2001 CS 6750 36