De UX (of user experience) zijn alle aspecten van interactie die de klant heeft met jouw bedrijf, jouw diensten en jouw producten. UX-design is het doelgericht sturen van die interactie om de beleving voor jouw klant zo aangenaam en soepel mogelijk te maken.

UX omvat menig aspect, zowel online als offline. Als online marketeer laat ik de meeste aspecten echter links liggen; ik concentreer mij op het online aspect, op de websites van mijn klanten.

En de eerste les die ik mijn klanten geef als het aankomt op een moeiteloze klantenervaring is:

Geef je knoppen de aandacht die ze verdienen.

Laten we eens bekijken hoe je knoppen zodanig kan toepassen op je website, dat je klant sneller vindt wat hij nodig heeft.

Knoppen moeten eruit zien als knoppen

Wanneer een websitebezoeker niet direct begrijpt dat een knop een knop is, zal hij er niet op klikken. Het niet snappen dat hij ergens op kan klikken hindert de bezoeker in zijn site-ervaring. Bij de bezoeker zal dat een gevoel van frustratie opleveren, want hij weet (of vermoedt) dat de info die hij zoekt ergens verborgen zit, maar hij kan er niet aan geraken.

Net zo frustrerend is het wanneer iets eruit ziet als een knop, maar het blijkt geen knop te zijn. Je klikt erop in de verwachting dat er iets gebeurt, doch de gebeurtenis blijft uit.

Om deze reden gebruik ik tegenwoordig in mijn artikel nauwelijks nog dikgedrukte stukken tekst om het belang van een zinsnede te benadrukken. Uit ons onderzoek met heatmaps is gebleken dat lezers die stukken tekst aanzien voor hyperlinks, wat in wezen knoppen zijn in een lopende tekst.

Mocht je nog niet overtuigd zijn van het belang van het bovenstaande, beeld je dan eens in dat je in een lift staat. En in die lift zoek je de knop om de deur te sluiten. Het bedieningspaneel ziet er als volgt uit:

Je intuïtie zegt dat je op de knop moet drukken met het internationaal erkende symbool voor ‘sluit nu toch in hemelsnaam die deur een keer!’. Wanneer je dat doet gebeurt er echter niets. Wat blijkt? Je moet op de knop er rechts naast klikken, met de tekst ‘door close’. Geloof me, het zal even duren voordat je dit begrijpt wanneer je in een dergelijke lift staat.

Frustrerend? Ja.

Maak van je website niet het online equivalent van dit liftpaneel.

Plaats genoeg witruimte rond de knoppen

Witruimte heeft als resultaat dat je knop meer opvalt. Omdat er het aantal afleidende elementen rond de knop geminimaliseerd wordt, gaat de aandacht volledig naar de knop. En dat verhoogt de kans dat de site-bezoeker die knop gebruikt om aan de informatie te komen die hij zoekt.

En zoals mijn collega Dirk al eens schreef in zijn artikel over webdesign en conversie:

Je witruimte hoeft niet wit te zijn.

Hij vermeldt dat het er vooral om gaat dat je de elementen in je pagina (in dit geval een knop) ruimte geeft. De witruimte mag ook een van de kleuren van jouw huisstijl hebben, of zelfs uit een afbeelding bestaan.

Je vraagt om voorbeelden? Dan grijp ik uit gemak even naar de voorbeelden die een andere collega, Raf, gebruikte in zijn artikel over webdesigntrends.

De absolute koning van de witruimte is Google Search, dat uit niet veel meer dan witruimte bestaat:

Zoekmachine Google, de koning van de witruimte

Bij Google gaat je aandacht direct naar de plek waar het om gaat. Goed, bij Google is die plek een zoekveld en niet een knop, maar je begrijpt direct wat ik bedoel wanneer ik spreek over het belang van witruimte.

Todoist heeft wél een knop als middelpunt van de witruimte. En ze bewijzen met hun kleurige webdesign bovendien dat witruimte inderdaad niet wit hoeft te zijn:

Todoist: witruimte die niet wit is

Gebruik duidelijke taal in de knoppen

De woorden die je in en rond de knoppen zet, beïnvloeden of een site-bezoeker erop zal klikken. De knop moet vertellen wat hij gaat ontdekken wanneer hij klikt. De knop moet (in een ideale wereld) ook nog eens prikkelen en uitdagen. In mijn utopie is de knoptekst bovendien origineel geschreven.

Dit heb ik getracht te doen voor de website van Logisch Leren Lezen, een non-profitproject dat zich inzet voor een alternatieve methode voor taalonderwijs voor kinderen. In plaats van alleen standaard knopteksten als ‘lees meer’ of ‘ga verder’ te gebruiken, heb ik ook meer prikkelende versies toegepast: ‘Tijd voor een alternatief’, en ‘Ja, ik wil helpen!’, en ‘Wij hebben jouw hulp nodig’.

Originele, uitdagende knopteksten voor Logisch Leren Lezen

Taal beïnvloedt hoe mensen jouw merk ervaren. Zelfs wanneer die teksten in een knop staan!

Werk met sub-knoppen als er meerdere opties zijn

Soms wil je in 1 knop 2 boodschappen plaatsen. Goed nieuws: dat kan! Maak simpelweg gebruik van het prachtige concept genaamd ‘sub-knoppen’!

Stel dat je een softwarepakket verkoopt via jouw website. Klanten kunnen ofwel een gratis proefabonnement nemen van 30 dagen, ofwel de software direct aanschaffen. Je plaatst dan de ene boodschap in de knop zelf, en de andere in een kleinere lettergrootte (en zonder knop-lay-out) eronder.

Voorbeeld van een knop met sub-knop

Dit is echter niet de enige manier waarop je twee boodschappen kan communiceren, zoals zal blijken uit de volgende tip.

Geef de bezoeker nooit meer dan twee keuzes

In het geval van de eerder genoemde sub-knop wordt het mindere belang van één van de twee keuzes benadrukt middels een kleinere lettergrootte en de afwezigheid van een knop-lay-out. Er is echter een andere manier om twee opties weer te geven; en hierbij hebben de beide opties een knopvorm. Door het toepassen van een andere knopkleur wordt de bezoeker gestuurd in zijn klikgedrag. De knop met de meest opvallende kleur zal gemiddeld gezien vaker worden aangeklikt.

Twee knoppen, waarvan een opvallender dan de andere

Maar pas op: geef de bezoeker nooit meer dan twee keuzes. Een derde (of vierde of vijfde) optie in knopvorm zal voor verwarring zorgen, en niemand houdt van verwarring tijdens een websitebezoek. Bovendien maken te veel opties het onmogelijk om het klikgedrag van de bezoeker te sturen, wat betekent dat hij niet komt op de pagina’s die hij nodig heeft, en evenmin op de pagina’s waar de conversie gebeurt.

Voeg een extra boodschap toe als dit relevant is

Wil je aan een knop een extra boodschap meegeven? Dan heb je twee opties:

• Of je plaatst de boodschap in de knop zelf, zoals in het onderstaande voorbeeld.

Extra boodschap in de knop: Het is gratis

• Of je plaatst de extra boodschap in een kleinere lettergrootte onder de knop, zoals in het onderstaande voorbeeld van de website van 365Cleanit, een van mijn recente copywritingprojecten. Deze manier om een extra boodschap te presenteren lijkt op de sub-knop, met het verschil dat de kleinere tekst in dit geval geen hyperlink bevat.

Extra boodschappen onder de knoppen

Geef de knop een effect om hem te laten opvallen

Onderaan dit artikel zie je een knop om contact met mij op te nemen. Ik nodig je uit om met je cursor over de knop te gaan. Zie je het grafische effect wanneer je dit doet? Dit soort effecten zorgen ervoor dat de knop meer opvalt, wat er voor zorgt dat men er vaker op zal klikken.

Er zijn letterlijk honderden mogelijke knopeffecten. Bij sommige knopeffecten wordt de knop iets groter of kleiner wanneer je er met de cursor overheen gaat. Bij andere verandert de knop van kleur. Bij andere verschijnt er een patroon op de knop.

Google op ‘button hover styles’ en je vindt een ruim aantal sites dat (vaak gratis!) knopeffecten aanbiedt.

Ik ga eerlijk zijn: sommige knopeffecten zijn verschrikkelijk. Ja, ze laten de knop opvallen. Maar ze zorgen er tegelijkertijd ook voor dat jouw website een goedkope uitstraling krijgt. Vraag daarom het advies van een grafisch ontwerper wanneer je een knopeffect kiest, want hij of zij heeft een paar ogen dat getraind is om het goedkope van het elegante te onderscheiden.