Duidelijke buttontekst die beschrijft wat de button doet
Geef buttons een duidelijke tekst, die beschrijft wat er gaat gebeuren.
- Liever niet 'Verstuur', maar bijvoorbeeld 'Meld je aan', 'Aanmelden', 'Geef je op', 'Verstuur uw klacht' of 'Registreer'.
- Liever niet 'Wijzig', maar 'Wijzig uw adresgegevens'.
- Liever niet 'Volgende', maar 'Volgende stap'.
- Liever niet 'Vorige', maar 'Vorige stap'.
Dit is geruststellend en duidelijk. De gebruiker weet wat er gaat gebeuren en zal minder onzeker zijn om een formulier in te vullen en te versturen. Bij 'Volgende' kan er tenslotte van alles gebeuren.
Buttons kunnen tekst bevatten, een icoontje en een combinatie van beide. Uit gebruikersonderzoek blijkt dat niet iedereen alle icoontjes snapt. Het is beter om naast een icoontje ook zichtbare tekst te plaatsen. Volgens de Nielsen Norman Group in Icon Usability.
Het begrijpen van een icoon is gebaseerd op eerdere ervaringen. Omdat de meeste iconen geen vaste betekenis hebben, zijn tekstlabels nodig om de betekenis eenduidig over te brengen.
Gebruikersonderzoek
Deze richtlijn is een aanbevolen werkwijze, gebaseerd op gebruikersonderzoek. Lees hiervoor de inzichten uit ons gebruikersonderzoek: 'Volgende stap' actie binnen een meerstappenformulier. En lees de disussie over het Meerstappenformulier op GitHub.
Gerelateerde links:
- Het NL Design System Figma Template meerstappenformulier
- Wat overheden kunnen leren van de ideale webshop, presentatie van Anouk Butterlin.
- Why Your Form Buttons Should Never Say 'Submit', UX Movement.
- 3 common examples of button text that degrades UX and how to rewrite them so they’re clear, van Adam Silver.
- Where to put buttons on forms van Adam Silver.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.