Gesprekken met de opdrachtgever
- Normale gesprekken met de coach zijn op maandag.
- Afwijkende data:
- 26 mei om 11:00 — meeting met de coach
- 2 juni om 11:00 — meeting met de coach
- 8 juni om 11:00 — meeting met de coach
- Tussen maart en juni is hij actief.
- Nog bespreken:
- Welk framework gebruikt gaat worden
- Cyd-gesprek
Het doel van het project is een interactieve ervaring rondom vissen en een sluisinstallatie.
Wanneer er een vis “voor de deur staat”, moet er op een bel gedrukt kunnen worden zodat de machinist de sluis kan openen.
Daarnaast moet data verzameld en gevisualiseerd worden rondom bezoekers en vissen.
De data wordt anoniem verzameld via Umami.
- Locatiegegevens
- Browser
- Operating system
- Laatst gezien
De data kan snel omgezet worden naar JSON.
- Bevat veel uitgebreide informatie
- Minder overzichtelijk
- Beknoptere dataset
-
languagegeeft aan in welke taal de website staat
- Data gebruikt Unix Timestamps
- Er zit een limiet (“cap”) op van 3000 records
- Daarna worden gegevens doorgestuurd naar YT
- Hoe vaak bepaalde vissen voorkomen
- Welke tijdstippen het populairst zijn
- Drukte per dag analyseren
Ideeën:
- Interactieve map
- Een tank/aquarium met drukte-indicatie
- Aantal vissen gebaseerd op drukte van de dag
- Bewegende bubbels of visuele effecten
- Gericht op alle leeftijden
- In de bestaande huisstijl blijven
- Gebruik van het Google Font:
- Bricolage (variable font)
Belangrijk:
- Foto’s niet allemaal tegelijk tonen, omdat het er veel zijn
- Huidige omgeving:
- WordPress / PHP
- Verdere tech stack maakt niet veel uit
Nog uitvoeren:
- User tests
- Toegankelijkheidstest (WCAG)
Benodigd:
- Goede README
CONTRIBUTIONS.md- GitHub-link
- Live link naar het project
- Peter
- Paul
- Welke data zou je liever willen voor deze visualisatie? - gemiddeld per dag/week/maand?
- Is de kleur van de achtergrond oke? is er een extra kleur die we zouden kunnen gebruiken? naast paars/groen/lichtgoud.
- Responsiveness: AM en PM? of zo houden?
De sessie opende met twee overkoepelende aandachtspunten die als leidraad gelden voor het verdere proces: alles moet op één scherm passen, en de presentatie vraagt nog voorbereiding.
Het geheel oogt nog onduidelijk en de huisstijl komt niet goed tot zijn recht. De kijker weet niet waar hij naar kijkt, mede doordat elementen niet gecentreerd zijn en context ontbreekt. Het advies is om meer varianten uit te tekenen en inspiratie te zoeken bij bestaande datavisualisaties, zoals het blog van de Smashing Conference. Verder wordt aangeraden om tijden altijd met een uuraanduiding én context te voorzien, en te overwegen wit te gebruiken in plaats van blauw als achtergrond. Een enkele regel volstaat voor de weergave; een verticale lay-out voor mobiel is mooi meegenomen als er tijd voor is.
Het ontwerp heeft het karakter van een dashboard, wat meteen de uitdaging voor mobiel blootlegt. De lijnen werden als interessant en cool ervaren, maar het lijnengewicht werkt mogelijk niet optimaal en vraagt om een alternatief. De suggestie is om te denken vanuit een platte kaart en een aantal sterke elementen uit het Utrecht-met-lijnen-concept over te nemen. OS- en browserdata werd als minder relevant voor de gemiddelde gebruiker beschouwd. Ter inspiratie werd de GitHub Globe-animatie aangehaald als voorbeeld van een sterk geografisch-visueel concept.
Het ontwerp bevat een creatief idee, maar wordt in de praktijk als onbruikbaar ingeschat voor dit project. Het idee rondom vissen werd wel als interessant gezien, en de styling werd positief ontvangen. De visseninformatie zou echter beter tot zijn recht komen in combinatie met de beschikbare data. Mochten vissen alsnog een rol spelen, dan zou animatie via bijvoorbeeld Lottie goed in de smaak vallen.
De stijl wordt gewaardeerd, vooral het font, maar het font moet wel echt in de huisstijl staan en de naam "bel" moet eraf. Het radarconcept werd als gimmick leuk gevonden, maar suggereert nu betekenis die er niet is: de positie van de visser lijkt ergens op gebaseerd, terwijl die random is. Het concept werkt pas echt als die positie wél iets representeert. Nadi opperde om het op de Utrechtse grachten te projecteren, zodat het visueel én inhoudelijk verankerd wordt. Verder zijn de radarlijnen slecht zichtbaar en ligt de paling over de data heen — die moeten visueel uit elkaar getrokken worden.
Qua data is het grote verschil tussen punten een probleem; kleinere waarden lijken daardoor onbedoeld irrelevant. Een exponentiële schaal kan dat oplossen, zodat ook kleinere waarden goed zichtbaar worden. De peaks zijn juist interessant om uit te lichten. Per dag is waarschijnlijk te fijnmazig — per week of maand werkt rustiger. Maand is nu logisch, maar laat in de documentatie ook een jaaroverzicht zien (alleen actieve maanden). Per vis een grafiek is denkbaar, eventueel met de regel: hoe dichter bij het midden, hoe meer data. Een fotoslideshow bij hover zou een leuke uitbreiding zijn. Op desktop is het midden nu wat smal — daar is ruimte om breder te gaan.
Het ontwerp behoeft nog een stylesheet — er moet een echte style guide komen, zodat er meer in dezelfde stijl wordt samengewerkt. Inhoudelijk staat er al veel, maar deliverables en planning vragen nog aandacht. Meer iteraties laten zien is belangrijk: minimaal 30, "meer is meer". Eén website waar alles op staat is prima. Het uitgangspunt is dat meer uitwerking beter is, zeker met vier dagen beschikbaar.
- Wat willen we opleveren?
- Welke technieken gebruiken we? (bij voorkeur een framework)
- Wat is onze planning?
- Wat is de scope?
- Introductie
- Debrief
- Proces – schetsen, ideeën en wat er tot nu toe is gedaan
- Vooruitblik – wat gaan we nog doen en wat is de planning
Houd de presentatie kort en strak. Ze zijn kritisch op design, dus maak er een doorlopend, logisch verhaal van in plaats van een opsomming van losse stappen.
29-05-26
Vandaag zijn we voor het eerst naar Utrecht gegaan om Studio Moan te ontmoeten. Ze hebben ons feedback gegeven over onze individuele data visualisaties:
Niet te flauw, het moet wel echt in de stijl. Misschien voor info wat is herkenbaar en daar misschien op gaan. Bij de home heb je infographic info beetje zo’n stijl. Huisstijl past erg goed bij Tussen de Latijnse naam kan wel iets minder ruimte
Dismissed catch niet laten zien veel mensen snappen dit toch niet Ik zou verveel uithalen, bezoeken intressant, Lijnen is heel nice maakt inzichtelijk waar het vandaan komt en zit Utrecht ook een beetje op de kaart en bezoeken vissoort. Let wel op de kleuren van de huisstijl Niet in een kader, mss halveren aan een kant en aan de andere kant de data en legenda etc Belangrijk nu keuzes wat ga je tonen Dat je kan klikken per land is heel cool. Lijnen misschien iets minder hoog
Beetje onoverzichtelijk nog, kan ik doen met de grote van de vis, bar graph en dan 1 vis eropdoet, en niet verticaal centreren. Het leest nog beetje onduidelijk maak het fool-proof en nog steeds zo vrolijk oogt. Misschien de andere kant op zwemmen. Tweede versie is wel beter. Iets van bubbeltjes We mogen best creatief bedenken voor visuele vormgeving, bijv de 3 tips voor het spotten van de vis, dus bijv de fiets en romeinse helm etc De hover is prima, maar als er over heen hover.
Data moet meer aantrekken voor de gebruiker om het echt te lezen, het is nu nog redelijk verwarrend. T-mobile vibe. Maak een vertaalslag naar wat de vraag is. Lijnen van de klok moeten meer contrast hebben. TV wordt veel gebruikt voor de visdeurbel. Dus let goed op het contrast. Het is iets te strak/klein. Mag expressiever/speelser. Minder lezen, maar meer kijken. Dat je in een oogopslag ziet wat je moet zien. Maak het voor je Tante Corry. BARRY DE BAARS Week, maand, jaar is een top idee! Plaats hem wel ergens anders. En per visualisatie. Kipnugget belletje als animatie bij de map. Hallo in verschillende talen, maak het een ander woord dat meer te maken heeft met de visdeurbel (ding dong). De hover is nog wel wat heftig. School van apparaten. Het beweegt/ademt. Dat is helemaal visdeurbel. Sonar: midden is een vistoren (staat half onderwater?) en de echte vissen gebruiken ipv die gekleurde silhouetten, kan ook met die roze die in de tweede variatie van de timeline staan. Alles staat in het midden, kijk ook naar de whitespace eromheen. Geen tekst centreren!!
De opdrachtgever vond dat we al erg ver waren in het proces en was erg enthousiast. Maar vond dat we nog wat meer in de huisstijl van de Visdeurbel konden werken. Dat is met kleuren en fonts, maar ook op het gebied van aandacht vasthouden met animaties en simpele weergaves van de data.
Tweede tussentijds gesprek MOAN(visdeurbel)
- Wereldbol is heel vet, 3D is beter dan wereldkaartje
- Lijkt een beetje alsof de wereld samenkomt
- Titel geeft boven bijv Verenigde Staten
- Scroll bij de landen iets duidelijker maken
- Wereld bool iets meer inzoomen
- Graag de lijnen gelijk
- Menu en legenda iets meer in zicht brengt
- Utrecht bel icoontje
- Misschien iets met ding dong
- Liever geen kader
- Roze bolletjes leuk, maar Utrecht moet eruit springen
- Blauw van het water iets meer visdeurbel kan doen
- Belangrijkst leesbaar maken
Julius
- Dis is een ruimte waar data ingeladen wordt
- Kan je aanvingen maar niet echt
- Mooie foto ziet als je op de vis klikt ipv hetzelfde plaatje
- Wat wil ik nou precies vertellen moet je jezelf aanvragen(voor iedereen is dit)
- Probeer iets meer 1 geheel te maken
- Iets meer dan de slider die we al hebben
- Zou de check wil doen
Nienke:
- Het is lijkt meer welke is het snelst
- Animatie iets minder subtiel maken
- Bij de vorige meer een water gevoel
- Mogelijk kwart draaien
- Hoe wil je dit tonen? Is nog een slag te maken in design
- Je kan niet in 1 klap de braas zien
- Misschien iets met de tijd doen dus zon ondergaan op gaan
- Meer leesbaar, cool laten zien moet nu de focus op liggen
--
De gebruikte componenten zijn sterk en passen goed binnen het concept. Wel zou de plaatsing van verschillende onderdelen heroverwogen kunnen worden. Met name de legenda en filters zouden beter werken wanneer deze rechtsboven in beeld staan, zodat de belangrijkste content meer ruimte krijgt.
De componenten functioneren goed, maar de hiërarchie binnen de interface kan duidelijker. Door elementen anders te positioneren ontstaat er meer overzicht. Daarnaast is er momenteel veel ongebruikte ruimte aan de zijkanten, waardoor de inhoud compacter en prominenter gepresenteerd kan worden.
De visualisaties vereisen momenteel te veel scrollen. De voorkeur is dat gebruikers in één oogopslag kunnen zien wat de visualisatie toont en wat de betekenis ervan is. Belangrijke informatie moet daarom direct zichtbaar zijn zonder veel interactie of navigatie.
Verder:
- Tekst is op sommige plekken te klein en mag groter voor betere leesbaarheid.
- Visualisaties mogen eerder in beeld verschijnen.
- De focus moet duidelijker liggen op de klok en de zonnebloem.
- Zorg dat de interface prettig leesbaar blijft.
- Contact opnemen voor vragen kan altijd via e-mail.
Bij de visvisualisatie vallen een aantal zaken op:
- De vis lijkt achteruit te zwemmen.
- De vissen zijn erg klein en mogen groter weergegeven worden.
- Het schaalconcept wordt als leuk en passend ervaren.
- De omgeving oogt momenteel meer als een zee dan als een gracht, terwijl een grachtsfeer beter aansluit bij het onderwerp.