Ontwerpkeuzes
Introductie
Deze documentatie is bedoeld om de ontwerpkeuzes en gebruiksrichtlijnen voor de pagina’s van "Regels.overheid.nl/methodes, standaarden en Lab" te beschrijven. Het legt uit hoe de website is ontworpen, waarom bepaalde ontwerpelementen zijn gekozen (zoals de lengte van de tekst op kaarten en de paginering), en geeft informatie over de gebruikte iconen en hun betekenis. Daarnaast biedt het inzicht in wat websitebezoekers kunnen verwachten van de kaarten en iconen op de verschillende pagina's. Deze documentatie dient als leidraad voor consistentie in ontwerp en gebruikservaring.
Hoe verhouden methoden, standaarden en lab items zich tot elkaar?
Op Regels.overheid.nl hebben methoden, standaarden, en lab items verschillende functies maar zijn ze met elkaar verbonden in het kader van regelbeheer:
Methoden: Dit zijn de frameworks of processen die worden gebruikt voor het beheren en interpreteren van regels.
standaarden: Deze bevatten documentatie, handleidingen, of rapporten die uitleggen hoe bepaalde methoden of processen werken.
Lab items: Dit zijn experimenten of tools die nieuwe methoden testen of demonstreren. Samen bieden ze een etalage voor het ontwikkelen, testen en toepassen van overheidsregels.
Ontwerpkeuzes | Methoden
Kaart-indeling
Keuze: Er wordt gebruik gemaakt van kaarten om de methoden overzichtelijk te presenteren.
Uitleg: Kaarten zijn een effectieve manier om de verschillende methoden overzichtelijk weer te geven. Elke kaart bevat een korte beschrijving, een relevante afbeelding of icoon en een duidelijke titel. Dit maakt het voor gebruikers gemakkelijk om snel door de verschillende methoden te bladeren en de belangrijkste informatie in één oogopslag te zien.
Filterfunctionaliteit
Keuze: Er wordt gebruik gemaakt van een filterfunctionaliteit bovenaan de methoden.
Uitleg: Met filters kunnen gebruikers methoden zoeken op basis van thema’s zoals: DSL, Software, Methode en Platform. Een zoekfunctie stelt gebruikers in staat snel specifieke methoden te vinden door zoekwoorden in te voeren.
Informatiehiërarchie
Keuze: Duidelijke informatiehiërarchie met behulp van titels, subtitels, en korte beschrijvingen.
Uitleg: Het gebruik van grotere, vetgedrukte titels voor de naam van elke methode, en kleinere subtitels of korte beschrijvingen om snel de kern van de methode weer te geven. Gedetailleerde informatie kan worden weergegeven wanneer gebruikers op het uitklap icoon.
Toegankelijkheidsopties
Keuze: De pagina volgt de WCAG-richtlijnen voor toegankelijkheid.
Uitleg: Dit omvat het kiezen van voldoende contrast tussen tekst en achtergrond, het correct labelen van alle iconen en afbeeldingen, en het aanbieden van alternatieve manieren om door de content te navigeren (zoals toetsenbordnavigatie).
Responsive design
Keuze: De pagina is ontworpen met responsive design, zodat deze goed werkt op zowel desktop als mobiele apparaten.
Uitleg: De methoden worden in een grid gepresenteerd dat zich aanpast aan verschillende schermformaten. Op een desktop kan dit bijvoorbeeld een raster van drie of vier kolommen zijn, terwijl het op mobiele apparaten één kolom wordt.
Geïntegreerde documentatie
Keuze: Bied de gebruikers de mogelijkheid om extra documentatie of voorbeelden van methoden te vinden door middel van: documentatie, publicatie, demos en labs.
Uitleg: Onder elke methode kan een link worden toegevoegd naar aanvullende bronnen, zoals PDF-bestanden of websites die dieper ingaan op de methode of concrete voorbeelden tonen.
Gebruik van iconen voor herkenbaarheid
Keuze: Elke type methode wordt geïdentificeerd met een specifiek icoon.
Uitleg: Iconen kunnen symbool staan voor verschillende categorieën of typen methoden (bijvoorbeeld onderzoeksmethoden, ontwerpgericht, beleidsgericht, etc.). Dit maakt het voor gebruikers gemakkelijk om visueel te herkennen om welk type methode het gaat.
Ontwerpkeuzes | standaarden
Kaart-indeling
Keuze: : Er wordt gebruik gemaakt van kaarten om de methoden overzichtelijk te presenteren.
Uitleg: Kaarten zijn een effectieve manier om de verschillende methoden overzichtelijk weer te geven. Elke kaart bevat een korte beschrijving, een relevante afbeelding of icoon en een duidelijke titel. Dit maakt het voor gebruikers gemakkelijk om snel door de verschillende methoden te bladeren en de belangrijkste informatie in één oogopslag te zien.
Filterfunctionaliteit
Keuze: Er wordt gebruik gemaakt van een filterfunctionaliteit bovenaan de methoden.
Uitleg: Met filters kunnen gebruikers methoden zoeken op basis van thema’s zoals: DSL, Software, Methode en Platform. Een zoekfunctie stelt gebruikers in staat snel specifieke methoden te vinden door zoekwoorden in te voeren.
Detailpagina voor standaarden
Keuze: Elke standaard heeft een detailpagina.
Uitleg: Op de detailpagina vinden gebruikers uitgebreide informatie over de standaard, inclusief een volledige samenvatting, downloadlink, en eventueel aanvullende details zoals auteur en publicatiedatum.
Aanbevelingen en gerelateerde standaarden:
Keuze: Gerelateerde standaarden worden aanbevolen op de detailpagina.
Uitleg: Op de detailpagina van een standaard kunnen links naar andere relevante documenten worden getoond, gebaseerd op tags, categorieën, of gerelateerde onderwerpen. Dit bevordert verder ontdekken en helpt gebruikers om meer relevante informatie te vinden.
Informatiehiërarchie
Keuze: Duidelijke informatiehiërarchie met behulp van titels, subtitels, en korte beschrijvingen.
Uitleg: Het gebruik van grotere, vetgedrukte titels voor de naam van elke methode, en kleinere subtitels of korte beschrijvingen om snel de kern van de methode weer te geven. Gedetailleerde informatie kan worden weergegeven wanneer gebruikers op het uitklap icoon.
Toegankelijkheidsopties
Keuze: De pagina volgt de WCAG-richtlijnen voor toegankelijkheid.
Uitleg: Dit omvat het kiezen van voldoende contrast tussen tekst en achtergrond, het correct labelen van alle iconen en afbeeldingen, en het aanbieden van alternatieve manieren om door de content te navigeren (zoals toetsenbordnavigatie).
Responsive design
Keuze: De pagina is ontworpen met responsive design, zodat deze goed werkt op zowel desktop als mobiele apparaten.
Uitleg: De methoden worden in een grid gepresenteerd dat zich aanpast aan verschillende schermformaten. Op een desktop kan dit bijvoorbeeld een raster van drie of vier kolommen zijn, terwijl het op mobiele apparaten één kolom wordt.
Ontwerpkeuzes | Lab
Kaart-indeling
Keuze: : Er wordt gebruik gemaakt van kaarten om de methoden overzichtelijk te presenteren.
Uitleg: Kaarten zijn een effectieve manier om de verschillende methoden overzichtelijk weer te geven. Elke kaart bevat een korte beschrijving, een relevante afbeelding of icoon en een duidelijke titel. Dit maakt het voor gebruikers gemakkelijk om snel door de verschillende methoden te bladeren en de belangrijkste informatie in één oogopslag te zien.
Filterfunctionaliteit
Keuze: Er wordt gebruik gemaakt van een filterfunctionaliteit bovenaan de methoden.
Uitleg: Met filters kunnen gebruikers methoden zoeken op basis van thema’s zoals: DSL, Software, Methode en Platform. Een zoekfunctie stelt gebruikers in staat snel specifieke methoden te vinden door zoekwoorden in te voeren.
Demo’s
Keuze: Er wordt gebruik gemaakt van een filterfunctionaliteit bovenaan de methoden.
Uitleg: Met filters kunnen gebruikers methoden zoeken op basis van thema’s zoals: DSL, Software, Methode en Platform. Een zoekfunctie stelt gebruikers in staat snel specifieke methoden te vinden door zoekwoorden in te voeren.
GIT repository
Keuze: Zorgt voor open samenwerking en ontwikkeling door de broncode toegankelijk te maken voor iedereen.
Uitleg: Verwijst naar de opslagplaats van de broncode op GitHub of een andere Git-platform, waar gebruikers de code kunnen inzien, downloaden, en eventueel bijdragen aan de ontwikkeling van het project.
Licenties
Keuze: Geeft duidelijkheid over de rechten en beperkingen voor het gebruik en de verspreiding van de tools of code.
Uitleg: Verwijst naar de licentievoorwaarden waaronder de aangeboden tools, experimenten of broncode worden vrijgegeven.
Informatiehiërarchie
Keuze: Duidelijke informatiehiërarchie met behulp van titels, subtitels, en korte beschrijvingen.
Uitleg: Het gebruik van grotere, vetgedrukte titels voor de naam van elke methode, en kleinere subtitels of korte beschrijvingen om snel de kern van de methode weer te geven. Gedetailleerde informatie kan worden weergegeven wanneer gebruikers op het uitklap icoon.
Toegankelijkheidsopties
Keuze: De pagina volgt de WCAG-richtlijnen voor toegankelijkheid.
Uitleg: Dit omvat het kiezen van voldoende contrast tussen tekst en achtergrond, het correct labelen van alle iconen en afbeeldingen, en het aanbieden van alternatieve manieren om door de content te navigeren (zoals toetsenbordnavigatie).
Responsive Design
Keuze: De pagina is ontworpen met responsive design, zodat deze goed werkt op zowel desktop als mobiele apparaten.
Uitleg: De methoden worden in een grid gepresenteerd dat zich aanpast aan verschillende schermformaten. Op een desktop kan dit bijvoorbeeld een raster van drie of vier kolommen zijn, terwijl het op mobiele apparaten één kolom wordt.
Geïntegreerde Documentatie
Keuze: Bied de gebruikers de mogelijkheid om extra documentatie of voorbeelden van methoden te vinden door middel van: documentatie, publicatie, demos en labs.
Uitleg: Onder elke methode kan een link worden toegevoegd naar aanvullende bronnen, zoals PDF-bestanden of websites die dieper ingaan op de methode of concrete voorbeelden tonen zoals demo’s, broncode en licenties.
Iconen bibliotheek
De iconen die gebruikt worden komen van https://tabler.io/icons. De keuze voor een gratis en open-source iconen bibliotheek is bewust gemaakt omdat anderen in de toekomst aan de website gaan werken. Dit zijn niet altijd ontwerpers, dus zelf iconen ontwerpen is onnodig ingewikkeld.
Door een bibliotheek te gebruiken, zorgen we voor consistentie en is het makkelijk voor iedereen om iconen te kiezen. De iconen zijn gekozen op basis van universele herkenbaarheid en consistentie. Ze zijn eenvoudig en zonder te veel detail, zodat ze op verschillende apparaten goed zichtbaar zijn. De iconen moeten intuïtief zijn, bijvoorbeeld een boek-icoon voor documentatie of een vergrootglas voor zoeken.
Waarom deze iconen? Eenvoudige en herkenbare iconen verbeteren de gebruikservaring door snel visuele aanwijzingen te geven over de functionaliteit van de website. Ze zorgen voor een consistente design door de hele site heen, wat de navigatie vergemakkelijkt.
Voor ontwikkelaars
De codebase van Regels.overheid.nl is ingericht volgens moderne webstandaarden, waarbij componenten voor methoden, standaarden, en lab items zijn gescheiden maar met elkaar verbonden.
- Front-end: wordt gebruik gemaakt van frameworks zoals React of Vue voor dynamische UI-componenten zoals kaarten, demo's, en GIT-koppelingen.
- Back-end: De website maakt gebruik van een API-first architectuur om methoden en standaarden op te halen uit repositories zoals GitHub.
- Licenties en codebeheer worden transparant aangeboden via integraties met GIT repositories.