Usability Guidelines, Principles &
Theories
Lecture 6
Date: 16th February
1
Overview of Lecture
•Principles
•Principles of Universal Design
•Major design principles
•Nielsen’s usability principles
•Theories
•GOMs
•7 Stages-of-Action
•Levels of Analysis
2
Design Principles
•A number of design principles have been
promoted
•They are concerned with how to determine
what users should see and do
•6 major design principles have been
identified (written about extensively in
Norman’s Design of Everyday Things)
Principles
3
Design Principles
•Visibility
•Feedback
•Constraints
•Mapping
•Consistency
•Affordance
//Will be discussed in conjunction with usability principles
Principles
4
Usability Principles
•Nielsen defined 10 usability principles that
can be applied to any system, although
frequently used for web applications
•Similar in aim to usability goals, except more
slightly more prescriptive
•Used mainly as the basis for evaluating
systems
•Provide a framework for usability evaluation
Principles
5
Usability Principles
•Visibility of system status
•Match between system and the real world
•User control and freedom
•Consistency and standards.
•Help users recognize, diagnose and recover
from errors
•Error prevention
•Recognition rather than recall
•Flexibility and efficiency of use
•Aesthetic and minimalist design
•Help and documentation
Principles
6
Usability/Design Principles
Feedback
Mapping
Visibility
Visibility
of status
Match to world
User control
Flexibility
Help
Consistency
Consistency
Errors mgt
error prevention
Constraints
Simplicity
Recognition
Affordance
Principles
7
Usability/Design Principles
1. Visibility of system status
Always keep users informed about what is going on,
-> provide appropriate timely feedback within
reasonable time
• What has been done?
• Includes sound, highlighting, animation and combinations
of these
– e.g. when screen button clicked on provides sound or red
highlight feedback:
“ccclichhk”
Principles
8
Usability/Design Principles
Web-site Visibility
•The answers to the following questions should be
obvious
•where am I?
•what can I do?
•where will I go if I do this?
•where have I been?
•Brand each page
•Show the section it belongs to
•Mark links to other pages clearly.
•Users may jumping to any part of the site from elsewhere you
need to include this status on every page.
Principles
9
Usability/Design Principles
2. Match between system and the real world
1. Speak the users’ language
2. Don’t use system oriented terms
3. Use real world conventions to make
information appear in a natural and logical
order
 Use a technique called mapping:
Relationship between controls and their
movements and the results in the world
Principles
10
Usability/Design Principles
•Why is this a poor mapping of control buttons?
•Why is this a better mapping
Principles
11
Usability/Design Principles
3. User control and freedom
Provide ways of allowing users to easily
escape and navigate to/from places they
unexpectedly find themselves
e.g.
•
•
•
•
•
•
•
page forward / backward
hold
cancel
end / stop
help
resume
undo
Principles
12
Usability/Design Principles
•Need a clearly marked "emergency exit”
•Users can choose system functions by mistake
•Need to escape from an unwanted state without having to
go through an extended dialogue.
•Need to support undo and redo.
•Browser provides "emergency exits” but you can
supply your own buttons to support user control
and freedom.
•Can take away user control built into the Web.
• A "home" button on every page
•simple way to let users feel in control of your site.
Principles
13
Usability/Design Principles
4. Consistency and standards
Avoid making users wonder whether
different words, situations or actions
means the same thing
•
Design interfaces to have similar operations and
use similar elements for similar tasks
•
Main benefit is consistent interfaces are easier to
learn, use and remember
Principles
14
Usability/Design Principles
Example:
Use consistent wording in your content and
buttons.
•
Most common inconsistency is between page titles
and page headers for pages, and the links to them.
•
Destination page’s title different from the link that
took user there leads to user confusion.
•
Other examples:
•
always use ctrl key plus first initial of the command
for an operation – ctrl+C, ctrl+S, ctrl+O
Principles
15
Usability/Design Principles
•
Follow platform conventions
•
•
•
Avoid confusion over whether different
words, situations, or actions mean the
same thing to user
No custom link colours. They may
conflict with rest of Web and make site
hard to use.
Web "standards"
•
•
Follow HTML specifications
Deviations from the standards results in
unusable features creeping in
Principles
16
Usability/Design Principles
Internal and external consistency
•
Internal consistency refers to designing
operations to behave the same within an
application
•
•
Difficult to achieve with complex interfaces
External consistency refers to designing
operations, interfaces, etc., to be the same across
applications and devices
•
Difficult to ensure across different types of devices Based on different designer’s preference. Can be
dictated by corporate guidelines
Principles
17
Usability/Design Principles
• A case of external inconsistency
(a) phones, remote controls
(b) calculators, computer keypads
1
4
2
5
3
6
7
8
9
4
5
6
7
8
9
1
0
2
3
0
Principles
18
Usability/Design Principles
5. Help users recognize, diagnose and
recover from errors
Use plain language to describe the
nature of the problem and suggest a
way of solving it
•
Careful design is better than good error
messages
• prevents problems from occurring in the
first place
Principles
19
Usability/Design Principles
•
Detection
•
•
•
•
•
•
•
•
immediately detect all errors
maintain the item in error
visually highlight the item in error
identify field requiring missing data
display error messages on the screen
position cursor at first error
use auditory signals conservatively
Correction
•
provide constructive error messages
•
•
•
•
what error was detected
which field was in error
what corrective action is necessary
resend only erroneous information back to system
Principles
20
Usability/Design Principles
6. Recognition rather than recall
Make objects, actions, and options visible.
•
•
•
Don’t force user to recall information
Instructions should be visible or retrieved easily when
needed.
From point of view of the Web, this heuristic is
closely related to system status
•
•
•
•
Users won’t get lost if they can see where they are by
looking at clues given by on current page.
No need to recall their path to the home page.
Good labels & descriptive links are essential for
recognition.
Use images for links, but they need to be well designed.
Principles
21
Usability/Design Principles
Recognition vs recall uses concept of
Affordance 
• Refers to an attribute of an object that
allows people to know how to use it
•
Much popularised term in interaction
design to discuss how to design interface
objects
•
e.g. scrollbars to afford moving up and down,
icons to afford clicking on
Principles
22
Usability/Design Principles
7. Error prevention
Prevent them occurring in first place if possible
Key question: Does the system prevent users from
making serious errors, and if they do make an error, does
it permit them to recover easily
•
Prevention
•
permit review of message about to be sent
•
•
•
handle common misspellings
permit editing of message about to be sent
advise of non-reversible changes
Principles
23
Usability/Design Principles
•
Constraints (for error prevention)
•
•
•
•
•
•
permit review of message about to be sent
handle common misspellings
permit editing of message about to be sent
Restricting the possible actions that can be
performed
Helps prevent user from selecting incorrect
options
Three main types (Norman, 1999)
• Physical – (discussed in next side)
• cultural - e.g. culture
• Logical – e.g. menu item ordering
Principles
24
Usability/Design Principles
•
Physical Constraints
•
•
•
•
•
Refer to the way physical objects restrict the
movement of things
E.g. only one way you can insert a key into a lock
How many ways can you insert a CD or DVD disk into
a computer?
How physically constraining is this action?
How does it differ from the insertion of a floppy disk
into a computer?
Principles
25
Usability/Design Principles
8. Flexibility and efficiency of use
Provide accelerators that are invisible to novice
users, but allow more experienced users to carry
out tasks more quickly:
•
Use accelerators (keyboard shortcuts)
•
Web Browser provides good accelerators e.g.
bookmarks
•
Design for effective book-marking
•
•
contents of site can easily be linked to
users create specialized views of a site for specific tasks
Principles
26
Usability/Design Principles
9. Aesthetic and minimalist design
Avoid using info that is irrelevant or rarely needed
•
No irrelevant or rarely needed information in
dialogues -> diminishes visibility
•
Extraneous information on a page distracts user &
slows them down.
•
Use progressive levels of detail.
•
Support different uses of content. No brochures.
Principles
27
Usability/Design Principles
10. Help and documentation
Provide information that can be easily
searched and provides help in a set of
concrete steps that can easily be followed
•
Better if the system can be used without
documentation
•
•
•
it may be necessary to provide help and documentation
Make it easy to search, focused on the user's task,
list concrete steps to be carried out, and not too large.
Principles
28
Pros and Cons: Heuristic Evaluation
Advantages
Disadvantages
detects both major (42%)
and minor (32%) problems
in UI
groups can develop their
own bias
doing it properly is not that
cheap
more effective than single
specialist
new technologies (Web,
Multimedia, Virtual Reality)
may have specific problems
not covered by The
Heuristics
can be used on designs
“realistic” approach
“severity rating” helps to
set priorities
Principles
29
Theories
• Beyond the specifics of guidelines
• Principles are used to develop theories
• 3 examples of theories:
• Levels of Analysis model
• Stages of action models
• GOMS and the keystroke-level model
Theories
30
Levels of Analysis Model
• Foley and van Dam four-level approach
• Conceptual level: user’s mental model of system
• Semantic level: meaning conveyed by input/output
Device/Tool
dependent
• Syntactic level: assembly of actions to perform tasks
• Lexical level: device level actions
• Approach is convenient for designers
• Top-down nature is easy to explain
• Matches the software architecture
• Allows for useful modularity during design
Theories
31
Stages of Action Model
• Norman's seven stages of action
1. Forming the goal
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome
• Norman's contributions
• Context of cycles of action and evaluation.
• Gulf of execution: Mismatch between the user's
intentions and the allowable actions
• Gulf of evaluation: Mismatch between the system's
representation and the users' expectations
Theories
32
Stages of Action Model
Goals
1
Intention to act
Evaluation of
7 interpretations
2
Sequence of actions 3
6 Interpreting the
perception
5 Perceiving the state
of the world
Execution of the
4
Action sequence
THE WORLD
Theories
33
Stages of Action Model
Gulf of execution: Mismatch
Cycle of Execution between the user's
intentions and the allowable
3. Specify action
actions
4. Execute action
2. Intention
1. Form
the Goal
Conceptual
Model
(Goals)
Gulf
Real World
(Interactions)
7. Evaluate
5. Perceive system
state
Gulf of evaluation: Mismatch
6. Interpret
between the system's
representation and the users' Cycle of Evaluation
expectations
Theories
34
Stages of Action Model
• Four principles of good design
• State and the action alternatives should be visible
• Should be a good conceptual model with a consistent
system image
• Interface should include good mappings that reveal the
relationships between stages
• User should receive continuous feedback
• Four critical points where user failures can occur
• Users can form an inadequate goal
• Might not find the correct interface object because of an
incomprehensible label or icon
• May not know how to specify or execute a desired
action
• May receive inappropriate or misleading feedback
Theories
35
GOMS and the
keystroke-level model
• Goals and sub-goals
• Operators: “elementary perceptual, motor or
cognitive acts”
• Methods: actions
• Selection rules: control structures for
decisions between methods
(Card, Moran and Newell, 1980)
Theories
36
Keystroke level model (KLM)
Card, Moran and Newell (1980)
• Purpose
• approximate prediction of time to perform tasks
• allows comparison between alternative design
options
• applicable in principle to any interactive system
• Assumptions
• routine tasks
• expert, error-free performance
• assumes knowledge of task/sub-tasks; method
used for task; and some information about the
system
Theories
37
Content of the model
• a description of the task
• a simple model of the user
• a simple model of the computer
• tasks are executed by a sequence of operators
- physical actions of the user and computer
•Texecute = TK + TP + TH + TD + TM +
TR
•where K = keystroking; P = pointing; H =
homing; D = drawing; M = mental
operator; R = system response operator
Theories
38
KLM Examples
From Card et al 1980
Keyboard-based editor
»Method for Task T1-Poet
•Jump to next line MK[LINEFEED]
•Call substitute command MK[S]
•Specify new 5-digit word 5K[word]
•Terminate argument MK[RETURN]
•Specify old 5-digit word 5K[word]
•Terminate argument MK[RETURN]
•Terminate command K[RETURN]
Mouse-based editor
–Method for task T1-Disped
–Reach for mouse H[mouse)
–Point to word P[word]
–Select word K[YELLOW]
–Home on keyboard H[keyboard]
–Call replace command MK[R]
–Type new 5-digit word 5K[word]
–Terminate type-in MK[ESC]
»Texecute = 4tM + 15tK = 8.4 sec.
•Assuming tK = 0.2sec.
Conclusion: mouse-based
interaction is faster
»Texecute = 2tM + 8tK + 2tH + tP = 6.2s
Theories
39
Summary of Lecture
• Usability can be defined as the capacity to be used
by humans easily and effectively
• Ease-of-use
• Friendliness
• Guidelines- provided a number of sample guidelines
• Principles - introduced major principles in HCI
• Principles of Universal Design
• Major design principles
• Nielsen’s usability principles
• Theories - introduced 3 HCI theories
• Levels of Analysis
• 7 Stages-of-Action
• GOMS / Keystroke Level Model
References
40
Terms of Reference
• Norman, D. (1990) The Design of Everyday Things
• Preece, J. et al. (2002) Interaction Design
• Shneiderman, B. & Plaisant, C. (2005) Designing
the User Interface
• Shackel, B. (1990) Human Factors and Usability
• Smith, S. & Mosier, J. (2005) Guidelines for
Designing User Interface Software
• Foley, J. & Van Dam, A. (1995) Computer Graphics:
Principles & Practices in C
• Card, S. & Newell, A. (1983) The Psychology of
Human-Computer Interaction
References
41