Usability and design

principles
Part 1: Nielsen’s Principles.
Learning objectives
1) To understand the Nielsen principles
2) To understand several design principles and how they
are driven by (1)
3)Interface design
–Interface design (organising content)
Why?
•We’ve introduced the topic of usability
–Week 1
•If we’re commissioned to build a system, we’ve discussed
the importance of and ways to gather information and
feedback from users
–Week 2-5
•What are some principles of interface design?
–This week onwards
User Centered Design
in a few words by Don Norman
https://www.youtube.com/watch?v=Wl2LkzIkacM
A good book on general design principles
• The Design of Everyday Things by Don Norman
Principles of interface design
–Nielsen’s principles (broad)
–Often used for testing
–Might as well know how you are being tested from the start
–Design principles (more specific)
Part 1: Nielsen’s
Principles
Who is Nielsen?
•Developed the most used heuristics for interface design in
1990 with Rolf Molich.
•Explains 10 main heuristics released in 1994.
•Has a consulting group for usability:
http://www.nngroup.com/articles/ten-usability-heuristics/
Why ‘heuristics’?
•These are not specific rules
•More like rule of thumb
•They are also not exclusive to one another
•Do not make it a habit of pigeon holing usability issues into
heuristics
Nielsen’s 10 principles
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose and recover from errors
10. Help and documentation
Visibility of system status
•User should always be informed of what is happening behind
the scenes, when appropriate.
•For example, when uploading a file there should be a
progress bar.
•In general always tell the user what is happening if they have
no control.
•Keyword here is when appropriate and necessary. No need
to bombard your users with your servers’ CPU cycles.
Visibility of system status

RMIT University©2013 CS&IT 12

Match between real world and system
•The system should speak users’ language and
conventions.
•Example: Envelope icons to denote e-mail.
•If a niche product make sure to use words that your market
acknowledges and uses.
•Use logical and instinctive phrases and graphics.
Match between real world and system

RMIT University©2013 CS&IT 14

User control and freedom
•Escape hatches for users are important.
•Allow users to exit state without extended dialogue.
•However they should be easily notified the ramifications of
an exit. Example – forms and shopping cart.
•Supporting redo and undo functions.
Consistency and standards
•Practice using the same words that mean the same thing.
•Sounds like common sense but rarely applied.
•Example: ‘Exit’ and ‘Log out’ or even ‘Leave’
•Having a common navigation model helps. Navigation bars
suddenly disappearing out of context is quite jarring.
•Follow platform conventions.
Consistency and standards

RMIT University©2013 CS&IT 17

Consistency and standards

RMIT University©2013 CS&IT 18

Consistency and standards

RMIT University©2013 CS&IT 19

iTunes “music home”?

RMIT University©2013 CS&IT 20

Error prevention
•Anticipate common mistakes from users and prevent them
using schema or procedures.
•Example: Enforcing number characters for credit card
numbers.
•Delicate use of confirmation dialogues could be useful
before a user commits to an action that may be
irreversible.
Error prevention

From Seminara, Gonzales, & Parsons, 1977. Photograph

courtesy of Joseph L. Seminara.

RMIT University©2013 CS&IT 22

Error prevention

RMIT University©2013 CS&IT 23

Error prevention

RMIT University©2013 CS&IT 24

Error prevention

Picture: Frankfarm (Creative Commons)

RMIT University©2013 CS&IT 25

Interface Hall of Fame or Shame?

Credit: Sam Shannon

Recognition rather than recall
•Instructions to use your system should be easily visible
and followed.
•Do not expect your user to memorize specific functions.
They probably would after the 10th time executing the
same task but do not take it for granted.
•Else there won’t be a 10th time.
•Use layout, graphics and design to ensure that functions
are easily identified.
Recognition rather than recall

RMIT University©2013 CS&IT 28

Recognition rather than recall

RMIT University©2013 CS&IT 29

Recognition rather than recall
•Not!

RMIT University©2013 CS&IT 30

Flexibility and efficiency of use
•Allow expert users to use shortcuts.
•Scaling functionality depending on the users’ skills and
experience.
•Novice users may encounter wizards while expert users
will be handed accelerators.
•This makes use of user accounts and settings.
Flexibility and efficiency of use

RMIT University©2013 CS&IT 32

Aesthetics and minimalist design
•Do not clutter!
•Every bit of information in dialogues should be vital. Every
word, in fact.
•There are only so many bits of information a user can take
in at anyone time, you do not want to overwhelm that
threshold.
•Funnel your users, don’t blanket them with functions.
Aesthetic and minimalist design

RMIT University©2013 CS&IT 34

Aesthetic and minimalist design
•Is this minimalism?
–http://www.pandminc.com

RMIT University©2013 CS&IT 35

Recognize, diagnose and recover
•So…the old 404, anyone remember that?
•Not very useful was it, does not tell the user what was
wrong, how it could be solved and how to prevent it.
•Many systems now still have code errors.
•What happens in chrome when you could not access a
site?
•Would be great if all websites comes with a “Keep calm
and check connection” logo somewhere.
Recognize, diagnose and recover
•Error messages should be:
–phrased in clear & natural
language
–precise
–constructive: offer alternatives
–polite; do not intimidate or
blame the user

RMIT University©2013 CS&IT 37

Recognize, diagnose and recover
•Good error messages help the user to
–resolve their problem
–learn more about the system

RMIT University©2013 CS&IT 38

Don’t we hate error messages?

WinSCP error message

Don’t we hate error messages?

Remmina Remote Desktop, Ubuntu

Help and documentation
•Any help function implemented should be easily
identifiable, accessed and searched.
•Nothing is worse than a hidden help function that makes
things even more confusing.
•Use contextual interface to inform your users of your help
sections.
•Help sections should be brief, to the point and not too
large.
Help and documentation

RMIT University©2013 CS&IT 42

Help and documentation

RMIT University©2013 CS&IT 43

Help and documentation

RMIT University©2013 CS&IT 44

Help and documentation

RMIT University©2013 CS&IT 45

Interface Hall of Fame or Shame?

Credit: Athanasios Papaharisis

Heuristic Evaluation
Heuristic Evaluation
“Heuristic evaluation (Nielsen and Molich, 1990; Nielsen
1994) is a usability engineering method for finding the
usability problems in a user interface design so that they can
be attended to as part of an iterative design process.
Heuristic evaluation involves having a small set of evaluators
examine the interface and judge its compliance with
recognized usability principles (the "heuristics").”

https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Heuristic Evaluation
•No single set of Heuristics. Nielsen's 10 famous
heuristics are the most popular but there are also others:

–Bastien and Scapin created a set of 18 Ergonomic criteria

–Gerhardt-Powals 10 Cognitive Engineering Principles
–Connell & Hammond's 30 Usability Principles
–Smith & Mosier's 944 guidelines for the design of user-interfaces
(from 1986)

(http://www.measuringu.com/blog/he.php )
Applying Heuristics
•When you have identified a usability issue that has violated
one or more heuristics you need to assign it a severity.
•Ranges from 0 = no problem to 4 = Usability catastrophe.
•So, you would have a table with all the issues and
assigned severity. The project manager or persons
accountable would assign resources to fix the issues.
Caveats
•The heuristics are based on expert reviews, that is usually
one or two usability experts making judgement calls.
•Therefore may be cheap and quick, but may not be
accurate and comprehensive.
•User tests and software performance testing are usually
done to corroborate, budget allowing.
Heuristic Evaluation
• Quick and inexpensive
• Early feedback
• Require usability experts, multiple
of them, aggregate the results
• Usability testing to find further
major issues
http://www.usability.gov/how-to-and-tools/methods/heuristic-
evaluation.html
Part 2: Design Principles
Design principles
•**These have come from Nielsen (derived from his
heuristics)
–These are the important ones
•Heuristics are commonly applied on an existing system or
prototype
•Design principles are used to inform the system’s interface
and information architecture.
–There are many – and they form the core of a designer’s toolkit.
–Here are a few
Design principles
•Important to identify the right one depending on context,
that is your target users and what type of system.
•Again, these are guidelines not rules.
Principle of proximity
•A gestalt principle of perception.
•Also known as the grouping principle.
•Users tend to quickly assume buttons that are near each
other do specific but related things.
•Example: a button right next to one labelled “Yes” would
be highly expected to be “No”, not “Rick’s special key”.
•This goes for navigation and any contextual interactions.
Proximity example
Visibility and visual feedback
•Prominence
•Opacity
•Typeface
•Colour/contrast
Prominence
•Prominence is also another tool you can use to bring items
that are important to the fore.

You’ll read
this
Before this
Prominence
Opacity
•Opacity is now used very often to bring items into focus.
Typeface
•If used properly can be a powerful tool to bring attention or
to funnel users’ limited attention to the important
information or to key interaction points.
Typeface
•Also influences readability
Colours and contrast
•Higher contrast or brighter colours will draw more
attention.

You’ll read
this
Before this
Affordance
•Making it easier to do things more intuitively.
•Example: USB socket heads. How many of you still
struggle with which way is up?
•Have you noticed that most USB heads have a symbol
etched into one side to show that?
Affordances - constraints
•In contrast, make it harder for users to do the wrong thing.
•Example: The three prong electrical plug. Quite difficult to
stick it in the wrong way. Some have probably tried,
nonetheless.
•Use confirmations to actions.
Status
•Always indicate that the system is processing or is
awaiting input from the user.
•Which Nielsen’s heuristic was this again?
•The trick is to do this without overwhelming the rest of your
system’s interface.
Consistency
•Easily overlooked.
•Which Nielsen’s heuristic was this?
•Be consistent in terms of interaction placement, colours
and type of interface.
•Do not keep switching your navigation bar from left to right
for example.
Design laws
•Hicks law
–A mathematical formula that models how long it will take users to
choose the item they want from a menu of items. More items
slower decisions.
– Increasing the number of choices will increase the decision
time logarithmically.
Hick’s Law
Hick’s Law
•In Firefox
Design laws
•Fitts’ law
–A mathematical formula that models how accurate users will be
when moving the cursor between objects (e.g. buttons) on
screen. Further apart, less accurately users will be able to move.
–It’s faster to hit larger targets closer to you than smaller targets
further from you.
Fitts’ law
Fitts’ law

https://www.youtube.com/watch?v=EpBa3VzD5xY
Interface Hall of Fame or Shame?

Start to submit these to my email with the subject “Interface Hall of Fame or Shame”
and I’ll pick at least one to be discussed in lecture
Interface Hall of Fame or Shame?

Credit: Billy Hollis

Interface Hall of Fame or Shame?

Credit: Sam Shannon

Interface Hall of Fame or Shame?

Credit: Billy Hollis