Skip to content

Commit

Permalink
docs: richtlijnen: aanpassing richtlijn buttontekst van formulieren (#…
Browse files Browse the repository at this point in the history
…1973)

Aanpassen advies button tekst naar aanleiding van discussie #1894
Het advies voor de buttotekst is nu gelijk aan wat we gaan gebruiken in
het template voor meerstappenformulieren.
Besloten door @jeffreylauwers en @rianrietveld
  • Loading branch information
rianrietveld authored Jan 28, 2025
1 parent 56649f1 commit ec88ea7
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/docs-button-text.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nl-design-system-unstable/nlds-design-tokens": minor
---

Richtlijnen voor buttonteksten gelijkgetrokken met hoe ze in meerstappenformulieren gebruikt gaan worden.
24 changes: 16 additions & 8 deletions docs/richtlijnen/formulieren/button/4-text/_guideline.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,29 @@

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 bijvoorbeeld “Wijzig uw adresgegevens.
- Liever niet Volgende, maar bijvoorbeeld “Naar stap 2, je gegevens invullen”.
- Liever niet “Volgende”, maar bijvoorbeeld “Naar stap 3, uw gegevens controleren”.
- 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.
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.

![Een button met het label 'wijzig' en een button met het label 'Wijzig uw gegevens'.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_formulier_buttons_label.png)

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 [<span lang="en">Icon Usability</span>](https://www.nngroup.com/articles/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.
Deze richtlijn is een aanbevolen werkwijze, gebaseerd op gebruikersonderzoek:
## Gebruikersonderzoek

- [<span lang="en">Wat overheden kunnen leren van de ideale webshop</span>](https://www.ncdt.nl/programma/wat-overheden-kunnen-leren-van-de-ideale-webshop), presentatie van Anouk Butterlin.
Deze richtlijn is een aanbevolen werkwijze, gebaseerd op gebruikersonderzoek.
Lees hiervoor de inzichten uit ons gebruikersonderzoek: ['Volgende stap' actie binnen een meerstappenformulier](https://www.nldesignsystem.nl/voorbeelden/patronen/formulieren/volgende-stap).
En lees de [disussie over het Meerstappenformulier](https://github.com/orgs/nl-design-system/discussions/364) op GitHub.

## Gerelateerde links:

- Het NL Design System [Figma Template meerstappenformulier](https://www.figma.com/design/taAnsV55PVP0cmw18BnMDk/NLDS---Voorbeeld---Templates?node-id=1528-3874)
- [Wat overheden kunnen leren van de ideale webshop](https://www.ncdt.nl/vorige-edities/2023/wat-overheden-kunnen-leren-van-de-ideale-webshop2/), presentatie van Anouk Butterlin.
- [<span lang="en">Why Your Form Buttons Should Never Say 'Submit'</span>](https://uxmovement.com/forms/why-your-form-buttons-should-never-say-submit/), UX Movement.
- [<span lang="en">3 common examples of button text that degrades UX and how to rewrite them so they’re clear</span>](https://adamsilver.io/blog/3-common-examples-of-button-text-that-degrades-ux-and-how-to-rewrite-them-so-theyre-clear/), Adam Silver.
- [<span lang="en">3 common examples of button text that degrades UX and how to rewrite them so they’re clear</span>](https://adamsilver.io/blog/3-common-examples-of-button-text-that-degrades-ux-and-how-to-rewrite-them-so-theyre-clear/), van Adam Silver.
- [Where to put buttons on forms](https://adamsilver.io/blog/where-to-put-buttons-on-forms/) van Adam Silver.

0 comments on commit ec88ea7

Please sign in to comment.