Persuasive design op het web en verder. Voorbeelden en workshop.

65
PERSUASIVE DESIGN - Anton Vanhoucke - Een workshop in online verleiden @antonvh

description

Waar Usability het alleen gemakkelijk maakt voor de bezoeker van je website, helpt Persuasive Design om de gebruiker te motiveren en zo meer en langere interactie uit te lokken. Met inspirerende voorbeelden ontdek je hoe Persuasive Design tegenwoordig slim toegepast wordt. Je leert de wetenschappelijke principes achter Persuasive Design en past die toe.

Transcript of Persuasive design op het web en verder. Voorbeelden en workshop.

Page 1: Persuasive design op het web en verder. Voorbeelden en workshop.

PERSUASIVE DESIGN - Anton Vanhoucke -

Een workshop in online verleiden

@antonvh

Page 2: Persuasive design op het web en verder. Voorbeelden en workshop.

DOEL VAN DE WORKSHOP · Praktisch inzicht in het gebruik van persuasive

design

Waar begin ik?

Saliency? Hoe werkt persuasive design ?

Waarom persuasive deisgn?

Page 3: Persuasive design op het web en verder. Voorbeelden en workshop.

MAAK HET INTERACTIEF! · Vragen ophangen · Leuk, maar wat betekent dit voor…

... Mijn team

... Mijn gemeente

... Mijn projecten

... Mijn taken

... mezelf

Page 4: Persuasive design op het web en verder. Voorbeelden en workshop.

DEZE OCHTEND · 09:30 · 09:50 · 10:00 · 10:30 · 10:40 · 10:50 · 11:45 · 12:15 · 12:30

Kennis maken Inleiding Mechanismes & voorbeelden Ontwerptools Koffie Zelf aan de slag Presentaties Conclusie Lunch

Page 5: Persuasive design op het web en verder. Voorbeelden en workshop.

KENNIS MAKEN Wat doe je? Waarom persuasive design? Ervaring?

Page 6: Persuasive design op het web en verder. Voorbeelden en workshop.

FABRIQUE · Merken · Design · Interactie

· Sinds 1992

Page 7: Persuasive design op het web en verder. Voorbeelden en workshop.

WELKOM IN DELFT

Page 8: Persuasive design op het web en verder. Voorbeelden en workshop.

WELKOM IN AMSTERDAM

Page 9: Persuasive design op het web en verder. Voorbeelden en workshop.

WELKOM IN ROTTERDAM

Page 10: Persuasive design op het web en verder. Voorbeelden en workshop.

WE WERKEN VOOR B2C MERKEN

Page 11: Persuasive design op het web en verder. Voorbeelden en workshop.

WE WERKEN SAMEN

Page 12: Persuasive design op het web en verder. Voorbeelden en workshop.

BEKEND VAN RIJKSMUSEUM,

Page 13: Persuasive design op het web en verder. Voorbeelden en workshop.

ALLERHANDE APP,

Page 14: Persuasive design op het web en verder. Voorbeelden en workshop.

EN 9292

Page 15: Persuasive design op het web en verder. Voorbeelden en workshop.

INLEIDING Voor een effectieve workshop

Page 16: Persuasive design op het web en verder. Voorbeelden en workshop.

THEORIE Met inzichten van:

Page 17: Persuasive design op het web en verder. Voorbeelden en workshop.
Page 18: Persuasive design op het web en verder. Voorbeelden en workshop.
Page 19: Persuasive design op het web en verder. Voorbeelden en workshop.
Page 20: Persuasive design op het web en verder. Voorbeelden en workshop.

VOORBEELDEN Nieuw!

2 Bonus Technieken

Page 21: Persuasive design op het web en verder. Voorbeelden en workshop.

SIGNALS

Page 22: Persuasive design op het web en verder. Voorbeelden en workshop.

SPARKING

Page 23: Persuasive design op het web en verder. Voorbeelden en workshop.

FACILITATING

Page 24: Persuasive design op het web en verder. Voorbeelden en workshop.

LOSS AVERSION

Page 25: Persuasive design op het web en verder. Voorbeelden en workshop.

LOSS AVERSION

Page 26: Persuasive design op het web en verder. Voorbeelden en workshop.

LIMITED DURATION

Page 27: Persuasive design op het web en verder. Voorbeelden en workshop.

SOCIAL PROOF

Page 28: Persuasive design op het web en verder. Voorbeelden en workshop.

AUTHORITY

Page 29: Persuasive design op het web en verder. Voorbeelden en workshop.

AUTHORITY

Page 30: Persuasive design op het web en verder. Voorbeelden en workshop.

HUMAN STARE

Page 31: Persuasive design op het web en verder. Voorbeelden en workshop.

VISUAL IMAGERY

Page 32: Persuasive design op het web en verder. Voorbeelden en workshop.

VISUAL IMAGERY - SPOKEN

Page 33: Persuasive design op het web en verder. Voorbeelden en workshop.

METAPHOR

4G

3G

4G internet is 22x as fast

Page 34: Persuasive design op het web en verder. Voorbeelden en workshop.

SALIENCY

Page 35: Persuasive design op het web en verder. Voorbeelden en workshop.

SALIENCY

Page 36: Persuasive design op het web en verder. Voorbeelden en workshop.

ORDER

Page 37: Persuasive design op het web en verder. Voorbeelden en workshop.

ORDER

Page 38: Persuasive design op het web en verder. Voorbeelden en workshop.

SALIENCY & DEFAULTS

Page 39: Persuasive design op het web en verder. Voorbeelden en workshop.

SELF-EFFICACY

Page 40: Persuasive design op het web en verder. Voorbeelden en workshop.

RECIPROCITY

Page 41: Persuasive design op het web en verder. Voorbeelden en workshop.

CURIOSITY

Page 42: Persuasive design op het web en verder. Voorbeelden en workshop.

STATUS

Page 43: Persuasive design op het web en verder. Voorbeelden en workshop.

FLUENCY

Page 44: Persuasive design op het web en verder. Voorbeelden en workshop.

FLUENCY

Page 45: Persuasive design op het web en verder. Voorbeelden en workshop.

FLUENCY

Hele kleine lettertjes

Page 46: Persuasive design op het web en verder. Voorbeelden en workshop.

STORY

Page 47: Persuasive design op het web en verder. Voorbeelden en workshop.

UNEXPECTED

Page 48: Persuasive design op het web en verder. Voorbeelden en workshop.

SET COMPLETION Bonus 1

Page 49: Persuasive design op het web en verder. Voorbeelden en workshop.

FRONT LOADING Bonus 2

Page 50: Persuasive design op het web en verder. Voorbeelden en workshop.

CONSISTENCY & COMMITMENT Bonus 3

Page 51: Persuasive design op het web en verder. Voorbeelden en workshop.

TOOLS Gebruikt door vele tevreden professionals

Page 52: Persuasive design op het web en verder. Voorbeelden en workshop.

DESIGN WITH INTENT

Page 53: Persuasive design op het web en verder. Voorbeelden en workshop.

WHEEL OF PERSUASION

Page 54: Persuasive design op het web en verder. Voorbeelden en workshop.

ABILITY · inSights

Page 55: Persuasive design op het web en verder. Voorbeelden en workshop.

GEBRUIKEN IN BRAINSTORMS

Page 56: Persuasive design op het web en verder. Voorbeelden en workshop.

ABILITY · inSights

Page 57: Persuasive design op het web en verder. Voorbeelden en workshop.

GEBRUIKEN BIJ ONTWERPEN

Page 58: Persuasive design op het web en verder. Voorbeelden en workshop.

CHECK · http://requisitevariety.co.uk/design-with-intent-

toolkit/ · http://www.wheelofpersuasion.com/ · http://getmentalnotes.com/ · http://www.fabrique.nl/insights/

Page 59: Persuasive design op het web en verder. Voorbeelden en workshop.

TOEPASSEN Wij gaan persuasive ontwerpen

Page 60: Persuasive design op het web en verder. Voorbeelden en workshop.

AANPAK 1.  Vorm teams van 2-3 personen 2.  Kies een belangrijke pagina van je site 3.  Bedenk wat het gewenste gedrag is van je

bezoeker 4.  Kies willekeurig 1 principe uit inSights of Mental

notes 5.  Vraag je af: “Hoe kunnen met dit principe

bezoekers verleiden om gedrag x te vertonen” 6.  Schets of schrijf dit op een post-it 7.  Als je niks kan bedenken neem je de volgende

Page 61: Persuasive design op het web en verder. Voorbeelden en workshop.

NA DEZE TRAINING Waar begin je?

Page 62: Persuasive design op het web en verder. Voorbeelden en workshop.

JE EIGEN VERZAMELING

Page 63: Persuasive design op het web en verder. Voorbeelden en workshop.

MEER LEZEN · Stanley Milgram · Edward Deci · Robert Cialdini · Chip & Dan Heath · Tom Stafford and

Matt Webb · Daniel Kahneman · Stephen Anderson

Page 64: Persuasive design op het web en verder. Voorbeelden en workshop.

ANTWOORDEN? Tot slot

Page 65: Persuasive design op het web en verder. Voorbeelden en workshop.

@antonvh