Journal

sprint 11: Pleasurable UI

Datum: 12/5/25

Workshop sprint planning

Workshop over sprint planning gedaan. Link naar de uitleg: sprint planning

wat heb ik gedaan? / ga ik doen?

Vandaag wil ik de single page view transition van deze workshop proberen te verwerken in mijn website: client-side scripting for UX

Mijn portflow van sprint 10 nog een keer overlezen en ingeleverd.

Samen met Nadia en Akiko de sprint planning gemaakt. Issue: sprint planning

Project board aangemaakt, deadlines aangegeven, must-have en nice-to-have verdeeld en issues toegewezen: project board

server js

Ik heb de fetch URL geschreven issue 28 , en de POST en GET routes gemaakt op een branch. Daarna een pull request aan gevraagd het team: pull request

sprint 11: Pleasurable UI

Datum: 13/5/25

Route voor favoriete pagina

Ik heb een route aangemaakt voor de favoriete pagina. Issue: issue 33

Opslaan en verwijderen van bookmarks

Een functie geschreven waarmee bookmarks opgeslagen of verwijderd kunnen worden. Issue: issue 38

Server DRY maken

De server is nu DRY geschreven omdat we herbruikbare functies hebben om POST en DELETE acties uit te voeren, en ook een functie om alle bookmarks op te halen.

sprint 11: Pleasurable UI

Datum: 14/5/25

Workshop over feature branches en pull requests

Vandaag hebben we gewerkt met feature branches en pull requests. Uitleg is hier te vinden: Feature Branches en Pull Requests

Issue opgelost

Ik heb een issue opgelost die Nadia voor mij had gemaakt: issue 41

sprint 11: Pleasurable UI

Datum: 15/5/25

Eigen issue en pull request

Ik heb gewerkt aan deze issue: Issue #5 . Na het afronden heb ik meteen een pull request gemaakt en de ontvangen feedback direct verwerkt.

Reviews op team pull requests

Ik heb ook pull requests van mijn teamleden gereviewd: Pull Request van Nadia en Pull Request van Akiko .

sprint 11: Pleasurable UI

Datum: 16/5/25

Code en design review

Samen met Nadia heb ik een code en design review geschreven voor bieb in bloei 1H .

Branch samengevoegd namens Akiko

Akiko was ziek, dus ik heb samen met Nadia haar branch code verwerkt en samengevoegd met onze code op de home pagina: Pull request 53 , Pull request 50 en Pull request 54 .

Documentatie

Ik heb alvast de server.js uitgelegd in de readme.

sprint 11: Pleasurable UI

Datum: 20/5/25

Figma prototypes gemaakt voor:

En begonnen met de html, basis css en js voor de carousel onderaan op de details pagina. Zie issue #15 .

sprint 11: Pleasurable UI

Datum: 21/5/25

Ik heb gewerkt in feature branches aan:

Ik moet nog de view transition van de home naar de details pagina maken.

kalok yeung insights: Over Kalok Yeung

Datum: 01/06/25

Over Kalok Yeung

Kalok Yeung is een designer die veel samenwerkt met front-end developers om het design van websites te verbeteren. Hij focust op gebruikservaring en hoe je interacties met de gebruiker emotioneel kunt versterken.

Oxytocine triggeren met design

Kalok legt uit dat je via design oxytocine kunt triggeren, een hormoon dat zorgt voor verbondenheid en vertrouwen. Dit bereik je bijvoorbeeld door zachte UI-elementen: afgeronde hoeken, voldoende witruimte tussen en binnen elementen. Dit zorgt voor een professionele en aangename uitstraling. Ook subtiele motion zoals hover effecten en overgang animaties verbetert de interactie en het gevoel bij de gebruiker.

Motion en soft UI

Beweging moet functioneel zijn en iets toevoegen aan de gebruikerservaring, niet alleen decoratief. Subtiele animaties bij klikken of hoveren maken interacties prettiger. Door herbruikbare elementen te gebruiken, kan je animaties consistent toepassen, bijvoorbeeld een animatie die een subtitel verandert van h2 naar h1 tijdens een view transition. Physics in animaties, zoals een natuurlijke vertraging bij het verslepen van een video-tijdlijn, zorgt voor een organisch gevoel.

Geluid in design

Geluid wordt vaak over het hoofd gezien, maar het kan een positieve impact hebben op de gebruikerservaring. Bijvoorbeeld subtiele geluiden bij het hoveren of klikken op buttons, of een tik-geluid bij het scrollen door een lijst. Deze geluiden versterken de beleving en maken de website memorabel.

Content en interactie

Om ervoor te zorgen dat mensen content lezen, is het belangrijk om tekst niet als grote blokken aan te bieden. Een chat-achtige interface werkt goed, waarbij vragen en antwoorden visueel gescheiden zijn. Ook interactieve filters, bijvoorbeeld op basis van hoe iemand zich voelt, maken content persoonlijker. Complexe processen kunnen simpel worden gemaakt, bijvoorbeeld door een camera op een bonnetje te richten en alleen relevante feedback te tonen, zoals prijs en currency

AI en creativiteit

Kalok gebruikt AI alleen voor het beantwoorden van e-mails, niet voor ontwerpen. Hij gelooft dat AI geen echte creativiteit kan vervangen omdat ontwerpen die door AI gemaakt worden vaak levenloos aanvoelen.

sprint 11: Pleasurable UI

Datum: 26/5/25

Voorbeeld ontwerp keuzes overbrengen:

Ik heb de sticky header issue aangenomen en afgemaakt:

Ik heb de structuur van de README gemaakt, de inhoudsopgave, en wat ik kon invullen heb ik al gedaan. Ik wacht nog op mergen omdat mijn code in branches staat, maar ik wacht nog op reviews voordat ik het naar de main kan mergen.

README