Skip to content

Design rationale

Jump to bottom
Diego Ramon edited this page Jun 18, 2026 · 53 revisions

Inhoud design rationale

  • debriefing
  • probleemdefinitie
  • getoonde oplossing voor probleem
  • uitleg code

Vragen aan de opdrachtgever tijdens de briefing

Over de opdracht en site

  • Wat is de huisstijl? Zijn er bestaande materialen? (Zoals logo’s of foto’s)
  • Verwachten jullie een redesign of een compleet nieuwe website. En moet de content hetzelfde blijven als op de oude website?
  • Moet de website live geüpdatet worden? (denken aan de live stream of live data ophalen).
  • Hoe krijgen wij toegang tot de API? Hebben wij API-keys nodig of is het open-source? Is er meer data beschikbaar?
  • Kunnen jullie wat context geven bij de data en de values hiervan?

Doelgroep

  • Wie is de doelgroep?
  • Wat willen jullie dat de doelgroep doet of voelt?

Verwachtingen

  • Wat willen jullie uiteindelijk bereiken?
  • Wat vinden jullie het belangrijkst?
  • Hoe ziet een succesvol eindresultaat eruit voor jullie?
  • Zijn er voorbeelden die jullie aanspreken?

Planning

  • Wanneer willen jullie de feedbackmomenten inplannen?
  • Zijn er vaste contactmomenten?

Samenwerking

  • Wie is ons aanspreekpunt?
  • Doen we de meetings online, in Amsterdam of in Utrecht? Of wisselen we dit af, afhankelijk van beschikbaarheid?
  • Hoe nemen we het snelst contact met jullie op? (Teams, Whatsapp, mail?)

Debriefing

Opdrachtgever

De opdrachtgever voor de Visdeurbel is een project van de gemeente Utrecht, Hoogheemraadschap De Stichtse Rijnlanden (HDSR) en Mark van Heukelum van Dutch Wall Fish. Gemeente Utrecht en en HDSR zorgen voor het beheer en de kwaliteit van het water in de Vecht, de Kromme Rijn en de Utrechtse grachten.

  • Contactpersonen: Peter Stekelenburg en Paul van de Kant
  • Bereikbaarheid: info@studiomoan.nl
  • Contactmomenten: De meetings vinden fysiek plaats bij Studio Moan in Utrecht.

De opdracht in het kort

De opdrachtgever wil voor de visdeurbel verschillende data visualisaties van de verworven data zien, bij voorkeur als one-pager. De pagina wordt dan geïntegreerd in de bestaande website. De website moet volledig toegankelijk zijn volgens de WCAG richtlijnen (WCAG A compliance). Ook wordt de website vanuit de hele wereld bezocht, daarom moeten we ook nadenken over performance. De website moet natuurlijk ook volledig responsive zijn.

Aanleiding

Ieder voorjaar zwemmen er duizenden vissen dwars door de grachten en singels van Utrecht Naar de Kromme Rijn, op zoek naar een plek om zich voort te planten. Visdeurbel.nl laat mensen live meekijken bij de sluis en vissen helpen door op een digitale bel te drukken. Wat begon als speels experiment, groeide razendsnel uit tot een publieksfavoriet met miljoenen bezoekers. De visdeurbel in Utrecht trekt elk jaar miljoenen kijkers, dit jaar hebben ze data verzameld bij elke druk op de deurbel. Aan het einde van het visdeurbel seizoen (dat loopt van maart tot en met 1 juli) willen ze met de verzamelde data meerdere data visualisaties maken.

Design challenge en doelgroep

Hoe kunnen we met de verzamelde data van de Visdeurbel een zo leuk en goed mogelijk beeld geven van de staat van de Utrechtse wateren en hoe de Visdeurbel dit jaar is gebruikt?

  • Als trouwe kijker van de Visdeurbel wil ik zien hoe anderen, en ik, de Visdeurbel hebben gebruikt, zodat ik kan nagenieten van het Visdeurbel seizoen.
  • Als gemeente Utrecht wil ik laten zien hoe populair de Visdeurbel is, zodat we kunnen laten zien hoe met behulp van de Visdeurbel Utrecht op de kaart wordt gezet.
  • Als ecoloog wil ik interessante data over de vissen laten zien, zodat mensen meer leren over de vissen in de Utrechtse wateren.

Waarom zijn wij de juiste mensen voor dit project?

Wij als team hebben interesse in design, front-end development en datavisualisatie. Zo hebben Mats en Rafi al eerder de minor ‘datavisualisation’ gevolgd aan de Hogeschool Van Amsterdam. Hierdoor kunnen wij zowel de technische als de visuele kant van het project ontwikkelen. Diego heeft een eerder project gevolgd waar hij data moest verwerken op de front-end. Daarnaast werken wij volgens een georganiseerde aanpak en met strakke afspraken.

Door onze interesse in gebruiksvriendelijkheid en storytelling willen wij data niet alleen correct weergeven, maar ook begrijpelijk en aantrekkelijk maken voor een breed publiek.

Wat gaan wij opleveren?

Wij als team ontwikkelen een interactieve webpagina waarop de verschillende data van de Visdeurbel op verschillende manieren visueel wordt weergegeven aan de hand van datavisualisaties in de huisstijl van de Visdeurbel.

Dit kan zijn:

  • Interactieve datavisualisaties
  • Mooie vormgegeven charts met een echte Visdeurbel stijl.
  • Responsive en toegankelijke visualisaties.

Tijdens het project wordt verder onderzocht welke visualisaties relevant zijn voor de opdrachtgever.

Technische Aanpak

De visualisaties worden ontwikkeld met HTML, CSS, JavaScript en D3.js. Hierbij werken wij modulair en houden wij rekening met performance, responsiveness en toegankelijkheid.

Randvoorwaarden

  • De visualisaties worden ontwikkeld voor gebruik binnen een webomgeving.
  • Toegankelijkheid en responsive design worden meegenomen binnen het ontwerp- en ontwikkelproces.
  • De opdrachtgever levert alle benodigdheden aan, zoals data en content.
  • De visualisaties moeten begrijpelijk zijn voor zowel technische als niet-technische gebruikers.
  • Er moet echte data worden gebruikt binnen de website, geen statische vormen of foto’s om de data te weergeven.
  • De webpagina moet de huisstijl aanhouden zonder uitzonderingen.

Ontwerpkeuzes

Kleur gebruik

Vormen

Componenten

Verantwoording ontwerp

Algemeen

  • Voorbereiding & Presentatie: Bereid de tests goed voor met vragen, laat de debriefing zien en vertel wat ieders rol is. Maak een presentatie (slides) met de planning om structuur in het verhaal te brengen. Voorbereiding en vragen mogen in een apart document.
  • Code & Ontwikkeling: Lever code aan op GitHub met een heldere uitleg van elke sectie en toon aan of de toegankelijkheid (accessibility) is getest. Als je een framework gebruikt, maak dan simpele componenten die herbruikbaar zijn.
  • Huisstijl: Wijk bewust af van het bestaande design om met iets originelers te komen. De blauwe kleur mag gebruikt worden, maar houd het subtiel. "Nieuwe functies" mag anders verwoord worden.
  • Bewegende header:
    • Week 1: Hele leuke animatie. De emoji van de landvlag werkt echter niet op Windows. Advies: laat de header uiteindelijk weg en laat alleen het logo staan, de header past op dit moment niet.

Visdeurbellers over de hele wereld

In week 2 is er een wereldmap toegevoegd met D3 om aan te tonen waar de visdeurbellers vandaan komen.

  • Week 2 Feedback:
    • Maak een lijst naast de wereldkaart zodat mensen er snel langs kunnen navigeren.
    • Geef de legenda een nieuwe plaatsing en houd de skip-button dichter bij de sectie zelf.
    • De witte landen op een witte achtergrond geven een ongemakkelijk gevoel over arme/lege landen; verander de indeling van wat en hoe je het laat zien.
    • Het mist nu nog interactiegevoel en de specifieke "Visdeurbel saus feeling". Tekst gecentreerd houden is hier een no-go. Bouw het eventueel op per continent.
    • Screenshot 2026-06-01 at 14 09 22



  • Week 3 Feedback:
    • Gebruik paars in de kaart in plaats van groen. Het bolletje moet het visdeurbel-logo worden.
    • Trek een lijn die altijd op het land op rang nummer 1 start, en laat visjes over de lijn in de richting van Utrecht bewegen.
    • Lijn de knop naar rechts uit, voeg icoontjes toe bij de landstatistieken en kijk goed naar de gehanteerde text styles.
    • Zorg dat het on-brand is: gebruik dus géén goud, zilver of brons.
    • Verwijder de losse belletjes; deze leiden meer af dan dat ze iets toevoegen.
    • Technisch punt: Kijk even goed naar Fiji, dat eiland wordt momenteel afgesneden.

Vis van het seizoen

Dit onderdeel begon als een statisch overzicht en groeide gaandeweg uit naar een interactief aquarium-concept.

  • Week 1 Feedback: Het ontwerp komt nu nog direct uit het huidige design. Een andere insteek zou veel interessanter zijn. De scroll-animatie is leuk, maar de text alignment klopt niet.

  • Week 2 Feedback: Het aquarium-idee vinden ze heel vet ("Alsof je echt naar een gracht kijkt"). Dit is momenteel een Work In Progress (WIP).
    • Ideeën voor de uitwerking: Plaats de afbeeldingen in een HTML5 Canvas. Voeg een Utrechts detail toe zoals een fietswrak. Maak het niet te druk qua vissen, maar toon bijvoorbeeld een top 3 van meest gespotte of bijzondere vissen (inclusief user feedback).
    • Interactie: Voeg een drag-and-drop optie toe om met de vissen te slepen, waarna ze vervolgens weer terugzwemmen.

  • Week 3 Feedback:
    • Zet er duidelijk bij wat de getallen achter de vissen echt betekenen.
    • Geef de vissenrij bovenaan minder vorm als harde knoppen.
    • Alle vissen zijn nu klein en hebben dezelfde grootte; gebruik de 'echte' biologische groottes voor de visualisatie van de vissen.
    • De bodem is nog te cartoony en moet meer in de huisstijl passen. Pas de waterschaduw aan op basis van de beschikbare assets.
    • Verwerk elementen van de Utrechtse gracht zelf: hoe diep is deze, hoe breed? Voeg leuke, herkenbare details toe.
    • Orden de lay-out wat beter (net als bij de wereldkaart) in plaats van de volledige breedte te gebruiken.

Vis activiteit

Dit onderdeel richtte zich op de actuele status van de deurbel.

  • Week 3 Feedback: Omdat de visdeurbel momenteel uit staat, heeft het geen nut om vissen van het afgelopen uur te tonen. Denk goed na over hoe je deze tijdlijn kunt aanpassen naar een weergave die ‘niet actueel’ of historisch is.

Het beste tijdstip

  • Iteratie 1:
    • Onderbouwing: Om te beginnen wilde ik een grafiek maken dat wel de huisstijl aanhield van de visdeurbel, maar wel wat uniekere vormen had. Ik ben in figma meteen gaan designen en ben uiteindelijk op een eerste design gekomen. Om het grafiek wat meer interessant te maken heb ik elk kolom zijn eigen margin gegeven, zo kan je makkelijker zien welke value het kolom heeft. Ik heb hiervoor gekozen omdat ik niet té ver wilde afwijken van de huisstijl. De opdracht was om wat creatievers te maken zonder te veel af te wijken.
    • image
    • Feedback: Het lijkt nu op allebei de charts en het is niet duidelijk wat de Y-as van de chart betekent. Gebruik anchor positioning voor de popup-tooltip. Zorg dat het accessibility-proof is door van elke bar chart een button of toegankelijk element te maken.



  • Iteratie 2:
    • Onderbouwing: Deze tweede iteratie had al een stuk meer feedback verwerkt. Op basis van de feedback van Cyd heb ik een heel nieuw thema toegevoegd aan het grafiek, deze keer heb ik een onderwater thema aangehouden om het idee van de 'onderwater visdeurbel' een beetje te tonen. De water planten dienen als het grafiek zelf, deze tonen de values. Op de achtergrond zwemmen er vissen en zweven er bubbels om het wat meer diepte en leven te geven. Hoewel deze versie niet perfect was, zijn er gigantische veranderen gemaakt.
    • Screenshot 2026-06-01 at 14 09 58
    • Feedback: Het idee van de grafiek is leuk. Het is nu echter nog iets te 'Spongebob' en moet meer in de officiële huisstijl worden gegoten. Geweigerde uploads zijn niet nuttig voor de bezoeker, dus die hoeven niet getoond te worden. Verwerk dag- en nacht-elementen door de kleuren te laten verlopen van licht naar donker. Het tekst-pijltje moet een grafisch pijltje worden.

  • Iteratie 3:
    • Onderbouwing: De vorige iteratie beviel goed qua thema, maar de odrachtgever vond het niet thuis passen op de visdeurbel website, dus heb ik het hele grafiek weer omgegooid tot een wat simpeler grafiek dat wel nog wat animattie en level toont, maar weer wat meer terug keert naar de standaard huisstijl van Visdeurbel.nl. De knoppen aan de zijkant van het grafiek zijn ook meer gestijlt naar de huisstijl en de porporties van de hele section zijn zoals dat van de originele website. Wel zijn er nog steeds vissen en bubbles aanwezig om het een minder statisch grafiek te laten lijken.
    • image
    • Feedback: Geef context om de bezoeker duidelijk te vertellen wat je precies laat zien. Sluit de visuele stijl aan bij de visualisatie van het aquarium. Hergebruik bestaande buttons en elementen in plaats van te veel nieuwe stijlen te introduceren. Het filter is te klein, neemt relatief veel ruimte in en geeft een krap gevoel. Geef de elementen meer ademruimte. Zet de tekst in het filter eventueel om van uppercase naar lowercase. De border-radius aan de onderkant wordt momenteel afgesneden en de tijdslijnen zijn nog moeilijk te zien.

  • Iteratie 4:
    • Onderbouwing: Op basis van de feedback van iteratie 3 heb ik wat kleine aanpassingen gemaakt. Ik heb een paar kleuren toegevoegd om een indicatie te maken voor dag en nacht. De <buttons> zijn nu compleet nagemaakt van de website en hebben ook precies dezelfde kleuren. Ook heb ik de vissen op de achtergrond veranderd van een statische svg naar de foto's van de vissen die zich op de website zelf bevinden. Zo voelt het alsof het meer thuis hoor op in dit grafiek. Ook is er nu een kleine uitleg gemaakt zodat mensen weten wat ze hier kunnen doen, dit is gemaakt op basis van feedback van de opdrachtgever en andere klasgenoten.
    • image
    • Feedback: Welke kleuren voor dag of nacht? Er is nu te veel tekst om te lezen, het wordt te druk. Snapt de uitleg wel, maar verstop dit achter een i’tje. Maak het wat figuratiever, laat het bijvoorbeeld meer ogen als water. Pas een soort curve boog toe met de zon (soort zonsopgang en zonsondergang) in de grafiek, zodat mensen begrijpen dat het gaat over de uren en de tijd. Het vismenuutje is allemaal in het midden gezet. Lijn het naar links uit bijvoorbeeld. Visjes naar voren boven de grafiek plaatsen.

  • Week 5
    • Onderbouwing: Dit is de laatste iteratie, bij deze versie heb ik alle feedback in één meegenomen om de mooiste en laatste iteratie te bouwen. Ik heb op basis van de feedback van de opdrachtgever het aquarium idee weer terug gebracht, maar deze keer op een subtielere manier. Om de website consistent te houden heb ik dezelfde stenen achtergrond gebruik als Vis van het seizoen. Daarnaast heb ik de knoppen omgezet naar knoppen met sliders erin, dit volgt 100% de huisstijl van de originele visdeurbel website. Om het dag en nacht concept wat subtieler te maken heb ik de achtergrond dynamisch gemaakt. Tijdens het gesprek met de opdrachtgever gaf hij aan da thij de achtergrond kleuren te hard vond, dus nu passen de kleuren zich aan in de vorm van een gradient tijdens een hover over een kolom heen. Om nog meer toe te voegen aan het dag/nacht gedeelte heb ik een zonnelijn gemaakt waar je de stand van de zon kan zien in het grafiek. Hoe hoger de zon, hoe meer licht. Als laatse heb ik de tekst verplaats naar een aparte popover die je kan vinden bij de ? knop.
    • image
    • image
    • Feedback: Dit was de laatste bespreking met de opdrachtgever, ik heb hier weinig feedback gehad. Er waren een paar kleine elementen die ik moest aanpassen (Voornamelijk kleuren, margins of andere kleinigheidjes)

Leer onze vissen kennen

Dit onderdeel kwam voort uit de behoefte om meer educatieve waarde en achtergrondinformatie aan de website toe te voegen.

  • Week 1 Feedback (Vis foto van de maand): Foto's worden op de hand uitgekozen. Let bij de labels goed op de toegankelijkheid en gebruik een vervangende naam voor elke vis. Een soort 'Spotify Wrapped' opzet is een leuk alternatief idee voor dit overzicht.

  • Week 2 Feedback: Het idee om informatie per vis te tonen (zoals hun activiteit) vinden de opdrachtgevers erg goed. Leg uit wat een vis precies is of toon een leuk feitje. Maak hierbij een directe link met de Vis van het seizoen. Dit kan bijvoorbeeld getoond worden in een pop-over of op een aparte pagina.

Kan jij de vis herkennen?

In week 2 is er geëxperimenteerd met een raadspelletje op basis van de ingezonden foto's.

  • Week 2 Feedback: De opdrachtgevers spelen het spelletje wel, maar de gebruiker snapt in deze vorm niet direct wat de bedoeling is. Het nodigt nog niet echt uit om te doen. Het mag er visueel nog wel cooler en leuker uit gaan zien.
    • Suggestie: Maak een galerij-selectie per vis (bijvoorbeeld 6 duidelijke foto's van een Baars wanneer je op 'Baars' klikt).
    • Screenshot 2026-06-01 at 14 10 15



  • Week 3 Feedback: Het pure raad-element is bij nader inzien niet de juiste richting, omdat de deurbelfoto's vaak erg onduidelijk zijn voor een quiz. Je kunt in plaats van 4 willekeurige foto’s beter kiezen voor kwalitatieve foto’s en biologische data die online te vinden zijn, aangevuld met leuke feitjes over de vissen.
    • Besteed extra tijd aan wat het uiteindelijke doel van deze sectie wordt. Onderzoek of het samenvoegen met het aquarium-concept handig is, of dat dit een losstaand gedeelte moet blijven om te voorkomen dat het te druk wordt.

De WCAG eisen

Onderzoek web content accessibility guidelines

De wcag wet bestaat om het web inclusief te maken voor iedereen. Hier zijn verschillende niveau's voor, namelijk:

  • Niveau A, het basis niveau. Omringt de basis principes dat ervoor zorgt dat de website bruikbaar is, alt teksten bevat en technisch bedient kan worden met een toetsenbord.
  • Niveau AA, dit is het standaard en wettelijk verplicht niveau waar iedere website zich aan moet houden. Het bouwt verder op het basis niveau voor een betere gebruikerservaring.
  • Niveau AAA, het hoogste niveau. Dit niveau is bedoeld om de website extreem toegankelijk te maken. Dit niveau is niet wettelijk verplicht

De wcag draait om de volgende onderwerpen:

  • Waarneembaar, ervoor zorgen dat mensen alles kunnen zien of horen, ook als de mensen niet alles kunnen zien of horen.
  • Bedienbaar, het mogelijk maken dat je website bedient kan worden met een toetsenbord of andere hulpmiddelen, niet alleen een muis.
  • Begrijpelijk, ervoor zorgen dat informatie en bediening op je website begrijpelijk is voor de gebruiker.
  • Robuust, je website zo bouwen dat hij goed werkt op verschillende apparaten en op verschillende hulptechnologieën

Om de website zo inclusief mogelijk te maken houden we ons graag minimaal aan de standaard eisen van de wcag, Verdere verbeteringen zullen benoemd worden in de design rationale.

Verklaring WCAG in onze website

Bronnen

AI:

  • Gemini
  • ChatGPT

Clone this wiki locally