Play, Engagement & Addiction:
Semiotics & Digital User
Interface Design
Semiofest 2016 - Tallinn, Estonia
Three Opening Thoughts
2
Every user interface
can be evaluated by
how effectively it
communicates.
No digital artifact is as
culturally situated as
a website. All seek to
provide information,
while at the same time
conveying, through imagery,
modality & interaction, a
representation of culture.
The text you write
must prove to me
that it desires me.
Roland Barthes
The Pleasure of the Text
Everett N. McKay
UI is Communication
Roxanne M. O’Connell
Visualizing Culture
Today’s Marketing Obsession
The philosophy du jour is User Experience
3
Persuasion
Emotional
Involvement
User Experience
As marketers attempt to find new and improved ways to convince consumers to buy their
products, they continually embrace evolving philosophies of how to drive engagement.
UX Defined
A Sub-Set of Overall
Customer Experience
CX
Customer Experience
UX
User Experience
Customer Experience (CX)
Encompasses all interactions a person has
with a brand, across all touch points.
User Experience (UX)
Is the subset of Customer Experience that is
about interactions with a device or product,
or - in a digital context, a website, software
applications, or app.
Why Is It
Growing
In every category, it is being
recognized as a significant
brand differentiator
& choice driver.
Businesses have now come to recognize that
providing a quality user experience is an
essential, sustainable competitive advantage.
It is user experience that forms the customer’s
impression of the company’s offerings, it is user
experience that differentiates the company from
its competitors, and it is user experience that
determines whether your customer will ever
come back.
Jesse James Garrett
Because increasingly there’s an
understanding that UX in all
contexts profoundly affects
brand relationship.
1
2
?
Central
Tenet Of UX
Designing for optimal UX means
working to reduce the amount of
thinking people need to do when using
your product, by making things as self-
evident as possible.
The more people have to stop & think
about how to do what they want to do,
where to click, where to find things,
what things mean, whether something
is clickable, etc. the more confidence
and user satisfaction, are eroded.
1
2
Making pages self-evident is like having good
lighting in a store: it just makes everything
seem better. Using a site that doesn’t make
us think about unimportant things feels
effortless, whereas puzzling over things
that don’t matter to us tends to sap our
energy & enthusiasm - and time.
Steve Krug
Author of Don’t Make Me Think
Don’t Make Me Think
UX Is Fundamentally About
Reducing Ambiguity
7
Ensuring cues for interaction
are immediately understood
GOAL
Guiding viewer’s eye
to critical information
Conforming to expectations
already established by
interactions with
other websites
Avoiding misunderstandings
about how to perform a task
Providing feedback to assure
users the system is working
in the way they expect (and
doing what they want it to do)
UX Research: Focused On Navigation
Considered to be a critical
component of design process
8
Primarily concerned with
conscious comprehension
of cues and directions
Focused on barriers
to task completion Examines behaviour:
how users interact
with platforms
Navigation Heuristics
Checklist of best practices for facilitating clarity
9
Top and/or left
navigation provides
links to other areas
of your site. Sites that
use both top and left
navigation should put
more general links in
top navigation.
A Table of Contents
at the start of each
section lets you easily
see if this is the page
you need. Links
quickly take you
to the right spot.
Site maps help navigation, and
they are a must for accessibility
A Search Function
that tolerates spelling
mistakes is best.
Breadcrumbs at the
top of the page show
where you are now
and how you got there.
The right navigation
contains important
information or links.
The last updated date
tells users how current
the information is.
This Means That Design Cues
Are Seen As Functional Guides
10
The Role of Colour The Role of Typography
– Warm colours tend to advance to the
foreground. Cool colours tend to recede,
creating a visual hierarchy.
– Strong colours create a focal point and are
used to highlight most important information.
– Colour affects accessibility. Approximately 8%
of adults have some form of colour blindness.
– Letters that are heavy and larger than the rest of
the content are interpreted as entry points...
– Large blocks of text that are left justified and
evenly spaced are taken to be body content.
Sources: UI is communication, Visualizing Culture
“Affordances” Must Provide
Clear Guidance
11
“Icons” Must First And
Foremost Be Legible
12
They Must Also Be
Simple & Standardized
Comprehension
& Navigation
Conventions must
be established about
“what stands for what”
To Facilitate
They Must Also Be
Simple & Standardized
Comprehension
& Navigation
Conventions must
be established about
“what stands for what”
To Facilitate
Symbolic Richness
Can Be Undesirable
A picture is worth a thousand words,
unless it’s an icon: instead of icons
explaining, icons often require
explanation.
Everett N. McKay
Metaphors, Metonyms & Synecdoches
can be difficult to understand.
Sources: Everett N. McKay, UI is Communication, 2013;
Jeff Raskin, The Humane Interface, 2000
Semiotics Can Facilitate Navigation
Semiotic Inspection Method pioneered by Clarisse De Souza as
an approach to assessing the communicability of interactive discourse
16
ANALYZES THE SIGNS
Used by the designer to convey expectations
of how users should interact with the system
IDENTIFIES ASSUMPTIONS
Made by designer about the user as
conveyed through the use of signs
ASSESSES
How effective signs are at
communicating intended meaning
Source: De Souza et al, “The Semiotic Inspection Method”,
November, 2006
But, There Is More To UX Than Navigation
The goal of good UX is not only to allow users to complete
tasks but also to feel drawn in and engaged
17
INCREASING
MOTIVATION
REMOVING
FRICTION
Usability
Psychology
Source: Stephen P. Anderson, Seductive Interaction Design, 2011
Frameworks & Principles
The Quality Hierarchy
Experiences
& Emotion
MEANINGFUL
Has personal significance
A memorable experience worth sharing
Feels “natural” to use
I am able to use it easily
It’s Functional & Reliable /
Does what it’s supposed to
Functional
Usable
Convenient
Pleasurable
18
UX Design
Research
Tasks
Usability
Testing
MORE ABOUT: INFORMED BY:
Adapted from: Stephen P. Anderson, Seductive Interaction Design, 2011
“Attractive Things Work Better”
19
Visual appearance has a positive
effect on performance, leading to
reduced task completion times
for the attractive version.
Source: Donald Norman, Emotional Design, 2003
The Critical Importance
Of Emotions
Of information processing
goes on at the emotional
(sub-conscious level)
95%
Emotions drive decisions,
which are then consciously
justified by reason
The Role For Semiotics
Neuropsychology Tells Us
That the emotional aspect of consumer
decision-making is driven by non-verbal
cues such as imagery, colour and tonality
– the province of Semiotics.
So, There Is A Role For Semiotics
In helping make websites
more emotionally compelling to users.
Semiotic Cues Drive Perceptions
Of Trust & Efficacy
22
Source:
Seductive
Interaction
Design
Semiotics Help Encode The User
Adding meaning to the “User Persona”
23
– User personas create an
implied user for whom
the interface is intended
– UX usually focusses on
functional needs
– Semiotics can help assess
whether the codes deployed
reflect the values and
culture of the user
Reflecting The User Well or Badly
24
A user who is seeking to reconcile the desire
to project traditional masculinity with the use
of “feminine” personal care products may find
that the codes deployed here resolve his inner
tension.
If the implied user is a “fighter” who does
not see herself as a disease victim, images
depicting a paternalistic doctor/patient
message are encoding the wrong message.
Reflecting
Cultural Contexts
Logocentricity vs. Image-Centricity
Information Requirements
Individualism vs. Collectivism
Colour Symbolism
Semiotics Helps Convey
The Brand’s Values
Ensuring That
Intended Messages
Are conveyed and identifying any
messages that might not be intentional
As With Any Form
Of Brand Communications,
Semiotics can also assess what messages
the brand is sending about itself
And Perhaps Most Importantly
Semiotics Can Help Create
A Sense Of Play & Pleasure
28
Sources Of Pleasure
Three Key Qualities Required to Create a Sense
of Pleasure in a User Interface
29
CHALLENGE
Is there a clear goal in the
activity? And is the outcome
uncertain enough to tease
the user?
CURIOSITY
Does the activity provide an optimal
level of informational complexity?
Does the interface use randomness
in a way that adds variety without
making tools unreliable?
FANTASY
Does the interface
embody emotionally
appealing fantasies?
Source: Thomas, Malone, Heuristics for Designing Enjoyable User Interfaces: Lessons from Computer Games, 1982
Examples Of Play
30
An Interesting
Tension
The Celebration of Ambiguity,
thus contradicting Navigation’s
Imperative of Clarity.
Textual Pleasure arises from the pursuit of
a mystery: the deferral of meaning that makes
the reader want to know more.
(Barthes’ Hermeneutic Code)
Pleasure & Play Are About
Ambiguity vs. Clarity:
The Role For Semiotics
32
Navigation Engagement
Removing the wrong kind of challenge to keep
users from leaving:
– Semiotic Inspection Method to assess how effective
signs are at communicating desired interaction.
– Standardized Icons with conventional meanings.
Seeding the right kind of challenge to keep
users progressing deeper into the text:
– Rich cultural symbolism that connects deeply
with the user.
– Playful deferral of meaning to tempt pleasurable
interaction.
Conclusions
33
UX IS AT THE HEART
Of innovation design
and marketing theory
today
SEMIOTICS HAS THE
OPPORTUNITY
To assist in both improving
usability & increasing user
engagement thereby becoming
a critical innovation tool
UX RESEARCH
Is already embraced by the
digital community, but tends
to focus on the rational
domain of “usability” vs.
the more emotional aspect
of user engagement
An Analysis Thought-Starter
34
Source: Stephen P. Anderson, Seductive Interaction Design, 2011
Thank You!
Athena Brand Wisdom Inc.
416-778-4275
jeff.hecker@athenabrand.com
sarah.johnson@athenabrand.com

Play, Engagement & Addiction: Semiotics & Digital User Interface Design

  • 1.
    Play, Engagement &Addiction: Semiotics & Digital User Interface Design Semiofest 2016 - Tallinn, Estonia
  • 2.
    Three Opening Thoughts 2 Everyuser interface can be evaluated by how effectively it communicates. No digital artifact is as culturally situated as a website. All seek to provide information, while at the same time conveying, through imagery, modality & interaction, a representation of culture. The text you write must prove to me that it desires me. Roland Barthes The Pleasure of the Text Everett N. McKay UI is Communication Roxanne M. O’Connell Visualizing Culture
  • 3.
    Today’s Marketing Obsession Thephilosophy du jour is User Experience 3 Persuasion Emotional Involvement User Experience As marketers attempt to find new and improved ways to convince consumers to buy their products, they continually embrace evolving philosophies of how to drive engagement.
  • 4.
    UX Defined A Sub-Setof Overall Customer Experience CX Customer Experience UX User Experience Customer Experience (CX) Encompasses all interactions a person has with a brand, across all touch points. User Experience (UX) Is the subset of Customer Experience that is about interactions with a device or product, or - in a digital context, a website, software applications, or app.
  • 5.
    Why Is It Growing Inevery category, it is being recognized as a significant brand differentiator & choice driver. Businesses have now come to recognize that providing a quality user experience is an essential, sustainable competitive advantage. It is user experience that forms the customer’s impression of the company’s offerings, it is user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back. Jesse James Garrett Because increasingly there’s an understanding that UX in all contexts profoundly affects brand relationship. 1 2 ?
  • 6.
    Central Tenet Of UX Designingfor optimal UX means working to reduce the amount of thinking people need to do when using your product, by making things as self- evident as possible. The more people have to stop & think about how to do what they want to do, where to click, where to find things, what things mean, whether something is clickable, etc. the more confidence and user satisfaction, are eroded. 1 2 Making pages self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy & enthusiasm - and time. Steve Krug Author of Don’t Make Me Think Don’t Make Me Think
  • 7.
    UX Is FundamentallyAbout Reducing Ambiguity 7 Ensuring cues for interaction are immediately understood GOAL Guiding viewer’s eye to critical information Conforming to expectations already established by interactions with other websites Avoiding misunderstandings about how to perform a task Providing feedback to assure users the system is working in the way they expect (and doing what they want it to do)
  • 8.
    UX Research: FocusedOn Navigation Considered to be a critical component of design process 8 Primarily concerned with conscious comprehension of cues and directions Focused on barriers to task completion Examines behaviour: how users interact with platforms
  • 9.
    Navigation Heuristics Checklist ofbest practices for facilitating clarity 9 Top and/or left navigation provides links to other areas of your site. Sites that use both top and left navigation should put more general links in top navigation. A Table of Contents at the start of each section lets you easily see if this is the page you need. Links quickly take you to the right spot. Site maps help navigation, and they are a must for accessibility A Search Function that tolerates spelling mistakes is best. Breadcrumbs at the top of the page show where you are now and how you got there. The right navigation contains important information or links. The last updated date tells users how current the information is.
  • 10.
    This Means ThatDesign Cues Are Seen As Functional Guides 10 The Role of Colour The Role of Typography – Warm colours tend to advance to the foreground. Cool colours tend to recede, creating a visual hierarchy. – Strong colours create a focal point and are used to highlight most important information. – Colour affects accessibility. Approximately 8% of adults have some form of colour blindness. – Letters that are heavy and larger than the rest of the content are interpreted as entry points... – Large blocks of text that are left justified and evenly spaced are taken to be body content. Sources: UI is communication, Visualizing Culture
  • 11.
  • 12.
    “Icons” Must FirstAnd Foremost Be Legible 12
  • 13.
    They Must AlsoBe Simple & Standardized Comprehension & Navigation Conventions must be established about “what stands for what” To Facilitate
  • 14.
    They Must AlsoBe Simple & Standardized Comprehension & Navigation Conventions must be established about “what stands for what” To Facilitate
  • 15.
    Symbolic Richness Can BeUndesirable A picture is worth a thousand words, unless it’s an icon: instead of icons explaining, icons often require explanation. Everett N. McKay Metaphors, Metonyms & Synecdoches can be difficult to understand. Sources: Everett N. McKay, UI is Communication, 2013; Jeff Raskin, The Humane Interface, 2000
  • 16.
    Semiotics Can FacilitateNavigation Semiotic Inspection Method pioneered by Clarisse De Souza as an approach to assessing the communicability of interactive discourse 16 ANALYZES THE SIGNS Used by the designer to convey expectations of how users should interact with the system IDENTIFIES ASSUMPTIONS Made by designer about the user as conveyed through the use of signs ASSESSES How effective signs are at communicating intended meaning Source: De Souza et al, “The Semiotic Inspection Method”, November, 2006
  • 17.
    But, There IsMore To UX Than Navigation The goal of good UX is not only to allow users to complete tasks but also to feel drawn in and engaged 17 INCREASING MOTIVATION REMOVING FRICTION Usability Psychology Source: Stephen P. Anderson, Seductive Interaction Design, 2011
  • 18.
    Frameworks & Principles TheQuality Hierarchy Experiences & Emotion MEANINGFUL Has personal significance A memorable experience worth sharing Feels “natural” to use I am able to use it easily It’s Functional & Reliable / Does what it’s supposed to Functional Usable Convenient Pleasurable 18 UX Design Research Tasks Usability Testing MORE ABOUT: INFORMED BY: Adapted from: Stephen P. Anderson, Seductive Interaction Design, 2011
  • 19.
    “Attractive Things WorkBetter” 19 Visual appearance has a positive effect on performance, leading to reduced task completion times for the attractive version. Source: Donald Norman, Emotional Design, 2003
  • 20.
    The Critical Importance OfEmotions Of information processing goes on at the emotional (sub-conscious level) 95% Emotions drive decisions, which are then consciously justified by reason
  • 21.
    The Role ForSemiotics Neuropsychology Tells Us That the emotional aspect of consumer decision-making is driven by non-verbal cues such as imagery, colour and tonality – the province of Semiotics. So, There Is A Role For Semiotics In helping make websites more emotionally compelling to users.
  • 22.
    Semiotic Cues DrivePerceptions Of Trust & Efficacy 22 Source: Seductive Interaction Design
  • 23.
    Semiotics Help EncodeThe User Adding meaning to the “User Persona” 23 – User personas create an implied user for whom the interface is intended – UX usually focusses on functional needs – Semiotics can help assess whether the codes deployed reflect the values and culture of the user
  • 24.
    Reflecting The UserWell or Badly 24 A user who is seeking to reconcile the desire to project traditional masculinity with the use of “feminine” personal care products may find that the codes deployed here resolve his inner tension. If the implied user is a “fighter” who does not see herself as a disease victim, images depicting a paternalistic doctor/patient message are encoding the wrong message.
  • 25.
    Reflecting Cultural Contexts Logocentricity vs.Image-Centricity Information Requirements Individualism vs. Collectivism Colour Symbolism
  • 27.
    Semiotics Helps Convey TheBrand’s Values Ensuring That Intended Messages Are conveyed and identifying any messages that might not be intentional As With Any Form Of Brand Communications, Semiotics can also assess what messages the brand is sending about itself
  • 28.
    And Perhaps MostImportantly Semiotics Can Help Create A Sense Of Play & Pleasure 28
  • 29.
    Sources Of Pleasure ThreeKey Qualities Required to Create a Sense of Pleasure in a User Interface 29 CHALLENGE Is there a clear goal in the activity? And is the outcome uncertain enough to tease the user? CURIOSITY Does the activity provide an optimal level of informational complexity? Does the interface use randomness in a way that adds variety without making tools unreliable? FANTASY Does the interface embody emotionally appealing fantasies? Source: Thomas, Malone, Heuristics for Designing Enjoyable User Interfaces: Lessons from Computer Games, 1982
  • 30.
  • 31.
    An Interesting Tension The Celebrationof Ambiguity, thus contradicting Navigation’s Imperative of Clarity. Textual Pleasure arises from the pursuit of a mystery: the deferral of meaning that makes the reader want to know more. (Barthes’ Hermeneutic Code) Pleasure & Play Are About
  • 32.
    Ambiguity vs. Clarity: TheRole For Semiotics 32 Navigation Engagement Removing the wrong kind of challenge to keep users from leaving: – Semiotic Inspection Method to assess how effective signs are at communicating desired interaction. – Standardized Icons with conventional meanings. Seeding the right kind of challenge to keep users progressing deeper into the text: – Rich cultural symbolism that connects deeply with the user. – Playful deferral of meaning to tempt pleasurable interaction.
  • 33.
    Conclusions 33 UX IS ATTHE HEART Of innovation design and marketing theory today SEMIOTICS HAS THE OPPORTUNITY To assist in both improving usability & increasing user engagement thereby becoming a critical innovation tool UX RESEARCH Is already embraced by the digital community, but tends to focus on the rational domain of “usability” vs. the more emotional aspect of user engagement
  • 34.
    An Analysis Thought-Starter 34 Source:Stephen P. Anderson, Seductive Interaction Design, 2011
  • 35.
    Thank You! Athena BrandWisdom Inc. 416-778-4275 jeff.hecker@athenabrand.com sarah.johnson@athenabrand.com