Naar navigatie Naar hoofdinhoud

Wij gebruiken cookies voor de beste ervaring van de website. Meer informatie.

Ga naar het overzicht
Ga naar de homepagina Ga naar het overzicht

Wat wil je ons vragen?

Hoi, ik ben

en ik wil graag weten


Jullie kunnen me
op

Introductie

De gemeenten in Nederland moeten constant op de hoogte blijven van wettelijke, technologische en maatschappelijke ontwikkelingen. Het is voor hen een uitdaging om zo optimaal mogelijk mee te bewegen in een steeds verder digitaliserende samenleving. De Vereniging van Nederlandse Gemeenten (VNG) vroeg ons om te helpen bij het realiseren van een online tool om dit te ondersteunen.

De uitdaging

In 2016 lanceerde wij samen met VNG al de Digitale Agenda 2020. Dit platform biedt een overzicht van ondersteuningsmiddelen voor Nederlandse gemeenten om hen zo te ondersteunen. Na het succes van de eerste lancering kwam in 2018 VNG bij ons terug met de vraag om gemeenten een eigen roadmap te laten samenstellen met de ontwikkelingen die voor hen interessant zijn. Om dit zo makkelijk mogelijk te maken hebben wij met VNG afgesproken om diverse aspecten van de ontwikkelingen inzichtelijk te maken: o.a. het type ontwikkeling, de impact en de relatie tot andere ontwikkelingen. Daarnaast mocht er geen volgorde worden aangegeven, het was aan gemeenten zelf om te bepalen wat voor hen belangrijk was. Een interessante uitdaging waar wij graag onze tanden in wilden zetten.

Interactieve datavisualisatie als interface

Al die verschillende aspecten weergeven op een overzichtelijke manier, met onderlinge relaties? Dat klinkt als een datavisualisatie. Na gesprekken met VNG zijn we gaan werken op basis van onderstaande schets.

 

Maar al snel bleek dat dit idee niet ideaal zou zijn. Deze layout gaf toch nog teveel een volgorde aan. De website is responsive en het zou veel moeite kosten om dit ontwerp ook op kleinere schermen te laten werken. Daarnaast was het lastig om relaties tussen ontwikkelingen aan te geven. Maar er zaten ook zeker een aantal goede elementen in deze schets; De grootte van de bol kon de impact aangeven en de kleur het type.

Ons advies was om het gebruik van de roadmap in drie stappen op te delen om meer focus aan te brengen en meer ruimte te krijgen voor de visualisatie:

  1. Selecteren van ontwikkelingen
  2. Roadmap bekijken (en verfijnen)
  3. Roadmap exporteren (als basis voor beleidsplan)

Geïnspireerd door circos plots kwamen wij zo op een verbeterd, simpeler ontwerp, waarin de verschillende aspecten konden worden weergegeven, maar ook de onderlinge relaties.

 

Realisatie middels SVG en React

Als developers denken aan datavisualisaties en interactieve elementen, denken ze al snel aan HTML5 Canvas. Dit is een techniek waarbij je pixels tekent met code. Deze pixels kunnen van alles zijn, van complexe visualisaties tot de weergave van tekst. Maar wat betekent het voor gebruikers of zoekmachines als de tekst wordt weergegeven als afbeelding in plaats van selecteerbare tekst? Geen duurzame oplossing dus.

Deze overweging deed ons besluiten te gaan voor SVG (Scalable Vector Graphic) in plaats van Canvas. SVG-elementen kunnen worden vergeleken met HTML-elementen en kunnen daarom worden vormgegeven met CSS, worden geanimeerd en interacties bevatten.

Een bijkomend voordeel hiervan is dat deze techniek goed samengaat met React, een JavaScript library voor het bouwen van interactieve interfaces. We gebruiken deze library in combinatie met TypeScript, een programmeertaal op basis van JavaScript die onder meer type checking en code refactoring toevoegt. Hierdoor kunnen we sneller fouten in onze code ontdekken en stelt het ons in staat robuustere applicaties te ontwikkelen.

Resultaten

Op het VNG Realisatie Congres ‘Back to the Future’ werd de vernieuwde site feestelijk gelanceerd. Sinds de live-gang van de verbeterde versie zien wij een sterke stijging in het gebruik. De roadmap werd al zo’n 18% meer gebruikt. Ook andere vinden de Digitale Agenda 2020 van VNG erg succesvol, blijkt uit deze quote:

Van de overheidsprogramma’s ter bevordering van de digitalisering van de overheid wordt de Digitale Agenda 2020, van VNG Realisatie, als het meest effectief gezien.

— Rapport: Hoe Beoordelen Ambtenaren De Digitalisering Bij De Overheid?

 

Volgend blogartikel DrupalJam 2018
DrupalJam 2018

Wij zijn Hoppinger

Met een team van 75 specialisten vertalen we complexe en uitdagende vraagstukken naar web en native oplossingen die onze opdrachtgevers succesvoller en het leven van hun publiek gemakkelijker maken. Zo maken we als strategisch partner digitale ambities waar.

Meer over ons