Human Computer

Interaction (HCI)
Usable User interfaces

Mah Noor Fatima

CS Lecturer
CUI Sahiwal Campus
What is Usability?

2
 Characteristics of Usable product

1) Effectiveness: Effectiveness is about whether users

can complete their goals with a high degree of
accuracy.
Much of the effectiveness of a product comes from the
support provided to users when they work with the
product.

For example, fixing a credit card field so that it only

accepts a valid credit card number entry can reduce data
entry errors and help users perform their task correctly.
 Characteristics of Usable products

2) Efficiency: Efficiency is all about speed. How fast

can the user get the job done?

You need to examine the number of steps (or indeed

clicks/keystrokes) to achieving the objective or you
need to record the time.
Characteristics of Usable product

3) Satisfaction: Freedom from discomfort and positive

attitudes towards the use of the product.

-Satisfaction in usability refers to the user's subjective feeling

of contentment, pleasure, or fulfillment when interacting
with a product, system, or interface. It encompasses the
overall positive experience that users derive from using a
product or completing a task within a system.
Key factors that contribute to satisfaction in usability
include:
• Ease of Use
Users should find the product or system easy to navigate, understand, and
interact with
• Usefulness
The product or system should fulfill users' needs and provide value in
accomplishing their goals or tasks.
• Efficiency
Users should be able to accomplish tasks quickly and with minimal effort.
• Error Tolerance
The product or system should be forgiving of user errors and provide clear
feedback and guidance to help users recover from mistakes. Users are more
likely to feel satisfied if they can easily correct errors and continue their tasks
without frustration.
• Aesthetics
The visual design of the product or system plays a significant role in user
satisfaction. A visually appealing interface that employs pleasing colors,
typography, and layout contributes to a positive user experience.
Nielsen and Molich's 10 User Interface Design
Guidelines
 Nielsen and Molich's 10 User Interface
Design Guidelines

• Jakob Nielsen, a renowned web usability consultant

and partner in the Nielsen Norman Group, and Rolf
Molich, another prominent usability expert,
established a list of ten user interface design guidelines
in the 1990.
• These heuristics have been used in many of the
products designed by some of the most successful
companies in the world such as Apple, Google, and
Adobe.
Nielsen and Molich's 10 User Interface Design
Guidelines

1) Visibility of system status:

The system should always keep users informed
about what is going on, through appropriate
feedback within reasonable time.
Importance
• When users know the current
system status, they learn the
outcome of their prior interactions
and determine next steps.
• Predictable interactions create
trust in the product as well as the
brand. A lack of information
often equates to a lack of
control.

For example, your phone or laptop display how much battery life remains; your
email application tells you how many unread emails you have; a sign in the subway
indicates the next stop (or, if you’ve missed the last one, how many minutes until
the next train arrives at the station) Imagine the life without these
Example
• An example of an interface that effectively utilizes the principle of
"Visibility of System Status" is the file download interface in web
browsers.
• When users initiate a file download, the browser typically
provides immediate feedback to indicate the status of the
download process.
Here's how this interface example aligns with the principle:
• Download Progress Indicator
• Download Speed and Time Remaining
• Download Confirmation
• Error Messages
Nielsen and Molich's 10 User Interface
Design Guidelines

2) Match between system and 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.
Importance
• 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 an interface that effectively employs the principle of "Match
Between System and the Real World" is the interface of a navigation app
such as Google Maps

• Map Representation: Navigation apps display maps that closely

resemble real-world geographic features, including roads,
landmarks, and points of interest.
• Symbols and Icons: The apps use familiar symbols and icons to
represent various elements on the map, such as roads,
intersections, traffic lights, and destinations. These symbols are
consistent with real-world signage and conventions, making them
easy for users to understand and navigate.
• Directional Instructions: Navigation apps provide users with
turn-by-turn directions and guidance to help them reach their
destinations. The instructions are presented in a language and
format that matches real-world driving or walking directions,
such as "turn left at the next intersection" or "continue straight for
500 meters.“
• Voice Guidance: Many navigation apps offer voice-guided
navigation, where users receive spoken instructions and prompts
as they navigate their routes. The voice instructions mimic the
way a passenger or navigator would provide directions in real-
world situations, enhancing the naturalness and familiarity of the
experience.
Nielsen and Molich's 10 User Interface Design
Guidelines…

3) User control and freedom: Users often perform

actions by mistake. Support undo and redo, as well
as clear exit strategies, to allow users to easily recover
from errors.
 Nielsen and Molich's 10 User Interface Design
Guidelines…

Example: In Photoshop when user makes changes to an

image or adds various artistic effects, they are able to quickly
and easily take a step backwards if they make an error.
Importance
• 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

• Support Undo and Redo.

• Show a clear way to exit the
current interaction, like a Cancel
button.
Let's apply the "User Control and Freedom" heuristic to
WhatsApp.
• Message Deletion
• Privacy Settings
• Mute and Archive Chats
• Message Reply and Forwarding
• Account Settings
Nielsen and Molich's 10 User Interface Design
Guidelines…

4) Consistency and standards: Consistency

ensures that similar elements behave in similar ways
throughout the interface. This includes consistent
use of terminology, layout, colors, fonts, and
navigation patterns.
Standards refer to established conventions or best
practices within the industry. Standards can
encompass various aspects of design, such as button
placement, menu structures, form layouts, and
interaction patterns.
Benefits of consistency and standards:

1) Reduce learning: Users can quickly learn how to navigate an

interface if it follows familiar standards and maintains
consistency in its design elements.
2) Eliminate confusion: Consistent design patterns and
adherence to standards allow users to focus on their tasks
without having to learn new ways of interacting with each
element.
Consistency and standards
Consistency and standards
Consistency and standards
 Nielsen and Molich's 10 User Interface Design
Guidelines…

5) Error prevention: aimed at minimizing the occurrence of

mistakes and providing users with mechanisms to recover
from errors when they do occur. These principles help ensure
a smoother and more error-tolerant user experience
For example in case of closing unsaved document
Slips are unconscious errors caused by inattention
Slips occur when users perform an action incorrectly despite knowing the
correct action to take.
• Pressing the wrong key on a keyboard while typing quickly.
• Forgetting to attach a file to an email despite intending to do so.
Mistakes: Mistakes are errors that occur when users take an incorrect
action due to a misunderstanding or misinterpretation of the system or its
interface. Mistakes can result from factors such as ambiguous design, lack
of feedback, inadequate user training.
• Entering alphabetic characters in a field that requires numerical input.
• Misinterpreting an icon's meaning due to unfamiliarity with its symbolic
representation.
Nielsen and Molich's 10 User Interface Design
Guidelines…

Google search helps users by offering suggestions

based on their input. As you can see, even though the
user spelled design incorrectly the suggestions
provide them with a means of instantly correcting
their mistake, by selecting one of the options below.
 Nielsen and Molich's 10 User Interface Design
Guidelines…

• To prevent users from making errors, Photoshop

provides a brief description or label of the tools
when a user floats over it to help make sure users
are using the proper tool for the task at hand.
Nielsen and Molich's 10 User Interface Design
Guidelines…
 Nielsen and Molich's 10 User Interface Design
Guidelines…

6) Recognition rather than recall:

This principle highlights the importance of
designing interfaces in a way that minimizes the
cognitive load on users by presenting information
and options in a manner that is easy to recognize
and understand, without requiring users to recall
specific details from memory.
• How does the principle of 'Recognition rather than recall'
contribute to the usability of user interfaces, and what are some
strategies that designers can employ to adhere to this principle
effectively? Provide examples of interfaces that successfully
implement this principle and discuss how they enhance user
experience compared to interfaces that rely heavily on recall?
Importance
• Interfaces that promote recognition reduce the amount of
cognitive effort required from users.

• For example, 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?
 Nielsen and Molich's 10 User Interface Design
Guidelines…

7) Flexibility and efficiency of use:

Flexibility: Think of flexibility like a tool belt. Everyone has
different tools they like to use depending on the job they're
doing. In interface design, flexibility means giving users
options to customize their experience. For example, just like
you might adjust the seat in a car to fit your height, flexible
interfaces let users change things like font size, color
schemes, or even where buttons are placed. This makes the
interface more comfortable and easier to use for different
people.
• Efficiency of Use: Efficiency is like taking a shortcut to get where
you want to go faster. In interface design, efficiency of use means
making it quicker and easier for users to do things they need to
do. For example, imagine you're texting on your phone and you
want to type "hello." Instead of tapping each letter individually,
you might use predictive text that guesses the word after just a few
taps. That's efficiency! Efficient interfaces have features like
shortcuts or quick access buttons that help users do things faster
and with less effort.
Flexibility and efficiency of use:
• flexibility is about making the interface adaptable to different
users, like adjusting a tool belt, while efficiency of use is about
making it quick and easy to get things done, like finding a
shortcut to your destination
 Nielsen and Molich's 10 User Interface Design
Guidelines…
• 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.
 Nielsen and Molich's 10 User Interface Design
Guidelines…
Provide accelerators like keyboard shortcuts and touch gestures.
 Nielsen and Molich's 10 User Interface Design
Guidelines…

8) 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.
Nielsen and Molich's 10 User Interface Design
Guidelines…

• Help
 Nielsen and Molich's 10 User Interface Design
Guidelines…

9) Aesthetic and minimalist design: Dialogues

should not contain information which is irrelevant
or rarely.
Nielsen and Molich's 10 User Interface Design
Guidelines…
 Nielsen and Molich's 10 User Interface Design
Guidelines…

10) Help users recognize, diagnose, and recover

from errors: Error message should be expressed in
plain language (no codes), precisely indicate the
problem, and constructively suggest a solution.
Nielsen and Molich's 10 User Interface Design
Guidelines…
Evaluating UIs’ for Nielsen and Molich's Design
Guidelines…