Micro-animaties voor een betere gebruikerservaring

De complexiteit van de gebruikersomgeving neemt toe. Interfaces van websites of applicaties krijgen steeds meer mogelijkheden. Waardoor een gebruiker snel het overzicht verliest. Micro-animaties geven de mogelijkheid om de aandacht van de gebruiker te sturen en feedback te geven op een bepaalde actie.

Wat zijn micro-animaties en waarom waardevol

Micro-animaties zijn zichtbare én tegelijkertijd niet direct opvallende animaties waarmee je de aandacht van de gebruiker kunt sturen naar een bepaalde positie op de website. Het is mogelijk om door middel van een micro-animatie feedback te geven aan de gebruiker nadat hij/zij een bepaalde actie in werking zet. Andere doelen zijn om de gebruiker te verrassen, de status van een proces te communiceren en mensen resultaten van hun actie te tonen. Een van de belangrijkste punten van micro-animaties is timing. Dit komt doordat ze zowel psychische als emotionele waarde met zich meedragen. Wanneer je de animaties op het juiste moment inzet, zal dit bijdragen aan het juiste gevoel en de juiste waarneming bij gebruikers.

Typen micro-animaties

1. Focus van de gebruiker
In een drukke interface waarin veel content als headline naar voren gebracht wordt, kan het nodig zijn om de aandacht van de gebruiker naar een specifiek stuk content of positie op de website te brengen.
Denk bijvoorbeeld aan kortingsacties, actuele campagnes, of belangrijke informatie.

2. Animaties als feedback
Op het moment dat de gebruiker klikt op een button om een actie in werking te zetten kun je door middel van een animatie feedback geven om bijvoorbeeld aan te geven dat het proces in werking wordt gezet. Of om te laten zien hoever zij al op weg zijn in een bepaald proces. Het voltooien van een actie kost soms namelijk meer tijd. Op dat moment is het van belang om de gebruiker de juiste feedback te geven, zodat hij/zij niet afhaakt omdat men denkt dat de website niet goed functioneert. Een goed voorbeeld is de camera-applicatie in Apples iOS genoemd. Wanneer de cameragebruiker scherp stelt, geeft de app door middel van zichtbare zoom en scherpstelling aan zodra de juiste focus is bereikt.

3. Animaties bij scrolling
Scrollen wordt vaak gebruikt om belangrijke content uit te lichten. Dit is ook een goede manier om aandacht van bezoekers te trekken.
Bij ‘scrollen’ helpen timing en positie een element bewegen. Een element dat beweegt, trekt de aandacht van iemand. Hierdoor geef je jouw website, interface of app focus.

4. Call to actions
Webshops gebruiken vaak call-to-actions. Ze geven een pagina focus en zorgen ervoor dat bezoekers een product of dienst sneller kopen. Een voorbeeld van een call-to-action is een bestelknop. Ze hebben vaak een opvallende kleur om de aandacht te trekken. Met micro-animaties kun je er echter voor zorgen dat gebruikers de bestelknop nog sneller opmerken.

Voor meer informatie over micro-animaties of wil je deze ook toevoegen op je site neem gerust contact met mij via gijs@teaminova.nl of bel naar INOVA op 085 484 1200.