🍓 07.06.2024 code design review: 1e iteratie

Ik heb vandaag een code/design review gekregen op voornamelijk mijn server.js en ejs bestanden door het Merlion team.

code/design review: 1e iteratie

🥦 11.06.2024 lighthouse: performance + accessibility test

🍠 14.06.2024 user testing

maak een lijst met taken die je wilt testen

• producten kunnen bestellen voor een recept/maaltijd
• producten kunnen toevoegen en verwijderen
• de bereidingswijze kunnen zien
• de ingrediënten lijst kunnen zien

verander de taken in scenario's

scenario 1: je hebt een recept gevonden op de website van de PLUS en wilt dit recept thuis graag namaken. Je hebt de juiste ingrediënten nog niet in huis. Voeg je benodigde ingrediënten toe aan je winkelwagen.

• Je hebt courgette al thuis liggen, deze heb je dus niet nodig, hoe verwijder je deze?

vervolg scenario: je hebt de ingrediënten besteld en wilt het recept maken. Bekijk op de recepten pagina hoe je het recept bereid.

test met gebruikers

Ik heb Yujing gevraagd als test-persoon voor mijn user test en de bovenstaande scenario's één voor één voorgelegd. Vervolgens heb ik haar gevraagd om dit uit te voeren en hierbij hard op na te denken.

Yujing navigeerde eerst door de ingrediënten lijst, vervolgens scroll-de ze verder en werd er geklikt op de "kies je product" knop.

Na de test heb ik nog de volgende vragen gesteld:

Waarom heb je er voor gekozen om op deze knop te drukken?

Dit was het meest logisch voor het bestellen van de ingrediënten, ook springt de knop eruit, omdat het opvalt.

Waarom klikte je gelijk op de '+' button?

Ik wilde gewoon even kijken of het iets zou doen.

Want is het voor jou niet duidelijk dat al sowieso van ieder ingredient 1 is aangevinkt?

Nee, het is duidelijk, ik heb daarna ook gelijk op de '-' button geklikt.

Waarom scroll-de je door de boodschappenlijst?

Ik ging gewoon proberen of scrollen iets deed. Ook is het duidelijk dat er meerdere list-items zijn.

Voor het vervolgscenario werd gelijk op de bereiding 'button' geklikt. Dit was volgens Yujing duidelijk.

Overige feedback: je hebt goede progressive disclosure, je zou ook nog feedback kunnen toevoegen na het klikken van de + en - buttons.

🍠 14.06.2024 code/design review

Ik heb mijn website gepresenteerd en hier feedback op gekregen:

• tabs met button maken ipv radio buttons.
• form om de hele boodschappenlijst om zo de ingrediënten mee te kunnen nemen bij het bestellen. verwerkt
• € prijs veranderen naar 2 decimalen achter de komma. verwerkt

🧀 19.06.2024 Lighthouse: accessibility + performance

Ik heb de Lighthouse test laten runnen op de pagina en er komt de volgende score uit:

Ik heb ook nog een keyboard test gedaan. Hij navigeert volgens DOM order. Maar gaat niet door de tabs heen. Oplossing: radio buttons veranderen in 'echte' buttons..

html validator

🧄 20 juni sprint review

Vandaag heb ik op het kantoor van de PLUS, in Utrecht een sprint review gehad met mijn opdrachtgever Joske Sambros en collega's: Valerie en Pascale via Teams. Ik heb mijn website gepresenteerd en verteld waar ik de afgelopen paar weken mee bezig ben geweest, wat goed ging, wat minder goed ging en waar ik nog aan wilde werken maar nog niet aan toe was of nog niet af was.

Na het presenteren heb ik nog tip/tops meegekregen en hebben we nog gebrainstormd over eventueel andere mogelijkheden binnen de website. Na het presenteren heb ik nog wat tips en tops meegekregen:

• goed dat er een overzicht is van de totaalprijs, fijn inzicht voor de klant.
• netjes dat de producten meeschalen in de breedte, dat hadden wij nog niet.
• nu heb je dat er een alternatief te voorschijn komt wanneer er op de '-' button wordt geklikt, what about een switch button voor alternatieven?
• de labels voor vegan, non-vegan, vega, etc mooier als icoontjes? maakt het wel weer heel erg druk met zoveel icoontjes en knoppen 🤔
• leuk die invlieger animatie op de boodschappenlijst, misschien zorgt dat wel voor meer stimulatie tot kopen. Mag misschien wel op een later moment of langzamer invliegen, kan namelijk ook wel storend zijn.