psychology of usable

things
affordance
 Affordance: The qualities of an object that
suggest how it should be used.
 Perceived affordance: What the user
believes the object can do based on its design.
 Example: A door handle that looks like it
should be pulled conveys an affordance,
helping users instinctively know how to
interact with it.
 Design Principle: Design elements should
suggest their usage without requiring
explanations.

10/27/2024 • 2
 Physical Button on a Device:
 Real Affordance:
The button can be physically pressed because it is
designed to register clicks.
 Perceived Affordance:
The user sees the button sticking out and believes
it can be pressed, even without trying it.
 Explanation: When the user’s perception matches
the real affordance, it results in a smooth
interaction. But if the button is purely decorative
(no function), the perceived affordance would be
incorrect.

10/27/2024 • 3
Feedback
 Users need immediate feedback on their
actions to know if they were successful or
not.
 Example: A button changes color or makes

a sound when clicked, confirming the

action.
 Design Principle: Provide clear, timely

feedback to keep users informed about

system status.

10/27/2024 • 4
Mapping
 It is the relation between moving a control
and the results in the real world.
 And you want to do and what is perceived
possible.
 Example:
An example of poor Mapping is presented
in the picture below, where initially a left
switch controlled a lamp to the right, and
the right switch controlled a lamp to the
left,,,

10/27/2024 • 5
10/27/2024 • 6
 The more intuitive the mapping, the easier
it is for users to learn.
 Example: In a car, turning the steering

wheel left makes the car turn left. This is

natural mapping.
 Design Principle: Design controls that

correspond naturally to their functions.

10/27/2024 • 7
Casuality
 Causality in design refers to the cause-and-
effect relationship users perceive between
their actions and the system’s response. In
HCI and usability, causality is crucial
because users need to feel that their
actions directly lead to expected outcomes
—this fosters a sense of control and trust.

10/27/2024 • 8
 If users don't see an immediate and clear
connection between their actions and the
outcome, they may become confused or
frustrated.
 Proper design ensures that the cause (user

input) and effect (system output) are

visible, predictable, and aligned.

10/27/2024 • 9
Example of casuality
 Mobile App Example
 When you tap the "Send" button in a chat app, a
checkmark appears beside the message,
indicating that it has been sent.
 Good Causality: User taps "Send" → Message
appears instantly with feedback (e.g., checkmark
or timestamp) → User knows their action caused
the message to send.
 Poor Causality: If tapping "Send" has a delayed
response or no visual feedback, users might think
the system didn’t work and could press it again,
sending duplicate messages.

10/27/2024 •1
0
Constraints
 Constraints are physical and logical
limitations on possibilities.

10/27/2024 •1
1
 Constraints guide users by limiting the
possible actions they can take, preventing
errors.
 Example: A gray "Submit" button that

becomes clickable only after required fields

are filled.
 Design Principle: Use constraints to help

users complete tasks correctly and

efficiently.

10/27/2024 •1
2
Conclusion
 An interface for the system should be
designed in a way that it should be
understandable properly defined and it
should provide ease for using the things.

10/27/2024 •1
3
Evaluation
 Nowadays users expect much more than just a
usable system; they also look for a pleasing
and engaging experience. This means it is even
more important to carry out an evaluation.
 Imagine you have designed an app for teenagers
to share music, gossip, and photos. You have
prototyped your first design and implemented
the core functionality. How would you find out
whether it would appeal to them and if they will
use it? You could need to evaluate it – but how?
Evaluation
 In our human-centred approach to design,
we evaluate designs right from the
sketches and then as the project
progresses we keep improving our
prototypes and evaluate those.
Evaluation
Types of Evaluation
 Basically two types evaluation:
◦ Formative Evaluation
◦ Summative Evaluation
Formative Evaluation
 Formative evaluations involve evaluating
a product or service during development.
The goal is to make improvements in the
design prior to
release. This means identifying or
diagnosing the problems, making and
implementing recommendations, and then
evaluating again. Formative usability is
always done before the design has been
finalized. In fact, the earlier the formative
evaluation, the more impact the usability
evaluations will have on the design.
Formative Evaluation
 Here are a few key questions you will be
able answer with a formative approach:
• What are the most significant usability
issues preventing users from accomplishing
their goals or resulting in inefficiencies?
• What aspects of the product work well for
the users? What do users find frustrating?
• What are the most common errors or
mistakes users are making?
Formative Evaluation
• Are improvements being made from one
design iteration to the next?
• What usability issues can you expect to
remain after the product is launched?
Summative Evaluation
 Summative usability is about evaluating
the dish after it comes out of the oven.
The usability specialist running a
summative test is like a food critic who
evaluates a few sample dishes at a
restaurant or perhaps compares the same
meal in multiple restaurants. The goal of
summative usability is to evaluate how
well a product or piece of functionality
meets its objectives. Summative testing
can also be about comparing several
products to each other.
Summative Evaluation
Summative usability evaluations answer
these questions:
• What is the overall usability of our
product?
• How does our product compare against
the competition?
• Have we made improvements from one
product release to the next?
. Summative testing can also be about
comparing several products to each other.
Usability Evaluation
Methods
 Two main types
◦ Expert Evaluation
 Heuristic Evaluation
 Cognitive Walkthroughs
◦ User Testing
Expert Evaluation

 A simple, relatively quick and effective

method of evaluation is to get an
interaction design, or usability, expert to
look at the system and try using it
 this is no substitute for getting real

people to use your design

 expert evaluation is effective, particularly

early in the design process.

 Heuristic Evaluation
Jakob Nielsen

A heuristic is a guideline or general

principle or rule of thumb that can
guide a design
decision or be used to critique a
decision that has already been made.
Heuristic Evaluation

 How does it work?

◦ Evaluators use a checklist of basic usability
heuristics
◦ Evaluators go through an interface twice
 1st pass get a feel for the flow and general
scope
 2nd pass refer to checklist of usability
heuristics and focus on individual
elements
◦ The findings of evaluators are combined
and assessed
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

1.Visibility of system 5.Recognition not recall

status 6.Flexibility and
efficiency
2.Match between 7.Aesthetic and
system and the real minimalist design
world 8. Help users diagnose
3.User control and and recover from errors
freedom 9.Help and
Consistency documentation
4.Error prevention 10. consistency and
Standards
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• Visibility of system
status
Example: A loading
The system should spinner when a
always keep users webpage is fetching
informed about what is data.
happening, with
feedback within a
reasonable times
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• Match between
system and the real Example: A trash bin
world icon for deleting files.
The design should use
language and concepts
familiar to the user.
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• User control and • consistency and

freedom Standards.
Consistency The interface should
• Users should easily maintain consistency in
undo/redo actions or terms of design,
leave unwanted states. terminology, and
actions.
• Example: An "Undo"
button after deleting Example: Using a floppy
an email. disk icon universally for
the "Save" function.
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• Error prevention • Recognition Rather

Than Recall
The system should try
to prevent errors before Options should be
they occur. visible or easily
retrievable instead of
Example: A requiring users to
confirmation dialog remember information.
before permanently
deleting files. Example: Auto-complete
suggestions when
typing in search fields.
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• Flexibility and
efficiency • Aesthetic and
minimalist design
The interface should
cater to both novice and • interfaces should not
expert users by contain irrelevant
providing shortcuts for information that could
frequent actions. distract users.
Example: Keyboard • Example: A clean
shortcuts for advanced webpage design with
users (e.g., Ctrl + C to only essential features
copy).
 Nielsen: 10 Usability Heuristics
(based on extensive empirical testing)

• Help users diagnose • Help and

and recover from documentation
errors There should be easy-
Error messages should to-find help or
be clear and suggest documentation
solutions. available.
• Example: "Incorrect Example: A "Help"
password. Try again section on a website
or reset your with FAQs and tutorials.
password."
Heuristic Evaluation

 One expert won’t

do
 Need 3 - 5

evaluators
 Exact number

needed depends
on cost-benefit
analysis
Heuristic Evaluation

 The evaluator also assesses the severity

of each usability problem, based on four
factors: how common is the problem, how
easy is it for the user to overcome, will it
be a one-off problem or a persistent one,
and how seriously will the problem be
perceived? These can be combined
 into an overall severity rating on a scale
of 0–4:
Heuristic Evaluation

 0 = I don’t agree that this is a usability

problem at all
 1 = Cosmetic problem only: need not be
fixed unless extra time is available on
project
 2 = Minor usability problem: fixing this
should be given low priority
 3 = Major usability problem: important
to fix, so should be given high priority
 4 = Usability catastrophe: imperative to
fix this before product can be released
(Nielsen)
Heuristic Evaluation

 How does H.E. differ from User Testing?

◦ Evaluators have checklists
◦ Evaluators are not the target users
◦ Evaluators decide on their own how they
want to proceed
◦ Observer can answer evaluators’
questions about the domain or give hints
for using the interface
◦ Evaluators say what they didn’t like and
why; observer doesn’t interpret
evaluators’ actions
Heuristic Evaluation

 What are the shortcomings of H.E.?

◦ Identifies usability problems without
indicating how they are to be fixed.
Example
A few problems with the
Interface
 Red is used both for help messages and
for error messages (consistency, match
real world)
 “There is a problem with your order”, but

no explanation or suggestions for

resolution (error reporting)
Continued….
 No “Continue shopping" button (user
control & freedom)
 Recalculate is very close to Clear Cart

(error prevention)
 “Check Out” button doesn’t look like

other buttons (consistency, both internal

& external)
 Must recall and type in cart title to load

(recognition not recall, error prevention,

efficiency)
 Cognitive
Walkthrough
Cognitive Walkthrough
 The cognitive walkthrough was originally
designed as a tool to evaluate walk-up-and-
use systems like postal kiosks, automated
teller machines (ATMs), and interactive
exhibits in museums where users would
have little or no training. However, the
cognitive walkthrough has been employed
successfully with more complex systems
like CAD software and software
development tools to understand the first
experience of new users.
Cognitive Walkthrough
 The cognitive walkthrough is a usability
evaluation method in which one or more
evaluators work through a series of tasks and
ask a set of questions from the perspective of
the user.
 Inputs:

◦ Prototype
◦ Task
◦ Sequence of actions to do the task in the
prototype
◦ User analysis
Cognitive Walkthrough
 For each action the evaluation asks the
following questions:
 What is the user goal and why?

Is the action obviously available?

Does the action or label match the goal?
 Is there good feedback?
User Evaluations
User testing
 Expert evaluation is useful but there is no
comparison to using the actual users for
evaluation.
 There are many different types of user

evaluations for example

◦ Formative Evaluation
◦ Field Study
◦ Controlled Experiments
Usability Testing
 Usability testing involves collecting of
data using a combination of methods in a
controlled setting, for example,
experiments that follow basic
experimental design, observation,
interviews, and questionnaires. Often,
usability testing is conducted in labs,
although increasingly interviews and
other forms of data collection are being
done remotely via phone and digital
communication (for instance, through
Skype or Zoom) or in natural settings.
Usability Testing
 The primary goal of usability testing is to
determine whether an interface is usable
by the intended user population to carry
out the tasks for which it was designed.
This involves investigating
how typical users perform on typical
tasks. By typical, we mean the users for
whom the system
is designed (for example, teenagers,
adults, and so on) and the activities that it
is designed for
them to be able to do (such as, purchasing
Usability Testing
 As users perform the tasks, they may be
recorded on video. Their interactions with
the software may also be recorded,
usually by logging software. User
satisfaction questionnaires and interviews
can also be used to elicit users’ opinions
about how
they liked the experience of using the
system.
Usability Testing
Usability Testing