Op deze pagina houden we je graag op de hoogte van de vorderingen en ontwikkelingen rondom het NL Design System. Elke 2 weken organiseren we een (online) sessie (‘heartbeat’) waarin het kernteam je bijpraat en je kunt meedenken en -praten. Deze regelmatige en impromptu sessies worden onder andere aangekondigd op de Code for NL Slack.
Dinsdag 8 juni
Rogier begon met de uitkomsten van de formulierensessies en op welke manier de resultaten zijn verwerkt. Er is een documentatiepagina beschikbaar waarop richtlijnen en voorbeelden staan. Hier kan iedereen aan bijdragen en we roepen dan ook graag op om dat te doen.
Tekst en taalgebruik | NL Design System (nl-design-system.github.io)
Vervolgens gaf Renée van de gemeente Utrecht een update van de voortgang. Zij zijn bezig geweest met het verwerken van gebruikersonderzoek in Storybook: Onderzoek / Online meldingen – Page ⋅ Storybook (nl-design-system.github.io)
Robbert nam daarna het stokje over om te vertellen wat er nog meer gedaan is de afgelopen weken. Net als Utrecht is ook Den Haag weer goed bezig geweest met verschillende onderdelen. Ze hebben o.a. (verder) gewerkt aan een Style Dictionary JSON en een Brand Identity Storybook.
Er zijn vanuit het kernteam gesprekken geweest met o.a. Belastingdienst, DUO, Logius en de SVB.
Robbert is bezig geweest met technische onderdelen, zoals visuele regressietesten. En de komende periode gaat het kernteam verder aan de slag met schrijven van documentatie (guidelines), zodat ook voldoende mensen feedback kunnen gaan leveren.
Dinsdag 25 mei
Op dinsdag 25 mei was de 3e werksessie over formulieren. Tijdens deze laatste en afrondende sessie in de reeks hebben we nog 1 keer met de aanwezigen de formulierenreis doorgelopen. We hebben voornamelijk stilgestaan bij de voorbereiding van een formulier en de validatie en foutpreventie. Een uitgebreide terugkoppeling vind je in het nieuwsbericht over deze sessie. In de nieuwsbrief staat een samenvatting van de belangrijkste conclusies.
Dinsdag 11 mei
Dit keer vertelden zowel de gemeente Utrecht als Den Haag over hoe zij werken met en bijdragen aan het NL Design System.
Jeroen en René van Utrecht begonnen met een energieke presentatie over hoe zij de samenwerking tot nu toe ervaren. Met name het (snelle) schakelen met Robbert en het steeds bekender worden met de werking en het nut van de design tokens zorgen voor veel energie. Leuk om te horen dat ze naar mate ze dieper de materie induiken, ze ook steeds meer de relevante haakjes en het groter plaatje helder krijgen. En blij zijn dat het NL Design System in een community-effort-aanpak wordt vormgegeven. Voor het kernteam een goede bevestiging en altijd leuk om te horen dat deelnemers steeds zekerder worden van dat dit een goede werkwijze is.
Jeroen was ook open over de zaken die wat meer tijd (en energie) kosten. Zoals het werken met Github. Maar gaf ook aan daar steeds meer feeling mee te krijgen. De GitHub-pagina van Utrecht is terug te vinden via: GitHub – nl-design-system/utrecht: Design System POC of gemeente Utrecht.
Daarna nam Maarten van de gemeente Den Haag het stokje over. En hij heeft een korte update gegeven van hun huidige werkwijze met het studententeam van RYSST. De code van Den haag is terug te vinden op: GitHub – Gemeente-DenHaag/denhaag-component-library: Material-UI Based React Component Library adhering to the guidelines and principles of the NL Design System.”
Presentatie van Maarten (gemeente Den Haag)
Dinsdag 13 april
Een van de resultaten van de algemene formulieren werksessie van 16 maart was een ‘formulierenreis’. Tijdens de werksessie van 13 april zijn we vervolgens dieper ingegaan op hoe we een formulier kunnen groeperen en opsplitsen in meerdere stappen, als onderdeel van stap 1 van het ontwerpen van een formulier ‘Vormgeving en structuur’:
In 6 break-out groepen is aan de slag gegaan met de volgende 3 vragen:
- Hoe groepeer je onderwerpen?
- Hoe breek je een formulier op dat veel informatie bevat?
- Hoe navigeer je hierdoor en weet je te allen tijde waar je vandaan komt, momenteel bent, en naartoe kan gaan?
Alle uitkomsten hiervan zijn terug te vinden op het Miro-bord van de sessie.
Lees meer over deze werksessie in het artikel met het verslag.
Dinsdag 30 maart
Het kernteam gaf een samenvatting van de werksessie over formulieren op 16 maart en een korte update over de samenwerking met Utrecht en Den Haag.
Dinsdag 16 maart: werksessie formulieren
Op basis van alle input van het Miro-bord en de break-out sessies hebben we een analyse gemaakt en we zien een aantal thema’s veelvuldig terugkomen. Dit zijn dan ook de thema’s die we nader uit willen werken om tot gedegen richtlijnen te komen.
De thema’s zijn:
- Vormgeving en flow
- Validatie
- (Gebruikers-)testen
- Gebruiksvriendelijkheid
- Hulp
- Inclusie en toegankelijkheid
- Content
Wanneer we ons specifiek richten op formulieren zien we dat er vooral op het thema ‘vormgeving en flow’ nog veel ruimte zit voor nadere uitwerking. Het betreft dan met name de opbouw en vorm van een formulier. Denk hierbij aan de layout en visuele vormgeving, het wanneer en hoe een formulier op te breken in meerdere stappen en hoe hierbinnen te navigeren en voortgang te tonen en de afhandeling dus hoe de invoer van data op te sommen en wat te tonen na het verzenden hiervan.
Dinsdag 2 februari
Omdat het kernteam merkt dat het niet voor de hele doelgroep vanzelfsprekend is om op GitHub te werken, geeft Rogier een korte demo.
Robbert geeft een voorbeeld uit de praktijk: de refinement-sessies met de gemeente Den Haag voor een specifiek component. Daarbij wordt gekeken naar welke onderdelen te onderscheiden zijn en wat per component nodig is. Vervolgens wordt aan elk onderdeel een naam gegeven waarbij de code dus dezelfde naamgeving aanhoudt als die in Figma. Ook worden design tokens bepaald: wat is nodig om aan te passen? En welke varianten kennen we? Deze hele lijst met elementen vormt een eerste Definition of Ready. En daarna kan de ontwikkeling van start.
Door dit zo uitgebreid aan te pakken, wordt iedereen meegenomen in het proces en de afwegingen. Ook zorgt dit ervoor dat het makkelijker is om te kijken wat organisatiespecifiek is en wat kan worden meegenomen en opgenomen in het NL Design System.
De ambitie van het kernteam is om een publieke refinement te doen met de hele community. We gaan dan aan de slag met onderdelen die organisaties kunnen/willen vervangen door een NL Design System-element. En wat is daar dan voor nodig? De refinement plannen we binnenkort in.
In het Storybook is heel veel documentatie toegevoegd, met veel dank aan iedereen die hieraan heeft meegewerkt.
Een onderdeel waar we nog mee aan de slag gaan zijn de design tokens. En dan met name de samenhang tussen Storybook en JSON – als doorgeefluik tussen de verschillende programma’s (o.a. Figma) en de technische inrichting ervan. Voor vragen hierover kun je het beste contact opnemen met Robbert of Yolijn.
De Storybook met de webcomponents is online terug te vinden. Aan alle aanwezigen is de oproep gedaan om de openbare backlog aan te vullen met issues m.b.t. het NL Design System. Ook wanneer er al een issue op staat dat relevant is. Aanvullen mag met tekst, screenshots e.d. Op die manier kan goed inzichtelijk worden waar organisaties mee bezig zijn en/of gaan. En wat er vervolgens opgenomen kan worden voor breed gebruik in het NL Design System.
Dinsdag 19 januari 2021
Rogier geeft een presentatie over de UX-updates die zijn doorgevoerd. En ook zijn er in Storybook een aantal nieuwe features toegevoegd, waaronder de werking van design tokens. De Storybook met de webcomponents is online terug te vinden.
Aan alle aanwezigen is de oproep gedaan om de openbare backlog aan te vullen met issues m.b.t. het NL Design System. Ook wanneer er al een issue op staat die relevant is. Aanvullen mag met tekst, screenshots e.d. Op die manier kan goed inzichtelijk worden waar organisaties mee bezig zijn en/of gaan. En wat er vervolgens opgenomen kan worden voor breed gebruik in het NL Design System.
Naast de voortgang van het kernteam zijn de meet ups ook een gelegenheid waar betrokken partijen een inkijkje kunnen geven van waar ze mee bezig zijn en hoe ze samenwerken met het NL Design System. Hiervoor presenteert Adiel van de gemeente Den Haag over hun plannen en vorderingen voor het servicetraject rondom ‘Mijndenhaag’ en de ontwikkeling van kerncomponenten die zij willen bijdragen aan het NL Design System.
Presentatie ‘heartbeat’ 19-01-2021
Dinsdag 5 januari
Na een korte inleiding van het NL Design System en een voorstelrondje door de leden van het kernteam (Robbert, Rogier en Yolijn) is ingegaan op de huidige stand van zaken van het NLDS.
Er zijn verschillende ‘doelgroepen/gebruikers’ van het NL Design System. Developers, designers en contentspecialisten. We hopen die lijnen bij elkaar te brengen, maar voor iedere doelgroep zijn ook aparte kanalen beschikbaar om verder door te praten (o.a. op Slack).
Het kernteam is nu bezig met 5 basiscomponenten: wij richten ons nu met name op het proces rondom de ontwikkeling, zodat de community op vergelijkbare wijze de overige components kan bijdragen. (Design tokens als parameters). En zowel de Figma als Web components zijn geversioneerd, huidige aanpak lijkt erop de wijzen dat de storybook/documentatie uiteindelijk laat zien welke versies bij elkaar passen
Handige links:
- Storybook webcomponents
- Er is een openbare backlog aangemaakt waarop iedereen issues kan zetten m.b.t. het NL Design System
- De presentatie van de bijeenkomst op 5 januari 2021