UNPKG

@utrecht/button-css

Version:

Button component for the Municipality of Utrecht based on the NL Design System architecture

github.com/nl-design-system/utrecht

38 lines (23 loc) • 2.06 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- @license CC0-1.0 --> # UX Guidelines ## Tekst in de button Buttons moeten duidelijk en voorspelbaar zijn. Een gebruiker moet zonder moeite kunnen voorspellen wat er gebeurt als hij op een button drukt. De tekst op een button moet daarom overdreven duidelijk zijn. De tekst in een button moet beginnen met een duidelijk werkwoord dat vraagt om actie. Om gebruikers context te geven zodat ze weten wat een button gat doen, kan je de volgende formule gebruken: {werkwoord} + {zelfstandig naamwoord}. Een uitzondering hier op zijn generieke acties, zoals "Sluiten", "Cancel" of "OK". De tekst in buttons begint altijd met een hoofdletter. Als er meerdere woorden in een button staan heeft alleen de eerste letter van het eerste woord een hoofdletter. Probeer lidwoorden te vermijden. ## Do - Buttons moeten een duidelijke en precieze tekst hebben. - Gebruik een duidelijk werkwoord in de tekst die een actie aangeeft. - Buttons moeten de juiste kleur in de juiste context hebben. Gebruik alleen een afwijkende kleur als een actie bijvoorbeeld onomkeerbaar is. - Probeer zo min mogelijk buttons te gebruiker op één pagina. Teveel opties hebben is verwarrend voor de gebruiker. - Zorg dat buttons consistent op dezelfde plek staan over verschillende pagina's heen. ## Don'ts - Zorg dat de gebruikers nooit moeten gokken wat een button doet, zeker als de actie van de button onomkeerbaar is. - Gebruik buttons nooit als navigatie, gebruik daar links voor. - Zorg dat button tekst nooit langer is dan 1 regel. ## Buttons versus links Gebruik buttons voor acties. Bijvoorbeeld "Toevoegen", "Sluiten", "Annuleren" of "Opslaan." Gebruik links om te navigeren. ## UX Referenties - [5 rules for choosing the right words on button labels](https://uxmovement.com/buttons/5-rules-for-choosing-the-right-words-on-button-labels/). - [7 basic rules for button design](https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4). - [Comprehensive guide to button design](https://www.invisionapp.com/inside-design/comprehensive-guide-designing-ux-buttons/).