Design Principles
IS 485, Professor Matt Thatcher
Agenda



Administrivia
Principles (or heuristics) of good GUI
design
Interactive assignment
2
Review

POET and Norman’s general design guides
for designing more usable everyday objects
– make things visible
» affordances, constraints, and crucial distinctions
– provide effective metaphors and mappings
– provide feedback

Today we translate these design guides
into heuristics (or rules of thumb) of good
GUI design
3
Heuristics of Good GUI Design
(Jakob Nielsen)










H2-1: Visibility of system status
H2-2: Match between system and real world
H2-3: User control and freedom
H2-4: Consistency and standards
H2-5: Error prevention
H2-6: Recognition over recall
H2-7: Flexibility and efficiency of use
H2-8: Aesthetic and minimalist design
H2-9: Help users recognize, diagnose, and recover
from errors
H2-10: Help and documentation
4
H2-1: Visibility of System Status
• Keep users informed about what‘s going on
– printing, saving, opening, transferring, calculating, etc.
– present users with progress bars, hourglass, clock, etc.
– present user with confirmation that task is completed
successfully or explain why it is not
– let the user know that the system has not crashed
What’s
it doing?
> Doit
> Doit
This will take
5 minutes...
Time for
coffee.
5
H2-1: Visibility of System Status
Multiple files being copied,
but feedback is file by file.
6
H2-2: Match Between System and
Real World

Follow real world conventions
– e.g., choice of colors, physical analogies, and
wording based on cultural, industry, or user norms
– e.g., the file metaphor for organizing topics


Effective use of metaphors
Speak the user’s language
– user-centered terminology
– use common words, not “techno-jargon”
7
Metaphors That Violate H2-2
(or metaphors that breakdown)
Eject the disk or
delete the disk?
Printer software program
8
Metaphors That Violate H2-2
(or metaphors that breakdown)
Where does this metaphor for a
physical filing cabinet break down?
9
Interface Hall of Shame
(Stoplight Metaphor)
10
Interface Hall of Shame
(Magnifying Glass Metaphor)
11
Wording That Violate H2-2
(or poor user-centered wording)
12
Metaphors That Violate H2-2
(User Interfaces for Interactive TV)


Tree metaphor
Other examples?
13
H2-3: User Control and Freedom

Don’t force users down fixed paths
How do
I get
out of
this?
14
H2-3: User Control and Freedom

Design strategies for giving users
control and freedom
–
–
–
–
–
–
–
–
Cancel button (for dialogs waiting for user input)
Universal Undo (can get back to previous state)
Universal Redo
Interrupt (especially for lengthy operations –
printing, saving)
Quit or Exit (for leaving the program at any time)
Defaults (for restoring a property sheet)
Links to Homepage
Back buttons (for getting back to web pages)
15
An Exception to H2-3
(Wizards)

Wizards
– users must respond to 1 Q before going to next

Good for infrequent tasks
– modem configuration
– software installation

Good for beginners
– helps novice users complete tasks with little training
– helps novice users learn
– have 2 versions
» wizards for novices and “shortcuts” for experts
16
Wizards
17
H2-4: Consistency & Standards

Internal consistency
– size, color, wording, location, ordering, spacing, etc.
(within a screen and across screens in the UI)
– same command always has the same effect

External consistency
– existing platforms / cultural conventions should be
followed across interfaces
» e.g., Microsoft products
– following standards help (cut / copy / paste)
» ctl-x, ctl-c, ctl-v
18
H2-4: Consistency & Standards

Same information/controls in same
location on all screens / dialog boxes
Ok
Cancel
Cancel
Ok
Ok
Done
Never Mind
Accept
Dismiss
Cancel

Check boxes vs. option buttons
– one of the most common mistakes on the web
19
H2-4: Consistency & Standards
These are labels with a
raised appearance.
Is it any surprise that
people try and click on
them?
20
External Consistency?

The elevators in our hotel in Paris
Elevator # 1
Elevator # 2
2
3
3
4
ES
1
1
2
-2
0
0
ES
21
H2-5: Error Prevention

Use appropriate representation to limit
choices for the user
– if files are represented by icons or names, then they only
have to be selected and not typed
– use menus or tool bars when appropriate
– use appropriate GUI widgets/controls (e.g., check boxes,
radio buttons, drop-down boxes, etc.) to limit input errors
– appropriate choice of input devices

Specific formatting (e.g., time, date)
– provide edit masks for input (date, SS#, phone)
– provide default values
– provide explanatory messages for expected input fields
22
H2-5: Error Prevention
23
H2-6: Recognition Rather Than Recall

Make objects, actions, options, and
directions visible or easily retrievable
– this is a key benefit of menu-based and icon-based
systems over command-based systems
– the 7 (+- 2) rule

Menu systems
– shallow and wide vs. deep and thin?
24
H2-7: Flexibility and Efficiency of Use

Accelerators for experts
– e.g., gestures, kb shortcuts

Allow users to tailor frequent actions
– e.g., macros

Customized user profiles on the web
– Amazon.com
– Travelocity.com
– other examples?
25
H2-7: Flexibility and Efficiency of Use
Keyboard
accelerators for
menus
Customizable
toolbars and
palettes for
frequent actions
Split menu, with
recently used
fonts on top
Double-click
raises toolbar
dialog box
Double-click
raises objectspecific menu
Scrolling controls
for page-sized
increments
26
H2-8: Aesthetic and Minimalist Design



No irrelevant information in dialogues
Don’t overload the user
Think about conscious intent and
economizing
27
H2-8: Aesthetic and Minimalist Design
Compuserve Information Manager
File
Edit
Services
Mail
Special
Window
Help
Services
Telephone Access Numbers
PHONES
Access Numbers & Logon Instructions
United States and Canada
United States and Canada
CompuServe Network
Only 9600 Baud
List
? List
List by:
State/Province
Area Code
28
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors

Error messages in plain language
– user-centered and task-centered messages for
recovery
– not technology-centered


Precisely indicate the problem
Constructively suggest a solution
29
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors
A problematic message to a
nuclear power plant operator
30
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors
Adobe's ImageReady
AutoCAD Mechanical
Windows Notepad
Microsoft's NT Operating System
31
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors
Microsoft’s Developer’s Network
32
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors
33
H2-9: Help Users Recognize, Diagnose,
and Recover From Errors



Cannot open this document vs.
Cannot open “chapter 5” because the
application “Microsoft Word” is not on your
system vs.
Cannot open “chapter 5” because the
application “Microsoft Word” is not on your
system. Open it with “Teachtext” instead?
34
Some Helpful Suggestions


Recover automatically if possible
Don’t chastise or punish the users
–
–
–
–
–
–
–


“fatal error, run aborted”
“disastrous string overflow”
“catastrophic error, logged with operator”
“general protection fault”
Error 25
“files have been lost, your life is over – OK?”
http://www.fys.ruu.nl/~fdijkstr/mpwc-error-messages.html
Avoid humor
Make the system take the blame
35
H2-10: Help and Documentation

Many users do not read manuals
– prefer to spend their time pursuing their task
– use mouse-over tips, status bar text, etc.

Usually used when users are in some kind of
panic, need immediate help
– indicates need for online doc, good search/lookup tools
– online help can be specific to current context
– paper manuals unavailable in many businesses!
» e.g. single copy locked away in system administrator’s office

Sometimes used for quick reference
– syntax of actions, possibilities...
– list of shortcuts ...
36
H2-10: Help and Documentation




Easy to search
Focused on the user’s task
List concrete steps to carry out
Not too large
37
How Did Nielsen Come Up With
This Set of Heuristics?



Statistical analysis of several projects
Performed “heuristic evaluation” with
various combinations and numbers of
heuristics
Turns out that evaluators tended to find
the most usability problems with this set
of 10 heuristics
38