Documentatie Julius
Deze week ben ik bezig geweest met een carousel maken waarin je op de vis klikt en dan naar een detailpagina gaat waarin je informatie over de vis krijgt en hoe vaak die is gezien. Daarnaast kan je ook wat items vinden op de website en dan kan je een vis aankleden; de hoop is dat dit voor meer retention zorgt.
![Week 1 - HTML carousel]
Dit feedbackgesprek was met Cyd. Daaruit kwam dat mijn carousel en dan vooral het aankleden van de vis waarschijnlijk niet helemaal de bedoeling is, en het daarom ook niet verder uitwerken. Kijk of je de carousel wel verder uit kan werken.
Deze week ben ik mijn carousel iets verder gaan uitwerken en heb ik het designsysteem omgezet naar een styleguide, zodat iedereen consistent de juiste kleuren gebruikt. Na een nuttig gesprek met Jad ben ik ook gaan kijken naar toegankelijkheid om te zien of mijn carousel helemaal tapbaar is. Naast deze gesprekken heb ik ook een paar cursussen gevolgd. Zelf vond ik de cursus van GSAP interessant - ik heb er wel een keer eerder mee gewerkt, maar er meer dingen mee maken en er meer over leren gaf me een paar ideeen over hoe ik het zou kunnen gebruiken binnen het project.
Deze week was ook de eerste keer dat we naar de opdrachtgever gingen, Studio MOAN. Dat was echt gaaf om te doen. Er kwam veel positiviteit en energie vanuit hun kant en dat was echt leuk om mee te maken.
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.
Deze week ben ik mijn carousel gaan omzetten naar React. Ik heb Embla Carousel gebruikt als basis en mijn bestaande HTML opnieuw opgebouwd als losse componenten. De carousel laat vissoorten zien zoals de Baars, Snoek en Meerval en als je op een vis klikt opent er een dialog met wat statistieken over die soort, zoals hoe vaak die gemeld is, welk aandeel dat is van alle meldingen en welke positie die heeft in de ranglijst. Daarnaast kan je vissen aankruisen in een soort checklist zodat je kan bijhouden welke je al hebt gezien. Halverwege de week had ik het werkend en daarna heb ik de styling verder uitgewerkt zodat het beter aansluit bij de rest van de pagina.
![Week 3 - React carousel]
![Week 3 - Dialog met visinfo]
Uit de feedback kwamen een aantal punten. Er was te veel ruimte tussen de Latijnse naam en de rest van de content in de dialog. Ook werd gezegd dat je wel kan aanvinken maar dat het niet echt iets doet, en dat de foto in de dialog hetzelfde plaatje is als in de carousel terwijl een mooiere of andere foto daar beter zou staan. Een algemeen punt was dat ik me beter moet afvragen wat ik nou precies wil vertellen met de carousel, dat was ook voor iedereen een aandachtspunt. Verder werd gezegd dat het meer een geheel moet zijn en dat het meer moet bieden dan alleen de slider die ze al hebben. Uit de feedback kwam ook dat het checklist systeem in de carousel iets is wat ze wel zouden willen zien uitgewerkt worden.
Deze week ben ik bezig geweest met een klokelement dat laat zien op welke tijden er het meest gemeld wordt. Je ziet een klok en daaronder een tabel met de drukste uren zodat het wat overzichtelijker is dan alleen de klok. Ik heb ook wat bestanden opgeschoond en hernoemd want de namen klopten niet meer bij wat de bestanden eigenlijk deden.
![Week 4 - Clock component]
De visualisaties vereisen momenteel te veel scrollen. De voorkeur is dat gebruikers in een oogopslag kunnen zien wat de visualisatie toont en wat de betekenis ervan is, belangrijke informatie moet dus direct zichtbaar zijn zonder veel interactie of navigatie. Daarnaast is de tekst op sommige plekken te klein en mag groter voor betere leesbaarheid. De visualisaties mogen ook eerder in beeld verschijnen en de focus moet duidelijker liggen op de klok en de zonnebloem. Voor vragen kan altijd via e-mail contact worden opgenomen.
Deze week ben ik bezig geweest met het afronden. Ik heb comments door de code gezet en alles omgezet naar het Engels zodat het leesbaar is voor iedereen. De styling van de clock heb ik ook nog wat bijgewerkt en grotere afbeeldingen doorgevoerd. Als laatste heb ik een footer gebouwd die onderaan de homepagina staat en de navigatie gerepareerd zodat alles goed werkt in de uiteindelijke versie.
![Week 5 - Footer]
