fashion social media effect

73
PET  Designing for Persuasion, Emotion and Trust  Presented by Barry Briggs (@quiffboy) Monday 5 th September 2011 Northern User Experience #nuxuk

Upload: wulan-apriliani

Post on 08-Aug-2018

213 views

Category:

Documents


0 download

TRANSCRIPT

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 1/85

PET Designing for Persuasion,

Emotion and Trust 

Presented by Barry Briggs (@quiffboy)

Monday 5th September 2011

Northern User Experience#nuxuk

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 2/85

Today’s Session•  A bit about us

•  Overview of Persuasion, Emotion and Trust (PET)

•  How PET works with User-Centered Design (UCD)•  A look at some PET techniques in detail

•  Case study – applying PET to a real world example

•  The power of the Dark Side – using UX for evil

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 3/85

We are Code Computerlove Hello and welcome 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 4/85

Some background•  Established in 1999 & still independently owned

•  Current headcount of 55 people

•  Delivering a mix of strategy, channel, UX, creative & technical

•  Launched over 300 websites & online applications

•  Won lots of awards for the work

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 5/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 6/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 7/85

 Hello, my name is Barry•  UX Architect at Code Computerlove

•  Finished uni in 1998 & first “proper” job as a Web developer

•  Worked for a couple of digitalagencies in Leeds before moving toWilliam Hill in 2001

•  William Hill’s lead front-enddeveloper before becoming theirfirst UX Architect in 2005

•  Embedded UX values & principlesinto their design & developmentteams

•  Been at Code since May 2008

Barry BriggsUser Experience

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 8/85

 Developing the user experience

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 9/85

Analysis Design Implementation

Expert review 

Competitor review 

Design concepts

Evaluation

User personas

 Audience research

Expert review 

User journeys

Information architecture

Prototypes

Usability testing

Standards & guidelines

Usability testing

 Accessibility & standards

User feedback

User testing

KPI measurement

Stakeholder research

User Centred Design  

Process engineering

Design walkthrough

Usability testing

 Analytics audit

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 10/85

 Designing for 

 Persuasion, Emotion & Trust  Henceforth referred to as PET…

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 11/85

What is PET? •  Rooted in social psychology & pioneered by Human Factors Inc 

•  A methodology for making user experiences more engaging,compelling, and effective

•  50+ techniques

•  Complements classic usability & user experience best practice

•  Adds a layer of psychology to “gently nudge” potential customerstowards your stated goal

•  Offline retailers have been using similar tools for years

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 12/85

 Facilitates activities: 

Browse 

Search

Consume 

Comprehend 

Interact 

Usability

Can Do

 How PET worksalongside usability

PET

Will Do

 Encourages users to: 

Engage 

Connect 

Convert Return

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 13/85

 P.E.T.•  Persuasion techniques relate to the mechanics; the

triggers to an action

•  Emotion techniques are about eliciting a desiredemotional response during a process

•  Trust techniques are for establishing credibility,providing assurances and removing risk

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 14/85

 Evil Science? •  Marketeers may notice some familiar concepts in here

•  Psychologists probably consider it a bit “Psych 101”

•  Some concepts may sound cynical, manipulative or exploitative•  They could be used for evil purposes…

•  (We’ll show you some of these later)

•  Remember: It’s a toolset. Do with it what you will.

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 15/85

Analysis Design Implementation

Expert review 

Competitor review 

Design concepts

Evaluation

User personas

 Audience research

Expert review 

User journeys

Information architecture

Prototypes

Usability testing

Standards & guidelines

Usability testing

 Accessibility & standards

User feedback

User testing

KPI measurement

Stakeholder research

Process engineering

Design walkthrough

Common PET touch points within the larger UCD process  

Usability testing

 Analytics audit

User Centred Design  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 16/85

 Audience 

 Research & User 

Understanding 

Site Goals 

 Definition 

& Design 

 How that works  

Use the toolkit toidentify which PETprinciples fit withyour stated goalsand then look toimplement in your

definition work

 Build & Test 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 17/85

 PET Toolkit 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 18/85

 PersuasionThe following summary describes some of the Persuasion techniques.

 Anchoring. When making decisions we rely too heavily on one piece of information oranchor.

 Authority. Use your authority and others will obey.

Completion. We need to complete that which is started.

Commitment. If we make a commitment, we often feel bound to follow through on it

Consistency. We like to maintain consistency between what we think, say and do.Contrast. We notice and decide by difference between two things, not absolutes.

Framing. Our perception is influenced by the information we are presented.

Investment. If I have invested in something, I do not want to waste that investment.

Reciprocation. If I give something to you, you are obliged to return the favour

Repetition. If something happens often enough, I will eventually be persuaded.

Scarcity. I want now what I may not be able to get in the future.

Similarity. We trust people who are like us or who are similar to people we like.Social Proof . When uncertain we take cues other people

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 19/85

We like to maintain consistencybetween what we think, say and do

Consistency

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 20/85

Consistency•  Ask someone to state a position, declare their intentions or

show a small gesture of support

•  Why? Because people don’t like to be seen to change their

mind•  People will generally act in a manner consistent with their first

action

•  And here's the stinger: this applies even if a subsequentrequest asks them to make a much larger commitment – aslong as it's consistent with their initial commitment

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 21/85

First you get an

amount 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 22/85

Then you ask themto commit & enter their details

Repeat the amount throughout the process to remind them of their initial pledge 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 23/85

When scanning visual informationwe are unconsciously drawntowards things which stand outfrom others

Contrast 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 24/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 25/85

Contrast •  What do you want people to focus on?

•  Use colour, shapes and sizes to create visual contrast

•  Subtle movements on an otherwise static page grab attention•  Contrast can also be applied to time

•  Regular vs. Intermittent/occasional email newsletters

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 26/85

Our perception is influencedby the information we arepresented. 

 Framing

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 27/85

 Framing•  For difficult or important concepts, wrapping the

action in a story can make it easier to understand

and more persuasive•  Framing subscriptions or regular payments as costing“less than a cup of coffee a day” can help peoplerationalise repeat payments

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 28/85

Examples of how your money will be used 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 29/85

Scarcity

I want now what I may not beable to get in the future

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 30/85

Scarcity•  We infer value in something that has limited availability

or is promoted as being scarce

•  Can apply to goods or time-based offers

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 31/85

Offer applies this

weekend only 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 32/85

WARNING: Overuse can 

devalue this technique 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 33/85

People will do things that theysee other people are doing

Social Proof 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 34/85

Other people are doing it, soit must be legit 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 35/85

Even people you know are doing it, so it must be GOOD 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 36/85

 EmotionThe following summary describes some of the Emotion principles.

Visceral processing. We immediately react to pleasing visual stimuli.

Behavioural processing. We respond favourably to learned, expected behaviours.

 Aesthetic usability. Aesthetically pleasing designs are often perceived to be easier to use. Arousal. When aroused we are fully engaged and hence more likely to pay attention

Social contagion. Our emotions are affected by the actions of those we see around us.

Optimal level of challenge. We like to be challenged and tested, but not too much.

Goal setting. We are compelled to strive to achieve a goal if it is achievable.

Knowledge of results. We continue our actions if we are shown evidence of their success.

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 37/85

We immediately react topleasing visual stimuli 

Visceral processing

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 38/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 39/85

Visceral processing•  Add surprise, delight and playful elements to create an emotional

bond with your audience•  Find subtle ways to add illustrative imagery, interactions, visual

cues and visual feedback•  These can brighten up routine tasks and feel like rewards when

discovered•  Can reinforce Framing 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 40/85

We respond favourably tolearned, expected behaviours 

 Behavioral processing

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 41/85

 Behavioral processing•  If it works like something we already know, it feels easier and we

like it more

•  Learning how to use something new shouldn’t be hard work

•  One of the useful side-effects of Facebook’s ubiquity•  Facebook, Amazon and eBay have set expectations for complex

interactions such as image uploading, rating, liking, commenting•  Learned interactions you can re-use

•  Creates self-confidence and a sense of accomplishment

•  Increased adoption, usage rates & satisfaction due to familiarity

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 42/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 43/85

Aesthetically pleasing designs areoften perceived to be easier to use

 Aestheticusability

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 44/85

 Aesthetic usability•  Attractive things work better

•  Or at least we perceive them to be easier to use

•  Opinions based on visual stimuli happen very quickly •  This “first impression” can shape your perceptions

•  The halo effect

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 45/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 46/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 47/85

We like to be challenged andtested, but not too much. 

Optimallevel of 

challenge

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 48/85

Optimal level of challenge•  Game design – starts simple but gets harder as you progress

•  A game can live or die by getting this difficulty curve correct

•  Can create sense of achievement by making that process alittle trickier

•  Not appropriate for all cases!

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 49/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 50/85

Trust Trust is influenced by a combination of factors which act as Trust Markers.

Design quality. We perceive value in the things we see.Current content. Up-to-date content indicates freshness and responsiveness.

Extensive quality content. We trust an authority that is plentiful with knowledgeable.Links. We judge other based on their recommendations and affiliations.Certifications. We trust established, certified organisations and trademarks.Testimonials. We trust organisations who trust and value their customers opinionsFamous people and common people. I trust people like me, and celebrities I admire.Peer advice. We trust our peers more than we do official marketing bumf.

 Argue against self interest. We trust recommendations that are not in self interest.Technology. We always expect technology to work, trust is damaged if it does not.

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 51/85

We trust established, certifiedorganisations and trademarks 

Certifications

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 52/85

Security messaging

Accepted payment methods

Security messaging

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 53/85

Technology

We always expect technologyto work, trust is damaged if itdoes not 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 54/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 55/85

Case Study First TransPennine Express

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 56/85

Overview of TPE as a client 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 57/85

Their original site  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 58/85

Our first revision  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 59/85

 Re-brand & re-work  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 60/85

Context-aware mobile site  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 61/85

 Year One Year Two Year Three

50% increase inreturn visits

135% increase inonline sales

 Year Four

Travel Website of theyear 2009 (DADIs)

80% increase inonline sales

103% increase inonline ticket sales

We’ve had some great results 

Doubled customerdatabase to 150,000

45% increase inonline sales

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 62/85

 Let’s see some PET techniques in action

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 63/85

The basic advert. Usable but not inspiring

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 64/85

Price - OPTIMUM LEVEL OF DISSONANCE and CONTRAST 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 65/85

By-line – the wording draws the user in,creating engagement, DRIVE FULFILLMENT, FRAMING and FEEL GOOD.

It also uses elements of OVERSTATING THE NEGATIVE IMPACT of not doing something

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 66/85

Call to action - impliesSCARCITY or LIMITED DURATION 

Design elements - CONTRAST and VISCERAL PROCESSING

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 67/85

Official event logo – 

adds VISUAL APPEAL and CONTRAST, and serves as a TRUST MARKER 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 68/85

Change the branded imagery – using people addsFRAMING (and elements of SOCIAL PROOF) and builds on VISCERAL PROCESSING

Example of typical savingsallows the brainto calculate the worth and value of the price 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 69/85

Show the offer’s expiry date – compliments the call to action and the savings message to reinforce SCARCITY and LIMITED DURATION 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 70/85

The original  Our new PET-enhanced version

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 71/85

The power of  

the Dark Side  

Image credit:Lucasfilm 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 72/85

 Evil by design…•  There’s a difference between BAD UX and EVIL UX

•  Bad UX can be down to poor attention to detail,laziness, lack of understanding of the web

•  Evil UX (boo hiss!) is completely the opposite…

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 73/85

 Evil UX 

•  It’s done by people who sit in chairs like this•  No, honestly!

•  Evil UX is deliberately crafted withloving care

•  Utilises an understanding of humannature and psychology

• Specifically designed to fool, trickor exploit users

•  Examples of this exist on the web,in software and even in the real world

Image credit:Suck.uk.com 

The box around this content

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 74/85

The box around this content uses a technique called Uniform Connectedness

And placing this optional extra in with compulsory passenger information is atechnique called Proximity 

Note how the instructions for removing

insurance are OPT OUT,convoluted and located AFTER the option

Travel insurance 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 75/85

Here’s the option toselect no insurance -In between LATVIAand LITHUANIA

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 76/85

Image credit:nytimes.com 

 Facebook’s 

 privacy statement  

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 77/85

OMG!! That would be a disaster…

…IF either of these things happened…

…and the standard password reminder service didn’t work.

Skip this step

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 78/85

The (Don’t) Contact Us page•  Offering a feedback form but no other contact details

•  Means the user has no record of contacting you, giving youplausible deniability

• They cannot chase you up any other way•  There’s no context to subsequent correspondence

•  Every follow-up must be done through thefeedback form & feels like yet another first approach

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 79/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 80/85

Link to opt out ishidden behind a‘more info’ link 

Image credit:darkpatterns.org 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 81/85

Opt out 

Opt in

Compulsory 

Image credit:darkpatterns.org 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 82/85

 Facilitates activities: 

Browse 

Search

Consume 

Comprehend 

Interact 

Usability

Can Do

In Summary 

PET

Will Do

 Encourages users to: 

Engage 

Connect 

Convert 

Return

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 83/85

 Further Reading

•  Human Factors International – pioneers of PEThttp://www.humanfactors.com/ 

•  Mental Notes – Persuasion reference cardshttp://getmentalnotes.com/ 

• Changing Minds – Persuasion principleshttp://changingminds.org/principles/principles.htm 

•  What makes them click?http://www.whatmakesthemclick.net 

•  Dark Patterns – Examples of Evil UX in the wild

http://wiki.darkpatterns.org/ 

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 84/85

8/22/2019 fashion social media effect

http://slidepdf.com/reader/full/fashion-social-media-effect 85/85

Thank you Any questions?