Design rationale

1. Inhoud design rationale

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

2. 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?)

3. 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.

4. 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.

5. 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.

6. Ontwerpkeuzes

Kleur gebruik

Vormen

Componenten

7. Verantwoording van de code

Code structuur

Iedereen heeft zijn eigen Javascript, CSS en HTMl bestanden waar zij in werken. Zo voorkomen wij merge conflicts en andere problemen. Aan het einde importen wij alle componenten in, dit doen wij in de index.astro.

• Boven in de server-side code laden wij alle componenten in met import [locatie].
• De CSS laden wij apart in, dit doen wij in de server-side van de componenten zelf, ook met import [locatie].
• Als laatste importen wij de Javsacript codes met de gebruikelijke <script> tag.

Technische keuzes

Wij gebruiken Astro als framework. Astro is een framework dat pagina's standaard als pure HTML oplevert. Deze server-side aanpak is een bewuste ontwerpkeuze: het minimaliseert de laadtijd en maximaliseert de toegankelijkheid voor screenreaders. JavaScript wordt uitsluitend ingeladen op specifieke plekken waar interactie cruciaal is, zoals bij de kaart, de grafieken en data fetches.

Huisstijl van Visdeurbel.nl voor kleuren, typografie, spacing en andere elementen. Wij hebben ze in de vorm van een figma bestand gekregen en deze vertaalt naar CSS-variabelen. Dit zorgt voor meer consitentie binnen de website zelf.

Voor de datavisualisaties is gebruikgemaakt van D3.js, een JavaScript-library waarmee data rechtstreeks aan het Document Object Model (DOM) wordt gekoppeld. De keuze voor D3.js is bewust gemaakt: in tegenstelling tot kant-en-klare grafiek-frameworks biedt D3 volledige creatieve vrijheid om op maat gemaakte, interactieve en responsieve visualisaties te ontwerpen met HTML, SVG paths en CSS. Op deze manier konden wij complexe data visualisaties gebruikersvriendelijk maken voor de vrij simpele visdeurbel website.

8. 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.
  • 

• 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 statistieken van de visdeurbel.

• Iteratie 1:
  • Onderbouwing: Om een onderdeel van de originele website te reworken heb ik ervoor gekozen om bij het eerste gedeelte een klok toe te voegen, zo kunnen mensen op een creatieve maar ook simpele manier zien hoelang ze moeten wachten. Ze kunnen het zelfs timen met de seconde wijzer die accuraat telt hoelang ze moeten wachten. Daarnaast kunnen mensen ook zien welke vis als laatste is gespot, zo kunnen ze beter verwachten wat ze binnenkort kunnen zien. Bij het tweede onderdeel heb ik een tijdlijn gemaakt om te laten zien welke vissen zijn gespot in het afgelopen uur, dit is om aan te vullen op het vorige onderdeel met welke vis als laatst is gespot. Zo kun je betere voorspellingen maken welke vissen er in het komende uur worden gespot.
  • 
  • 
  • 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.
    
    
• Iteratie 2:
  • Onderbouwing: Deze iteratie heeft al flink wat vernieuwing, op basis van de feedback van de vorige iteratie heb ik ervoor gekozen dat je zelf kan kiezen welke data je kan zien. Omdat de visdeurbel offline gaat zul je geen data zien van 'het afgelopen uur' dus heb ik ervoor gekozen dat je zelf een week kan kiezen zodat je kan vergelijken hoe de periode af liep. De klok en de eerste tekst zijn voor derest hetzelfde gebleven. Het tweede gedeelte heeft een hele redesign gekregen. Nu zit hier een kalender die per dag in deze periode aangeeft hoe druk het was in elk dag deel. Je heb ochtend, middag, avond en nacht. Hier heb ik voor gekozen omdat het per land heel evrschillend kan zijn hoe druk het was. In Amerika kan het, voor vergelijking, heel druk zijn in de ochtend terwijl het hier juist heel rustig is in de ochtend. Ook kan je per dag deel zien hoeveel vissen er zijn gespot in die tijd.
  • 
  • 
  • Feedback: Filter van periode wat lekkerder maken, meer een geheel. De periode knop staat nog raar in het midden, misschien kan je daar nog wat leukst mee. Kijk naar de hiërarchie, wat wil je dat mensen eerst zien? Maak het iets aantrekkelijker om te klikken. Week omzetten naar datum, gewoon een datum zoals Juni. “Week 18” is onduidelijk, mensen weten niet wat elke week is. Een kalender is een leuk idee, maar ziet er nog saai uit. Kalender misschien in paars? Groen ziet er snel te degelijk uit. Visactiviteit is niet heel breed, dus past niet bij de rest van de styles. Kijk naar de algehele stijl.
    
    
• Iteratie 3:
  • Onderbouwing: De laatste iteratie heeft alle feedback samengevat en zelfs verbeterd. Op basis van de feedback van de opdrachtgever heb ik week selectie wat meer centraal geplaatst zodat je gebruiker hem meteen zien staan. Ik heb het een duidelijke kleur gegeven en ook de dagen in de tekst gezet inplaats van alleen 'Week 18'. Alleen de week tonen was niet duidelijk voor de gebruikers. In het tweede gedeelte hebben wel wat veranderingen plaats gevonden. Ten eerste heb ik de kleuren van de kalender cellen aangepast naar paarse varianten, de opdrachtgever vond dat er te veel groen aanwezig was. Om de cellen zelf op te vullen laat ik in elke cel de meest gespotte vis zien van dat dagdeel. On hover zie je ook de lijst van de vissen die in dit dagdeel zijn gespot zodat je nog een duidelijker overzicht krijgt. Om de statistieken af te maken heb ik ervoor gekozen om nog een totale statistieken lijst te maken. Zo zie je in één oogopslag hoeveel vissen er in totaal in deze periode zijn gespot. Ook deze data past zich dynamisch aan en heeft veel kleur varianten op aanvraag van de opdrachtgever.
  • 
  • 
  • Feedback: Dit was de laatste iteratie, dus om de puntjes op de i te zetten heeft de opdrachtgever minimale feedback gegeven (onderandere tekst kleuren, tekst groottes en border width).

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.
  • 
  • 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.
  • 
  • 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.
  • 
  • 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.
  • 
  • 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.
  • 
  • 
  • 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).
  • 

• 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

• https://www.w3schools.com/js/js_dates.asp
• https://www.w3schools.com/jsref/jsref_filter.asp
• https://www.w3schools.com/js/js_const.asp
• https://d3js.org/d3-scale/linear
• https://d3js.org/d3-selection/joining-data
• https://d3js.org/d3-shape/line
• https://d3js.org/d3-selection/events
• https://d3js.org/d3-shape/area
• https://d3js.org/d3-axis
• https://d3js.org/d3-geo
• https://d3js.org/d3-zoom
• https://d3js.org/d3-ease
• https://d3js.org/d3-timer/interval
• https://d3js.org/d3-selection/selecting
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
• https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
• https://github.com/topojson/topojson-client
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion
• https://www.npmjs.com/package/i18n-iso-countries
  
  

AI:

• Gemini
• ChatGPT