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.
Slide 1
Slide 2
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?
Slide 3
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.
Slide 4
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.
Slide 5
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.
Slide 6
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.
Slide 7
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”.
Slide 8
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
Slide 9
Zo hebben we bijvoorbeeld verspreid over al die sites meer dan 150 componenten om websites en apps mee op te bouwen.
Slide 10
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.
Slide 11
Ook hebben we meer dan 100 richtlijnen over het maken van formulieren, en da’s waar we vandaag voor bijeen zijn.
Slide 12
Die zijn wat concreter en specifieker dan WCAG en gaan over wat een ontwikkelaar en ontwerper zouden moeten doen.
Slide 13
En in onze community wordt veel gebruikersonderzoek gedaan, dat nemen we natuurlijk mee.
Slide 14
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?
Slide 15
Het eerste onderwerp. Toetsenbord: ”Een formulier moet goed werken en goed te begrijpen zijn voor een toetsenbordgebruiker”
Slide 16
Alles moet bijvoorbeeld bereikbaar zijn met toetsenbord / Tab?
Slide 17
Alles moet ook bruikbaar zijn met enkel toetsenbord (incl kalenders ed).
Slide 18
En als je door de pagina gaat wil je zien waar je bent (video van tabben door navigatie NCDT)
Slide 19
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.
Slide 20
Wie heeft er iets over toetsenbord?
Slide 21
Foutmeldingen: “Gebruik duidelijke en goed getimede foutmeldingen en logische validatieregels”
Slide 22
Foutmeldingen Op het juiste moment (en dus niet te vroeg)
Zie: The problem with live validation and what to do instead
Slide 23
Schrijf het uit in tekst (niet alleen kleur of icoon)
Slide 24
Schrijf ook een duidelijke foutmelding:
- Beschrijf wat er mis is.
- Op maat voor het veld.
- Punt aan het einde van de zin.
Slide 25
Foutmeldingen Vermijd HTML-validatie <input type=”text” required />
Slide 26
Foutmeldingen Zet een samenvatting + lijst van gelinkte fouten boven het formulier Zie video op: Foutmeldingen in een formulier nldesignsystem.nl/voorbeelden/patronen/formulieren/foutmeldingen
Slide 27
Foutmeldingen ✋
Slide 28
Labels
Slide 29
Labels Zet het label boven het formulierveld (Niet ernaast, niet eronder en niet in het formulierveld)
Slide 30
Labels Zorg dat het label altijd zichtbaar is
Slide 31
Labels Alleen tekst, geen links
Slide 32
Labels Vermijd ingewikkelde labels
Slide 33
Labels ✋
Slide 34
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.”
Slide 35
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.”
Slide 36
Meerdere stappen Benoem de stap (ook in de <title> en kop)
Slide 37
Meerdere stappen Tekst en uitleg over het formulier zoveel mogelijk buiten het formulier (<form>) zelf
Slide 38
Meerdere stappen Maak het heel duidelijk wanneer het verzonden gaat worden, bijvoorbeeld met een samenvatting en beschrijvende knop (“Versturen”)
Slide 39
Meerdere stappen ✋
Slide 40
Bevestigingspagina “Informeer gebruikers dat hun data met succes is verstuurd en wat de eventuele vervolgacties zijn”
Slide 41
Bevestigingspagina Voorkom onzekerheid, benoem ook welke informatie is verstuurd.
Slide 42
Bevestigingspagina Vervolgstappen
Slide 43
Bevestigingspagina ✋
Slide 44
Doe mee! - Deel gebruikersonderzoek en best practices - Link naar richtlijnen - Stel vragen en geef feedback nldesignsystem.nl
Slide 45
Vragen? Samen maken we de digitale overheid inclusief en toegankelijk. Meedoen of meer weten? nldesignsystem.nl
Slide 46
nldesignsystem.nl
