Verbeter je formulieren met NL Design System
A presentation at Nationaal Congres Digitale Toegankelijkheid in in Driebergen, Driebergen-Rijsenburg, Netherlands by Hidde de Vries
Welkom bij deze sessie over het verbeteren van je formulieren met NL Design System! We gaan kort iets vertellen over NL Design System, en daarna gelijk met jullie kijken naar hoe je goede formulieren maakt.
Eerst wil ik graag even kijken wie er vandaag bij zijn!
(graag een hand omhoog)
Zijn er mensen van de overheid? Gemeenten? Provincies? Rijk?
Zijn er mensen die toegankelijkheidsonderzoeken doen?
En zijn er tot slot mensen die aan design systems werken?
Voor wie er niet aan Design Systems werkt, leg ik eerst wat dat eigenlijk zijn. Er zijn veel definities, eentje is: best practices van een organisatie die bij elkaar zijn verzameld.
Dat kan van alles zijn, bijvoorbeeld componenten waaruit pagina’s worden opgebouwd, denk aan knoppen, tabjes, of ‘cards’. Die zijn vaak beschikbaar in code, en ook in een ontwerptool.
Daarnaast bevatten design systems ook vaak richtlijnen. Daarin kan context worden geggeven, bijvoorbeeld over hoe componenten samen kunnen worden gebruikt, of hoe een organisatie kijkt naar websites en wat iedereen daarover zou moeten weten. Bij overheidssites wil je daar bijvoorbeeld uitleggen hoe je pagina’s toegankelijk maakt.
Nog meer dingen die je in design systems in het wild tegen kunt komen zijn, naast componenten en richtlijnen, voorbeelden, patronen, stijlgidsen (voor tekst) en kleurenpaletten.
Veel organisaties in de overheid gebruiken design systems om zichzelf het werk makkelijker te maken en minder vaak dat spreekwoordelijke wiel opnieuw uit te vinden.
Ok, maar wat is NL Design System dan?
NL Design System brengt design system teams bij elkaar om samen te werken aan best practices. Het gedeelde doel daarbij is: makkelijk consistente, toegankelijke en gebruiksvriendelijke websites en applicaties maken.
Dat willen (en moeten) we allemaal doen, dus waarom niet samen?
Dit is een project uitgevoerd door Stichting ICTU in opdracht van het Ministerie van Binnenlandse Zaken en Koninkrijksrelaties.
Het gaat in totaal om een samenwerking tussen 500+ web professionals bij de overheid en hun leveranciers. Het gaat om organisaties in elke laag van de overheid: van gemeenten tot Rijk.
We verzamelen de beste componenten, richtlijnen, patronen voor het bouwen van online diensten, daarmee zijn we eigenlijk een soort “best of”.
Zo verzamelen we bv formulierfoutmeldingen van verschillende organisaties (video toont pagina Discussion: form errors en scrollt er doorheen, op de pagina staana foutmeldingen bij heel veel organisaties)
Slide 9
Zo hebben we bijvoorbeeld verspreid over al die sites meer dan 150 componenten om websites en apps mee op te bouwen.
We hebben ook uitleg bij WCAG, nu nog voor de meest voorkomende succescriteria, dat bouwen we gestaag maar zeker uit naar heel WCAG. Daar vind je bijvoorbeeld referenties, hoe te testen en gebruikersonderzoek.
Ook hebben we meer dan 100 richtlijnen over het maken van formulieren, en da’s waar we vandaag voor bijeen zijn.
Die zijn wat concreter en specifieker dan WCAG en gaan over wat een ontwikkelaar en ontwerper zouden moeten doen.
En in onze community wordt veel gebruikersonderzoek gedaan, dat nemen we natuurlijk mee.
We gaan vandaag 5 verschillende onderwerpen behandelen die veel fout gaan in formulieren.
Graag openen we na elk onderwerp het gesprek met jullie allemaal, en wil ik graag weten: waar lopen jullie tegen aan? Wat zie je in audits? Hoe werkt dit in jullie systeem?
Het eerste onderwerp. Toetsenbord: ”Een formulier moet goed werken en goed te begrijpen zijn voor een toetsenbordgebruiker”
Alles moet bijvoorbeeld bereikbaar zijn met toetsenbord / Tab?
Alles moet ook bruikbaar zijn met enkel toetsenbord (incl kalenders ed).
En als je door de pagina gaat wil je zien waar je bent (video van tabben door navigatie NCDT)
Om volgorde te beïnvloeden kun je tabindex toevoegen, dan zet je de volgorde naar je hand. Maar doe dat niet, want dan wordt je verantwoordelijk voor alle volgordes en dan is het erg lastig om een logische volgorde te krijgen. Gebruik dus geen positieve tabindex.
Wie heeft er iets over toetsenbord?
Foutmeldingen: “Gebruik duidelijke en goed getimede foutmeldingen en logische validatieregels”
Foutmeldingen Op het juiste moment (en dus niet te vroeg)
Zie: The problem with live validation and what to do instead
Schrijf het uit in tekst (niet alleen kleur of icoon)
Schrijf ook een duidelijke foutmelding:
- Beschrijf wat er mis is.
- Op maat voor het veld.
- Punt aan het einde van de zin.
Foutmeldingen Vermijd HTML-validatie <input type=”text” required />
Foutmeldingen Zet een samenvatting + lijst van gelinkte fouten boven het formulier Zie video op: Foutmeldingen in een formulier nldesignsystem.nl/voorbeelden/patronen/formulieren/foutmeldingen
Foutmeldingen ✋
Labels
Labels Zet het label boven het formulierveld (Niet ernaast, niet eronder en niet in het formulierveld)
Labels Zorg dat het label altijd zichtbaar is
Labels Alleen tekst, geen links
Labels Vermijd ingewikkelde labels
Labels ✋
Meerdere stappen “Het kan gebruiksvriendelijk en overzichtelijk zijn om het formulier in meerdere stappen op te delen, of om een vraag per stap te stellen.”
Meerdere stappen “Het kan gebruiksvriendelijk en overzichtelijk zijn om het formulier in meerdere stappen op te delen, of om een vraag per stap te stellen.”
Meerdere stappen Benoem de stap (ook in de <title> en kop)
Meerdere stappen Tekst en uitleg over het formulier zoveel mogelijk buiten het formulier (<form>) zelf
Meerdere stappen Maak het heel duidelijk wanneer het verzonden gaat worden, bijvoorbeeld met een samenvatting en beschrijvende knop (“Versturen”)
Meerdere stappen ✋
Bevestigingspagina “Informeer gebruikers dat hun data met succes is verstuurd en wat de eventuele vervolgacties zijn”
Bevestigingspagina Voorkom onzekerheid, benoem ook welke informatie is verstuurd.
Bevestigingspagina Vervolgstappen
Bevestigingspagina ✋
Doe mee! - Deel gebruikersonderzoek en best practices - Link naar richtlijnen - Stel vragen en geef feedback nldesignsystem.nl
Vragen? Samen maken we de digitale overheid inclusief en toegankelijk. Meedoen of meer weten? nldesignsystem.nl
nldesignsystem.nl
Zijn je formulieren wel toegankelijk? NL Design System werkt met een brede community van specialisten aan richtlijnen voor formulieren. In deze sessie hoor je kort een aantal do’s en don’ts, waarna je zelf aan de slag gaat met het herkennen van fouten. Let op: er zijn prijzen te winnen!
Resources
The following resources were mentioned during the presentation or are useful additional information.
