Link naar prototype: sarakaandorp.com/ehealth
Waar ik aan heb gewerkt voor maken:
- Beter worden in het toevoegen/verwijderen/toggelen van classes met Javascript en CSS. Ik had me in eerste instantie willen focussen op het maken van animaties, maar na het lezen van het artikel "#150: Hey designers, if you only know one thing about JavaScript, this is what I would recommend" , heb ik me besloten op vooral te focussen op het leren van he toevoegen/verwijderen en toggelen van classes. Dit heb ik wel gedaan in combinatie met CSS animaties.
- Maken van microinteracties. Zoals de FAB button en menu button.
Proof of concept
Design challenge: Hoe kan ik het toevoegen van een taak in de OCD app soepeler laten verlopen door het verbeteren van microinteracties?
Deelvraag: Wat is de beste manier om microinteracties te verbeteren met animatie?
Technische uitdagingen:
- Leren hoe je het beste microinteracties kunt maken die de app fijner laten aanvoelen
- Meer leren op het gebied van animatie
Ik wil aan de slag met het verbeteren van microinteracties in de app. Hierbij zal ik mij focussen op het gedeelte in de app waar een taak kan worden toegevoegd. Pieter Ooms, de therapeut op het AMC, liet weten dat op dit moment gebruikers van de app vaak velden leeg laten wanneer zij een taak toevoegen. Ik wil door middel van het verbeteren van microinteracties het de gebruiker makkelijker maken om een taak toe te voegen en ook motiveren om dit volledig doen door de app fijner in gebruik te maken.
Het verbeteren van microinteracties kan goed door gebruik te maken van animaties. Een goed voorbeeld is dit project van UX Designer Nick Buturishvili: https://www.behance.net/gallery/42185273/micro-interactions. In zijn voorbeeld zie je goed dat microinteracties een stuk fijner kunnen aanvoelen wanneer er een animatie of simpele transitie aan zit gekoppeld.
Ik denk dat het voor mijn eigen ontwikkeling in de beroepsrol UX/UI designer erg nuttig is om te leren hoe je animaties maakt. Ik heb gekeken hoe ik dit het beste kan doen en mij lijkt Green Sock een goede optie. De website van het bedrijf Waaark maakt gebruik van microinteracties geanimeerd met Green Sock: http://waaark.com/works. Op de website van Greensock staan ook tutorials van microinteracties gemaakt met Greensock, zoals deze button https://greensock.com/playpause.
Als het blijkt dat het makkelijker is om helemaal zelf met CSS en Javascript microinteracties te maken, dan zou ik dit ook een goede optie vinden. Zoals bij dit voorbeeld: https://codepen.io/taeo/pen/yNEKdM. Een microinteractie die verbetert zou kunnen worden is het krijgen van suggesties wanneer je iets in een veld intikt. Dit is wellicht beter te maken met Javascript en CSS dan met Greensock.