Documentatie Nienke
Aan het begin van dit project heb ik leerdoelen voor mezelf opgesteld waar ik tijdens dit project aan ga werken:
Een navigatiebalk bovenin de header is de standaard conventie, maar ik wil de grens opzoeken tussen deze conventie en originaliteit om tot een uniek ontwerp te komen.
Normaal gesproken heb ik snel één idee in mijn hoofd dat ik meteen wil uitwerken, wat me soms beperkt. Ik wil mezelf dwingen om breder te denken en verschillende richtingen te onderzoeken voordat ik een definitieve keuze maak.
Ik vind het vaak lastig om taken uit handen te geven, wat zorgt voor veel stress en druk. Ik hoop dat bewuster leren loslaten tijdens het samenwerken me helpt om buiten werktijd meer te ontspannen.
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. Deze is in eerste instantie nog statisch, ik wilde eerst kijken hoe de HTML tag werkte, aangezien ik deze nog nooit had gebruikt.
Daarna heb ik geëxperimenteerd met scroll-driven animations, 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. Dit heb ik toegevoegd om de diagram door de staven meteen leesbaar te maken, maar ook de speelsheid die je verwacht van de Visdeurbel website.
Feedback studio MOAN:
- 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
Ik ben aan het begin van deze week eigenlijk opnieuw begonnen. Natuurlijk wel met de kennis van afgelopen weken, maar ik merkte dat de opdrachtgever niet helemaal tevreden was over mijn visualisaties tot nu toe, en dat ik vastliep met hoe ik dit kon aanpassen om de opdrachtgever blij te maken. Vandaar dat ik met een verse start mijn opgedane kennis toe kon passen in een hele nieuwe visualisatie. Zo snapte ik mijn code ook beter, omdat alle gegenereerde code die ik eerst nog gebruikte, niet meer nodig was. Ik had aan het einde van de week The Web You Want en CSS day, dus heb Paul een mail gestuurd voor tussentijdse feedback, zodat ik nog de tijd had om feedback te verwerken.
new-timeline.mov
Feedback Paul per mail: Een paar suggesties die misschien nog interessant zijn om te verkennen:
- Is het misschien leuk om de vissen horizontaal voorbij te laten zwemmen, in plaats van dat ze nu uit het water lijken te springen?
- Misschien leuk om de vissen qua grootte iets meer te laten aansluiten op de werkelijkheid (uiteraard wel op schaal binnen de visualisatie).
- Wellicht kun je het tekstblokje een vaste achtergrond geven in plaats van transparant maken. Dat komt de leesbaarheid denk ik ten goede. Ik zou de tekst dan ook links uitlijnen.
- Misschien kun je de nieuwe blauwtint vervangen door een kleur uit de huisstijl, bijvoorbeeld het blauwgroen (#1EACB0).
Deze feedback heb ik meteen toegepast. Verder heb ik mijn components al verplaatst naar de homepage.
Deze week hebben we de laatste feedback verwerkt van Studio MOAN. Voor mij was dat:
- Image bugs fixen
- Animatie bugs fixen
- Visualisatie meer op een gracht dan een zee laten lijken.
Verder heb ik vooral documentatie aangevuld en verwerkt.
Dit is het eindontwerp:
final-version-timeline.mov
Aan het begin van dit project heb ik leerdoelen voor mezelf opgesteld waar ik tijdens dit project aan ga werken:
Ons eindproject is natuurlijk een one-pager, dus een navigatiebalk was sowieso niet nodig in ons geval. Wel heb ik ervoor gezorgd dat de gebruiker gemakkelijk kan 'navigeren' door de data. Dit is ook gemaakt voor screenreader gebruikers, die kunnen makkelijk door de data heen met dezelfde controls als die ze gebruiken voor een standaard table tag. De vloeiende scroll-animations dragen bij aan het fijne gevoel bij het scrollen.
Ik heb in de ontwerpfase veel tekeningen gemaakt die verschillende data laat zien. Ik en mijn team hebben op basis van deze tekeningen onze eerste prototypes gemaakt. Ook ben ik blijven variëren tijdens het proces. Ik heb veel uitgeprobeerd met kleur, vorm, content en tone-of-voice. Ik heb gebruik gemaakt van de cursus ontwerpproces van Vasilis (21-05-26), waar hij vertelde dat je eigenlijk nooit stopt met variëren, en dat je het beste keuzes kan maken, als je deze eerst echt probeert. Zo kom je ook weer op nieuwe ideeën tijdens het coderen.
Tijdens het werken in deze groep, heb ik een hele andere kant van samenwerken gezien dan dat ik gewend ben. Wij werken alle vier graag aan onze eigen delen van het onderwerp en hadden vertrouwen in elkaars skills. Daardoor kon ik beter me met mijn eigen code bezig houden. Halverwege het project hadden we een kleine discussie over samenwerken gehad, omdat we toch een beetje kwijt waren waar de anderen mee bezig waren. We hadden ook feedback gekregen van de opdrachtgever dat het meer op vier individuele projecten leek. We hebben uiteindelijk afgesproken om vaker met elkaar te communiceren waar we mee bezig waren. We hebben daarna dan ook elke dag een start gesprek met elkaar gevoerd. Hierna ging het teamwork een stuk beter, en ben ik erg blij met mijn team.