Onderzoeksvraag:

#6 Hoe kunnen (micro) animaties een positief effect hebben op de gebruikerservaring?

Context

Door middel van Literature Study heb ik gezocht naar bronnen die mij meer kunnen vertellen over de do’s en don’ts op het gebied van (micro)animaties voor webshops, om ervoor te zorgen dat de animaties voor een positieve gebruikerservaring zorgen in plaats van het tegenovergestelde.

Results

Uit onderzoek blijkt dat micro-interacties, zoals animaties bij scrollen of klikken, de gebruikerservaring van webshops verbeteren door interactie dynamischer en aantrekkelijker te maken, wat de betrokkenheid en conversie verhoogt. Belangrijke richtlijnen zijn onder andere het gebruik van subtiele animaties voor feedback, consistentie in animatietypes, optimalisatie voor prestaties, en het gebruik van animaties voor navigatieverbetering. Te vermijden zijn overmatige animaties, langzame of hinderlijke animaties, onnodige animaties, obstructieve animaties en het negeren van toegankelijkheid. Technische regels voor gebruiksvriendelijke animaties omvatten optimale animatieduur, duidelijke bewegingen zonder motion blur, passende easing-curven, en een juiste volgorde van animatie-elementen om de gebruikerservaring te verbeteren. Hieronder ziet u een aantal van deze voorbeelden hoe het wel en niet moet. De animatie technieken worden toegepast op de website van Den Mulder in onderzoek #8 ‘Hoe worden de animaties vormgegeven?’.
1_SYWUDqw9jPF4Q--MWqisVg

Skytskyi (2024)

Animatie duur

1_XNwsV2_Q-kFF_nbgzAnjMA

Skytskyi (2024)

Gebruik van Motion Blur

1_O-i88foIO-wdn4VwJdquvA

Skytskyi (2024)

Lineaire beweging

1_Qc_3P_7SJtLRXYI5GEHRaA

Skytskyi (2024)

Ease (standaard)

1_4q5Yvr4ROgeasK59AQks2w

Skytskyi (2024)

Ease-in (versnelling)

1_JhyE_rYlaad9DQt6VHFeEA

Skytskyi (2024)

Ease-out (vertraging)

1_gLUoGndU2gJY4zUJdEwUIw

Skytskyi (2024)

Easing-curven

Conclusion

Het toevoegen van animaties aan een interface kan de gebruikerservaring sterk verbeteren, mits correct toegepast. Animaties maken de interactie natuurlijker en prettiger, maar onjuiste toepassing kan leiden tot verwarring en frustratie. Goede animaties geven feedback op acties, moeten eenvoudig, subtiel en consistent zijn, en duren tussen de 150 en 200 milliseconden. Gebruik van easing zorgt voor natuurlijke bewegingen en efficiënte animatietechnieken optimaliseren de prestaties. Langzame of overmatige bewegingen zijn af te raden omdat ze afleiden of frustreren. Animaties moeten functioneel zijn en mogen geen belangrijke inhoud blokkeren, geen motion blur-effecten bevatten, en interface-objecten mogen elkaar niet doorkruisen om de beste gebruikerservaring te garanderen.

De resultaten uit dit onderzoek zijn noodzakelijk om gebruiksvriendelijkere animaties te creëren voor op de website van Den Mulder. Op de huidige website staan nu namelijk geen animaties, en hebben de meeste klikbare onderdelen geen hover effect. De website is dus behoorlijk statisch en de gebruiker kan niet goed zien welke onderdelen klikbaar zijn. Alleen het toevoegen van subtiele micro animaties bij klikbare onderdelen zal dus al gegarandeerd een verbetering zijn op de gebruikerservaring. Hoe de animaties eruit komen te zien wordt bepaald in het onderzoek #8 ‘Hoe worden de animaties vormgegeven?

Juliën Verheijen

Learning Outcome

Next Project

Back To Top
Theme Mode