IMAT 3712

Human Computer
Interaction
Basic Usability
Acknowledgements
 Some slides originated in
 Lectures developed by Howell Istance
 Lectures developed by John Burns
 Supporting PowerPoint materials for Interaction

Design by Rogers, Sharp and Preece

Designing usable systems
 You need to consider
 Users
 Tasks
 Environments
 You need to prioritize different usability goals
 You need to evaluate, and eliminate inevitable
mistakes

 BUT
 Some basic principles of good design
Principles versus Guidelines
 Principles: General, relatively abstract ‘ought’ rules
 Guidelines: More concrete, situation-specific advice
on what to do to follow principles

 Contrast
 Jakob Nielsen’s 10 Usability Heuristics for User

Interface Design
1. Basic principles of good design
2. Categorization of design mistakes covering nearly
everything
 Jakob Nielsen’s 113 Design Guidelines for
Homepage Usability
1. One of many sets of rules giving concrete advice
The Principle of Visibility
 It should be obvious what a control is used for
The Principle of Affordance
 It should be obvious how a control is used

 Objects afford certain actions and not others

 How their appearance suggests they are used
 How they can be physically manipulated
 Affordances are partly learned conventions

 How to be a vandal…
 Plywood boards afford writing (but easy to

smash)
 Glass affords smashing (but easy to write on)
Some physical affordances...
 What actions do these physical objects afford?
 Are they obvious?
Some virtual affordances...
 What actions do these screen objects afford?
 What if you were a novice user?
 Would you know what to do with them?
The Principle of Feedback
 It should be obvious when a control has been
used
Jakob Nielsen’s list of 10 UI
Usability Heuristics
 Basic principles of design for usability

 Visibility of system status

 Match between system and the real world
 User control and freedom
 Consistency and standards
 Error prevention
 Recognition rather than recall
 Flexibility and efficiency of use
 Aesthetic and minimalist design
 Help users recognize, diagnose and recover from
errors
 Help and documentation
Jakob Nielsen’s list of 10 UI
Usability Heuristics
1. Categorization of usability problems and design
mistakes
2. Principles for designing for good usability

 Jakob Nielsen claims that nearly all usability

problems belong to one of these ten types
From
http://www.nngroup.com/articles/ten-usability-heuristics/
Ben Shneiderman’s
8 Golden Rules
 The first principles… from Ben Shneiderman’s very
influential 1987 book Designing The User Interface

 strive for consistency

 enable frequent users to use shortcuts
 offer informative feedback
 design dialogues to yield closure
 offer simple error handling
 permit easy reversal of actions
 support internal locus of control
 reduce short term memory load
Windows Interface Guidelines
 Set of general principles for interface design in
Microsoft’s software development document

 directness
 user in control
 consistency
 forgiveness
 feedback
 aesthetics
 simplicity
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Be consistent

 aesthetic design actions
 support internal
 help users
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Consistency and
standards
 Consistency and standards
 Users should not have to wonder whether
different words, situations, or actions mean the
same thing. Follow platform conventions.
Consistency
 Internal consistency
 Different parts of the same system work in the

same way

 External consistency
 System works in the same way as other similar

systems
 How do you take a new car for a test drive?
Consistency
 Avoids confusion and minimizes learning effort
 Enable user to build a reliable mental model of how the
interface works
 Makes the interface familiar and predictable by
providing a sense of stability
 Allows users to transfer existing knowledge to new tasks
and focus more on tasks because they need not spend
time trying to remember the differences in interaction
 Allows users to learn and strengthen procedural skills
 Always important: names of commands, layout of
information, and operational behaviour.
Redesigning: Continuity
 You can redesign and modify, but users’
experiences should help them, not confuse them...

 Make difference visible: As important as making

sure that controls with the same behaviour look
the same, is making sure that controls that do
different things look different
Stimulus-response compatibility
 People acquire from culture strong general
expectations about relationship between actions
and consequences
 Bottom UPWARDS = increase
 Left-to-RIGHT = increase
 CLOCKWISE = increase

 Never clash with very strongly learnt stimulus-

response mappings, such as key bindings.
 Use standard stimulus-response relationships
 Never mix positive and negative S-R relationships
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Feedback to

 aesthetic design actions
 help users
 support internal User
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Visibility of
system status
 Visibility of system status
 The system should always keep users informed
about what is going on, through appropriate
feedback within reasonable time.
Feedback from the system
 Every action the user makes should produce a
perceptible response.
 The intention is to reduce user uncertainty that the
system has:
 received the last input,
 is currently doing something about it,
 or is waiting for the next input.
Feedback from the system
 Commands should result in some visible change to
the interface
 E.g ‘mail has been sent’ in response to a ‘Send’

command
 Presentation of objects on screen updated to

reflect their current state

 Task analysis should enable appropriate
information to be identified as feedback for a
specific task
Feedback from the system
 System should show its status
 What mode it’s in (what you can see or do)
 What state it’s in (where in process you are)
 What it expects or enables the user to do
Feedback: Response times
 Response time for feedback should be appropriate
to the type of user action:
 e.g. response to keystroke - instantaneous;
response to command input - may
take longer

 Provide ‘system busy’ feedback if time will exceed

a few seconds or is unpredictable
 Provide indication of how many transactions
remain, for example as a bar chart or as a
percentage

 This largely disappeared as a problem with fast

Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of System should

 aesthetic design actions
 help users
 support internal match real
locus of control
recover from
 reduce short term
world
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: System matches
real world
 Match between system and the 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.
Matching how the users think
 Interface should let the users work with
 Users’ concepts
 Users’ terminology
 Operations that fit users’ conception of actions

 Dialogues should
 Use simple familiar language
 Present information in clear logical order
 Yield closure: natural beginning, middle, end
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of User in

 aesthetic design actions
 help users
 support internal Control
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: User control and
freedom
 User control and freedom
 Users often choose system functions by mistake
and will need a clearly marked "emergency exit"
to leave the unwanted state without having to
go through an extended dialogue. Support undo
and redo.
User in Control
 User initiates actions, not the computer or
software
 User controls pace of activities
 Use techniques to automate tasks, but

implement them in a way that allows the user to

chose or control the automation
 Users should be able to personalize aspects of

the interface, such as colour, fonts, or other

options
Minimal User Input
 User input should be as little work as possible
 BUT balance between number of keystrokes or

mouse movements/clicks and memory load

 Reducing keying errors increases speed of data

entry

 Edit a command that has produced an error rather

than retyping the command
 Allow selection from a list rather than typing in a
value
(recognise rather than recall)
 Do not request input of information which can be
derived automatically or which has been entered
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Reduce

 aesthetic design actions
 help users
 support internal Memory Load
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Recognition
rather than recall
 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. Instructions
for use of the system should be visible or easily
retrievable whenever appropriate.
Minimize user memory load
 Remembering stuff from moment to moment is
hard and unreliable: Don’t make the users do it!

 Basic rule: Don’t expect the user to remember

what has already been done; make this visible at
the interface
 If a command is made up of a number of pieces of data
entered by the user in sequence, display these rather
than expect the user to remember the data already
entered
 Help the user remember where they are in a transaction
sequence – Menu 2/5 Step 1 - 4
Feedback minimizing memory
load

Place in transaction sequence

Data previously entered

Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Error

 aesthetic design actions
 help users
 support internal Prevention
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Error prevention
 Error prevention
 Even better than good error messages is a
careful design which prevents a problem from
occurring in the first place. Either eliminate
error-prone conditions or check for them and
present users with a confirmation option before
they commit to the action.
Forgiveness
 Easy UNDO
 Where possible, allow easy reversal of actions
 Mistakes have low cost
 Allow exploration
Error Prevention
 Design Out Errors
 Make errors less likely
 Perceptual confusions
 Similar actions
 Make users check likely mistakes or irreversible
actions
 If possible, make errors impossible
Murphy’s Law
“If there is a wrong way to do something, someone
will do it that way”
-- attributed to Edward Murphy (original phrasing
debated)

 Design Principle: Design things so that there ISN’T

a wrong way to do something

 Design classic:
3.5 inch floppy disk
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Appropriate

 aesthetic design actions
 help users
 support internal User Support
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Help users
recover from errors
 Help users recognize, diagnose and recover from
errors
 Error messages should be expressed in plain
language (no codes), precisely indicate the
problem, and constructively suggest a solution.
 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.
Appropriate user support
ERROR messages
 should explain what is wrong and what corrective action
is required
 should use ‘jargon’ familiar to the user

HELP messages
 important to recognise different types of help
 should be available when required and context-specific
 can the user get help about what responses are possible
at a given point in a dialogue?

 Often this support is poorly designed in terms of

what information is given to the user
Paradox of the Active User
 Users never read manuals!
 Motivated by getting started and meeting

immediate need
 EVEN WHEN putting in some initial learning

would lead to better results faster

 So don’t expect them to read them, until they

adopt the strategy of last resort:
 “When all else fails, read the manual”
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Provide

 aesthetic design actions
 help users
 support internal Flexibility
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Flexibility and
efficiency of use
 Flexibility and efficiency of use
 Accelerators -- unseen by the novice user -- may
often speed up the interaction for the expert
user such that the system can cater to both
inexperienced and experienced users. Allow
users to tailor frequent actions.
Flexibility
 Measure of how well a dialogue can cater for
different levels of user skill
 Provide alternative means of achieving the same
goal which match different models of how the
interface works
 e.g. word selection: cursor to start of word and

double click, click and drag, click and shift-click

 e.g. word deletion: word highlighted and Control

+X key, select ‘Cut’ menu option, backspace

Flexibility
 Adapt to the skill level of the user by
 providing accelerators
 allow user to answer ahead
 provide key bindings for menu options
 providing macro facility
 accepting abbreviations for command words
 accepting synonyms (alternative names)
 allowing user to choose level of instructions or
help
Many common elements…
Nielsen Shneiderman Microsoft
 visible system  strive for  directness
status consistency  user in control
 match between  enable frequent  consistency
system and users to use  forgiveness
world shortcuts  feedback
 user control and  offer informative  aesthetics
freedom feedback  simplicity
 consistency  design dialogues
 prevent errors to yield closure
 recognition  offer simple error

rather than recall handling

 flexible &  permit easy

efficient reversal of Aesthetic

 aesthetic design actions
 help users
 support internal Design
recover from locus of control
 reduce short term
errors
 good help and memory load
Jakob Nielsen’s 10
Heuristics: Aesthetic and
minimalist design
 Aesthetic and minimalist design
 Dialogues should not contain information which
is irrelevant or rarely needed. Every extra unit of
information in a dialogue competes with the
relevant units of information and diminishes
their relative visibility.
Aesthetic issues
 Good-looking interfaces are attractive! (No shit
Sherlock)
 Elegance tends to go with good usability
 Careful use of colour, graphics and formatting can
make the design more aesthetically pleasing

 BUT
 Danger that you can hide or obscure controls or

key information
 Need to get the right balance
 Nielsen advocates Simplicity – particularly for

Website design
Illusion of Simplicity
 Beware the Illusion of Simplicity
 Principle: Any attempt to hide complexity will

serve to increase it

 Simple-looking screens with hidden controls (e.g.

Mac hidden scrollbars)
 Look great in demos
 May help to ship units
 Usability nightmare

 Principle: If the user can’t find it, it doesn’t exist

Discoverability
 Design interfaces so that users can discover all the
functionality
 Q: How do you know if features are

discoverable?
 A: Need to do user testing

 MS Office 2007 redesign: the ribbon was

introduced to improve discoverability (as users
kept demanding functionality they already had
but couldn’t find) – largely successful

 Findability: How easily users can locate features

they know exist
Lots of usability guidelines
 Various lists of usability heuristics for various types
of interface
 Quite a lot produced by Jakob Nielsen & co

 For example, 113 guidelines for web homepages

https://www.nngroup.com/articles/113-design-guidelines-h
omepage-usability/
 Read this! You’ll need it for labwork and
assignments

 For more, see Nielsen Norman Group’s collection

of reports – some free, most cost money
https://www.nngroup.com/reports/
Using usability heuristics in
design
 Useful

 BUT
 You’ll still make usability mistakes
 Can you or can’t you violate guidelines and

conventions?

 You’ll still need to test and revise!

Can you break the rules?
 Depends which ones…
 Feedback is vital
 Consistency matters

 BUT
 Some conventions can be varied
 Can put menus on right
 Can vary web link colours
 You’ll need to TEST to see whether your
innovative/different design creates problems or
not
 You’ll need to TEST ANYWAY
Reading
 Bruce Tognazzini First Principles of Interaction
Design http://asktog.com/atc/principles-of-
interaction-design/
 Jakob Nielsen 113 guidelines for web homepages
http://www.nngroup.com/articles/113-design-
guidelines-homepage-usability/

 Also useful: Chapter 9.1-9.3 of Stone, Jarrett,

Woodroffe, Minocha, User Interface Design and
Evaluation

 Martin Stacey’s incomplete list of usability factors

(on LearningZone)
The textbook
Yvonne Rogers
Helen Sharp
Jenny Preece
Interaction Design,
6th ed
Wiley, 2023
ISBN 978-1-119-90109-9
Web Resources
 Nielsen Norman Group articles
https://www.nngroup.com/articles/
 UX Matters
https://www.uxmatters.com/
 Interaction Design Foundation
https://www.interaction-design.org/literature
Appendix: Weinschenk & Barker
Weinschenk & Barker list of
heuristics
 Susan Weinschenk and Dean Barker researched
usability guidelines and heuristics from many
sources (including Nielsen's, Apple and Microsoft)
and did a massive card sort to generate the list of
20 below. (S. Weinschenk and D. Barker, Designing
Effective Speech Interfaces, Wiley, 2000)

1. User Control: The interface will allow the user to

perceive that they are in control and will allow
appropriate control.
2. Human Limitations: The interface will not
overload the user's cognitive, visual, auditory,
tactile, or motor limits.
Weinschenk & Barker list of
heuristics
3. Modal Integrity: The interface will fit individual
tasks within whatever modality is being used:
auditory, visual, or motor/kinesthetic.
4. Accommodation: The interface will fit the way
each user group works and thinks.
5. Linguistic Clarity: The interface will
communicate as efficiently as possible.
6. Aesthetic Integrity: The interface will have an
attractive and appropriate design.
7. Simplicity: The interface will present elements
simply.
8. Predictability: The interface will behave in a
manner such that users can accurately predict
Weinschenk & Barker list of
heuristics
9. Interpretation: The interface will make
reasonable guesses about what the user is trying
to do.
10. Accuracy: The interface will be free from errors
11. Technical Clarity: The interface will have the
highest possible fidelity.
12. Flexibility: The interface will allow the user to
adjust the design for custom use.
13. Fulfillment: The interface will provide a satisfying
user experience.
14. Cultural Propriety: The interface will match the
user's social customs and expectations.
Weinschenk & Barker list of
heuristics
15. Suitable Tempo: The interface will operate at a
tempo suitable to the user.
16. Consistency: The interface will be consistent.
17. User Support: The interface will provide
additional assistance as needed or requested.
18. Precision: The interface will allow the users to
perform a task exactly.
19. Forgiveness: The interface will make actions
recoverable.
20. Responsiveness: The interface will inform users
about the results of their actions and the
interface's status.
Appendix: Some design
guidelines
Menus
 Usually a collection of actions, structured into a list
from which a user chooses
 Actions applied to objects
 Immediately by selecting menu item
 Following collection of more data from user (via

a dialogue box)
Menus
 Actions applied to objects
 Explicitly selected by user – format + font… [selected
text]
 Implicitly assumed by system – print [current file]
 Pop-up menu over selected object shows common
actions on that object
 Actions may be represented
 by text (e.g pull-down menu)
 by icons (e.g toolbar)
 Actions completed
Menus: Anything, anytime
 Most common Windows applications use an
‘anything, anytime’ approach –
 All commands are available to the user at all

times
 Leads to large, cumbersome menu structures

where the user can forget how to find a

particular command
 Toolbars attempt to provide shortcuts to

frequently used items

 Order of icons in toolbars different from items in

pull-down menus representing same actions

Menus: Modes
 Many CAD systems use an alternative, moded
approach where a general type of operation, or
task is selected
 Only a restricted set of menus relevant to that

operation are displayed

 This approach is now used in some MS

applications
Menu structure
‘Structures should reflect users expectations.. and
support users flow of work’ (ISO 9241/14)
 Priorities
 Conventional categories (file, edit,…)
 Use of dividers to break menus into groups
 Logical groups of related actions (cut,copy,paste)
 Arbitrary groups
 consistently ordered, numerically or alphabetically
Sequencing options within
groups
 Consistency - use the same relative order of items
where the group is presented again
 Importance - place important items first in the
group
 Conventional order e.g days of the week
 Order of use - e.g ‘copy’ preceeds ‘paste’
 Frequency of use
 if frequency of option is known, place frequent

items first
 Alphabetical order

 What ordering rules have been applied in the next

slide?
Functional Objectives with
Screen Layout
 Arrange items on screen to give highest probability
of eliciting an acceptable level of human
performance

 The user will be able to

 extract information she is seeking
 identify related groups of information
 distinguish exceptional items (warnings and

error messages)
 determine what action is necessary
Formatting recommendations
 Split strings more than 6 alphanumerics into
smaller groups
(bad) (good)
ABBA347686A2 ABBA 347686 A2
ABBA456388A3 ABBA 456388 A3

 Data should be presented in the same way even if

variations in input format are tolerated
30 11 95
30 Nov 1995  30/11/95 (for example)
30 11 1995
30th nov 95
Formatting recommendations
 Data should be presented in full version even if
abbreviated input allowed, provide feedback to
user

Party:[ ]
Party:[ ch,cai] Chemical Bank, Cairo
Formatting recommendations
 numeric codes displayed with right justification
47321 47321
539 539
67 67
482645 482645
 lists of numeric with decimal points should be
aligned around the point
34.723
43.908
2341.5
Labelling
 Descriptive title or phrase adjacent to a group of
related items or information
 Labels should be
 meaningful to the user
 visually distinct from the data
 NOT confusable with help messages or

command descriptions
Labelling
 Use consistent relationship between labels and
data being described
e.g. above and left justified
Name:
[ ]
 Include units in label to reduce ambiguity
e.g. Weight( Kg):
[ ]
Style guides and sources of
design guidance
 Plenty of these….
 Manufacturers
 Web-based style guides e.g. Yale Style Manual
 http://info.med.yale.edu/caim/manual/index.html