USER EXPERIENCE

DESIGN
WHICH IS
MORE
OBVIOUS?
2004
2007
2008
2009
2010
 Even simple decisions require
thought and are influenced by
experience
Is UI design
easy or hard? Al Gore – George Bush election
Does it really determined by UI design.

matter?
It is easy to blame the user.
Same or different?

A A
A A
A A
A a
A B
Even simple decisions require
thought and depend on context
Florida Butteryfly Ballot

Did the user (voter) see the arrow?

How do you know?
• 19,120 ballots in West Palm
Beach were disqualified/nullified
• because of double voting.
• Margin of victory was 512 votes.
Sample Ballot
◦Sample ballot looks easier when the
holes are
◦missing.
◦Presidential page is different from all
other
◦ballots.
LINEAR
VISUAL
SEARCH
NUMERIC
MAPPING
http://danbricklin.com/log/ballotusability.htm
Today’s theme (restated)
◦ Expectations influence perceptions (aka “It’s obvious”)
◦ The Cow example shows us:
◦ The more you know the less likely you will be able to judge what others may
know.
◦ What you ‘know’ influences what you ‘see’
◦ You can’t judge a user interface by just looking at it.
REMEMBER
THE COW
 Today’s questions

WHAT IS AN WHAT IS A GOOD

INTERFACE? INTERFACE?
PUSH OR
PULL ?
PUSH OR
PULL ?
PUSH OR
PULL ?
 GOOD
AND BAD
DESIGN
◦ There is no such thing
◦ cf. Good furniture arrangement
◦ The test of quality depends on it’s context
◦ How will the software be used? Who will use it? How
long? What is a good
◦ How important is: Learnability? Portability? ...
◦ The answers vary for each application
interface?
◦ Finding the answers is the first step in UI design
◦ Depends on users and tasks. So we must learn a process
for figuring it out.
 WHAT IS
IT?

User experience (UX) design is the process

of enhancing user satisfaction with a product
by creating a usable, accessible, and
pleasurable interaction between product and
its users.
 WHO
DOES IT?

A software engineer designs the user

experience and user interface
assisted by knowledgeable
stakeholders.
 WHY IS IT
IMPORTANT?

If s o ft w a r e i s d i ffi c ul t t o u s e , i f i t fo r c e s yo u i n t o mi s t a k e s ,
o r i f i t f r u s t r a t e s y ou r e ff o r t s t o a c c o m p l i s h y o u r g o a l s , y o u
w o n’t l i k e i t , r e g a r dl e s s of t h e c o m pu t a t i on a l p o w e r i t
e x h i b i t s , t he c on t e n t i t d e l i ve r s , o r t h e f un c t i on a l i t y i t o ffe r s .
T h e u s e r e x p e r i e n c e h a s t o b e ri gh t b e c a u s e i t m o l ds a u s e r ’s
p e r c e p t i o n of t h e s o f t w a re .
WHAT ARE
THE
STEPS?
User interface design begins with the
identification of user, task, and
environmental requirements.
These form the basis for the creation of a
screen layout and navigation pathways
through the information architecture.
 WHAT IS
THE WORK
PRODUCT?

User persona and scenarios are created based on

the desired customer journey.
Low-fidelity prototypes and digital interface
prototypes are developed, evaluated, and
modified in an iterative fashion.
HOW DO I
ENSURE
THAT I’VE
DONE IT
RIGHT?
An interface prototype is “test
driven” by the users, and feedback
from the test drive is used for the
next iterative modification of the
prototype.
 What to design

Need to take into account: Need to optimize the interactions

users have with a product:
Who the users are So that they match the users’ activities and needs
What activities are being carried out
Where interaction is taking place
What is interaction design?
“Designing interactive products to support the way people communicate and
interact in their everyday and working lives.”
Sharp, Rogers, and Preece (2019)

“The design of spaces for human communication and interaction.”

Winograd (1997)
 Goals of interaction design

Develop usable products Involve users in the design process

Usability means easy to learn, effective to use,

and provides an enjoyable experience
 Which kind of design?

Number of other terms used emphasizing what Interaction design is the umbrella term
is being designed, for example: covering all of these aspects:
User interface design, software design, user-centered design, Fundamental to all disciplines, fields, and approaches concerned
product design, web design, experience design (UX) with researching and designing computer-based systems for
people
Interaction design
Relationship between ID, HCI, and other
fields−academic disciplines

Academic disciplines contributing to ID:

◦ Psychology
◦ Social Sciences
◦ Computing Sciences
◦ Engineering
◦ Ergonomics
◦ Informatics
Relationship between ID, HCI and other
fields−design practices

Design practices contributing to ID:

◦ Graphic design
◦ Product design
◦ Artist-design
◦ Industrial design
◦ Film industry
Relationship between ID, HCI and other
fields−interdisciplinary fields

Interdisciplinary fields that ‘do’ interaction design:

◦ HCI
◦ Ubiquitous Computing
◦ Human Factors
◦ Cognitive Engineering
◦ Cognitive Ergonomics
◦ Computer Supported Co-operative Work
◦ Information Systems
 Working in multidisciplinary teams

Different perspectives
Many people from
and ways of seeing
different backgrounds Benefits Disadvantages
and talking about
involved
things

Difficult to
More ideas and communicate and
designs generated progress forward the
designs being create
Large number of ID consultancies. Examples of well
known ones include:

◦ Nielsen Norman Group: “help companies enter the age of

the consumer, designing human-centered products and
services” Interaction
design in
◦ Cooper: “From research and product to goal-related
design” business
◦ IDEO: “creates products, services and environments for
companies pioneering new ways to provide value to their
customers”
The user experience
How a product behaves and is used by people in the real world
◦ The way people feel about it and their pleasure and satisfaction when using it,
looking at it, holding it, and opening or closing it
◦ “Every product that is used by someone has a user experience: newspapers,
ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2010)
◦ “All aspects of the end-user's interaction with the company, its services, and its
products. (Nielsen and Norman, 2014)

Cannot design a user experience−only can design for a user experience

Defining user experience
How users perceive a product, such as whether a smartwatch is seen as sleek
or chunky, and their emotional reaction to it, such as whether people have a
positive experience when using it.
(Hornbæk and Hertzum, 2017)

Hassenzahl’s (2010) model of the user experience

◦ Pragmatic: how simple, practical, and obvious it is for the user to achieve their
goals
◦ Hedonic: how evocative and stimulating the interaction is to users
Why was the iPod user experience such a
success?

Quality user experience from the

start

Simple, elegant, distinct brand,

pleasurable, must have fashion
item, catchy names, cool...
Core characteristics of interaction design

Users should be involved throughout the Specific usability and user experience goals Iteration is needed through the core activities
development of the project need to be identified, clearly documented, and
agreed to at the beginning of the project
Why?
Help designers:

◦ Understand how to design interactive products that fit with what people want, need, and may
desire

◦ Appreciate that one size does not fit all (for example, teenagers are very different to grown-ups)

◦ Identify any incorrect assumptions they may have about particular user groups. (for example, not
all old people want or need big fonts)

◦ Be aware of both people’s sensitivities and their capabilities

 Accessibility and inclusiveness

Accessibility: the extent to which Inclusiveness: making products

an interactive product is accessible and services that accommodate the
by as many people as possible widest possible number of people

• Focus is on people with • For example, smartphones

disabilities; for instance, those designed for all and made
using android OS or apple available to everyone regardless
voiceover of their disability, education, age,
or income
 Disabilities

Disabilities can result because

The severity and impact of an
Whether someone is disabled technologies are designed to
impairment can vary over the
changes over time with age, or necessitate a certain type of
course of a day or in different
recovery from an accident interaction that is impossible for
environmental conditions
someone with an impairment
 Understanding disability

1 2 3
Disabilities can be classified as: Each type can be further defined in Impairment can be categorized:
• Sensory impairment (such as loss of vision or terms of capability: • Permanent (for instance, long-term wheelchair
hearing) • For example, someone might have only peripheral user)
• Physical impairment (having loss of functions to vision, be color blind, or have no light perception • Temporary (that is, after an accident or illness)
one or more parts of the body after a stroke or • Situational (for example, a noisy environment
spinal cord injury) means that a person can’t hear)
• Cognitive (including learning impairment or loss
of memory/cognitive function due to old age)
 Being cool about disability

Prosthetics can be designed

to move beyond being People now refer to “wearing
functional (and often ugly) to their wheels,” rather than
being desirable and “using a wheelchair”
fashionable

Fashionable leg cover designed by Alleles Design Studio

5/21/2015 versus 21/5/2015?

◦ Which should be used for international services and online

forms?
Cultural
◦ Why is it that certain products, like smartphones, are
differences
universally accepted by people from all parts of the
world, whereas people from different cultures react to
websites differently?
 EFFECTIVE TO EFFICIENT TO USE SAFE TO USE
USE
Usability
goals

HAVE GOOD EASY TO LEARN EASY TO

UTILITY REMEMBER HOW
TO USE
 Usability and user experience goals

Selecting terms to convey a How do usability goals differ from Are there trade-offs between the How easy is it to measure usability
person’s feelings, emotions, and so user experience goals? two kinds of goals? (for example, versus user experience goals?
forth can help designers understand can a product be both fun and safe?)
the multifaceted nature of the user
experience
User experience goals
Desirable aspects

Satisfying Helpful Fun

Enjoyable Motivating Provocative

Engaging Challenging Surprising

Pleasurable Enhancing sociability Rewarding

Exciting Supporting creativity Emotionally fulfilling

Entertaining Cognitively stimulating Experiencing flow

Undesirable aspects

Boring Unpleasant

Frustrating Patronizing

Making one feel guilty Making one feel stupid

Annoying Cutesy

Childish Gimmicky
 Generalizable abstractions for thinking
about different aspects of design

The do’s and don'ts of interaction design

Design
principles What to provide and what not to provide at
the interface

Derived from a mix of theory-based

knowledge, experience, and common-
sense
 Visibility - poor
interface
• This is a control panel for an elevator
www.baddesigns.com • How does it work?
• Push a button for the floor you want?
• Nothing happens. Push any other button? Still nothing.
What do you need to do?
◦ It is not visible as to what to do!
Visibility - Improving on a
poor interface
…with this elevator, you need to insert your room card in the slot by the
buttons to get the elevator to work!
How would you make this action more visible?
• Make the card reader more obvious
• Provide an auditory message that says what to do (which language?)
• Provide a big label next to the card reader that flashes when someone
enters
• Make relevant parts visible
• Make what has to be done obvious
What do I do if I am wearing black?
Invisible automatic
controls can make it
more difficult to use
Feedback
◦ Sending information back to the user about what has been
done
◦ Includes sound, highlighting, animation, and combinations
of these

◦ For example, when screen button is clicked, it provides sound or red

highlight feedback:

“ccclichhk”
Constraints
◦ Restricting the possible actions that can be
performed

◦ Helps prevent user from selecting incorrect

options

◦ Physical objects can be designed to constrain

things. (for example, there being only one way
you can insert a key into a lock)
Logical or ambiguous design?
◦ Where do you plug the
mouse?
◦ Where do you plug the
keyboard, in the top or
bottom connector?
◦ Do the color-coded
icons help?
How to design them more logically
(A) provides direct adjacent
mapping between icon and
connector

(B) provides color coding

www.baddesigns.com
that associates the
connectors with the labels

www.baddesigns.com
 Consistency

Design interfaces to have similar operations and use similar elements The main benefit is that consistent interfaces are easier to learn and
for similar tasks. (for example, always use Ctrl key plus first initial of use
the command for an operation: Ctrl+c, Ctrl+s, Ctrl+o)
 What happens if there is more than one
command starting with the same letter? (for
example, save, spelling, select, style)

When You have to find other initials or combinations

consistency of keys, thereby breaking the consistency rule
(for example, Ctrl+s, Ctrl+Sp, Ctrl+shift+l)
breaks down
Increases learning burden on user, making
them more prone to errors
 Internal consistency refers to Difficult to achieve
designing operations to behave with complex

Internal and the same within an application interfaces

external
consistency External consistency refers to
designing operations, interfaces,
and so on to be the same across
Very rarely the
case, based on
different designer’s
preference
applications and devices
Keypad numbers layout
A case of external inconsistency
(a) phones, remote controls (b) calculators, computer keypads

1 2 3 7 8 9

4 5 6 4 5 6

7 8 9 1 2 3

0
0
 Refers to an attribute of an object that allows
people to know how to use it. (For example, a
mouse button invites pushing, a door handle
affords pulling)

Affordances: to Norman (1988) used the term to discuss the

give a clue
design of everyday objects

Has since been popularized in interaction

design to discuss how to design interface
objects (for example, scrollbars to enable
moving up and down; icons to click on)
 Interfaces are virtual and do not have
affordances like physical objects

What does
“affordance” Norman argues that it does not make sense to
have to offer talk about interfaces in terms of ‘real’
affordances

interaction
design? -Learned conventions
Instead, interfaces are better of arbitrary mappings
between action and
conceptualized as effect at the interface
‘perceived’ affordances: -Some mappings are
better than others
 Activity
Virtual affordances
◦ How do these screen objects afford?
◦ What if you were a novice user?
◦ Would you know what to do with them?
 Interaction design is concerned with designing interactive
products to support how people communicate and interact
in their everyday and working lives

It is concerned with how to create quality user experiences

for services, devices, and interactive products

Key points It is multidisciplinary, involving many inputs from wide-

reaching disciplines and fields

Optimizing the interaction between users and interactive

products requires consideration of a number of
interdependent factors, including context of use, types of
activity, UX goals, accessibility, cultural differences, and
user groups.

Design principles, such as feedback and simplicity, are

useful heuristics for informing, analyzing, and evaluating
aspects of an interactive product.