-
Notifications
You must be signed in to change notification settings - Fork 0
Design rationale
De Visdeurbel spuugt enorme, ruwe event-logs uit: elke beldruk, elke geüploade vis, elk weggeklikt scherm. Op zichzelf zeggen die logs niemand iets — het zijn gewoon honderden megabytes JSON. Onze opgave was dus niet "laat de cijfers zien", maar maak de cijfers voelbaar: laat zien wanneer de vissen trekken, waar de bezoekers vandaan komen en hoe levend de sluis eigenlijk is.
Daaruit kwam onze belangrijkste keuze: we maken er een scrollytelling-website van. Dus geen dashboard met allemaal filters en knoppen waar je zelf je weg in moet zoeken, maar een verhaal dat zich ontvouwt terwijl je scrollt. Elk hoofdstuk vertelt één ding, met één visualisatie, in een vaste volgorde. Je hoeft niks in te stellen om iets te snappen.
De belangrijkste regel die we onszelf hebben opgelegd: het moet voor iedereen te begrijpen zijn. We hebben het bewust niet gericht op één smalle groep. Niemand hoeft voorkennis van data, biologie of grafieken te hebben. Bijna elke andere keuze hieronder hebben we hier steeds tegenaan gehouden:
- Eén idee per hoofdstuk. Een visualisatie die twee dingen tegelijk probeert te zeggen, zegt voor de meeste mensen niks. Liever dertien simpele hoofdstukken dan één rijk maar onleesbaar diagram.
- Tonen vóór vertellen. De vorm doet het werk: een vijver die rimpelt bij elke beldruk, een globe waar de avondpiek de planeet rondreist, drijvende begroetingen in de taal van de bezoekers. De tekst bevestigt alleen wat je al ziet.
- Geen jargon, geen drempels. Korte teksten in het Nederlands, in de "je"-vorm, zoals de merkstem van de Visdeurbel het wil. Warm en uitnodigend, niet belerend.
- Werkt op elk scherm en voor iedereen. Mobiel-eerst, toetsenbord- en schermlezer-vriendelijk, en met respect voor wie geen beweging wil zien (zie §4). "Voor iedereen" betekent ook gewoon fysiek toegankelijk.
Scrollen is genoeg. Dat is de rode draad. Tooltips en de Maand/Week-schakelaar zijn extra's voor wie meer wil, maar het verhaal werkt helemaal zonder dat je iets aanklikt. Dat volgt direct uit §2: hoe minder iemand moet leren bedienen, hoe meer mensen het verhaal halen. De eerste blik op de visualisatie zegt al genoeg.
Verder hebben wij veel animaties toegevoegd. Deze vertellen een verhaal en ondersteunen het gevoel van de gebruikers. Dit zorgt ervoor dat ze verder in de ervaring worden gezogen en niet weg willen klikken.
"Voor iedereen" is alleen waar als het ook echt voor iedereen werkt. Daarom:
-
prefers-reduced-motionwordt overal gerespecteerd — wie bewegingsgevoelig is of dat in z'n systeem heeft uitgezet, krijgt de visualisaties zonder de animaties. -
Semantische opbouw. Koppen, tables,
aria-labels op de visualisatie-secties en eenaria-live-tooltip (role="status") zorgen dat ook schermlezers de structuur kunnen volgen.
De zwaarste beslissing zit eigenlijk onder de motorkap: de ruwe maanddata is 288 MB — gewoon onmogelijk om in een browser te laden. Daarom aggregeren we vooraf met Python tot compacte JSON (~40 KB). Dat lijkt technisch, maar is eigenlijk een keuze voor de ervaring: de browser krijgt alleen de getallen die de grafieken nodig hebben, dus de pagina laadt meteen in plaats van dat je staat te wachten of je tab vastloopt.
Daar zit een principe achter dat door het hele project loopt: scheid dataverwerking van visualisatie. Zwaar rekenwerk hoort in een build-stap; de frontend tekent alleen. Mooie bijkomstigheid: omdat de visualisaties de lengte van de data-arrays uitlezen in plaats van vaste aantallen, werkt dezelfde code automatisch voor zowel week- als maanddata.
Goede keuzes zijn ook keuzes om iets niet te doen:
| Keuze | Wat we opgaven | Waarom toch |
|---|---|---|
| Scrollytelling i.p.v. dashboard | Vrije verkenning, zelf filteren | Een vast verhaal is voor veel meer mensen te volgen dan een set filters |
| Vooraf aggregeren in Python | Live, ruwe data in de browser | 288 MB is onbruikbaar; de grafieken hebben alleen de cijfers nodig |
| Eigen landen-centroïdtabel | Volledige geo-nauwkeurigheid via TopoJSON-join | Een fragiele join op afwijkende ID's gaf bugs; een eigen tabel is simpeler en stabieler |
| Eén idee per hoofdstuk | Informatiedichtheid | Begrijpelijkheid weegt zwaarder dan zo veel mogelijk in één beeld proppen |
Eigenlijk komt elke keuze neer op één vraag: snapt iedereen dit, zonder uitleg vooraf? Dat verklaart de scrollytelling-vorm, het tonen-vóór-vertellen, de mobiele en bewegingsbewuste toegankelijkheid, en de keuze om zware data buiten de browser te verwerken. Het resultaat is geen dashboard maar een verhaal: ruwe logs van een vissendeurbel, omgezet in iets dat voelt als een wandeling langs de sluis.
Design rationale — Visdeurbel visualisaties, juni 2026.