Evaluation Usability of

Interaction System

1
Usability Evaluation
• Focuses on how well users can learn and use a
product to achieve their goals. It also refers to
how satisfied users are with that process.
• The goals of usability testing usually include:

2
Definition of Usability

3
Usability’s 5 quality components
• Learnability: How easy is it for users to accomplish
basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how
quickly can they perform tasks?
• Memorability: When users return to the design after a
period of not using it, how easily can they reestablish
proficiency?
• Errors: How many errors do users make, how severe
are these errors, and how easily can they recover from
the errors?
• Satisfaction: How pleasant is it to use the design?

4
Usability Evaluation Methods
• Usability Inspection Methods
– Heuristic Evaluation
– Cognitive Walkthrough
– Metaphors of Human Thinking (MOT)
– Persona Based Inspection
• Usability Testing with Users

5
Heuristic evaluation
• A widely used usability evaluation method that
allows finding potential problems in a user
interface
• Involves having a small set of evaluators
(usability experts) examine the interface and
judge its compliance with recognized usability
principles (the "heuristics").
• The analysis results in a list of potential
usability issues rated according to their
severity, including possible suggestions of how
to fix them

6
Heuristic evaluation
Several issues must be carefully considered when
applying this method :
• What heuristic set to use;
• How well does it represent the relevant aspects
of the type of user interface under evaluation;
• How to train evaluators to use correctly the set
of heuristics;
• If they will be able to use it effectively to find
problems;
• And how many evaluators should be involved.

7
10 Usability Heuristics for User
Interface Design
• Jakob Nielsen's 10 general principles for
interaction design. They are called "heuristics"
because they are broad rules of thumb and not
specific usability guidelines

8
10 Usability Heuristics by Nielsen
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

9
1. Visibility of system status
The design should always keep users informed
about what is going on, through appropriate
feedback within a reasonable amount of time.
• 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.
10
 Appropriate Feedback
Whenever users interact with a system, they need
to know whether the interaction was successful
Examples

Changing the color and adding a checkmark to Progress indicators reassure the user that
buttons on a selection screen communicates that a longer wait is normal, and that the
the system has registered the user’s choices system is still working 11
Examples

Visual feedback for data loading

12
Compel Users to Action
• Modern systems are often complex, and it is
unreasonable to assume that all the variables
that describe the state of a system can be
communicated to the user. Yet, occasionally
backstage aspects can actually play an
important role frontstage.

13
Examples

The J.Crew site displays a notification that there are “Only a Few Left!” when the
user moves the mouse over low-stock sizes of a product.
Some sizes are already sold out, and thus shown crossed out in light gray
14
Examples

NatureBox.com: A banner across the top of the page communicates how much
more money the user needs to spend to qualify for free shipping.
15
Communication Creates Trust
• When we understand the system’s state, we feel
in control
• The predictability of the interaction creates trust
in the mechanics of the app, and also in
the brand itself
• Sites and apps should clearly communicate to
users what the system’s state is
• A better way to build trust is to explicitly
communicate the current system’s status

16
Examples

Loft.com continues to display out-of-stock items in wish lists, with appropriate

messaging to communicate the status of the item to the user.
17
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.
• Terms, concepts, icons, and images must be
familiar 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.

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

19
Familiar Language

BlueCross BlueShield of North Carolina provides clear answers to questions,

uses familiar language, and includes references that are easy to understand.
20
 Leverage Familiarity with Real-
World Objects and Activities

Using real life metaphor in application

UI elements in a compass app

(left) are similar to a compass in
iBooks iPad application using the metaphor the real-world (right)
of wooden book shelf 21
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.
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.
22
Go back to the previous state
There are several UI controls that allow people
to go back to the previous state of the system:
• A Back link which returns users to a previous
page or screen
• A Cancel link which allows the user to quit a task
or multi-step process
• A Close link which allows users to close a new
view
• An Undo option (and a corresponding redo
option) to allow users to backtrack on a change
to a UI element
23
Allow Users to Easily Cancel an
Action

When users begin to compose a tweet, they

can easily cancel the task by selecting
Cancel at the top left of the screen.
Upon doing so, Twitter presents the user
with the option to delete the message or
save a draft

24
Support Undo Examples

Gmail’s flash message with undo action

when we accidentally delete an email

Facebook checking on me if
I tapped “Cancel” by mistake
25
Support Undo Examples

On an ecommerce site, a user can undo adding an item to the basket, by

selecting Remove

26
 Support Undo Examples

When changing notification settings, a user can undo a

change by using the toggles and checkboxes.

27
4. Consistency and Standards
Users should not have to wonder whether
different words, situations, or actions mean the
same thing. Follow platform conventions.
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).

28
Internal Consistency
• Most application suites will list menu
components in the same order (File, Edit, View,
and so on) or will use consistent icons for the
same functions across applications and familiar
layouts for dialog boxes and modals

The many layers of consistency within Microsoft Office

29
 Examples

Each component of Atlassian’s family of products is listed in the left-hand navigation,

along with examples, code snippets, and usage guidelines. These guidelines ensure
that new features will work in a similar way to existing features.
30
Examples

Google’s previous version of the Mail, Calendar, and Drive icons (top) had a
consistent visual style, but have recently been updated (bottom) to use the
same colors across several applications

31
 External Consistency
• refers to established conventions in an industry
beyond one application or family of applications.
Example:

Ecommerce utility navigation: Despite the different industries represented in the

screenshots above (IKEA, Target, Etsy, and Grainger), these ecommerce websites
adhere to the same standards for utility navigation. A prominent search bar, easy
account access, and a clear shopping cart are all displayed in a similar way.
32
Layers of Consistency
• Visual
– The symbols, iconography, and imagery used should be
consistent across the site.
• Page and Button Layout
– There are similarities components that will remain
consistent across pages.
• User-Entered Data
– to input information such as dates, phone numbers, use
the industry standards rather than reinventing the wheel
• Content
– When users interact with content on your various
channels, they should expect a clear and familiar
experience
33
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.

34
Error Prevention 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.

35
Examples

36
Include Helpful Constraints Example

Southwest’s calendar widget for picking flight dates uses helpful constraints to
prevent users from accidentally setting a nonsensical date range

37
Offer Suggestions Example

Amazon’s clickable search suggestions enable users to type less

38
Choose Good Defaults Example

Google’s Inbox app for iOS allows you to

“snooze” an email until a later time. The
default options are sensible and prevent
typing errors for common choices.

39
 Use Forgiving Formatting Example

Uber.com automatically displays the phone number in the desired format as users
type, so that they can more easily scan their work to confirm that it’s correct.

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

41
Tips
• Let people recognize information in the
interface, rather than forcing them 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.

42
Example

43
History and Previously Visited
Content Example

Bing has a link to the user’s search history. The link helps users remember
44
previous searches.
History and Previously Visited
Content Example

When a user goes back to Amazon.com, the personalized homepage includes a

list of recently viewed items.

45
7: Flexibility and efficiency of use
Shortcuts — hidden from novice users — may
speed up the interaction for the expert user so
that the design can cater to both inexperienced
and experienced users. Allow users to tailor
frequent actions.

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

47
Enable Autofill Example

48
Accelerators Improve Repetitious
Usage Example

The iOS keyboard allows swiping

through the letters of a word instead of
tapping them individually. This gesture
is an accelerator: it helps experienced
users but does not make typing harder
to learn for novices.

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

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

51
Example

52
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.
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.
53
Visibility Guidelines Example

Amazon utilizes several techniques to indicate an error: border

highlighting, iconography, and red text.
54
Example

Kohl’s uses a message without conventional red formatting to notify users

about potential shipping delays.
55
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.
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.

56
Example

Context Help

57
Eight Golden Rules
of Interface Design

58
Eight Golden Rules of Interface Design
by Shneiderman & Plaisant, 2005
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialog to yield closure
5. Offer simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load

59