HEURISTIC

EVALUATION
Chapter 5
Jakob Nielsen’s
10 Usability Heuristics for UI Design
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
Jakob Nielsen’s
10 Usability Heuristics for UI Design cont…
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

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

■ Knowledge is power
– You can only change the system status if you know what the
current status is.
– A lack of information often equates to a lack of control.
■ Appropriate feedback
– Keep users informed of the current status and to allow them to steer the
interaction in the right direction, without wasting effort.
– Examples:
■ Color change when the user has clicked on a button
■ Progress indicator when a process needs a little longer to finish.
■ When you hover a link it underlines
– Providing immediate feedback for interactive events allows users to quickly
identify the source of errors and fix them as soon as they were made.
■ Communicating the current state allows users to feel in control of the
system, take appropriate actions to reach their goal, and ultimately
trust the brand.
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.
■ Familiar Language
– Users should always be able to understand meaning without
having to go look up a word’s definition in a search engine.
– Example on next slide >>
BlueCross BlueShield of North Carolina provides clear answers to questions, uses familiar
language, and includes references that are easy to understand.
The About page for Abacus legal software’s website uses obscure, overly technical language
that places much burden on the user to connect the words with their meaning.
■ Leverage Familiarity with Real-World Objects and Activities
– Skeuomorphic web design is passé, but its basic principle:
■ “to create an interaction that mimics one from the physical world”
■ capitalizes on people’s existing knowledge and helps them easily
learn an interface, with no need for training.
– Users expect that UI elements which reflect material objects be
similar to those objects from the real world.
– Example: next slide >>
UI elements in a compass app (left) are similar to a compass in the real-world (right) and
make it easy for users to understand the app’s use and function.
■ Awareness discrepancies can cause real problems for users if objects in the
interface don’t align to their version of reality.

The gray half circles on Cars.com don’t look like buttons or arrows, nor do they reflect a
familiar object used to page through photos on the web or in real life.
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.
Consistency and standards

■ Users should not have to wonder whether different words,

situations, or actions mean the same thing.
■ A standard ensures that your users can understand the individual
interface elements in your design and that they know where to look
for what features.
■ Jakob's Law of the Web User Experience: Users spend most of their
time on other sites.
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.
■ Example:
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.
■ Recall in User Interfaces
– Login
■ Recognition in Interfaces
– Menu system
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.
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.
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.
END OF CHAPTER 5
Bring Home Quiz

■ Visit https://www.dbp.ph/ & https://www.lazada.com.ph

■ Evaluate the websites using the Usability Heuristics.
■ Requirements:
– Write / Encode your your insights / assessment on the websites mentioned on
a short bond paper. (Please follow the previous guidelines if encoded)
– If the criteria is not applicable then write ‘Not applicable’ and state the reason.
– Submit on or before May 10, 12noon
– Late submissions will not be accepted
References

■ https://www.nngroup.com/articles/visibility-system-status/
■ https://www.nngroup.com/articles/match-system-real-world/
■ https://www.nngroup.com/articles/do-interface-standards-stifle-design-creativity/
■ https://www.nngroup.com/articles/ten-usability-heuristics/
■ https://www.nngroup.com/articles/recognition-and-recall/
■ https://www.nngroup.com/articles/do-interface-standards-stifle-design-creativity/
■ https://www.nngroup.com/videos/jakobs-law-internet-ux/
■ https://medium.com/@erangatl/10-usability-heuristics-explained-c7a363e671a7