Human-Computer Interaction (HCI)

Mario Čagalj

University of Split
Design Heuristics and Heuristic
Evaluation
Based on material by Saul Greenberg, Rob Miller, Brent
Hecht
Introduction to Heuristic Evaluation

Heuristic evaluation: what?

• Informal method of usability inspection
• Small group of usability specialists judge a user interface

Heuristic evaluation: why and how?

• To identify a design problem and avoid common design pitfalls define
some design principles (usability guidelines – e.g., Nielsen heuristics)
• Let each specialist (evaluator) list the problems with respect to these
usability principles
• Let each specialist rank problems by severity

3
Iterative design process
Design heuristic useful in two stages of design process
• Design - guide you in choosing between design alternatives
• Evaluation - identifying problems in an implemented interface

Design
Task-centered design
Human capabilities
Fitts’ law
Hicks law
Norman stages of action
Mental models

Design heuristics
Evaluation Implementation
Heuristic evaluation Prototyping

4
Usability guidelines/heuristics
Design guidelines are based on human psychology
There are plenty of sets of guidelines to choose from
• Almost every researcher has his/her own set of heuristics
(major companies as well - Apple, Google, Microsoft)
• Most of these heuristics overlap
• Experts do not disagree about what constitutes a good UI
• They disagree about how to organize what we know into
a small set of simple rules

This lecture is based on Jakob Nielsen’s 10 heuristics

“Heuristic evaluation of user interfaces” [Nielsen and Molich, CHI’90]

NN/g Nielsen Norman Group

5
Ten usability heuristics

Jakob Nielsen
Ten usability heuristics
1. Match between system and the real world
2. Consistency and standards
3. Visibility of system status
4. User control and freedom
5. Error prevention
6. Help users recognize, diagnose, and recover from errors
7. Recognition rather than recall
8. Flexibility and efficiency of use
9. Aesthetic and minimalist design
10. Help and documentation

7
Ten usability heuristics
1. 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.

2. Consistency and standards

Users should not have to wonder whether different words, situations, or
actions mean the same thing. Follow platform conventions.

3. Visibility of system status

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

8
Ten usability heuristics
4. 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.

5. 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.

6. 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.

9
Ten usability heuristics
7. 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.

8. 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.

9. 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.
10
Ten usability heuristics
10. 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.

11
#1: 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.

12
#1: Match between system and the real world

Use common words, not techie jargon

What the user does in this example?

13
#1: Match between system and the real world
Computer science language: [0][0], [0][2]
Excel speaks users’ language: [A][1], [B][3]

Nielsen’s Heuristics @coursera

14
#1: Match between system and the real world
Airplane mode vs Radio off

Nielsen’s Heuristics @coursera

15
#1: Match between system and the real world
Use metaphors (but be careful they may mislead)

Nielsen’s Heuristics @coursera

16
#1: Match between system and the real world
Information should appear in natural and logical order

Nielsen’s Heuristics @coursera

17
#2: Consistency and standards

Users should not have to wonder whether different

words, situations, or actions mean the same thing.
Follow platform conventions.

18
#2: Consistency and standards
Principle of least surprise
• Similar things should look and act similar
• Different things should look different
• Users should not have to wonder whether different words, situations, or
actions mean the same thing (follow platform conventions)

Consistent language and graphics

• Same visual appearance across the system
• Same information/controls in same location on all windows

Consistent effects
• Commands, actions have same effect in equivalent situations
19
#2: Consistency and standards

Introduction to Heuristics Evaluation @uxdesign.cc

20
#2: Consistency and standards
Hamburger menus for websites not desktop apps

21
#2: Consistency and standards
Flat UI design – buttons vs labels

22
#3: Visibility of system status

The system should always keep users informed about

what is going on, through appropriate feedback within
reasonable time.

23
#3: Visibility of system status

Introduction to Heuristics Evaluation @uxdesign.cc

24
#3: Visibility of system status
Missleading feedback (Dev tools > Offline)

25
#3: Visibility of system status

Response times - important limits

• < 0.1 second - seems instantaneous
• 0.1-1 seconds - user notices, but no feedback needed
• 1-5 seconds - display busy cursor
• > 1-5 seconds - display progress bar

Response Times: The 3 Important Limits, [J. Nielsen’14]

26
#3: Visibility of system status
Contrast this example with a Linux terminal

27
#4: 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.

28
#4: User control and freedom

Users don’t like to feel trapped by the computer

• Should offer an easy way out of as many situations as possible
• Provide clearly marked exits

Strategies:
• Cancel button
• Universal undo
• Interrupt (especially for lengthy operations)
• Quit (for leaving the program at any time)
• Defaults (for restoring default properites)

29
#4: User control and freedom
Wouldn't life be much easier if we could unsend an email 

30
#4: User control and freedom
Wouldn't life be much easier if we could unsend an email 

31
#4: User control and freedom
The success of this application was in part due to heuristic #4

32
#4: User control and freedom
Frequent violations of this heuristic can lead to a pottery barn effect
(„If you break it, you bougth it”)
„What happens if I click this? Can I undo it? Better I don’t touch it.”

You want to avoid people feel tense while using your system

33
#5: 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.

34
#5: Error prevention

People will make errors!

Errors we make (according to Don Norman):
• Mistakes
• Conscious deliberations lead to an error instead of correct solution
• When user’s goals are inappropriate (a user has developed an
incorrect mental model)
• Slips
• Unconscious behavior gets misdirected en route to satisfying goal
(e.g. drive to store, end up in the office)
• Shows up frequently in skilled behavior (usually due to inattention)
• Often arises from similar actions

35
#5: Error prevention
Design for errors
• Double-check with users

Blog by the Mad Hatter

Nielsen’s Heuristics @coursera
36
#5: Error prevention
Design for errors
• Remove memory burdens

37
#5: Error prevention
Design for errors
• Support Undo and Redo

38
#5: Error prevention
Design for errors
• Use constraints

39
#6: 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.

40
#6: Help users recognize, diagnose, and
recover from errors
Deal with errors in a positive manner (be polite, speak
human-readable language)

Introduction to Heuristics Evaluation @uxdesign.cc

41
#6: Help users recognize, diagnose, and
recover from errors
Deal with errors in a positive manner (be polite, speak
human-readable language)

Introduction to Heuristics Evaluation @uxdesign.cc

42
#6: Help users recognize, diagnose, and
recover from errors
Deal with errors in a positive manner

43
#6: Help users recognize, diagnose, and
recover from errors
Deal with errors in a positive manner (be explicit,
constructive, use human-readable language, precise)

44
#6: Help users recognize, diagnose, and
recover from errors
Deal with errors in a positive manner (be explicit,
constructive, use human-readable language, precise)

45
#7: 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.

46
#7: Recognition rather than recall
Short-term memory can hold around 5-7 elements
• Easy to overload
• CLI vs GUI

C:\> git add -A -- c:\Users\mcagalj\...\index.js

C:\> git commit --quiet --allow-empty-message --file
C:\> git status -z -u
C:\> git symbolic-ref --short HEAD
C:\> git remote --verbose
C:\> git config --get commit.template
C:\> git push

47
#7: Recognition rather than recall

48
#7: Recognition rather than recall

Visited links

49
#7: Recognition rather than recall

50
#7: Recognition rather than recall

51
#7: Recognition rather than recall

Swipe up (Apple) or down (Android) to get to the

Settings/Control Panel window
Is this an example of recognition or reacall?

Nielsen’s Heuristics @coursera

52
#8: 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.

53
#8: Flexibility and efficiency of use

Provide easily-learned shortcuts for frequent operations

• Keyboard accelerators
• Command abbreviations
• Bookmarks
• History (command line interfaces)
• Templates (e.g., ppt, boilerplate code)

54
#8: Flexibility and efficiency of use

55
#8: Flexibility and efficiency of use

Emmet – a toolkit for web-developers

https://emmet.io

56
#9: 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.

57
#9: Aesthetic and minimalist design
Less is more
• Omit extraneous info, graphics, features
• Provide only relevant data

58
#9: Aesthetic and minimalist design

59
#10: 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.

60
#10: Help and documentation

Users don’t read manuals 

But manuals and online help are vital when user is
frustrated or in crisis
Help should be:
• Searchable
• Context-sensitive
• Task-oriented
• Concrete
• Short

61
#10: Help and documentation

62
#10: Help and documentation

Don’t forget:

Help is not a replacement for bad design!

63
Heuristic Evaluation

Jakob Nielsen
Introduction to Heuristic Evaluation

Heuristic evaluation: what?

• Informal method of usability inspection
• Small group of usability specialists judge a user interface

Heuristic evaluation: why and how?

• To identify a design problem and avoid common design pitfalls define
some design principles (usability guidelines – e.g., Nielsen heuristics)
• Let each specialist (evaluator) list the problems with respect to these
usability principles
• Let each specialist rank problems by severity

• To get unbiased evaluations, evaluators should inspect the interface alone

65
Problems found by a single evaluator
Different people find different usability problems
Evaluators miss both easy and hard problems:
• „Best” evaluators can miss easy problems
• „Worse” evaluators can discover hard problems
Improve method effectiveness by involving multiple evaluators

How to Conduct a Heuristic Evaluation, [J. Nielsen’95]

66
Problems found by multiple evaluators
3-5 evaluators find 66-75% of usability problems
• Different people find different usability problems
• Only modest overlap between the sets of problems found

How to Conduct a Heuristic Evaluation, [J. Nielsen’95]

67