PowerPoint Presentation

Play, Engagement & Addiction: Semiotics & Digital UserInterface DesignSemiofest 2016 - Tallinn, Estonia

Three Opening Thoughts2Every user interface can be evaluated by how effectively it communicates.

No digital artifact is asculturally situated asa website. All seek to provide information, while at the same time conveying, through imagery, modality & interaction, a representation of culture.The text you writemust prove to me that it desires me.

Roland BarthesThe Pleasure of the TextEverett N. McKayUI is Communication

Roxanne M. OConnellVisualizing Culture

Todays Marketing ObsessionThe philosophy du jour is User Experience3

PersuasionEmotional Involvement User Experience

As marketers attempt to find new and improved ways to convince consumers to buy theirproducts, they continually embrace evolving philosophies of how to drive engagement.

UX Defined

A Sub-Set of OverallCustomer Experience

CXCustomer Experience

UXUser ExperienceCustomer Experience (CX)Encompasses all interactions a person haswith 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 ItGrowingIn every category, it is being recognized as a significantbrand differentiator& choice driver.

Businesses have now come to recognize that providing a quality user experience is anessential, sustainable competitive advantage.It is user experience that forms the customers impression of the companys offerings, it is user experience that differentiates the company fromits competitors, and it is user experience thatdetermines whether your customer will evercome back.Jesse James Garrett

Because increasingly theres anunderstanding that UX in all contexts profoundly affects brand relationship.

1

2?

CentralTenet Of UXDesigning for optimal UX meansworking to reduce the amount ofthinking 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 somethingis clickable, etc. the more confidenceand user satisfaction, are eroded.

1

2Making pages self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesnt makeus think about unimportant things feels effortless, whereas puzzling over thingsthat dont matter to us tends to sap ourenergy & enthusiasm - and time.Steve KrugAuthor of Dont Make Me Think

Dont Make Me Think

UX Is Fundamentally AboutReducing Ambiguity7Ensuring cues for interactionare immediately understood

GOALGuiding viewers eyeto critical information

Conforming to expectations already established by interactions withother websites

Avoiding misunderstandings about how to perform a task

Providing feedback to assure users the system is workingin the way they expect (and doing what they want it to do)

UX Research: Focused On NavigationConsidered to be a criticalcomponent of design process8

Primarily concerned with conscious comprehensionof cues and directionsFocused on barriersto task completionExamines behaviour:how users interactwith platforms

Navigation HeuristicsChecklist of best practices for facilitating clarity9

Top and/or leftnavigation provideslinks to other areasof your site. Sites thatuse both top and leftnavigation should putmore general links intop navigation.A Table of Contentsat the start of eachsection lets you easilysee if this is the pageyou need. Linksquickly take youto the right spot.Site maps help navigation, andthey are a must for accessibilityA Search Functionthat tolerates spellingmistakes is best.Breadcrumbs at thetop of the page showwhere you are nowand how you got there.The right navigationcontains importantinformation or links.The last updated datetells users how currentthe information is.

This Means That Design Cues Are Seen As Functional Guides10

The Role of Colour

The Role of TypographyWarm colours tend to advance to theforeground. Cool colours tend to recede,creating a visual hierarchy.

Strong colours create a focal point and areused 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 ofthe content are interpreted as entry points...

Large blocks of text that are left justified andevenly spaced are taken to be body content.Sources: UI is communication, Visualizing Culture

Affordances Must Provide Clear Guidance11

Icons Must First And Foremost Be Legible12

They Must Also BeSimple & Standardized

Comprehension& NavigationConventions mustbe established about what stands for whatTo Facilitate

13

They Must Also BeSimple & StandardizedComprehension& NavigationConventions mustbe established about what stands for whatTo Facilitate

14

Symbolic RichnessCan Be UndesirableA picture is worth a thousand words,unless its an icon: instead of icons explaining, icons often requireexplanation.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 NavigationSemiotic Inspection Method pioneered by Clarisse De Souzaas anapproach to assessing the communicability of interactive discourse16

ANALYZES THE SIGNSUsed by the designer to convey expectations of how users should interact with the system IDENTIFIES ASSUMPTIONSMade by designer about the user as conveyed through the use of signsASSESSESHow effective signs are atcommunicating intended meaningSource: De Souza et al, The Semiotic Inspection Method, November, 2006

But, There Is More To UX Than NavigationThe goal of good UX is not only to allow users to completetasks but also to feel drawn in and engaged17INCREASINGMOTIVATION

REMOVINGFRICTION

UsabilityPsychologySource: Stephen P. Anderson, Seductive Interaction Design, 2011

Frameworks & PrinciplesThe Quality Hierarchy

Experiences& EmotionMEANINGFULHas personal significanceA memorable experience worth sharingFeels natural to useI am able to use it easilyIts Functional & Reliable / Does what its supposed toFunctionalUsableConvenientPleasurable18UX DesignResearchTasksUsabilityTestingMORE ABOUT:INFORMED BY:Adapted from: Stephen P. Anderson, Seductive Interaction Design, 2011

Attractive Things Work Better19

Visual appearance has a positiveeffect on performance, leading to reduced task completion times for the attractive version.Source: Donald Norman, Emotional Design, 2003

The Critical ImportanceOf EmotionsOf information processinggoes on at the emotional(sub-conscious level)

95%Emotions drive decisions,which are then consciously justified by reason

The Role For Semiotics

Neuropsychology Tells UsThat the emotional aspect of consumer decision-making is driven by non-verbalcues such as imagery, colour and tonality the province of Semiotics.

So, There Is A Role For SemioticsIn helping make websitesmore emotionally compelling to users.

Semiotic Cues Drive PerceptionsOf Trust & Efficacy 22

Source:SeductiveInteractionDesign

Semiotics Help Encode The UserAdding meaning to the User Persona23

User personas create animplied user for whomthe interface is intended

UX usually focusses onfunctional needs

Semiotics can help assesswhether the codes deployedreflect the values andculture of the user

Reflecting The User Well or Badly24

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 doesnot see herself as a disease victim, images depicting a paternalistic doctor/patient message are encoding the wrong message.

ReflectingCultural Contexts

Logocentricity vs. Image-CentricityInformation RequirementsIndividualism vs. CollectivismColour Symbolism

Semiotics Helps Convey The Brands Values

Ensuring ThatIntended MessagesAre conveyed and identifying any messages that might not be intentionalAs With Any FormOf Brand Communications,Semiotics can also assess what messages the brand is sending about itself

And Perhaps Most ImportantlySemiotics Can Help CreateA Sense Of Play & Pleasure28

Sources Of PleasureThree Key Qualities Required to Create a Senseof Pleasure in a User Interface 29

CHALLENGEIs there a clear goal in the activity? And is the outcome uncertain enough to teasethe user?CURIOSITYDoes the activity provide an optimal level of informational complexity? Does the interface use randomness in a way that adds variety without making tools unreliable? FANTASYDoes the interfaceembody emotionally appealing fantasies?Source: Thomas, Malone, Heuristics for Designing Enjoyable User Interfaces: Lessons from Computer Games, 1982

29

Examples Of Play30

An InterestingTension

The Celebration of Ambiguity,thus contradicting NavigationsImperative of Clarity.

Textual Pleasure arises from the pursuit ofa mystery: the deferral of meaning that makesthe reader want to know more.

(Barthes Hermeneutic Code)Pleasure & Play Are About

Ambiguity vs. Clarity:The Role For Semiotics32

Navigation

EngagementRemoving the wrong kind of challenge to keepusers 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 keepusers progressing deeper into the text:

Rich cultural symbolism that connects deeplywith the user.

Playful deferral of meaning to tempt pleasurable interaction.

Conclusions33UX IS AT THE HEART Of innovation designand marketing theorytodaySEMIOTICS HAS THE OPPORTUNITYTo assist in both improving usability & increasing user engagement thereby becoming a critical innovation toolUX RESEARCHIs already embraced by the digital community, but tends to focus on the rational domain of usability vs.the more emotional aspectof user engagement

An Analysis Thought-Starter34

Source: Stephen P. Anderson, Seductive Interaction Design, 2011

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