-
Notifications
You must be signed in to change notification settings - Fork 0
Design rationale
Waarom de website is zoals hij is. Dit document legt de ontwerpkeuzes vast achter de datavisualisaties van de Visdeurbel — de camera-met-bel bij de Weerdsluis in Utrecht die de vistrek door de sluis registreert. Niet wat er gebouwd is (dat staat in
DOCUMENTATIE.mdendocumentatie-mitchell.md), maar waarom het zo gebouwd is.
De Visdeurbel produceert grote, ruwe event-logs: elke beldruk, elke geüploade vis, elk weggeklikt scherm. Op zichzelf zegt zo'n log niemand iets — het zijn honderden megabytes JSON. De ontwerpopgave was daarom 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 volgt de centrale ontwerpkeuze: een scrollytelling-website. Geen dashboard met filters en knoppen waar je zelf je weg in moet vinden, maar een verhaal dat zich ontvouwt terwijl je scrollt. Elk hoofdstuk vertelt één ding, met één visualisatie, in een vaste volgorde. Je hoeft niets te configureren om iets te begrijpen.
De belangrijkste ontwerpregel is dat het werk voor iedereen te begrijpen moet zijn — er is bewust geen smalle doelgroep waar het ontwerp op is toegesneden. Niemand hoeft voorkennis van data, biologie of grafieken mee te brengen. Dit uitgangspunt is geen losse intentie; het is de toetssteen waaraan vrijwel elke andere keuze hieronder is afgemeten:
- Eén idee per hoofdstuk. Een visualisatie die twee dingen tegelijk probeert te zeggen, zegt voor de meeste mensen niets. Liever dertien eenvoudige hoofdstukken dan één rijk maar ondoordringbaar diagram.
- Tonen vóór vertellen. De vorm draagt de boodschap: 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 wat je al ziet, in plaats van het te moeten uitleggen.
- Geen jargon, geen drempels. Korte teksten in het Nederlands, in de tweede persoon ("je", niet "u"), zoals de merkstem van de Visdeurbel voorschrijft. Warm en uitnodigend, nooit belerend.
- Werkt op elk scherm en voor elk lijf. Mobiel-eerst gestapeld, toetsenbord- en schermlezer-vriendelijk, en met respect voor wie geen beweging wil zien (zie §6). "Voor iedereen" betekent ook fysiek toegankelijk.
De visuele keuzes zijn vastgelegd in STYLEGUIDE.md en visdeurbel-tokens.css. De
rationale erachter:
Het palet ankert op een diep natuurlijk groen met zachte paarsen en crèmes. Die keuze is inhoudelijk: het onderwerp is natuur en water, dus het beeld moet aards en benaderbaar voelen — niet als een koel, grijs analytics-dashboard. Daarom de bewuste verboden in de styleguide: geen puur zwart, geen puur wit, geen neon, geen platte material-kleuren. Pienk en goud zijn decoratief (vissen, accenten), nooit functioneel — een knop wordt nooit goud, zodat kleur betekenis houdt in plaats van ruis te worden.
Bricolage Grotesque ExtraBold voor koppen geeft een stevige, vriendelijke stem; PT Sans voor lopende tekst leest rustig. Koppen zijn nooit PT Sans, body is nooit Bricolage — die scheiding houdt de hiërarchie voorspelbaar. Geen letter-spacing, geen all-caps behalve in utility-navigatie: minder visuele trucs, meer leesbaarheid.
De pagina wisselt af tussen lichte (crème) en donkere (groen) secties, met golvende
overgangen (SectionWave) ertussen. Dat ritme heeft een functie: het markeert
hoofdstukgrenzen zonder harde lijnen, geeft de lange scrollpagina een natuurlijke
ademhaling, en sluit aan op het beeld van water en diepte.
Alle radii zijn zacht (16px) of vol-pil (25px+); er is bewust géén kleine 4px-radius. De ronde vormtaal maakt de interface speels en zacht — passend bij een project dat over een vriendelijke deurbel gaat, niet over bedrijfssoftware.
Alle kleuren, maten en typografie zijn design tokens. Dat is geen technische luxe maar een ontwerpkeuze: dertien heel verschillende hoofdstukken, gemaakt door meerdere mensen, zien er toch uit als één samenhangend geheel omdat ze allemaal uit hetzelfde palet putten. Consistentie is hier het verschil tussen "een verzameling grafieken" en "een website".
De volgorde van de hoofdstukken is een dramaturgische keuze, geen toeval. 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 week samengeperst tot zestig seconden rimpelingen. Het rustigste, meest poëtische beeld komt als laatste, als afronding.
Elke visualisatie is gekozen omdat de vorm bij de vraag past:
- Tijd-over-de-dag → ronde wijzerplaten en ringen (een klok ís rond).
- Herkomst → een kaart en een draaiende globe (geografie ís ruimtelijk).
- Verhoudingen en ongelijkheid → histogrammen en een trechter (wel/niet bellen).
- Talen, apparaten, schermen → samenscholende bubbels (een "school" of "zwerm").
De vorm is dus nooit decoratie achteraf, maar de eerste uitleg van de data.
De rode draad is dat scrollen genoeg is. Tooltips en de Maand/Week-schakelaar zijn extra's voor wie meer wil, maar het verhaal werkt volledig zonder dat je iets aanklikt. Dit volgt direct uit §2: hoe minder een bezoeker moet leren bedienen, hoe meer mensen het verhaal halen.
Animaties zijn er om data te vertellen, niet om indruk te maken: deeltjes die langs de trechter stromen tonen de wel/niet-verhouding; rimpels op de vijver tonen de echte tijdlijn; de globe draait met de wereldklok mee. Beweging die niets toevoegt, is weggelaten.
Elk hoofdstuk wordt pas getekend zodra je ernaartoe scrollt (via een
IntersectionObserver). Dat is zowel een prestatie- als een ervaringskeuze: de pagina
blijft licht, en de reveal-animatie laat elk hoofdstuk "aankomen" precies wanneer je het
gaat lezen.
"Voor iedereen" is alleen waar als het ook fysiek voor iedereen werkt. Daarom:
-
prefers-reduced-motionwordt overal gerespecteerd — wie bewegingsgevoelig is of dat in het systeem heeft uitgezet, krijgt de visualisaties zonder de animaties. - Mobiel-eerst en één breekpunt (768px). Onder die breedte stapelt alles verticaal en schaalt de typografie mee, zodat er nooit horizontaal gescrold of geknepen hoeft te worden.
-
Semantische opbouw. Koppen,
aria-labels op de visualisatie-secties en eenaria-live-tooltip (role="status") zorgen dat ook schermlezers de structuur kunnen volgen. - Contrast en leesbaarheid zijn ingebouwd in het palet: donkergroene tekst op crème, off-white op groen — nooit lichtgrijs op wit.
De zwaarste ontwerpbeslissing zit onder de motorkap: de ruwe maanddata is 288 MB — onmogelijk om in een browser te laden. De keuze om vooraf te aggregeren met Python tot compacte JSON (~40 KB) is daarom een ervaringskeuze vermomd als techniek. De browser krijgt alleen de getallen die de grafieken nodig hebben, dus de pagina laadt direct in plaats van de bezoeker te laten wachten of de tab te laten vastlopen.
Daaruit volgt een principe dat door het hele project loopt: scheid dataverwerking van visualisatie. Zware bewerking hoort in een build-stap; de frontend tekent alleen. Bijkomend voordeel: omdat de visualisaties de lengte van de data-arrays lezen in plaats van vaste aantallen, past dezelfde code zich automatisch aan tussen week- en maanddata.
Goede ontwerpkeuzes zijn ook keuzes om iets niet te doen:
| Keuze | Wat we ervoor 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 |
| Vaste design tokens | Ontwerpvrijheid per hoofdstuk | Consistentie over dertien hoofdstukken maakt er één samenhangend geheel van |
Elke keuze in dit project is terug te voeren op één vraag: begrijpt iedereen dit, zonder uitleg vooraf? Dat verklaart de scrollytelling-vorm, het natuurlijke palet, de zachte vormtaal, het tonen-vóór-vertellen, de mobiel-eerste 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.