-
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.
De volgorde van de hoofdstukken is geen toeval, maar een bewuste opbouw. Je begint breed en herkenbaar (kaart, kalender, klok), gaat dan dieper de patronen in (weekend vs doordeweeks, piekdagen, talen, apparaten), en eindigt met de levende sluis: een hele week samengeperst tot zestig seconden rimpelingen. Het rustigste, mooiste beeld bewaren we voor het laatst, als afsluiter.
Elke visualisatie hebben we gekozen omdat de vorm bij de vraag past:
- Tijd over de dag → ronde wijzerplaten en ringen (een klok ís nou eenmaal rond).
- Herkomst → een kaart en een draaiende globe (geografie ís ruimtelijk).
- Verhoudingen en ongelijkheid → histogrammen en een trechter (wel of niet bellen).
- Talen, apparaten, schermen → samenscholende bubbels (een "school" of "zwerm").
De vorm is dus nooit zomaar versiering achteraf, maar de eerste uitleg van de data.
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 animaties zijn er om de data te vertellen, niet om indruk te maken. Deeltjes die langs de trechter stromen laten de wel/niet-verhouding zien; rimpels op de vijver tonen de echte tijdlijn; de globe draait met de wereldklok mee. Beweging die niks toevoegt, hebben we weggelaten.
Verder tekenen we elk hoofdstuk pas zodra je ernaartoe scrollt (met een
IntersectionObserver). Dat is handig voor de prestaties — de pagina blijft licht — én voor
de ervaring: elk hoofdstuk "komt aan" precies op het moment dat je het gaat lezen.
"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. - Mobiel-eerst, één breekpunt (768px). Daaronder stapelt alles netjes verticaal en schaalt de tekst mee, dus je hoeft nooit horizontaal te scrollen of te knijpen.
-
Semantische opbouw. Koppen,
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.