Nielsen and Molich's 10 User Interface

Design Guidelines

1
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

 Jakob Nielsen, a renowned web usability

consultant and partner in the Nielsen Norman
Group, and Rolf Molich, another prominent
usability expert, established a list of ten user
interface design guidelines in the 1990.
 These heuristics have been used in many of the
products designed by some of the most successful
companies in the world such as Apple, Google,
and Adobe. 

2
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

1) Visibility of system status: The system should

always keep users informed about what is going on,
through appropriate feedback within reasonable
time.

3
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines
Gmail loading the mailbox, telling me to wait &
indicates the status of what’s going on.

4
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

 In photoshop when users move around in the

Layers palette, they can visually see the layer being
represented as physically dragged within the
space.

5
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

6
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

2) Match between system and real world: The system

should speak the users' language, with words,
phrases and concepts familiar to the user, rather
than system-oriented terms. Follow real-world
conventions, making information appear in a
natural and logical order.

7
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

8
Dr
 Nielsen and Molich's 10 User Interface
Design Guidelines

9
Dr
Nielsen and Molich's 10 User Interface
Design Guidelines…

3) User control and freedom: Users often choose

system functions by mistake and need a clearly
marked ‘emergency exit’ to leave the unwanted state
without having to go through an extended dialog.
Support undo and redo.
 Example: In Photoshop when 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.

10
Nielsen and Molich's 10 User Interface
Design Guidelines…

11
Nielsen and Molich's 10 User Interface
Design Guidelines…

4) Consistency and standards: Users should not have

to wonder whether different words, situations, or
actions mean the same thing.
Benefits of consistency and standards:
1) Reduce learning
2) Eliminate confusion

12
Consistency and standards

13
Consistency and standards

14
Consistency and standards

15
 Nielsen and Molich's 10 User Interface
Design Guidelines…
5) Error prevention: Good error messages is a careful
design which prevents a problem from occurring in
the first place.
 For example in case of closing un-saved document

Dr 16
 Nielsen and Molich's 10 User Interface
Design Guidelines…
Google search helps users by offering suggestions
based on their input. As you can see, even though the
user spelled design incorrectly the suggestions
provide them with a means of instantly correcting
their mistake, by selecting one of the options below.

Dr 17
 Nielsen and Molich's 10 User Interface
Design Guidelines…
 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.

Dr 18
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 19
 Nielsen and Molich's 10 User Interface
Design Guidelines…
6) Recognition rather than recall: Minimize the
user's memory load by making objects, actions, and
options visible. The user should not have to
remember information from one part of the dialogue
to another.

Dr 20
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 21
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 22
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 23
 Nielsen and Molich's 10 User Interface
Design Guidelines…
7) Flexibility and efficiency of use: With increased
use comes the demand for less interactions that
allow faster navigation. This can be achieved by
using short cut or function keys.

Dr 24
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 25
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 26
 Nielsen and Molich's 10 User Interface
Design Guidelines…
8) Help and documentation: Even though it is better
if the system can be used without documentation, it
may be necessary to provide help and
documentation. Any such information should be
easy to search, focused on the user's task, list
concrete steps to be carried out, and not be too
large.

Dr 27
 Nielsen and Molich's 10 User Interface
Design Guidelines…

 Help

Dr 28
 Nielsen and Molich's 10 User Interface
Design Guidelines…
9) Aesthetic and minimalist design: Dialogues
should not contain information which is irrelevant
or rarely.

Dr 29
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 30
 Nielsen and Molich's 10 User Interface
Design Guidelines…
10) Help users recognize, diagnose, and recover from
errors: Error message should be expressed in plain
language (no codes), precisely indicate the problem,
and constructively suggest a solution.

Dr 31
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 32
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 33
 Nielsen and Molich's 10 User Interface
Design Guidelines…

Dr 34