Presented by Sarah Johnson of Athena Brand Wisdom at Semiofest 2016 in Tallinn, Estonia.

1. Play, Engagement & Addiction:
Semiotics & Digital User
Interface Design
Semiofest 2016 - Tallinn, Estonia

2. 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

3. 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.

4. 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.

5. 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
?

6. 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

7. 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)

8. 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

9. 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.

10. 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

11. “Affordances” Must Provide
Clear Guidance
11

12. “Icons” Must First And
Foremost Be Legible
12

13. They Must Also Be
Simple & Standardized
Comprehension
& Navigation
Conventions must
be established about
“what stands for what”
To Facilitate

14. They Must Also Be
Simple & Standardized
Comprehension
& Navigation
Conventions must
be established about
“what stands for what”
To Facilitate

15. 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

16. 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

17. 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

18. 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

19. “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

20. 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

21. 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.

22. Semiotic Cues Drive Perceptions
Of Trust & Efficacy
22
Source:
Seductive
Interaction
Design

23. 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

24. 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.

25. Reflecting
Cultural Contexts
Logocentricity vs. Image-Centricity
Information Requirements
Individualism vs. Collectivism
Colour Symbolism

27. 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

28. And Perhaps Most Importantly
Semiotics Can Help Create
A Sense Of Play & Pleasure
28

29. 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

30. Examples Of Play
30

31. 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

32. 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.

33. 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

34. An Analysis Thought-Starter
34
Source: Stephen P. Anderson, Seductive Interaction Design, 2011

35. Thank You!
Athena Brand Wisdom Inc.
416-778-4275
jeff.hecker@athenabrand.com
sarah.johnson@athenabrand.com