Documentatie Nienke
Vandaag hoorden we onze opdracht en groepen. En hebben een aantal vragen opgezet voor de opdrachtgever. Voor de eerste week is de opdrachtgever Cyd Stumpel. Ze heeft ons de details van de opdracht uitgelegd en wij hebben onze vragen kunnen stellen en de antwoorden genoteerd. Verder heeft ze laten zien hoe de data van de visdeurbel gebruikt kan worden op de site en zelf wat voorbeelden laten zien van wat we zouden kunnen doen met de opdracht. De opdrachtgevers in Utrecht, Studio Moan, zijn deze week nog niet beschikbaar, ze zullen ons volgende week dinsdag een mail sturen over ons eerste contact moment.
Vandaag heb ik gewerkt aan verschillende conceptschetsen. Hiermee heb ik ook meteen aan mijn leerdoel gewerkt: meer variëren in mijn ontwerpfase. Normaal heb ik snel één idee in mijn hoofd dat ik meteen wil uitwerken. Ik merk alleen dat dit me soms beperkt, omdat ik dan minder andere opties bekijk die misschien beter zijn. Door nu meerdere schetsen te maken, dwing ik mezelf om breder te denken en verschillende richtingen te onderzoeken voordat ik een keuze maak.
Daarnaast heb ik in Blender een 3D-model gemaakt van een vishaak, omdat we geen goede online konden vinden. Dit kostte wat tijd, maar daardoor hebben we wel iets dat precies past bij wat we nodig hebben.
Ook ben ik begonnen met het digitaliseren van één van de ideeën. Dit is een soort staafdiagram waarbij vissen per uur langs zwemmen om de data weer te geven. Ik ben nu aan het kijken hoe ik dit idee het beste kan uitwerken en hoe het er visueel duidelijk en aantrekkelijk uit kan zien. En hoe ik mijn idee goed digitaal kan maken.
Ik ben vandaag begonnen met een meeting met Vasilis over het ontwerpproces. Hier vertelde hij hoe je 40 verschillende schetsen in 1 minuut kan maken, om jezelf te dwingen om met creatieve ideeën te komen. Verschillende varianten maken van hetzelfde idee telt ook als variatie, want soms is een idee al gewoon heel goed. Het is handig voor mij om bewuster keuzes maken, en dit ook te documenteren! Het zit niet alleen in het begin, maar in elke ontwerpkeuze kan je werken aan dat leerdoel. Alleen in je hoofd iets bedenken kan, maar met fysiek iets uitwerken krijg je vaak ook weer onverwachte inzichten. Maken is ook onderzoek doen. Je kan dan screenshots of forks maken om te vergelijken met elkaar. Laat mensen meekijken. Als je alleen werkt, dan ben je gelimiteerd aan je eigen brein en conventies. In ons team is het sowieso een goed idee om wat meer met elkaar mee te kijken.
Design principles: Waar moet ons werk aan voldoen? toegankelijkheid, huisstijl, kenmerk opdrachtgever. Helpt voor houvast om te kijken of je nog wel op de goede weg bent (principle.adactio.com). Watervalmethode: een doet het wireframe, dan het design, dan het developen en je kan niet meer terug naar boven. Scrum: Je werkt in sprints, het gaat altijd door. je hebt geen eindoel, maar een doel voor over twee weken. Agile: je kan veranderen tijdens het proces. Een uiteindelijk doel, maar daar kan je vanaf wijken. Inzichten van jezelf en opdrachtgevers geven je een aanpassing voor het eindoel. Bij twijfel, maak verschillende prototypes zodat de opdrachtgever kan meedenken. Mensen zijn geneigd om hun onzekerheden voor zich te houden, maar zie twijfel als iets positiefs. Laat het zien. Stel vragen.
Vandaag heb ik aan de tijdlijn css toegevoegd. Dit is nog een beetje experimenteren. Ik wil graag dat er geen afgesneden vissen zijn, maar daar kom ik nog niet helemaal uit. Verder moet ik ook nog een x-as toevoegen, zodat je duidelijk kan zien op welk uur van de dag, hoeveel vissen te zien zijn, zonder te hoeven hoveren. Mitchell dacht ook dat we de grafiek in twee rijen konden splitsen, AM en PM bijvoorbeeld.
Gesprek met Jad: Denk aan de toegangelijkheid: tooltips als popover. Tabindex zodat je door de verschillende uren heen kan tabben. Misschien voor blinden iets van een percentage, omdat ze het visueel niet zien. Ik ben van plan om dit wel te doen, maar aangezien we nu nog in de ontwerpfase zitten, is het voor nu nog niet mijn prioriteit. Ik wil meer varieren, zodat ik verschillende opties aan de opdrachtgever kan laten zien.
Deze week heb ik verschillende gesprekken en cursussen gevolgd die mij hebben geholpen bij het project en mijn eigen ontwikkeling.
Tijdens een gesprek met Jad kregen we feedback op het gebied van toegankelijkheid. Hij gaf aan dat tooltips beter als popovers kunnen worden opgebouwd en dat het belangrijk is om tabindex toe te voegen, zodat gebruikers door de verschillende uren heen kunnen tabben. Ook gaf hij als voorbeeld dat het voor blinden handig kan zijn om percentages of andere tekstuele informatie toe te voegen, omdat zij de visualisatie niet kunnen zien. Ik ben van plan om hier rekening mee te houden, maar omdat we ons nog in de ontwerpfase bevinden, ligt mijn focus nu eerst op het maken en vergelijken van verschillende ontwerpvarianten. Dit sluit ook aan bij mijn leerdoel om meer te variëren tijdens het ontwerpproces.
Daarnaast heeft Jad een kleine cursus over React gegeven. Dit was erg fijn, omdat ik nog nooit eerder met React had gewerkt. Ook volgden we een JavaScript-cursus waarin de basis weer werd opgefrist. Dit was nuttig, omdat deze kennis snel wegzakt als je er een tijd niet mee werkt.
Verder kreeg ik feedback van Sanne op mijn ontwerp. Hij had het idee om een klein visje te gebruiken in plaats van een nieuwe vis die buiten de tabel uitsteekt. Ook zei hij dat ik beter een HTML-table kan gebruiken in plaats van divs, vanwege de semantiek.
Op basis van de feedback van zowel Cyd als Sanne heb ik mijn ontwerp verder aangepast en verfijnd voor de meeting met Studio MOAN op vrijdag.
Aan het einde van deze week hebben we een feedback moment gehad met Studio MOAN. Zij waren erg enthousiast over onze voortgang en vonden dat we al ver waren in het proces. Wel gaven ze aan dat mijn ontwerp nog wat onoverzichtelijk was. Ze adviseerden om duidelijker onderscheid te maken in de visualisatie, bijvoorbeeld door beter gebruik te maken van de grootte van de vis en de opbouw van de bar graph. Ook gaven ze aan dat de informatie nog iets meer fool-proof mocht worden, terwijl het ontwerp wel de vrolijke uitstraling van de Visdeurbel moest behouden.
Daarnaast kregen we de vrijheid om creatiever om te gaan met de visuele vormgeving. Als voorbeeld noemden zij de tips voor het spotten van vissen, waarbij illustraties zoals een fiets of een Romeinse helm gebruikt kunnen worden. Ook vonden zij de hover-interactie goed werken.
Naast het verwerken van feedback hebben we deze week onze projecten omgezet naar React. Hiervoor hebben we een cursus van Victor gevolgd, waarin we ons vooral hebben verdiept in het werken met Hooks.
Op basis van alle ontvangen feedback van Studio MOAN, Cyd, Jad en Sanne, heb ik mijn ontwerp verder ontwikkeld. Ik heb de visualisatie opgebouwd als een HTML-table, waardoor deze semantisch correct is en beter toegankelijk wordt. Hieraan heb ik al toegankelijkheids eisen toegevoegd, zodat gebruikers met een screenreader door de verschillende table cellen kan navigeren. Daarnaast heb ik scroll-driven animations toegevoegd, waarbij de staafdiagram uit schaalt wanneer de tabel in beeld komt. Ook zwemt er nu een vis voor de grafiek langs die aangeeft welke vissen het meest zijn gespot in dat uur.