Hci Heuristic Evaluation Slides
Hci Heuristic Evaluation Slides
Tips
•Communicate clearly to users what the
system’s state is — no action with
consequences to users should be taken
without informing them.
•Present feedback to the user as quickly
as possible (ideally, immediately).
•Build trust through open and continuous
communication.
The progress bar on top doing the
job by indicating 3 out of 5 images
are uploaded. Here the user is well
aware of the progress and can
wait without any hesitation until the
process completed. Also, the user
can tap on the progress bar and
see the detailed upload status
view. In a scenario where there
are no such indications of
progress, the user might get
confused and would tap on the
back button or reload. We can
easily avoid such frustrating
situations by making the system
status visible.
2: Match between system and the real
world
• The design should speak the users' language. Use words,
phrases, and concepts familiar to the user, rather than internal
jargon. Follow real-world conventions, making information
appear in a natural and logical order.
• The way you should design depends very much on your specific
users. Terms, concepts, icons, and images that seem perfectly clear
to you and your colleagues may be unfamiliar or confusing to your
users.
• When a design’s controls follow real-world conventions and
correspond to desired outcomes (called natural mapping), it’s easier
for users to learn and remember how the interface works. This helps
to build an experience that feels intuitive.
Example of Usability
Heuristic #2:
When stovetop controls match the layout of
heating elements, users can quickly understand
which control maps to which heating element.
Tips
•Ensure users can understand meaning
without having to go look up a word’s
definition.
•Never assume your understanding of
words or concepts will match those of your
users.
•User research will help you uncover
your users' familiar terminology, as well as
their mental models around important
concepts.
We can see a help
animation/image on the
top for the screen.
The users can relate
these graphics with a
real payment card and fill
up the details without any
confusion even if they
are not familiar with net
banking. Here we are
making things pretty
straight-forward and
easier.
3: User control and freedom
• Users often perform actions by mistake. They need a
clearly marked "emergency exit" to leave the unwanted
action without having to go through an extended process.
• When it's easy for people to back out of a process or undo an
action, it fosters a sense of freedom and confidence. Exits allow
users to remain in control of the system and avoid getting stuck
and feeling frustrated.
Example of Usability
Heuristic #3:
Digital spaces need quick “emergency exits,”
just like physical spaces do.
Tips
•Support Undo and Redo.
•Show a clear way to exit the current
interaction, like a Cancel button.
•Make sure the exit is clearly labeled and
discoverable.
The example shows a
success message popup
for publishing a profile. It is
not just only a success
message popup. The undo
button in that popup helps
the user to go back and set
up the profile again if they
have done that by mistake.
4: Consistency and standards
• Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform
and industry conventions.
• Jakob's Law states that people spend most of their time using
digital products other than yours. Users’ experiences with those
other products set their expectations. Failing to maintain
consistency may increase the users' cognitive load by forcing
them to learn something new.
Example of Usability
Heuristic #4:
Check-in counters are usually located
at the front of hotels. This consistency
meets customers’ expectations.
Tips
•Improve learnability by
maintaining both types of
consistency: internal and external.
•Maintain consistency within a
single product or a family of
products (internal consistency).
•Follow established industry
conventions (external
consistency).
5: Error prevention
• Good error messages are important, but the best designs
carefully prevent problems 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.
• There are two types of errors: slips and mistakes. Slips are
unconscious errors caused by inattention. Mistakes are
conscious errors based on a mismatch between the user’s
mental model and the design.
Example of Usability
Heuristic #5:
Guard rails on curvy mountain roads prevent
drivers from falling off cliffs.
Tips
•Prioritize your effort: Prevent high-cost
errors first, then little frustrations.
•Avoid slips by providing helpful
constraints and good defaults.
•Prevent mistakes by removing memory
burdens, supporting undo, and warning
your users.
The example shows the
password standards which need
to follow while setting up the
password. So she/he can
crosscheck the password with
system standard and complete
the task successfully in their first
attempt itself. Another example
of error prevention can be seen
in outlook. They will notify us if
we forgot to add the attachment.
The system will scan the
message body and remind us
with a message.
6: Recognition rather than recall
• Minimize the user's memory load by making elements,
actions, and options visible. The user should not have to
remember information from one part of the interface to
another. Information required to use the design (e.g. field
labels or menu items) should be visible or easily retrievable
when needed.
• Humans have limited short-term memories. Interfaces that
promote recognition reduce the amount of cognitive effort
required from users.
Example of Usability
Heuristic #6:
It’s easier for most people to recognize the
capitals of countries, instead of having to
remember them. People are more likely to
correctly answer the question Is Lisbon the
capital of Portugal? rather than What’s the
capital of Portugal?
Tips
•Let people recognize information in the
interface, rather than having to remember
(“recall”) it.
•Offer help in context, instead of giving
users a long tutorial to memorize.
•Reduce the information that users have
to remember.
Here, the designer has
kept the recently viewed
item in the home screen
and that will remind the
user about her/his last
searches and items
needed to buy. These
kinds of approaches
would help us to reduce
the use of the user’s
memory.
7: Flexibility and efficiency of use
• Shortcuts — hidden from novice users — may speed up
the interaction for the expert user such that the design can
cater to both inexperienced and experienced users. Allow
users to tailor frequent actions.
• Flexible processes can be carried out in different ways, so that
people can pick whichever method works for them.
Example of Usability
Heuristic #7:
Regular routes are listed on maps, but locals
with more knowledge of the area can take
shortcuts.
Tips
•Provide accelerators like keyboard
shortcuts and touch gestures.
•Provide personalization by tailoring
content and functionality for individual
users.
•Allow for customization, so users can
make selections about how they want the
product to work.
The example shows how to
duplicate an element. A novice
user can go to edit and click
Duplicate. But there is a shortcut
for the experts. They would press
command D and duplicate things
quickly. We can see a lot more
examples in our daily life. When
we are installing software, we
can be seen two options, Default
and advanced installation.
Experts will go with advanced
installation to remove unwanted
services from the software.
8: Aesthetic and minimalist design
• Interfaces should not contain information that is irrelevant
or rarely needed. Every extra unit of information in an
interface competes with the relevant units of information
and diminishes their relative visibility.
• This heuristic doesn't mean you have to use a flat design — it's
about making sure you're keeping the content and visual design
focused on the essentials. Ensure that the visual elements of
the interface support the user's primary goals.
Example of Usability
Heuristic #8:
An ornate teapot may have excessive
decorative elements that can interfere with
usability, like an uncomfortable handle or
hard to wash nozzle.
Tips
•Keep the content and visual design of UI
focused on the essentials.
•Don't let unnecessary elements distract
users from the information they really
need.
•Prioritize the content and features to
support primary goals.
9: Help users recognize, diagnose, and
recover from errors
• Error messages should be expressed in plain language (no
error codes), precisely indicate the problem, and
constructively suggest a solution.
• These error messages should also be presented with visual
treatments that will help users notice and recognize them.
Example of Usability
Heuristic #9:
Wrong way signs on the road remind drivers
that they are heading in the wrong direction
and ask them to stop.
Tips
•Use traditional error message visuals,
like bold, red text.
•Tell users what went wrong in language
they will understand — avoid technical
jargon.
•Offer users a solution, like a shortcut
that can solve the error immediately.
Here in this example, the
moment he/she typed the
full username, the
system shows that there
is no such username.
Now he/she can recheck
the username and if still
the error exists, they can
use the recover link.
Using that link he can
recover or reset the
username.
10: Help and documentation
• It’s best if the system doesn’t need any additional
explanation. However, it may be necessary to provide
documentation to help users understand how to complete
their tasks.
• Help and documentation content should be easy to search and
focused on the user's task. Keep it concise, and list concrete
steps that need to be carried out.
Example of Usability
Heuristic #10:
Information kiosks at airports are easily
recognizable and solve customers’ problems
in context and immediately.
Tips
•Ensure that the help documentation is
easy to search.
•Whenever possible, present the
documentation in context right at the
moment that the user requires it.
•List concrete steps to be carried out.
As shown in the example, we
should categorize different
areas in a proper way so that
the user can pick and correct
area and followed by that find
a solution. Also, we can add a
FAQ section, to see the
possible errors and its
solutions from previous users.
Adding a button to reach out
customer care would be a
very good move since some
users prefer voice call even
before looking at these help
docs.
Usability Heuristics Applied
to Video Games
1.Visibility of system status
• The system should always keep users informed about what is
going on, through appropriate feedback within reasonable time.
• Communicating system status is vital to helping users
determine what to do. In video games, feedback is particularly
important so that players know whether their interaction was
executed.
The Legend of Zelda: Breath of the Wild provided consistent and nearly immediate
feedback for player’s health status via the 3 heart icons displayed in the top left
corner of the screen.
2.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.
• Unfamiliar interface terms often confuse users and make them
second-guess themselves. Users should be able to
successfully navigate your interface without needing to look up
terminology.
PlayerUnknown’s Battleground used real-world
weapon terminology for in-game weapons.
Apex Legends used meaningless, made-up weapon names
rather than mirroring real-world names; this practice
increases cognitive load.
3.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.
• Chess, an iOS mobile game, allows users to undo their last
move. This functionality enables them to correct a misplaced
piece (perhaps due to a slip of the finger) or revise their strategy
as an afterthought. Not only is this functionality available, it is
prominently placed at the top right-hand corner of the screen,
so it is discoverable to users (unlike the hidden gesture of
shaking the device to undo, which is present in several mobile
apps).
The Chess iOS game gave users the control
and freedom to undo their last move.
4.Consistency and standards
• Users should not have to wonder whether different words, situations,
or actions mean the same thing. Follow platform conventions.
• No matter the console, users typically have expectations of what
buttons do based on their prior experience playing other games.
Years and years of game design have resulted in design standards,
just like we see on websites and in apps.
• Xbox gamers commonly assume that clicking the “A” button causes
your player to jump because a myriad of games like Apex
Legends, PlayerUnknown’s Battlegrounds (PUBG), Fortnite, Star
Wars Battlefront, and Lego Jurassic World follow this standard.
Apex Legends Xbox controller layout showed
the usage of the “A” button to jump
• In contrast, the original Mirror’s Edge game did not follow this
design standard and instead assigned the jump action to “LB”
(i.e. left bumper). The placement of “LB” on the controller is the
top left whereas the “A” button, commonly associated with the
jump action, is middle right – a major change in placement.
• When controls are not used in standard ways, players must
spend time and effort to (1) learn how to perform each action;
and (2) actively stop themselves from making the mistake of
pressing the wrong button out of habit.
Mirror’s Edge Xbox 360 controller layout showed that
the A button was used to Interact, rather than for the usual
jump function.
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.
• Gamers, just like interface users, can get distracted and make
errors. As designers, we must help players prevent unconscious
errors.
Super Smash Bros on Nintendo Switch provided a
confirmation dialog before users quit a game.
• Confirmation dialogs, like the one
in Super Smash Bros. on Nintendo
Switch, prevent users from
accidental destruction. This
confirmation is particularly
important for irreversible actions.
Before leaving an in-progress
game, Super Smash Bros. prompts
users to confirm that they want to
leave the game and didn’t merely
press the wrong button. (Note:
even though confirmation dialogs
can be effective, don’t over-use
them because users might get
used to agreeing to everything in
order to surpass them.)
6.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.
• Console games are often highly complex, with many context-
dependent controls. In Red Dead Redemption 2 (RDR2), a western-
style action/adventure game, players rely on horses to get around.
(Note: users must find a horse or whistle to call their personal horse,
as users aren’t always riding a horse in the game.) However, the
only time players need to know how to interact with a horse is when
they’re near one. RDR2 does a good job of minimizing the
player’s cognitive load by presenting context-relevant controls (in this
case, the controls for interacting with a horse, such as viewing its
cargo) in the lower right area of the screen.
Contextual game controls are displayed directly on the
screen in Red Dead Redemption 2 so that users don’t
have to recall controls from memory.
7.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.
• The power law of learning says that the time it takes to perform a
task decreases with the number of repetitions of that task. In video
games, unlike website usage, users don’t want things to be too easy
— or else it isn’t fun! When gaming, we like a bit of competition; we
don’t want an easy win. Therefore, games must build in features to
cater to both novice and experienced users. However, users who
have been playing a game for a while want to find secret shortcuts or
accelerators that new users likely don’t know about.
• For instance, players of Counter Strike: Global
Offense (CS:GO) on PC can use hotkeys provided by the game
to speed up interactions like switching weapons. Savvy players
can also bind commands, thereby setting up controls exactly
how they like them. This functionality makes it possible for
users to create a setup that matches their playstyle, ending with
a more comfortable and often more skilled experience.
• CS:GO has predefined hotkeys that
expert users can use to speed up
interactions like switching
weapons, but users can also bind
their own keyboard commands for
a customized experience. Note:
there’s no onscreen feedback when
a player uses a hotkey (for
accelerators, it’s OK to omit visual
feedback because they’re intended
for expert users). Therefore, this
screenshot does not highlight a
specific feature but rather provides
a visual point of reference for those
unfamiliar with the game.
8.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.
• Video games, like interfaces, can house many different activities
and presenting information about all of them can easily become
overwhelming. Designers should take advantage
of progressive disclosure and only display information that is
relevant to the task at hand. Even then, in cases where there
might be an excess of relevant information, we need to curate
the material we share so that users don’t become overwhelmed
with data that is rarely needed.
• In Mario Kart 8 Deluxe for Nintendo Switch, the play screen is
overlaid by relevant game information positioned to the corners
of the viewport. For instance, in the bottom right corner of the
screen there is a prominent display of what place in the race
you are (in the screenshot below, I’m in second place) as well
as a map of the track with the placement of the other drivers’
icons. The layout and display of this data is visually appealing
and quick to interpret. Mario Kart’s usage of minimalist yet
informative game-play screens ensures that players can stay
focused on driving while using the overlaid information to
supplement and enhance their experience.
Mario Kart 8 Deluxe presented a minimalist yet
aesthetically pleasing game play screen with pertinent
information.
9. 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.
• Effective error messages need to clearly communicate the error,
reduce the amount of work users must do to solve the problem,
and educate users along the way. These principles are true of
interfaces and games alike.
• Subway Surfers, an endless-runner mobile game, does a nice job
crafting error messages. After users lose mid-game, they’re
prompted with a dialog that reads, Save me! (Which would not be a
good dialog prompt in a productivity app, but is acceptable in the
playful context of a game.) To continue the game from the point at
which they lost, users can either watch an advertisement or use
game Keys (a type of game currency). If the user attempts to
use Keys but does not have enough, an error message
appears. The error message uses simple language to diagnose the
problem (Not enough keys!), states how many Keys are needed, and
provides a clear call-to-action: buy Keys. However, an even better
design approach would be to avoid this problem altogether by
disabling the option to use Keys (while still promoting the purchase
of Keys) if the user does not have enough.
The Subway Surfers mobile game provided an
informative error message when a user tried to engage
in an action that could not be completed.
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.
• In games with complex interactions or with a high volume of
interactions, it’s not rare for a user to forget how to do
something. Cases such as these require accessible
documentation, so that players can figure out what they’re trying
to do and get back to playing the game.
• PlayerUnknown’s Battleground Mobile (PUBG Mobile) on iOS
keeps Help documentation accessible and visible in the top right
corner of the game homepage. However, simply having
a Help section doesn’t make finding what you need any easier; it’s
also important that the help content is clear and organized in a
thoughtful manner. PUBG Mobile did a nice job of organizing
the Help content and the app even allowed users to search
the Help documentation by describing their problem. On the
main Help page, content was grouped (presumably) by frequency of
use; there is even a Hot Topics section with the most accessed
content. Additionally, the content structure is thoughtfully organized
with numbered steps, action-oriented phrases, and parallel
hierarchy. (Though, it would be nice if there was a secondary header
along with the white space used to separate answer sections).
PlayerUnknown’s Battlegrounds Mobile kept Help documentation
accessible, organized, and succinct.
References:
• https://www.nngroup.com/articles/ten-usability-heuristics/
• https://www.nngroup.com/articles/usability-heuristics-applied-video-
games/
• https://www.nngroup.com/articles/usability-heuristics-complex-
applications/
• https://uxdesign.cc/user-experience-is-one-of-the-hottest-topics-in-day-
today-designers-life-fb314978e1ff
• Lecture 4.5 Watch Two Students Do Heuristic Evaluation -
https://www.youtube.com/watch?v=VrzwjCntPfk
• 10 Usability Heuristics (UX) | Who, When and How to conduct it -
https://www.youtube.com/watch?v=MkyI0gmwfUY