Web Design 


and User Experience

Module 2

Dr. Riccardo Sioni

© Riccardo Sioni
 Basic info
• Contact me at riccardo.sioni@uniud.it

• Materials: slides, papers, books, websites

• Office hours: by appointment

• Final exam: project + oral test

© Riccardo Sioni 2
 Course program
• Part 1

• User experience

• Emotions

• Designing for UX

• How to measure emotions and UX

• Part 2

• Introduction to Unity

• Basic tasks with Unity

• Game logic, UI…

• We will develop a simple project in Unity

© Riccardo Sioni 3
 User Experience

© Riccardo Sioni
 Origin of “User Experience”
• Don Norman, while he was VP of Apple’s Advanced
Technology Group:

I invented the term because I thought human interface and

usability were too narrow. I wanted to cover all aspects of the
person’s experience with the system including industrial design,
graphics, the interface, the physical interaction, and the manual.
Since then the term has spread widely, so much so that it is
starting to lose it’s meaning… user experience, human centered
design, usability; all those things, even affordances. They just
sort of entered the vocabulary and no longer have any special
meaning. People use them often without having any idea why,
what the word means, its origin, history, or what it’s about.

© Riccardo Sioni 5
 What User Experience is not
• User experience is not a trendy name for

• Web design

• User-centered design

• Graphic design

• Human factors engineering

• UI design

• Information architecture

• Interaction design

• Usability testing

• Customer satisfaction

• Marketing

© Riccardo Sioni 6
 UX ≠ Cool

• New packaging design

for 2007 Microsoft
products

• “… foreshadows the great experience that

awaits you once you open it…”

• “… provides convenient and attractive place…

to store both disk and documentation…”
© Riccardo Sioni 7
 Spot the affordances!

© Riccardo Sioni 8
 UX ≠ Cool
• Spolsky1: “It’s a hard plastic case, sealed in two
different places by plastic stickies. It represents
a complete failure of industrial design; an
utter F in the school of Donald Norman's Design
of Everyday Things2. To be technical about it, it
has no true affordances and actually has some
false affordances: visual clues as to how to
open it that turn out to be wrong”
1. Spolsky, J. (2007). Even the Office 2007 box has a learning curve.

http://www.joelonsoftware.com/items/2007/08/18.html.

2. Norman, D.A. (1988). The Design of Everyday Things. New York, NY: Basic
Books.
© Riccardo Sioni 9
 https://www.flickr.com/photos/ucsfpharmacy/sets/72157600095134188/
© Riccardo Sioni 10
 Definitions of UX

A person’s perception and responses that result

from the use or anticipated use of a product,
system or service1

1. ISO 9241-210
© Riccardo Sioni 11
 Definitions of UX
• Law et al.1 report other, more specific definitions
developed in the literature

• Goal: represent different perspectives about UX

• Focus: main concern to be addressed

• Who: experiencing agent/subject of interest
• What: experienced object
• How: how is the experience brought about
• When: before vs. during vs. after interaction with experienced
object

1. Law, E.L.C., Roto, V., Hassenzahl, M., Vermeeren, A.P.O.S., & Kort, J.
(2009). Understanding, scoping and defining User eXperience: a survey
approach. In Proc. CHI 2009 (pp. 719-728). New York, NY: ACM Press.
© Riccardo Sioni 12
 Definitions of UX
All aspects of the end-user's interaction with the
company, its services and its products. The first
requirement for an exemplary user experience is to
meet the exact needs of the customer without fuss
or bother. Next comes simplicity and elegance that
produce products that are a joy to own, a joy to
use. True user experience goes far beyond giving
customers what they say they want, or providing
checklist features1
1. Nielsen Norman Group – http://www.nngroup.com/articles/definition-
user-experience/
© Riccardo Sioni 13
 Definitions of UX
A consequence of a user’s internal state
(predispositions, expectations, needs, motivation,
mood…), the characteristics of the designed
system (e.g., complexity, purpose, usability,
functionality…) and the context (or the
environment) within which the interaction occurs
(e.g. organizational/social setting, meaningfulness
of the activity, voluntariness of use…)1

1. Hassenzahl, M., & Tractinsky, N. (2006). User Experience – a research

agenda [Editorial]. Behavior & Information Technology, 25(2), 91-97.
© Riccardo Sioni 14
 Definitions of UX
The entire set of affects that is elicited by the
interaction between a user and a product
including the degree to which all our senses are
gratified (aesthetic experience) the meanings we
attach to the product (experience of meaning)
and the feelings and emotions that are elicited
(emotional experience)1

1. Desmet, P.M.A., & Hekkert, P. (2007). Framework of product experience.

International Journal of Design, 1(1), 57-66.
© Riccardo Sioni 15
 Definitions of UX
The value derived from interaction(s) [or
anticipated interaction(s)] with a product or
service and the supporting cast in the context of
use (e.g. time, location, and user disposition)1

1. Sward D., & MacArthur, G. (2007). Making user experience a business

strategy. In E. Law et al. (Eds.), Proceedings of the Workshop on Towards
a UX Manifesto (pp 35-40).
© Riccardo Sioni 16
 Definitions of UX
The quality of experience a person has when
interacting with a specific design. This can range
from a specific artifact such as a cup, toy or
website up to larger integrated experiences such
as a museum or an airport1

1. User Experience Network – http://www.uxnet.org/

© Riccardo Sioni 17
 As Pretty as an Airport
• Douglas Adams (The Long Dark Tea-Time of
the Soul):
It can hardly be a coincidence that no language on earth has ever produced the
expression “As pretty as an airport.”
Airports are ugly. Some are very ugly. Some attain a degree of ugliness that can only
be the result of a special effort. This ugliness arises because airports are full of
people who are tired, cross, and have just discovered that their luggage has landed
in Murmansk (Murmansk airport is the only known exception to this otherwise
infallible rule), and architects have on the whole tried to reflect this in their designs.
They have sought to highlight the tiredness and crossness motif with brutal shapes
and nerve-jangling colors, to make effortless the business of separating the traveler
forever from his or her luggage or loved ones, to confuse the traveler with arrows
that appear to point at the windows, distant tie racks, or the current position of Ursa
Minor in the night sky, and wherever possible to expose the plumbing on the
grounds that it is functional, and conceal the location of the departure gates,
presumably on the grounds that they are not.

© Riccardo Sioni 18
© Riccardo Sioni 19
 Guo’s 4 Elements of UX

1. Guo, F. (2012). More than usability: the four elements of user experience.
http://www.uxmatters.com/mt/archives/2012/04/more-than-usability-
the-four-elements-of-user-experience-part-i.php
© Riccardo Sioni 20
 Guo’s 4 Elements of UX
• Value: does a product provide value to users?

• Driven by alignment between product features & user needs

• Adoptability: will people start using the product?

• E.g., Yahoo toolbar may be easy to use and valuable, but
users must install it

• E.g., mobile site pop-ups asking users


to download their app

© Riccardo Sioni 21
 Guo’s 4 Elements of UX
• Desirability: is the experience fun and engaging?
• Remember: desirability for the target user! Nordstrom vs.
eBay

© Riccardo Sioni 22
 UX is Felt Internally by Users
• UX is the totality of the effect or effects felt
(experienced) internally by a user as a result of
interaction with, and the usage context of, a
system, device, or product

• UX cannot be designed, only experienced

• If UX entirely felt internally by the user, what

about the performance-related parts?

• External manifestations of UX: usability

© Riccardo Sioni 23
 Usability
• The effectiveness, efficiency and satisfaction
with which specified users achieve specified
goals in particular environments1

• Usability ≠ dummy proofing

• Usability ≠ user-friendly

• Usability ≠ make software look pretty

1. ISO 9241-11
© Riccardo Sioni 24
 Usability
• Usability: making technology transparent

• E.g., writing an essay: mental energy should be

focused on organizing thoughts and finding the
words to express them

• No energy should be spent on the instrument (pen &

paper, word processor…)

• Usability generally related to performance and

smooth interaction

• Usability: pragmatic component of UX

© Riccardo Sioni 25
 Behavioral vs. Emotional
Usability

• Behavioral usability: traditional usability1

• Emotional usability: the degree to which a

product is desirable or serves a need(s)
beyond the traditional functional objective1

1. Logan, R.J. (1994). Behavioral and Emotional Usability: Thomson

Consumer Electronics. In Usability in Practice (pp. 59-82). San Diego,
CA: Academic Press.

© Riccardo Sioni 26
 Ergonomics & Hedonics
• Hassenzahl et al.1,2: a “personal view” on UX
that emphasizes subjectivity and central role of
pleasure and pain

• Ergonomic & pragmatic qualities: product’s

perceived ability to support the achievement of
do-goals, e.g., making a telephone call, setting
up a webpage, watching TV…
1. Hassenzahl, M., Platz, A., Burmester, M., & Lehner, K. (2000). Hedonic and
ergonomic quality aspects determine a software's appeal. In Proc. CHI’00 (pp.
201-208). New York, NY: ACM Press.

2. Hassenzahl, M. (2008). User Experience (UX): towards an experiential perspective

on product quality. In Proc. IHM’08 (pp. 11-16). New York, NY: ACM Press.
© Riccardo Sioni 27
 Ergonomics & Hedonics
• Hedonic qualities: product’s perceived ability to
support the achievement of be-goals, e.g., being
competent, being related to others, being special

• More general human needs beyond instrumental ones:

need for novelty and change, personal growth, self-
expression…

• Be-goals: self-oriented and others-oriented

• Role of do-goals is to support the fulfillment of be-goals

1. Hassenzahl, M., Platz, A., Burmester, M., & Lehner, K. (2000). Hedonic and
ergonomic quality aspects determine a software's appeal. In Proc. CHI’00 (pp.
201-208). New York, NY: ACM Press.

2. Hassenzahl, M. (2008). User Experience (UX): towards an experiential perspective

on product quality. In Proc. IHM’08 (pp. 11-16). New York, NY: ACM Press.
© Riccardo Sioni 28
 Ergonomics & Hedonics

1. Hassenzahl, M., Platz, A., Burmester, M., & Lehner, K. (2000). Hedonic
and ergonomic quality aspects determine a software's appeal. In Proc.
CHI ’00 (pp. 201-208). New York, NY: ACM Press.
© Riccardo Sioni 29
 User Experience Over
Time

© Riccardo Sioni
 UX Over Time 1

• Product evaluation traditionally focused on early

interaction

• Advantages of understanding prolonged use, however, is

important:

• We get used to product, changing our perception of usability

• After prolonged used, we are less excited to use the product

• At different phases of use, we might attach different weights

to different qualities (e.g., usability and provided stimulations
first; novel functionalities and hedonic qualities later)

1. Karapanos, E. (2013). User Experience Over Time. Modeling Users’

Experiences with Interactive Systems (pp. 57-83). Berlin, DE: Springer-
Verlag.
© Riccardo Sioni 31
 Beauty & Goodness
• Perceptions of ergonomics and hedonic qualities can be
1

used to form an overall evaluation of product

• Goodness depends on perceived usability and hedonic
components

2
• Beauty related more to hedonic than ergonomic qualities

• Beauty is largely a social aspect, affected by identification

• Beauty is something to be shared, to be approved by
1
others
1. Hassenzahl, M. (2004). The interplay of beauty, goodness, and usability in interactive
products. Human-Computer Interaction, 19(4), 319-349.

2. Karapanos, E. (2013). User Experience Over Time. Modeling Users’ Experiences with
Interactive Systems (pp. 57-83). Berlin, DE: Springer-Verlag.

© Riccardo Sioni 32
 Beauty & Goodness

1. Hassenzahl, M. (2004). The interplay of beauty, goodness, and

usability in interactive products. Human-Computer Interaction,
19(4), 319-349.
© Riccardo Sioni 33
 Beauty & Goodness

• Satisfying vs. pleasant experiences1

• Perception of usability: predictors of satisfying

experience

• Perception of product’s aesthetics: better

prediction for a pleasant experience

1. Tractinsky, N., & Zmiri, D. (2006). Exploring attributes of skins as potential

antecedents of emotion in HCI. In P.A. Fishwick (Ed.), Aesthetic
Computing (pp. 405-422). Cambridge, MA: MIT Press.
© Riccardo Sioni 34
 Good and Beautiful Over Time

• How goodness and beauty judgment evolve over

time?

• First experiences: pragmatic qualities are prominent

• Users are still exploring product functionalities and trying

out new things

• They experience usability problems

• Value of product: usage-based

1. Karapanos, E. (2013). User Experience Over Time. Modeling Users’

Experiences with Interactive Systems (pp. 57-83). Berlin, DE: Springer-
Verlag.
© Riccardo Sioni 35
 Good and Beautiful Over Time
• Then: users get used to product

• Impact of novelty decreases sharply after a short time

• Users learn to handle usability problems

• They focus on most attractive (to them) functionalities (i.e., from

ease of use to usefulness)

• Value of product: ownership-based rather than usage-based;

social aspects (identification) more prominent; goodness
judgments shift from pragmatic to identification aspects

• Wrt beauty, stimulation qualities prominent in first days of

product use, then replaced by attributes reflecting identification
1. Karapanos, E. (2013). User Experience Over Time. Modeling Users’
Experiences with Interactive Systems (pp. 57-83). Berlin, DE: Springer-
Verlag.
© Riccardo Sioni 36
 Orientation, Incorporation and
Identification
• Three phases in the adoption of a product, reflecting
1
different product qualities with different temporal patterns

• Temporality of experiences caused by

• Increasing familiarity with the product: orientation

• Increasing functional dependency: incorporation

• Increasing emotional attachment: identification

• These three forces motivate transition across the three

phases

1. Karapanos, E. (2013). User Experience Over Time. Modeling Users’

Experiences with Interactive Systems (pp. 57-83). Berlin, DE: Springer-
Verlag.
© Riccardo Sioni 37
 Karapanos’ Model 1

• Anticipation: the act of

anticipating an experience
resulting in the formation of
expectations

• Happens prior to any

experience of use

• From the center, single

episodes of product
experiences visualized as
transition from core to outer
circles
1. Karapanos, E. (2013). User Experience Over Time. Modeling Users’
Experiences with Interactive Systems (pp. 57-83). Berlin, DE: Springer-
Verlag.
© Riccardo Sioni 38
 An example: iPhone

• Anticipation:

• Opportunities for positive experiences, e.g., the

performance of multi-touch screen,
incorporation of mobile internet in the daily life

• Fear of negative implication, e.g., battery

endurance, typing efficiency, tolerance to
dropping on the ground

© Riccardo Sioni 39
 Karapanos’ Model
• Orientation: users’
initial experiences

• Feelings of
excitement for the
novel features

• Also, frustration for

learnability flaws

© Riccardo Sioni 40
 An example: iPhone
• Orientation:

• Stimulation induced e.g. by product’s visual

aesthetics and interaction aesthetics, by ease of
use, by learnability

• Dissatisfying experiences, e.g., dictionary that

provide wrong typing suggestions

• Karapanos observed that these feelings

decreased sharply after first week of use

© Riccardo Sioni 41
 Karapanos’ Model
• Incorporation: users
reflect on how the product
becomes meaningful in
everyday life

• Long-term usability is now

more important

• Product usefulness is a
major factor

© Riccardo Sioni 42
 An example: iPhone
• Incorporation:

• Usefulness and long-term usability in terms of fast

access to information, alleviation of boredom in idle
periods (games, browsing…), identification of typed
phone numbers from contacts helps avoiding
negative social situations, fast mute switch…

• Long-term usability problems, e.g., touch screen not

working with gloves

© Riccardo Sioni 43
 Karapanos’ Model
• Once the product is
accepted in the daily routine

• Identification: the product

participates in users’ social
interactions, communicates
parts of their self-identity

• To differentiate them from

others

• To connect them to others

(sense of community)

© Riccardo Sioni 44
 An example: iPhone
• Identification:

• Personal perspective, related to users’ investment in

adapting and personalizing the device, e.g., adding themes
and background pictures, organizing icons on screen…

• Social perspective, related to enabling self-expression and

creating a sense of community

• Self expression: users’ need to differentiate themselves from

others, e.g., showing functions that are difficult to operate on
other phones

• Sense of community: users’ need to feel part of a group with

shared values and interests, e.g., chatting about the phone that
users have in common, the chosen apps…

© Riccardo Sioni 45
 Other User
Experiences

© Riccardo Sioni
 UX and Other Experiences

• Brand experience: interaction not only with

branded product, but with the company, its
products and services1

• Affects UX when interacting with product

• After interaction with product, UX affects brand

experience

1. Law, E.L.C., Roto, V., Hassenzahl, M., Vermeeren, A.P.O.S., & Kort, J. (2009).
Understanding, scoping and defining User eXperience: a survey approach. In
Proc. CHI 2009 (pp. 719-728). New York, NY: ACM Press.
© Riccardo Sioni 47
 UX and Other Experiences
• Product experience: UX as a commercial
product’s attribute rather than as a subjective
experience1

• Service experience: face-to-face services (not

interesting for us, unless UI is involved!), public
services, digital services, customer services…1

1. Law, E.L.C., Roto, V., Hassenzahl, M., Vermeeren, A.P.O.S., & Kort, J. (2009).
Understanding, scoping and defining User eXperience: a survey approach. In
Proc. CHI 2009 (pp. 719-728). New York, NY: ACM Press.
© Riccardo Sioni 48
 Product Experience
• Multi-faceted phenomenon that involves manifestations
such as subjective feelings, behavioral reactions,
expressive reactions, and physiological reactions1

• Subjective feeling of experience: conscious awareness of

emotion change

• Behavioral reactions: approach, inaction, avoidance, and

attack

• Expressive reactions: facial, vocal, and postural expressions

accompanying affective experiences

• Physiological reactions: body responses

1.Desmet, P.M.A. & Hekkert, P. (2007). Framework of product experience.

International Journal of Design, 1(1), 13-23.
© Riccardo Sioni 49
 Product Experience
• The entire set of affects that is elicited by the
interaction between a user and a product, including
the degree to which all our senses are gratified
(aesthetic experience), the meanings we attach to the
product (experience of meaning) and the feelings and
emotions that are elicited (emotional experience)1

• 3 levels of product experience:

• Aesthetic pleasure

• Attribution of meaning

• Emotional response
1.Hekkert, P. (2006). Design aesthetics: principles of pleasure in design.
Psychology Science, 48(2), 157-172.
© Riccardo Sioni 50
 Product Experience

© Riccardo Sioni 51
 Aesthetic Experience
• Product capacity to delight one or more of our
senses

• Beautiful to look at

• Makes a pleasant sound

• Feels good to touch

• Smells nice

• …

© Riccardo Sioni 52
 Experience of Meaning
• Assign personality or other expressive
characteristics, assess personal or symbolic
significance of product1

• Experience of luxury: assign symbolic value of

comfortable lifestyle associated with particular
consumer products

• Use of material, processes, packaging, distribution,

and promotion that exceeds the level of standard
products to allow for pleasure

1. Desmet, P.M.A., & Hekkert, P. (2007). Framework of product experience. International

Journal of Design, 1(1), 13-23.
© Riccardo Sioni 53
 Experience of Meaning
• Experience of attachment: represented by products
with profound and sustained meaning to us

• E.g., associated to feelings of confidence,

independence, relaxation, achievement, security,
friendship, and control

• People become more attached to products with

personality similar to their own than product with
dissimilar personality1
1. Govers, P.C.M., & Mugge, R. (2004). ‘I love my Jeep, because its tough like me’: The
effect of product-personality congruence on product attachment. In Proc. Fourth
International Conference on Design and Emotion.

© Riccardo Sioni 54
 Emotional Experience
• Emotional response:
interpretation of an
event/product, rather
than event/product itself1

• Evaluation of stimulus +
situation + relation
between person and
situation

1.Hekkert, P. (2006). Design aesthetics: principles of pleasure in design.

Psychology Science, 48(2), 157-172.
© Riccardo Sioni 55
 Emotional Experience

• Example 1: chair → appraisal: it

mismatches with my concern for
comfort → frustration

• Example 2: mobile phone → appraisal:

it matches with my desire to stay in
touch with friends → joy
© Riccardo Sioni 56
 Relationships Between the Three
Levels of Product Experience
• Example: attachment1

• We previously identified it as experience of

meaning

• Emotions may be involved: afraid of losing;

proud of owning

• Aesthetically pleasing product → experienced

meaning of exclusiveness

1. Desmet, P.M.A., & Hekkert, P. (2007). Framework of product experience. International

Journal of Design, 1(1), 13-23.
© Riccardo Sioni 57
 Usability and Product
Experience
• Usability: source of product experience1

• Usability = goal attainment → emotion elicitation

• Correlation between usability and aesthetic

experience: beauty may infer higher quality, which
may infer better usability; good designer may
provide better usability than bad designer

• Usability influences meanings attributed to product

(elegance and innovativeness vs. inferiority and
unpolishedness)
1. Desmet, P.M.A., & Hekkert, P. (2007). Framework of product experience. International
Journal of Design, 1(1), 13-23.
© Riccardo Sioni 58
 User Experience and
Human-Computer
Interaction

© Riccardo Sioni
 Computing Changes…
• Early years: mainframes handled by core of
technically-oriented users

• Poor usability: good for the


“mystique” and job security

• Dancing bear software





• Then: desktop and laptop computers

• Now: mobile phones, web, wearables

• Computing devices in the hand of general public

© Riccardo Sioni 60
 … And So Is Interaction

• Then: doing computing is working in front of a

desktop PC

• Now: doing computing is interacting with a PC,

a laptop, a smartphone, a tablet, a smart TV…
is also driving a car, interacting with
thermostats at home…

• But what is interaction?

© Riccardo Sioni 61
 What Is Interaction?
• It cannot be only “interacting with a PC”

• Interaction as exchange between system and user

• User input change system state

• Change in system state causes changes in real world

• Changes in real world may affect user

• Very broad definition: e.g., road signs

• Different modalities of user interaction:

• Explicit action (e.g., button press to change room

temperature)

• Input extracted by user/environment without explicit user

action (e.g., sensing user presence in a room to perform
room temperature change)
© Riccardo Sioni 62
 Demanding a Better UX

• People want to use technology to learn things,

to be entertained, to connect with others…

• People look beyond functionality; search for

beauty, emotional satisfaction and gratification

© Riccardo Sioni 63
 Needing a Better UX
1
• Example: police emergency-response system

• Currently, good working system but technologically too old

• Requirements for the replacement system: functionality

and costs; usability not considered

• New system: key information missing, useless information

highlighted; UI not optimized for touchscreen

• Issues with sending & receiving messages, mapping and

routing…

1. Marcus, A. & Gasperini, J. (2006). Almost dead on arrival – A case study

of non-user centered design for a police emergency-response system.
Interactions, 13(5), 12-18.
© Riccardo Sioni 64
 Needing a Better UX
• Safety risks on the field

• High costs for officers

training and system
fixing

• Highly politicized
situation, lawsuits
threatened

1. Marcus, A. & Gasperini, J. (2006). Almost dead on arrival – A case study

of non-user centered design for a police emergency-response system.
Interactions, 13(5), 12-18.
© Riccardo Sioni 65
 Designing for a Visitor
Experience
• Five different qualities of Websites that will impact the
1
experience of sites’ visitors :

• Utility: usefulness, importance, or interest of the sites’ content

• Functional integrity: working as intended (e.g., no dead links,
consistency across browsers…)
• Usability: how easy to learn and use the website
• Persuasiveness: the extent to which sites encourage and promote
specific behaviors (“conversions”)
• Graphic design: look & feel, evoking visitors’ emotions that
contribute or not to sites’ goals
1. Mayhew, D.J. (2011). The Web UX Design Process – A Case Study. In K.P.L. Vu &
R.W. Proctor (Eds.), Handbook of Human Factors in Web Design (pp. 461-480).
Abingdon, UK: Taylor & Francis.
© Riccardo Sioni 66
 Designing for a Visitor
Experience
• Utility and functional integrity: fairly independent

• Usability, persuasiveness, graphic design: intertwined

• Designing for a great visitor experience requires and

interdisciplinary team of experts

• Market research → utility

• Webdev professionals → functional integrity

• Sw & Web usability engineering → Usability

• Marketing, persuasion psychology professionals → persuasiveness

• Graphic design professionals → graphic design

1. Mayhew, D.J. (2011). The Web UX Design Process – A Case Study. In K.P.L. Vu &
R.W. Proctor (Eds.), Handbook of Human Factors in Web Design (pp. 461-480).
Abingdon, UK: Taylor & Francis.
© Riccardo Sioni 67