Great user experience
needs great content:
UX copy
Carlot Verloop
Contentspecialist bij Entopic
●
●
●
●
●
Journalistieke studie
Creatieve schrijver
Freelance copywriter
Technisch schrijver
(UX) copywriter
carlot@entopic.com
Waar ga ik het vandaag over hebben?
1. Theorie
4. Denken als een
copywriter
2. De gebruiker
5. Samenwerken
3. Foutmeldingen,
formulieren en buttons
1. Theorie
Meeting your users’ needs
Content
UX
Design
Research
Content
UX
Design
Research
UX
writing
Content
UX
Design
Research
UX
writing
Content
UX
Design
Research
UX
writing
Micro
copy
Buttons
Over het algemeen is microcopy
een klein berichtje in de interface.
UX
writing
Micro
copy
CTA
i
🛈
Headers
Tooltips, CTA’s* of instructies.
Eigenlijk alles dat iets kan
bevestigen, verklaren,
verduidelijken en overtuigen. Het is
de tekst die de gebruiker in de
goede richting stuurt.
Het moet makkelijk te verwerken
en begrijpen zijn.
* Call to Action
Buttons
Over het algemeen is microcopy
een klein berichtje in de interface.
UX
writing
Micro
copy
CTA
i
Tooltips, CTA’s* of instructies.
Eigenlijk alles dat iets kan
bevestigen, verklaren,
verduidelijken en overtuigen. Het is
de tekst die de gebruiker in de
goede richting stuurt.
Het moet makkelijk te verwerken
en begrijpen zijn.
Dit bijvoorbeeld
Headers
* Call to Action
Goede UX copy
Het werkt
Dankzij de juiste principes.
Goede UX copy
Het wordt goed
Als je de brand voice
meeneemt.
Goede UX copy
Sign up.
UX copy - brand voice =
Use an existing account or log in.
Goede UX copy
UX copy + brand voice =
Goede UX copy
Belangrijk om te
onthouden:
Korter is niet altijd beter.
De juiste principes
Google’s principes
● Consistent
● Precies
● Bruikbaar
Scanbare content
Headers en sub headers
UX Copy
●
●
●
●
●
Bullets en lijstjes
UX Copy
Buttons
Foto’s met onderschriften
UX Copy
Beschrijvende links
Nummers als nummer: 1,2,3
Zelfde tekst. Ook even scanbaar?
UX Copy checklist
Precies
● Is de tekst efficiënt geschreven?
● Is de boodschap meteen duidelijk?
Richting aangeven
● Weet de gebruiker wat ze moet doen?
On brand
● Is tekst geschreven in de tone of voice van het merk?
UX Copy checklist
Focus op de gebruiker
● Is de tekst relevant?
● Is er rekening gehouden met de gemoedstoestand van de gebruiker?
● Is deze informatie belangrijk voor het bedrijf of de gebruiker?
Duidelijk
● Is de tekst geschreven in duidelijke concrete taal?
● Begrijpt de gebruiker het onderwerp en de context?
!
k
n
Google’s principes
i
h
t
e
m
e
k
a
m
t
’
n
o
D
● Consistent
● Precies
● Bruikbaar
“Think different.”
Apple
Focus op de gebruiker en dan volgt
de rest vanzelf
Verplaats je in de gebruiker
●
●
●
●
Waar is ze naar op zoek?
Waar wil ze heen?
Wat voelt ze?
Zal ze dit begrijpen?
2. De gebruiker
Oh, don’t use big words. They mean so little...
Wat is relevant?
Wat het bedrijf belangrijk vindt
Wat de gebruiker belangrijk
vindt
De gebruiker is #1
Open deur maar… schrijf vanuit het perspectief van de gebruiker
● Nee: Wij brengen je pakket op...
● Ja:
Jij ontvangt je pakket op...
● Nee: We zijn te bereiken op 070-…
● Ja:
Je bereikt ons op 070-…
Wie zijn ‘de gebruikers’ van jouw
bedrijf?
Leer ze kennen
●
●
●
Enquêtes
Vraag je gebruikers actief om feedback. Bijvoorbeeld over een nieuwe
functie of het gebruik van bepaalde user flows in app of website.
Data
Bekijk clickdata van de website zodat je weet waar de gebruiker vastloopt.
Feedback
Kijk goed naar feedback die gebruikers zelf insturen. Of klachten die ze bij
de klantenservice achterlaten.
3. Foutmeldingen,
formulieren en buttons
The ability to simplify means to eliminate the
unnecessary so that the necessary may speak.
Foutmeldingen
Hoe communiceer je?
!
Onbekende server
verbindingsfout.
Geen toegang mogelijk.
Error code: 5dh0
OK
De server heeft wat meer
tijd nodig.
Probeer het later nog
eens.
OK
2 minuten
Oefenen
Gebruikers werden zomaar
uitgelogd.
Dit is verholpen.
Gebruikers moeten alleen nog één
keer opnieuw inloggen.
!
…?
Er is een bug opgelost.
Je werd uitgelogd.
Log opnieuw in.
…?
Vervelend natuurlijk.
Hoe communiceer je dit op een
vriendelijke manier?
Inloggen
…?
2 minuten
Denk aan
•
Geef de gebruiker nooit de
schuld.
•
Zorg dat het makkelijk lijkt.
•
Denk na over het beeld.
•
Ben vriendelijk.
•
Vermijd moeilijke woorden.
!
…?
Er is een bug opgelost.
Je werd uitgelogd.
Log opnieuw in.
Inloggen
…?
…?
Mogelijke manier
•
Begin niet met het probleem maar
focus op het positieve.
•
Vermijd moeilijke woorden (bug).
•
Stuur de gebruiker in de juiste richting.
•
Zorg dat het een piece of cake lijkt.
Goed om je weer te zien!
Inloggen is verbeterd.
Laten we het uitproberen!
Inloggen
Formulieren
Wat zijn goede voorbeelden van UX copy hier?
Formulieren
De [ i ] herschrijven
Telefoonnummer (mobiel)
Wij vragen je mobiele telefoonnummer
zodat onze vervoerder (Dynalogic) per
SMS kan laten weten wanneer zij het
pakket komen bezorgen.
Wat is relevant en wat niet?
Stap 1
Telefoonnummer (mobiel)
Wij vragen je mobiele telefoonnummer
zodat onze vervoerder (Dynalogic) per
SMS kan laten weten wanneer zij het
pakket komen bezorgen.
Wat is relevant en wat niet?
Zo zou het kunnen
Telefoonnummer
Onze vervoerder (Dynalogic) wil je graag
per SMS laten weten wanneer je pakket
precies bezorgd wordt.
Of zo
Telefoonnummer
Je krijgt van onze vervoerder (Dynalogic)
een SMS over het bezorgmoment, handig
toch?
Testen of je copy werkt?
A/B testen:
Simpel: met collega’s (liefst van een andere afdeling)
Uitgebreid: met focusgroep
Kwalitatief gebruikersonderzoek:
Tijdrovend maar uitgebreide feedback van gebruikers = waardevol
Feedbacktool:
Bijvoorbeeld InVision of Usabilla. Hierin bouw je een simpele versie van je
ontwerp (met tekst en beeld)
Buttons
Albert Heijn zelf afrekenen
Waarom is dit goede UX en
UX copy?
Buttons
Bevestiging
Zorg dat een button de actie bevestigt i.p.v. deze te herhalen
Snap je?
Nee
Ja
Buttons
Opvolgingen
Het gebruiken van dezelfde tekst in buttons die bij een opvolging horen is
erg gebruiksvriendelijk.
Dit is ook fijn voor blinden en slechtzienden: toegankelijkheid
Volgende
Lees meer
Next
Verder
Volgende
Volgende
Volgende
OK
= Verwarrend
= Duidelijk
Buttons
Een zin afmaken
Deze presentatie is in het Nederlands.
OK
Buttons
Een zin afmaken
Deze presentatie is in het Nederlands.
Als de actie
hierna stopt
OK
Buttons
Een zin afmaken
Deze presentatie is in het Nederlands.
Was dit nuttige informatie?
Als je nog
door kan
klikken
Waarom?
Nee
Feedback
Ja
Buttons
Kiezen
Zorg dat de actie duidelijk is.
Foto verwijderen?
Verder
Dit is onduidelijk.
Waar met ik nu klikken?
Cancel
Buttons
Kiezen
Zorg dat de actie duidelijk is.
Foto verwijderen?
Nee, toch
niet
Ja, verwijder
Dat is beter.
De button bevestigt de actie: verwijder
En de bevestiging zit rechts.
Buttons
Een zin afmaken
Zorg dat de actie duidelijk is.
Foto verwijderen?
Nee, toch
niet
Ja, verwijder
Een beetje kleur kan nog meer duidelijkheid scheppen
4. Denken als een
copywriter
Good writers want to understand the user.
Schrijven als een copywriter
Perspectief
● Word de gebruiker > alsof je geen idee hebt
● Begrijp je het bericht omdat je in de materie zit of omdat het zo duidelijk
geschreven is?
● Zou je oudere buurvrouw dit begrijpen?
Schrijven als een copywriter
Kill your darlings
● Geven we hier te veel informatie weg?
● Wat is nu echt het belangrijkste voor de gebruiker?
● Kan er informatie uit?
Denken als een copywriter
Wat is het meest relevant voor de gebruiker?
● Het type foutmelding
of… Of dat het snel is opgelost?
● Dat het bedrijf materialen gebruikt die niet stuk kunnen
of… Dat een klant het product altijd kan terugsturen?
● Dat je locatie delen kan aanzetten in een menu
of… Dat deze app je locatie niet volgt?
Denken als een copywriter
Blijf vragen stellen
● Weet de gebruiker wat ze moet doen?
● Herhaal ik hier informatie?
● Is dit te veel informatie?
Denken als een copywriter
Lezen, opnieuw lezen, lezen en opnieuw lezen
● Goede tekst schrijven is een combinatie van ervaring en de juiste regels
volgen.
● Wat verwacht de lezer na het lezen van de tekst?
● Wat stond er op het vorige scherm en wat staat er op het volgende
scherm?
Brand en doelgroep
● Voor wie schrijf ik dit?
● Is de tekst geschreven in de tone en voice van het merk?
5. Samenwerken
Its amazing what you can accomplish if you
do not care who gets the credit.
Ok Google?
Het belang van
samenwerken
Design + copy + UX =
Goede user experience
Creatieve geesten
De visual designer wil:
● De juiste vormen, kleuren en stijl gebruiken
● Een mooi en effectief design maken
● Consistentie in beeld, plaatjes en foto’s
Creatieve geesten
De UX-designer (interactie designer) wil:
● De gebruiker in de juiste richting sturen
● Logica en bewezen UX-regels toepassen
● Dat de gebruiker weet wat ze moet doen
Creatieve geesten
De copywriter wil:
● Simpele en effectieve woorden gebruiken
● Schrijven in de tone of voice
● Dat de gebruiker de tekst begrijpt
● De gebruiker in de juiste richting sturen
Hoe zorg je dat je op 1 lijn komt?
Simpel: Zet UX, copy en design vanaf het begin in 1 team.
- Maak samen plan van aanpak
- Denk na over richting en flow
- Maak samen eerste schets
Misschien lastig
Maar je gebruikers zijn je dankbaar!
Korte samenvatting
UX copy draait om de ervaring van jouw gebruiker
● Pas de juiste principes toe maar vergeet de tone of voice niet
● Besteed veel aandacht aan buttons, formulier en foutmeldingen
● Verplaats je in de gebruiker
● Zorg dat copy, design en UX goed samenwerken
● Test je tekst zodat je weet of het werkt
carlot@entopic.com
Vragen?
Nee
Ja