HNDIT HNDIT2052

Principles of User
Interface Design

Lecture 04: User-Centered Designing

 What is User-Centered Design (UCD)
• A broad term to describe design processes in
which end-users influence how a design takes
shape.

• It is both a broad philosophy and variety of

methods.

• An iterative design process in which designers

focus on the users and their needs in each phase
of the design process.
• There is a spectrum of ways in which users are involved in
UCD but the important concept is that users are involved
one way or another.

• For example, some types of UCD consult users about their

needs and involve them at specific times during the design
process; typically during requirements gathering and
usability testing.

• At the opposite end of the spectrum there are UCD

methods in which users have a deep impact on the design
by being involved as partners with designers throughout
the design process

• In other words, User-centered design (UCD) is an approach

for employing usability.
• It is a structured product development methodology
that involves users throughout all stages of product /
software development, in order to create a Web Site
OR Web Application OR Desktop Application that
meets users' needs.

• This approach considers an organization's business

objectives and the user's needs, limitations, and
preferences.
 How UCD Originated?
• The term ‘user-centered design’ originated in Donald
Norman’s research laboratory at the University of
California San Diego (UCSD) in the 1980s and became
widely used after the publication of a co-authored
book entitled: User-Centered System Design: New
Perspectives on HumanComputer Interaction
(Norman & Draper, 1986).
 How UCD Originated?
• He offers four basic suggestions on how a design should be:

– Make it easy to determine what actions are possible at any

moment.

– Make things visible, including the conceptual model of the

system, the alternative actions, and the results of actions.

– Make it easy to evaluate the current state of the system.

– Follow natural mappings between intentions and the required

actions; between actions and the resulting effect; and between
the information that is visible and the interpretation of the
system state.
 How UCD Originated?
• These recommendations place the user at the center of
the design.

• The role of the designer is to facilitate the task for the user
and to make sure that the user is able to make use of the
product as intended and with a minimum effort to learn
how to use it.

• Telling designers that products should be intuitive is not

enough; some design principles are needed to guide the
design. Norman (1988) suggested that the seven principles
of design are essential for facilitating the designer’s task
 User-Centered Design
• Avoid bad Design, instead use UCD to make
good designs

Which design is good?

Why it is good or bad?

USABILITY
 GOLDEN RULES OF DESIGN FOR HCI
• A number of advocates of user-centered design have presented sets
of ‘golden rules’ or heuristics.

• While these are inevitably ‘broad-brush’ design rules, which may

not be always be applicable to every situation, they do provide a
useful checklist or summary of the essence of design advice.

• It is clear that any designer following even these simple rules will
produce a better system than one who ignores them.

• There are many sets of heuristics, but the most well used are
Nielsen’s ten heuristics, Shneiderman’s eight golden rules and
Norman’s seven principles.
 Norman’s seven principles
1. Use both knowledge in the world and knowledge in the head.

2. Simplify the structure of tasks.

3. Make things visible.

4. Get the mappings right.

5. Exploit the power of constraints, both natural and artificial.

6. Design for error.

7. When all else fails, standardize.

 Use both knowledge in the world and
knowledge in the head
• People work better when the knowledge they need to
do a task is available externally – either explicitly or
through the constraints imposed by the environment.

• But experts also need to be able to internalize regular

tasks to increase their efficiency.

• So systems should provide the necessary knowledge

within the environment and their operation should be
transparent to support the user in building an
appropriate mental model of what is going on.
 Simplify the structure of tasks
• Tasks need to be simple in order to avoid complex problem solving
and excessive memory load.

• There are a number of ways to simplify the structure of tasks.

– One is to provide mental aids to help the user keep track of stages in a
more complex task.
– Another is to use technology to provide the user with more
information about the task and better feedback.
– A third approach is to automate the task or part of it, as long as this
does not detract from the user’s experience.
– The final approach to simplification is to change the nature of the task
so that it becomes something more simple.

• In all of this, it is important not to take control away from the user.
 Make things visible
• Bridge the gulfs of execution and evaluation.

• The interface should make clear what the

system can do and how this is achieved, and
should enable the user to see clearly the
effect of their actions on the system.
 Get the mappings right.
• User intentions should map clearly onto system
controls.
• User actions should map clearly onto system
events.
• So it should be clear what does what and by how
much.
• Controls, sliders and dials should reflect the task
– so a small movement has a small effect and a
large movement a large effect.
Exploit the power of constraints, both
natural and artificial
• Constraints are things in the world that make it
impossible to do anything but the correct action in
the correct way.

• A simple example is a jigsaw puzzle, where the pieces

only fit together in one way.

• Here the physical constraints of the design guide the

user to complete the task.
 Design for error
• To err is human, so anticipate the errors the
user could make and design recovery into the
system.
 When all else fails, standardize
• If there are no natural mappings then arbitrary mappings
should be standardized so that users only have to learn
them once.

• It is this standardization principle that enables drivers to get

into a new car and drive it with very little difficulty – key
controls are standardized.

• Occasionally one might switch on the indicator lights

instead of the windscreen wipers, but the critical controls
(accelerator, brake, clutch, steering) are always the same.
 Activity
• Identify application of Norman’s seven
principles in designing, in the login form you
designed before.
 Shneiderman’s Eight Golden Rules of
Interface Design
• Shneiderman’s eight golden rules provide a
convenient and succinct summary of the key
principles of interface design.

• They are intended to be used during design

but can also be applied, like Nielsen’s
heuristics, to the evaluation of systems.
 Shneiderman’s Eight Golden
1. Strive for Consistency.
2. Cater to Universal Usability.
3. Offer Informative feedback.
4. Design Dialogs to yield closure.
5. Prevent Errors.
6. Permit easy reversal of actions.
7. Support internal locus of control.
8. Reduce short term memory load.
 1. Strive for Consistency.
• Strive for consistency in action sequences, layout,
terminology, command use and so on.

• Utilize familiar icons, colors, menu hierarchy when designing

similar situations and sequence of actions.

• This consistency will allow you to develop your identity and

not lose users.

Few of Google products

 2. Cater to Universal Usability.
• Enable frequent users to use shortcuts, such as abbreviations, special key
sequences and macros, to perform regular, familiar actions more quickly.

• As the frequency of use increases, so do the user's desires to reduce the

number of interactions and to increase the pace of interaction.

• Abbreviations, function keys, hidden commands, and macro facilities are

very helpful to an expert user.

• For example, Windows provide users with keyboard shortcuts for copying
and pasting, ctrl+c
ctrl+v
• so as the user becomes more experienced, they can navigate and operate
the user interface more quickly and effortlessly.
 3. Offer Informative feedback.
• Offer informative feedback for every user action,
at a level appropriate to the magnitude of the
action.

• For every operator action, there should be some

system feedback.

• For frequent and minor actions, the response can

be modest, while for infrequent and major
actions, the response should be more substantial.
 3. Offer Informative feedback.
(cont’d..)
• A bad example we often see is when an error message shows
an error-code instead of a human-readable and meaningful
message.

• Good examples
4. Design Dialogs to yield closure.
• Design dialogs to yield closure so that the user knows when
they have completed a task.

• Sequences of actions should be organized into groups with

a beginning, middle, and end.

• The informative feedback at the completion of a group of

actions gives the operators the satisfaction of
accomplishment, a sense of relief, the signal to drop
contingency plans and options from their minds, and an
indication that the way is clear to prepare for the next
group of actions.
 4. Design Dialogs to yield closure.
(cont’d…)
• For example, e-commerce websites move users from selecting
products to the checkout, ending with a clear confirmation
page that completes the transaction.

• Another example
 5. Prevent Errors.
• Offer error prevention and simple error handling so that,
ideally, users are prevented from making mistakes and, if
they do, they are offered clear and informative
instructions to enable them to recover.

• As much as possible, design the system so the user

cannot make a serious error.

• If an error is made, the system should be able to detect

the error and offer simple, comprehensible mechanisms
for handling the error.
 5. Prevent Errors. (cont’d)
• Flag the text fields where the users forgot to provide
input in an online form.

• Do not allow alphabetic characters in numeric entry

fields
• Gray out menu items that are not appropriate
6. Permit easy reversal of actions.
• Permit easy reversal of actions in order to relieve
anxiety and encourage exploration, since the user
knows that he can always return to the previous
state.

• The units of reversibility may be a single action, a

data entry, or a complete group of actions.

• For example undo and redo options in Ms office sw

 7. Support internal locus of control.
• Support internal locus of control so that the user is in control of the
system, which responds to his actions.

• Experienced operators strongly desire the sense that they are in

charge of the system and that the system responds to their actions.

• Design the system to make users the initiators of actions rather

than the responders.

• Allow your users to be the initiators of actions. Allow your users to

be the initiators of actions.
8. Reduce short term memory load.
• The limitation of human information
processing in short-term memory
requires that displays be kept simple,
multiple page displays be consolidated,
window-motion frequency be reduced,
and sufficient training time be allotted
for codes, mnemonics, and sequences
of actions.

• The rule of thumb is that humans can

remember “seven plus or minus two
chunks” of information
 Shneiderman’s Eight Golden
5. Offer error prevention and simple error handling so that, ideally,
users are prevented from making mistakes and, if they do, they
are offered clear and informative instructions to enable them to
recover.

6. Permit easy reversal of actions in order to relieve anxiety and

encourage exploration, since the user knows that he can always
return to the previous state.

7. Support internal locus of control so that the user is in control of

the system, which responds to his actions.

8. Reduce short-term memory load by keeping displays simple,

consolidating multiple page displays and providing time for
learning action sequences.
 Activity 08
• Identify few human-centered applications and
list which features make it human-centered.