We zijn uit de startblokken met de werkgroepen van het NL Design System! Woensdag 24 april hebben twintig ontwerpers, UX experts en ontwikkelaars met elkaar nagedacht over principes, criteria en concrete componenten.
We zijn uit de startblokken met de werkgroepen van het NL Design System!
(Voor wie er niet eerder over hoorde: dat is een verzameling van herbruikbare componenten, waarmee je als ontwerper of ontwikkelaar eenvoudig digitale diensten kunt ontwikkelen. Denk aan knoppen, formulierelementen en paginatemplates. Meer achtergrond lees je op de projectwebsite.)
Woensdag 24 april hebben de Werkgroep Componenten en de Werkgroep Tools en Technieken (voorheen: Expertgroep Design System), uitgerust na het Paasweekend, de eerste eieren gelegd. Twintig ontwerpers, UX-experts en ontwikkelaars hebben met elkaar nagedacht over principes, criteria en concrete componenten. En dat met heel veel enthousiasme en energie. Doel van de bijeenkomst was om op een aantal onderwerpen een vliegende start te maken en op de dag zelf al tot een zichtbare opbrengst te komen. En dat is gelukt! Tot aan en tijdens de volgende werksessie op 23 mei (in het Stadskantoor van de Gemeente Utrecht, 13.00-17.00) worden de resultaten verder uitgebreid en aangevuld.
De eerste samenwerking, met een Lego-opdracht als opwarmer
Werkgroep componenten
Ontwerpprincipes
Bij het uitwerken van klantreizen, user experiences en concrete ontwerpen helpt het om vanuit en visie of gedachte op ontwerp en interactie te werken. Veel organisaties werken daarom met zogenaamde ‘Design Principles’, ofwel ontwerpprincipes. De werkgroep heeft een aantal van de bestaande en bekende lijstjes kritisch bekeken en een eigen selectie gemaakt. Uitgangspunt daarbij was dat de principes aansluiten op de resultaten uit het rapport ‘Informatie op Maat’ (over wat burgers verwachten van de overheid) en vooral helpen bij het selecteren en beoordelen van componenten. Een subgroep heeft de geselecteerde principes een slag verder gebracht.
Ontwerpprincipes versie 0.1:
- De gebruikersbehoefte staat voorop
- Ontwerp en werking is voor iedereen, niemand wordt buiten gesloten
- Ontwerp en werking is voorspelbaar/consistent (niet per se uniform)
- Ontwerp en werking hebben focus, zonder overbodige elementen of handelingen
- Behoefte, ontwerp en werking is onderbouwd met onderzoek
De subgroep zal de principes voor de volgende bijeenkomst verder beschrijven en zo nodig aanvullen. Per principe zal worden uitgeschreven wat we eronder verstaan. Zo is voor principe I al benoemd dat ‘aandacht voor de context’ en ‘ontwerpen voor mensen’ hier onderdeel van uitmaken. ‘Ontwerpen voor toegankelijkheid’ op zijn beurt hoort bij principe II.
Criteria ter beoordeling componenten
Onderstaande criteria zijn door de groep geselecteerd (op basis van resultaten uit eerdere meetups) om als eerste uit te werken en in meer of mindere mate uitgeschreven.
Criteria versie 0.1:
- Component is uniek en/of generiek toepasbaar
- Component is getest op gebruikers
- Component is toegankelijk
- Component is stijlonafhankelijk
- Component voldoet aan gedefinieerde eisen en standaarden
- Component is gedocumenteerd
De subgroepen die aan de verschillende criteria hebben gewerkt maken voor de volgende bijeenkomst een verdiepingsslag op de eerste lijst en doen suggesties voor relevante uitbreiding.
Selectie urgente componenten
Op onderbuik is een eerste lijstje van componenten samengesteld. Aan dit lijstje is de meeste behoefte, dan wel er is snel winst te behalen.
- Formulierelementen (in zijn algemeen)
- Navigatie
- Zoeken
- Meldingen
- Links
- Skiplink
- Buttons
- Logo
- Cards
Uit het lijstje zijn twee componenten gekozen: navigatie en meldingen. Met deze componenten in het achterhoofd is gekeken of de eerder opgestelde principes en criteria werkbaar zijn. In beide gevallen bleek dit het geval.
Een belangrijke constatering tijdens het werken met componenten en criteria is dat een component zelden op zichzelf te beoordelen is. Vrijwel altijd zal dit in de context van een gebruikerservaring of klantreis zijn. Daarom is besloten om als eerste een contactformulier uit te werken naar componenten. Dit geeft context, iedereen heeft een contactformulier, formulierelementen hebben urgentie en het levert bovendien meteen een flinke lijst componenten op.
Uitwerken componentbeschrijving
Tot slot is een start gemaakt met het visualiseren en beschrijven van de weergave van componenten in de tool. Twee groepen hebben onafhankelijk van elkaar een beschrijving uitgewerkt. Hiervoor was uiteindelijk minder tijd beschikbaar dan beoogd. Desondanks; de kop is er af.
Werkgroep Tools en Technieken
Deze richt zich in het kader van de componentenbibliotheek op het ophalen van welke tools en technieken (formaten, informatie) er nodig zijn voor ontwerpers en ontwikkelaars in verschillende fases van het ontwerp- en implementatieproces. Het doel van deze kick-off sessie was de selectie van de basis (formaten, informatie) die we vanuit NL Design System willen ondersteunen. We hebben discussies gehad over de principes die we daarvoor hanteren:
-
de componenten richten zich op:
- mobiel gebruik en desktopgebruik
- van websites en webapplicaties
- door middel van responsive design
- de basisstijl van componenten laat voldoende ruimte voor huisstijl
-
het is eenvoudig om te beginnen met het gebruiken van de componenten:
- bruikbaar op basis van online documentatie
- gebruik van gangbare (open web) standaarden
- geen installatie(s) vereist
- geen framework(s) vereist
-
de componenten zijn los te gebruiken:
- stijlen interfereren niet met bestaande stijlen
- component-code los te selecteren (dus niet: honderden regels code terwijl je alleen de
<h1>nodig hebt) - maar ook: het is mogelijk om alles in één keer te includeren als basis
- geteste, robuuste code; snel, klein, valide, WCAG2.1, veilig, etc.
- beheerste uitrol van nieuwe versies
-
duidelijk wat de status van een component is (voorstel, productie, verouderd, etc.)
- gezamenlijk beeld voor designers en developers
- gezamenlijke taal/labeling/id’s van componenten
- tools moeten bruikbaar zijn voor beide doelgroepen
- we voorzien in de basis, zelf uit te breiden op basis van duidelijke ontwerpprincipes
-
rationale achter componenten duidelijk:
- wanneer gebruik je iets wel, wanneer niet?
- waarom zijn beslissingen genomen (op basis van welke observaties of best practises)?
We hebben gezocht naar een lijst van noodzakelijke tools en technieken, die is verwerkt in de multicriteria-analyse:
-
op componentniveau:
- unieke identifier
- functionele beschrijving
- Figma
- Sketch
- SVG (preview)
- CSS
- SASS
- SASS design tokens
- HTML snippet
- “Vanilla” JS
- gebruikershandleiding
- test documentatie (WCAG2.1)
-
op bibliotheekniveau:
- versiebeheer (semver.org)
- Figma
- Sketch
- CSS
- SASS
- SASS design tokens
- “Vanilla” JS
- Gebruikershandleiding
-
standaarden
- layout: Prettier defaults (prettier.io)
- CSS naming: BEM (getbem.com/introduction)
-
Tools
- issues: Github
-
nog niet besproken/besloten
- licentie(s)
- cdn (edited)
Volgende stap is dat we op basis van deze lijst kijken naar de manier waarop enkele bestaande design systems geïmplementeerd zijn (DUO, Belastingdienst, SVB, GOV.UK, …), om te kijken wat we kunnen hergebruiken en met wie we kunnen samenwerken.
We doen dit op basis van twee aspecten:
- De bereidheid tot samenwerken van het projectteam van het design system.
- De geschiktheid van het design system zelf, gebaseerd op de multicriteria-analyse.
Tot slot
Hartelijk dank aan de Belastingdienst voor het beschikbaar stellen van de locatie!
De werkgroepen blijven de komende maanden eens per maand bij elkaar komen. In de tussenliggende maand wordt door leden van de groep verder gewerkt aan de resultaten uit deze eerst sessie.
De volgende werksessie is op 23 mei (bij de Gemeente Utrecht, 13.00-17.00). De leden van de werkgroepen hebben hiervoor inmiddels een uitnodiging gehad. We streven ernaar om in juni weer een breder toegankelijke sessie te organiseren.