Design rationale
- debriefing
- probleemdefinitie
- getoonde oplossing voor probleem
- uitleg code
- 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?
- Wie is de doelgroep?
- Wat willen jullie dat de doelgroep doet of voelt?
- Wat willen jullie uiteindelijk bereiken?
- Wat vinden jullie het belangrijkst?
- Hoe ziet een succesvol eindresultaat eruit voor jullie?
- Zijn er voorbeelden die jullie aanspreken?
- Wanneer willen jullie de feedbackmomenten inplannen?
- Zijn er vaste contactmomenten?
- 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?)
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 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.
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.
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.
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.
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.
De visualisaties worden ontwikkeld met HTML, CSS, JavaScript en D3.js. Hierbij werken wij modulair en houden wij rekening met performance, responsiveness en toegankelijkheid.
- 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.
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.
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.
- 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.
-
Iteratie 1:
-
Onderbouwing: In deze eerste versie heb ik een interactieve wereldkaart toegevoegd met D3.js om inzichtelijk te maken waar visdeurbellers vandaan komen. Het doel was om bezoekers op een visuele manier te laten zien hoe internationaal het bereik van De Visdeurbel is. Landen werden ingekleurd op basis van het aantal bezoekers en gebruikers konden landen selecteren om meer informatie te zien. Daarnaast heb ik een legenda toegevoegd zodat gebruikers de betekenis van de kleuren konden begrijpen. De focus lag in deze fase vooral op het neerzetten van de basisfunctionaliteit en het verwerken van de bezoekersdata in een begrijpelijke visualisatie.
-
-
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.
-
-
Iteratie 2:
-
Onderbouwing: Op basis van de ontvangen feedback heb ik de wereldkaart uitgebreid met meer context en interactie. Naast de kaart heb ik een top-3 lijst geplaatst zodat gebruikers direct kunnen zien welke landen de meeste visdeurbellers hebben geleverd en hier eenvoudig tussen kunnen navigeren. Je kunt op landen klikken om daar statistieken van te zien. Vanuit dit land wordt een route naar Utrecht getoond, waarbij visjes over de lijn bewegen. Hiermee krijgt de visualisatie meer persoonlijkheid en wordt de relatie tussen bezoekers en Utrecht beter zichtbaar. Utrecht is zichtbaar op de kaart door middel van een label en een gekleurd bolletje. Verder is ook Antartica nu weggehaald, omdat deze veel ruimte innam op de kaart, maar weinig toegevoegde waarde had, aangezien niemand vanaf daar de Visdeurbel zou bezoeken.
-
-
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.
- De vis heeft een groene lijn, wat wegvalt op de lijnen van de landen.
- De actieve styling voor landen mag wat duidelijker.
-
-
Iteratie 3:
- Onderbouwing: Om de kaart meer karakter te geven heb ik de kleuren aangepast naar de paarse tinten uit de huisstijl van De Visdeurbel. Daarnaast wordt nu automatisch het populairste land geselecteerd bij het laden van de pagina, deze trekt automatisch een lijn richting De Visdeurbel in Utrecht. De section is nu verder perfect uitgelijnd zoals ze dat op de echte visdeurbelsite ook doen. Verder heb ik icoontjes toegevoegd bij de statistieken om zo voor meer duidelijkheid te zorgen. De decoratieve belletjes zijn verwijdert, omdat deze teveel afleiding veroorzaakte. De kaart is ook een klein beetje opgeschoven om te zorgen dat Fiji niet wordt afgeknipt. Ook heb ik voor de accessibility de actieve styling wat aangepast, zodat deze een duidelijker contrast heeft tegenover de andere landen. Ik heb nu ook een custom svg visje dat over de lijn beweegt. Deze lijn en de vis zelf zijn ook van kleur veranderd, omdat het anders wel erg eentonig werd als alles paars is.
Deze versie van de kaart is wat ik heb gepresenteerd bij de laatste presentatie aan de opdrachtgever, hierna heb ik nog wat feedback ontvangen voor wat ik eventueel voor de expo nog aan zou kunnen passen om net dat laatste beetje over de lijn te trekken.
-
-
Feedback:
- Probeer nog net wat meer verschil in paars te krijgen voor dat beetje extra contrast.
- Probeer ook wat leuker de top 3 lijst aan te pakken, door de paarse hover een andere kleur te geven.
-
Iteratie 4 / eindproduct:
- Onderbouwing: In het eindproduct heb ik geprobeerd om de wereldkaart niet alleen als datavisualisatie te laten werken, maar ook echt als onderdeel van De Visdeurbel. De kaart laat nog steeds zien waar bezoekers vandaan komen, maar door de route naar Utrecht en de bewegende vis krijgt de data meer betekenis: je ziet als gebruiker letterlijk hoe bezoekers vanuit verschillende landen richting de Visdeurbel komen.
Op basis van de laatste feedback heb ik de visuele hiërarchie verder aangepakt. De hoverkleur van de top 3 landen heb ik aangepast naar een goudgele kleur uit de huisstijl. Hierdoor valt interactie beter op, zonder terug te gaan naar de eerdere goud-, zilver- en bronsranglijst die te veel als een wedstrijd aanvoelde. De ranking blijft dus duidelijk, maar sluit nu beter aan bij de visuele identiteit van de site.
Ook heb ik het contrast tussen landen versterkt door de kleurenschaal aan te passen. In eerdere versies lagen de paarstinten dicht bij elkaar, waardoor het verschil tussen landen met weinig en veel bezoekers minder goed zichtbaar was. Door de schaal duidelijker te maken, wordt de kaart sneller leesbaar en kunnen gebruikers beter zien welke landen relatief veel bezoekers hebben.
Daarnaast heb ik aandacht besteed aan toegankelijkheid. De kaart is niet alleen met de muis te gebruiken, maar bevat ook focus states, keyboard-navigatie en een skip-link waarmee gebruikers de interactieve kaart kunnen overslaan. Hierdoor blijft de visualisatie bruikbaar voor verschillende soorten gebruikers. Het eindresultaat combineert daarmee data, interactie, huisstijl en toegankelijkheid in één onderdeel.
Dit onderdeel begon als een statisch overzicht en groeide gaandeweg uit naar een interactief aquarium-concept.
- Iteratie 1:
- Als eerste iteratie van dit onderdeel was er heel letterlijk naar de figma gekeken. De 3 grafieken die erin stonden letterlijk namaken. Voor dit onderdeel heb ik met d3 grafieken laten maken, waarbij je dus met live data kon zien hoeveel vissen er waren gespot. Je kon hierbij alleen de 3 meest gespotte vissen zien. Voor de rest zat er een kleine scroll animatie op.
-
- 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.
- Iteratie 2: Bij het tweede feedback moment was dit onderdeel nog niet af. Wel kwam er al feedback over. Voor het project Vis van het seizoen zijn we momenteel de eerste concepten aan het uitwerken. Het idee om een aquarium-omgeving te creëren werd zeer enthousiast ontvangen; het geeft de gebruiker echt het gevoel alsof ze in een gracht kijken. Om dit effect te versterken, willen we een fietswrak aan de bodem toevoegen.
De afbeeldingen worden geplaatst, waarbij we de vissen in hun natuurlijke verhoudingen tonen. We houden het beeld bewust rustig en focussen op een top 3 van de meest gespotte of bijzondere vissen, gecombineerd met een optie voor user feedback.
- Iteratie 3:
-
Voor de derde iteratie was er een visualisatie. Hierbij kon je alle vissen zien zwemmen. Hoe meer je van de vis zag in het aquarium, hoe vaker die gespot was. Ook kon je bovenin het scherm alle vissen zien en daarnaast in het bubbeltje het aantal zien met hoe vaak je gespot waren. Ook was er een knop om te wisselen tussen alle vissen en de top 3 vissen die gespot zijn. Ik heb hierbij gelijk de feedback verwerkt van vorige week. Dus er was al gelijk een wrak in het water te zien en een wissel tussen top 3 en alle.
-
-
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.
-
- Iteratie 4:
-
Voor de vierde iteratie is er gezorgd dat het minder een aquarium gevoel geeft en meer een gracht. Daarom is er nu een stenen muur achtergrond, zodat je sneller ziet dat het in de gracht van Utrecht bevind. De vissen zijn ook naar de zijkant verplaatst en de gracht wat kleiner gemaakt, zodat het wat minder overweldigend is. Ook is erbij gezet wat het getal naast de vis betekent.
-
-
-
Feedback: Schaal de vissen beter op echte groottes, zodat er een beter verschil is tussen de vissen. X gespot hoeft niet als je dit al uitlegt in de zin erboven. Zorg dat de knoppen wat duidelijker zijn zoals de map bovenaan. En moeten de knoppen van alle vissen echt daarboven staan? Of niet bij de lijst?. Hele leuke achtergrond op deze manier! Als je visknoppen uiteindelijk niet lukken zorg dan dat het er niet uit ziet als een knop
-
- Iteratie 5:
- Voor de vijfde iteratie was er gezorgd dat die klaar is, het moest namelijk gepresenteerd worden aan de opdrachtgever. Al het feedback is hierbij dus ook verwerkt. De vissen zijn nu geschaald op groottes en als bonus is er ook bij dat hun zwemsnelheid accuraat geschaald is. De "x gespot" is weggehaald en de tekst daarboven is nu in de huisstijl. Ook staan alle knoppen nu links van de gracht. En niet alleen staan ze nu links, maar ze zijn nu ook zo gestijlt als alle andere knoppen, in de huisstijl dus. De visknoppen zijn niet minder als een knop gestijlt omdat ze nu ook echt wat doen. Je kan er op klikken en dan zie je in de gracht alleen die vis rondzwemmen. Ook is er een hover boven de vissen toegevoegd, zodat je gelijk kan zien welke vis het is en niet eerst in het lijstje hoeft te zoeken naar welke het nou is. Ook is er aan de zijkant van de gracht een waterpeilpaal neergezet, zodat je kan zien hoe hoog het water staat. De tekst staat nu ook eindelijk goed en er is meer in de gracht neergezet, zodat het net wat voller lijkt.
-
- Feedback: En zelfs hier kwam nog feedback op, terwijl dit al de laatste keer was. Gelukkig was het niet veel. Het font op de visnamen mocht iets kleiner, zodat het aantal gespot getal wat groter kon. De gracht moet net ietsjes kleiner, zodat die helemaal in het scherm past.
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).
- 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.
- 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
- Iteratie 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)
- 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
- Iteratie 1
- Onderbouwing: Voor de eerste iteratie van dit onderdeel had heel simpel een galerij gemaakt van de visfoto's van de maand. Mijn idee was om een extra detail te tonen over elke foto als je er op klikt. Je kan dan boven de foto zien wanneer de foto was genomen en welke vis op de foto staat. Ook als je met je muis over een foto heen gaat krijg je een tooltip te zie waar de naam van de vis op staat. Dit vond ik een leuke toevoeging aan de galerij en iets dat wat meer interactie bracht dan alleen maar beeld. Mijn doel was om wat meer informatie te tonen bij de afbeeldingen zodat je de gebruikers wat meer kan betrekken bij het ontwerp
-
-
- Feedback: Het idee van de Visfoto van de maand werd positief ontvangen, maar de foto’s worden handmatig uitgekozen waardoor het concept niet helemaal aansluit op de werkelijkheid. Daarom ga ik volgende week op zoek naar een nieuw concept.
- Iteratie 2
- Onderbouwing: Om de individuele vissen meer op de voorgrond te zetten had ik bedacht om een popover te maken voor elke vis apart. In de popover kan je dan verschillende informatie over de vissen lezen, foto's bekijken van die vis en verschillende visfeitjes zien. Ik heb me vooral gericht op het ontwerpen van de popover. Om de popover te openen heb ik een lijst van alle vissen gemaakt in een lijst van knoppen. Als je op een van de knoppen klikt opent de vergelijkbare popover met alle informatie.
-
- Feedback: De visgalerij stond nog te veel verstopt, waardoor gebruikers deze niet snel zouden vinden. Ook vond de opdrachtgever dat het concept nog niet goed aansloot op de rest van de website
- Iteratie 3
- Onderbouwing: Mijn doel van deze versie was om de informatie over elke vis niet zo verstopt te zetten. Ik had er daarom voor gekozen om een algemene popover te maken aan de rechter kant van het scherm en aan de linker kant een lijst te maken van knoppen waarmee je de informatie kan aanpassen in de popover gebaseerd op welke knop je klikte. Ik wilde deze keer graag wat leukere foto's laten zien en heb daarom 4 afbeeldingen uitgekozen om te laten zien hoe leuk dit zou kunnen zijn. Ik vond dat een paarse achtergrond wel erg leuk staan bij deze sectie en ook passend bij de huisstijl.
-
- Feedback: De opdrachtgever vond dit ontwerp duidelijk beter dan de eerdere verstopte popover. Vooral het feit dat je nu per vis foto’s kunt bekijken werd als erg positief ervaren. Wel moet er nog gewerkt worden aan de hiërarchie binnen de popover, omdat de titel van de sectie en de titel van de vis nu nog even groot zijn. Daarnaast sluiten de knoppen nog niet goed aan bij de rest van de website, omdat deze afwijken van de bestaande stijl.
- Iteratie 4
- Onderbouwing: Voor deze iteratie had ik veel gewerkt aan het ontwerp en hierarchy van de popover. Ik had er bijvoorbeeld voor gezorgd dat de knoppen meer op een stijl liggen met die van de andere secties. Ook heb ik de tekst over de vissen groter gemaakt en nog enige visfeitjes toegevoegd. Daarnaast heb ik ervoor gezorgd dat je op de afbeeldingen kan klikken om ze te openen.
-
-
- Feedback: De opdrachtgever vond het leuk dat je per vis foto’s kunt bekijken. Wel werd meegegeven om nog te letten op de hiërarchie van de verschillende onderdelen en de opbouw van de tekst binnen de popover. Ook passen de knoppen nog niet goed bij de rest van de website. Als idee werd nog meegegeven om dit onderdeel eventueel te combineren met een andere sectie en er een soort Pokémon-kaart van te maken.
- Iteratie 5
- Onderbouwing: Voor de laatste iteraties van dit onderdeel vond ik het interessant als ik iets in de richten van een soort pokemon kaart maak. Op zo'n kaart krijg je namelijk soort stats te lezen, waardoor de gebruiker niet veel moeite hoeft te doen om alle informatie binnen te krijgen. Je kan nu dus door de carousel heen klikken om van kaart naar kaart te navigeren in een soort cirkel. In elke kaart kan je ook verschillende afbeeldingen bekijken.
-
-
iteratie 1
- Onderbouwing: Om voor meer interactie te zorgen hadden we in de tweede week het idee om een soort visquiz te maken. Hierin krijgen gebruikers een willekeurige afbeelding te zien, je kan vervolgens om een van de visopties klikken om te raden welke vis er op de afbeelding staat. Deze afbeeldingen komen uit de data en zijn gefilterd op likelyhoodoffish en of het onbekende vissen zijn.
-
- 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).
-
Iteratie 2
- Onderbouwing: Wij vonden dat de quiz nog wel een leuke toevoeging was op de gehele website en hebben daarom nog laatste aanpassingen gebracht aan dit onderdeel. Zo hebben we de quizkeuzes veranderd naar knoppen zodat het duidelijk is dat je erop kan klikken. En de teksten verder aangepast wat beter aanduidt wat je met deze sectie kan doen.
-
- Feedback: Het ziet er met een ander ontwerp veel duidelijker uit wat de gebruiker nou echt moet doen. Toch zien we wel graag foto's terug waar vissen op staan in plaats van lege foto's.
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.
-
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/JavaScript/Reference/Statements/for
-
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
-
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
-
https://developer.mozilla.org/en-Web/HTML/Global_attributes/tabindex
-
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
-
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
-
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
-
https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
-
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion
- Gemini
- ChatGPT