Zoals het knopje thuis klikt, klikt het nergens

Zoals het knopje thuis klikt, klikt het nergens

Danielle Enzler
Danielle Enzler - 3 september 2019
Matthew T Rader

Door een knop toe te voegen aan je design, maak je van een saaie link ineens een element dat opvalt en conversie stimuleert. Een knop ontwerpen lijkt eenvoudig, maar het kan flink verkeerd gaan. In dit artikel geven we een aantal tips voor het ontwerpen van een goede knop.

Geef een knop het uiterlijk van een knop

Het klinkt voor de hand liggend, een knop een uiterlijk geven van een knop, maar dat is het niet. Wanneer weet je als gebruiker dat je ergens op kunt klikken? Als je voor het eerst op een website komt, moet je als gebruiker gelijk kunnen zien welke elementen klikbaar zijn en welke niet. Wat laat een gebruiker denken dat iets een interactief element is? Ze gebruiken eerdere ervaringen en visuele elementen om die betekenis aan een element te geven. Daarom is het belangrijk om rekening te houden met kleur, grootte, schaduw, vorm et cetera, om een knop een knop te laten lijken. 

Een aantal voorbeelden van visuele uitingen van knoppen:

  • Gevulde knop met ronde hoeken


  • Knop met alleen outlines en vierkante hoeken, de bekende ghost button


  • Knop met schaduw


  • Disablede knop


  • Primaire en secundaire knoppen

Uit onderzoek blijkt dat de knop met schaduw voor gebruikers de beste indicatie is dat een knop een knop is. Sommige onderzoeken suggereren ook dat knoppen met afgeronde hoeken de informatieverwerking verbeteren en onze ogen naar het midden van het element trekken.

Maak de actie (overdreven) duidelijk

Generieke knopnamen kunnen gebruikers frustreren. Wanneer je bijvoorbeeld een bestand gaat weggooien en je krijgt de melding “Weet je zeker dat je dit bestand wilt verwijderen?” en daaronder de knoppen ‘OK’ en ‘Annuleren’. Dan is het voor niet iedereen duidelijk op welke knop hij moet klikken. Om die reden is het fijner als je i.p.v. ‘OK’ de knopnaam ‘Bestand verwijderen’ gebruikt.  Bij zo'n duidelijke knoptekst ontstaat er geen twijfel en dat vind iedere gebruiker fijn. Daarbij kan je bij een verwijder-knop ook de knopkleur aanpassen naar bijv. rood, omdat het om een ‘gevaarlijke’ actie gaat. 

Formulier knopteksten als een handeling

Waarom ‘Bestand verwijderen’ en niet gewoon ‘verwijderen’? De meeste knoppen bevatten werkwoorden om aan te geven wat een knop doet, bijv. ‘Verwijderen’. Dit is niet het geval bij bijvoorbeeld ‘Terug’ en ‘Volgende’, terwijl ze toch hetzelfde lijken te werken. Om het consistent te houden en om de actie natuurlijker te maken, is het gebruik van zelfstandig naamwoord + werkwoord een goede schrijfwijze. Bijvoorbeeld: ‘Bestand opslaan’ en ‘Volgende stap’.

Schrijf de knopnamen consistent

Beslis hoe je de knopnamen toont:

  • lower case - alles in onderkast (volgende sectie);
  • upper case - alles in kapitalen (VOLGENDE SECTIE); 
  • sentence case - alleen eerste woord met hoofdletter (Volgende sectie); of
  • title case - alle woorden die beginnen met een hoofdletter (Volgende Sectie).

Wees wel consistent hierin; gebruik het overal op de website op dezelfde manier. 

Maak de knop groot genoeg

Vooral op mobiele devices is de knopgrootte erg belangrijk. Zo is het cruciaal rekening te houden met verschillende handformaten. Een minimale grootte van 44 x 44 pixels is een goede richtlijn. Belangrijke knoppen kunnen natuurlijk ook groter worden gemaakt dan minder-belangrijke knoppen. Wanneer minder-belangrijke knoppen nog teveel opvallen, kan je de knop qua uiterlijk iets kleiner maken, maar het touchgebied op minimaal 44x44px houden, zodat de gebruiker er wel gemakkelijk op kan klikken.

Wees zuinig met het toevoegen van knoppen 

Bedenk wat je wilt bereiken met de pagina en toon alleen voor de belangrijkste acties knoppen. Bezorg gebruikers geen keuzestress door heel veel knoppen op een pagina aan te bieden. Onderzoeken wijzen uit dat wanneer gebruikers teveel opties krijgen aangeboden, ze uiteindelijk geen actie ondernemen en dus niks doen. En dat is niet wat je wilt. Ook hier is 'less' dus weer 'more'. 

Breng hiërarchie aan met de knoppen

Maak een verschil tussen primaire knoppen die erg opvallen (voor de belangrijkste conversiepaden) en secundaire knoppen die minder opvallen (voor minder belangrijke conversiepaden). Dit is nodig omdat een ontwerp waarbij er te veel knoppen om aandacht schreeuwen de gebruiker slecht stuurt in het maken van een keuze en het stimuleren van conversie.

Overweeg ghost buttons als secundaire knop

Uit een onderzoek is gebleken dat een nieuwsbrief met alleen gevulde knoppen 7% meer conversie had dan de nieuwsbrief met alleen ghost buttons. Om die reden zijn ghost buttons het beste te gebruiken als secundaire knop. Houdt daarbij wel rekening met leesbaarheid, duidelijkheid en contrast. Op drukke afbeeldingen vallen ze namelijk vaak weg en bijvoorbeeld bij een witte tekstkleur valt een witte ghost button ook weg. 

Wees consistent met de volgorde van knoppen

Als het gaat over de volgorde van primaire en secundaire knoppen is het belangrijk dat je hier consistent in bent. Wanneer je ervoor kiest om de primaire knop eerst te tonen (want: belangrijkste) of de secundaire knop eerst (want: dan kent de gebruiker alle overige opties voordat ze doorgaan) dan voer je dat binnen de hele website op die manier door. 

De volgorde van knoppen kan ook te maken hebben met het verwachtingspatroon van de gebruiker. Voorbeeld ‘vorige/volgende’ knoppen in paginering. Het is logisch om de ‘volgende’-knop rechts te zetten, omdat die knop je ook vooruit brengt.  

Geef voldoende visuele feedback

Wanneer gebruikers op een knop klikken, verwachten ze visuele feedback. Wanneer ze die niet krijgen kunnen ze het gevoel hebben dat de actie niet is gelukt en zullen ze de actie herhalen. Visuele feedback kan het indrukken van een knop zijn, maar kan bijvoorbeeld bij een downloadknop het veranderen van de knop naar een procesbalkje en vervolgens overloopt in een vinkje.

Wil je ook een knop die het beste klikt?

Wil je ook een knop die het beste klikt?

We helpen je graag verder met een uitgebalanceerd en gebruiksvriendelijk webdesign. Bel voor informatie naar Daniëlle Enzler of Paul Traas op 010 221 02 00.