Nielsen’s Design Principles

Design Heuristics
1. Match between system and the real world
(Speak the user language)
• Using Mapping & Metaphor
• May be achieved by understanding the users work
domain and jargon (e.g. through field studies &
interviews)
• Use common words, not techie jargon
– But use domain-specific terms where appropriate
• Draw on the users ”non-technical” knowledge by using
metaphors e.g. ”trash can” for removing files
• Allow aliases/synonyms in
command languages
 Metaphor
• Transfer of a relationship between a set of objects to
another set of objects in a different domain
 Example (Match between system and the real world)

• Photoshop mimicking the real world in

terms and representations that their
target users would understand

• Familiar concepts and terms like RGB,

Hue/Saturation/Brightness and CMYK are
used to represent color
Example: Photoshop utilizes the term, “Exposure”, as
commonly used in the world of photography
2. Consistency & Standards

• Principle of Least Surprise

– Similar things should look
and act similar
– Different things should
look different
• Other properties
• Size, location, color,
• wording, ordering, …
• Follow platform standards
Consistency & Standards

• Global coherence of interface

– internal: inside the application
– external: between applications (e.g., icons, shortcuts),
– Metaphorical: with your interface metaphor (e.g.,
desktop) or similar real-world objects
• Principle: a system that seems familiar is seen as
easy to use by users
• Goal: help learning and use
• Risk: block system evolution (rigidity of standards)
Consistency & Standards

Recommendations
• windows should look similar
e.g., search box at top right
• consistent graphics
e.g., information/controls in same location on all windows
• same vocabulary used for commands as other systems
e.g., open / copy-paste / preferences / …
• syntax of commands coherent across all the interface
e.g., similar actions have similar effects
• style guides (published by designers)
 Example (Consistency & Standards)

• Photoshop maintains a standard layout and look & feel when

it comes to the menu bar.
• They also utilize commonly known terminology such as
“New…”, “Open…”, “Save As…”, etc.
3. Good Help and Documentation

• Users don’t read manuals

– Prefer to spend time working toward their task
goals, not learning about your system
• But manuals and online help are vital
– Usually when user is frustrated or in crisis
• Help should be:
– Searchable
– Context-sensitive
– Task-oriented
– Concrete
– Short
Example: Help and documentation can be accessed easily via the
main menu bar. From there, you can find a wide variety of help topics
and tutorials on how to make full use of the program
Example: Google’s start page fails this heuristic. It lacks
even a simple description of its purpose, omits control
labels, and buries the link to Help
4. User Control and Freedom (Clearly Marked Exits)

• Provide undo
• Long operations should be cancelable
• All dialogs should have a cancel button
Example: Photoshop is very good at providing users with control every step of the way.
As the user makes changes to an image or adds various artistic effects, they are able to
quickly and easily take a step backwards if they make an error, for instance
User Control and Freedom
• Users don’t like to feel trapped by the computer!
– should offer an easy way out of as often as possible

• Strategies:
– Cancel button (for dialogs waiting for user input)
– Universal Undo and Redo (can get back to previous state)
– Interrupt (especially for lengthy operations)
– Quit (for leaving the program at any time)
– Defaults (for restoring a partially filled form)
… consider autosaving
5. Visibility of System Status

• Keep user informed of system state

– Cursor change
– Selection highlight
– Status bar
– Don’t overdo it…
• Response time
– < 0.1 s: seems instantaneous
– 1 s: user notices, but no feedback needed
– 10 s: display busy cursor
– > 10 s: display progress bar
Dealing with delays
• Cursors for short transactions

• Percent done dialogs

time/work left
estimated time

• Random for unknown times

Example: when users move layers around in the Layers palette, they
can visually see the layer being represented as physically dragged within
the space
6. Flexibility and Shortcuts
• Provide shortcuts for frequent operations

– Keyboard accelerators
– Command abbreviations
– Styles
– Bookmarks
– History
7. Recognition Rather than Recall

• Computers good at remembering, people not!

Promote recognition over recall
– Use menus, not command languages
– Use combo boxes(drop down menus), not textboxes
– Use generic commands where possible
(Open, Save, Copy Paste)
– All needed information should be visible
Example: allows for the user to visually recognize what they’re
looking for instead of having to recall the name or typing it in to
search for it.
Examples
8. Error Prevention
• Selection is less error-prone than typing
But don’t go overboard…

• Disable illegal commands

Example: To prevent users from making errors, Photoshop provides
a brief description or label of the tools when a user hovers over it to
help make sure users are using the proper tool for the task at hand
9. Error Reporting, Diagnosis, and Recovery

• Be precise; restate user’s input

– Not “Cannot open file”, but “Cannot open file named
paper.doc”
• Give constructive help
– why error occurred and how to fix it
• Be polite and non blaming
– Not “fatal error”, not “illegal”
• Hide technical details (stack trace) until requested
Example: In this error message for the user’s misuse of the
clone stamp, Photoshop explains what went wrong, the reason
why and how the user should proceed from there.
10. Aesthetic and Minimalist Design

• “Less is More”
– Omit extraneous info, graphics,
features
• Good graphic design
– Few, well-chosen colors
and fonts
– Follow color guidelines
– Group with whitespace
– Align controls sensibly
• Use concise language
– Choose labels carefully
Example: The Photoshop toolbar is minimalist and avoids clutter
by representing the tools with icons only