In dit onderzoek zijn de resultaten uit voorgaande onderzoeken gebruikt. Zo zijn de WCAG richtlijnen voor animaties in acht genomen uit onderzoek #3 ‘Met welke technische & functionele vereisten dient er rekening gehouden te worden?’, en is uit onderzoek #5 ‘Wat zijn de laatste innovatieve technologieën die de gebruikerservaring van webshops kunnen verbeteren?’ gebleken dat micro interacties (micro animaties) de gebruikers ervaring kunnen verbeteren. In het onderzoek #6 ‘Hoe kunnen (micro) animaties een positief effect hebben op de gebruikerservaring?’ is er dieper onderzocht hoe de animaties moeten worden toegepast om voor een positieve in plaats van een negatieve gebruikers ervaring te zorgen. In onderzoek #7 ‘Hoe wordt het nieuwe website ontwerp vormgegeven?’ is bepaald hoe het ontwerp van de Den Mulder website eruit komt te zien. Dit onderzoek laat zien hoe de animaties zijn ontworpen, welke tools hiervoor zijn gebruikt en hoe de animaties zullen werken op de website van Den Mulder.
Uit onderzoek is gebleken dat micro-animaties een positief effect kunnen hebben op de gebruikerservaring, vooral door het geven van feedback. Dit kan door knoppen van kleur te laten veranderen of andere subtiele animaties toe te voegen. Daarom zijn alle klikbare objecten in het ontwerp voorzien van een hover-effect of een andere visuele aanduiding. Eenvoudige animaties zijn direct in Figma gemaakt met behulp van ‘Smart animate’, wat zorgt voor soepele overgangen van 100 milliseconden met een ease in en out effect. Hieronder kunt u de Figma animaties uitproberen.
Complexere animaties, die de webshop dynamischer en interessanter maken, zijn gemaakt met de animatietool Rive. Pepijn Coenders (Front-end developer) heeft me aangeraden om deze nieuwe tool eens te bekijken, omdat Rive interactie-gebaseerde animaties mogelijk maakt die geschikt zijn voor webtoepassingen. Adobe After Effects en Lottie Files werden ook overwogen, maar zijn niet gekozen vanwege hun beperkingen in gebruikersinteractiviteit en grotere bestandsgroottes, wat de websiteprestaties zou kunnen beïnvloeden. Dit heeft ervoor gezorgd dat Rive de beste keuze is voor dit project.
Een specifieke animatie is ontworpen voor de ‘voeg toe aan winkelwagen’-knop, geïnspireerd door voorbeelden op Dribbble. Deze animatie, voegt visueel een item toe aan de winkelwagen, waardoor de actie duidelijker wordt voor de gebruiker. Bij het maken van de animatie is er rekening gehouden met de resultaten uit #6 ‘Hoe kunnen (micro) animaties een positief effect hebben op de gebruikerservaring?’, zo geeft de animatie op een subtiele manier feedback, bevat de animatie een ease-out en wordt er geen gebruik gemaakt van motion-blur. Vanwege tijdsbeperkingen en het feit dat animaties een lagere prioriteit hadden dan het testen en valideren van het prototype, zijn er geen verdere animaties ontwikkeld in deze fase van het project.
Probeer hieronder het eindresultaat:
In het proof of concept is te zien hoe de animaties reageren op een interactie van de gebruiker. De eenvoudige animaties zijn gemaakt in Figma met de juiste snelheid en easing bij een hover- of klikinteractie. gebaseerd op de onderzoeks resultaten uit #6 ‘Hoe kunnen (micro) animaties een positief effect hebben op de gebruikerservaring?’.
Omdat Figma niet geschikt is voor complexere animaties, is er gezocht naar een alternatief. Pepijn Coenders (Front-end developer) heeft me aangeraden om de nieuwe tool Rive eens te bekijken, omdat Rive interactie-gebaseerde animaties mogelijk maakt die geschikt zijn voor webtoepassingen. Adobe After Effects en Lottie Files werden ook overwogen, maar zijn niet gekozen vanwege hun beperkingen in gebruikersinteractiviteit en grotere bestandsgroottes, wat de websiteprestaties zou kunnen beïnvloeden. Dit heeft ervoor gezorgd dat Rive de beste keuze is voor dit project.
Er is om wille van tijd maar één complexere animaties uitgewerkt omdat de animaties een ‘nice to have’ zijn en daardoor minder prioriteit hebben dan het testen en valideren van het prototype.
De resultaten uit dit onderzoek laten zien hoe de micro-animaties reageren in het prototype van Den Mulder. Hierdoor weet de klant wat ze kunnen verwachten en het development team hoe alle componenten ontwikkeld moeten worden.
Juliën Verheijen
