Knoppen
Buttons geven gebruikers de mogelijkheid om actie te nemen en keuzes te maken in een enkele klik. Buttons communiceren acties die gebruikers kunnen nemen. Ze moeten makkelijk te identificeren en makkelijk te vinden zijn. Tegelijkertijd moet een button duidelijk de actie aantonen die de gebruiker moet volbrengen. Gebruik vorm en kleur om een button visueel als button herkenbaar te maken voor de gebruiker.
- Plaats buttons waar gebruikers ze verwachten en makkelijk vindbaar zijn
- Van belang zijn: de grootte van een button, de ‘touch size’ en witruimte rondom
- Verschillende platvormen gebruiken verschillende formaten buttons
- Let op positie en volgorde met name als buttons in groepen staan (vorige/volgende) benadruk welke primair is of de belangrijkste actie aanduidt
- Een actieknop moet opvallen: gebruik daarom een contrasterende kleur
- Gebruik visuele hints om aandacht te vestigen op een actieknop
Hoe te gebruiken: Primaire buttons
De primaire actie is die button waarmee de gebruiker de taak volbrengt.
Als de gebruiker op het punt staat een onomkeerbare actie te ondernemen is de ‘Annuleer’ knop de primaire actie en krijgt deze visueel meer aandacht omdat de gebruiker goed na moet denken voordat hij/zij reageert.
In dit geval moet de veilige actie de aandacht krijgen en dus niet de onomkeerbare actie.
- Tekst wit, Asap semibold 16
- De rechthoekige grasgroene achtergrond (
#39870c) heeft afgeronde hoeken van 4 pixels en een hoogte van 48 pixels - Wordt één keer per scherm gebruikt tenzij het dezelfde actie betreft
- Uitzondering is gebruik in de header of in een modal
- Niet elk scherm heeft een primaire knop nodig
Hoe te gebruiken: Secundaire buttons
- Tekst grasgroen, Asap semibold 16
- De rechthoekige witte achtergrond heeft een omlijning van 1 pixel in grasgroen (
#39870c), afgeronde hoeken van 4 pixels en een hoogte van 48 pixels - Dit is de standaard button voor de meeste gebruikscasussen
Hoe te gebruiken: Tertiaire buttons
Tertiaire buttons worden gebruikt voor overige diverse acties: de actie is belangrijk maar hoeft niet datgene te zijn waarnaar de gebruiker op dat moment op zoek is.
Voorbeelden hiervan zijn ‘wijzigen’ of ‘toevoegen’ mits dit natuurlijk geen primaire acties zijn.
In het algemeen wordt hiervoor een minder prominente button stijl gebruikt.
- Tekst grasgroen (
#39870c), Asap semibold 16 - En/of icoon in grasgroen (
#39870c)
Hoe te gebruiken: Kleine buttons
Door de toevoeging van de class .btn-sm worden buttons kleiner getoond.
Standaard zijn primaire en secundaire buttons 48 pixels hoog en worden dan 30 pixels hoog.
Hoe te gebruiken: Buttons in sectieberichten
Gebruik buttons in een sectiebericht om een actie uit te voeren.
Gedrag en toegankelijkheid
- Als zintuiglijke informatie wordt gebruikt (denk bijvoorbeeld aan knoppen met een chevron om naar de vorige of volgende pagina te gaan), voeg dan de tekst “volgende pagina” en “vorige pagina” toe;
- Elementen zoals buttons die er hetzelfde uitzien, moeten ook overal hetzelfde ‘doen’;
- Button tekst moet beschrijven wat het doet.