Artikelen

Verbeter je gebruikerservaring met micro-animaties

Als kind hield ik enorm van animaties en tekenfilms. De felle kleuren, uitbundige typografie en bewegende cartoons hebben mij als Visual Designer gevormd. Batman en The Ninja Turtles zijn misschien iets van 20 jaar geleden, maar het gebruik van animatie in design is nog lang geen verleden tijd. Sterker nog, er is een nieuwe superheld in aantocht: de micro-animatie.

De kracht van micro-animatie

Bij Bikkelhart ontwerpen we geen websites, maar gebruikerservaringen. User Experience Design is continu in ontwikkeling en klantreizen worden elk jaar complexer. Hoe houd je dit als Visual Designer onder controle? Nieuwe testmethodes, geavanceerde prototype tools en… micro-animaties.

De naam verklapt het al een beetje: een micro-animatie is een kleine beweging. Klein, maar met een grote impact. Mits goed ontworpen, is het namelijk meer dan een leuk, visueel extraatje. Micro-animaties verrijken en verduidelijken complexe interfaces voor een gebruiker. Dit doen ze op diverse manieren.

1. Micro – animaties geven bevestiging

Als mens zijn we van nature op zoek naar bevestiging. Ook websitebezoekers willen weten waar ze aan toe zijn. Micro-animaties zijn ideaal om ze van feedback te voorzien. De animatie geeft de status van een proces weer of vertelt of een handeling wel of niet goed wordt uitgevoerd. Voor de gebruiker voelt een succesvol afgeronde taak als een beloning, dit bevordert de User Experience.

Feedback

2. Micro-animaties sturen en verleiden

Een complexere interface vraagt om meer focus. Waar moet je als gebruiker kijken? Een micro-animatie brengt de belangrijke elementen op de website onder de aandacht. Iets dat beweegt valt immers het meeste op! Tot welke acties wil je je bezoekers aanzetten? Met micro-animaties stuur je ze de juiste richting op.

Focus

3. Micro-animaties ondersteunen en versterken je merk

Micro-animaties zijn niet alleen functioneel, ze dragen ook bij aan emotionele belangen. Bijvoorbeeld door de merkbeleving verbeteren. Met je micro-animatie kun jij je onderscheiden van andere merken en vergroot je de emotionele betrokkenheid van de gebruiker. De animaties geven je de mogelijkheid om je merkwaardes op een originele manier te communiceren.

Brand

De perfecte micro-animatie

Er zijn een aantal dingen waar je op moet letten als je aan de slag gaat met micro-animaties.

Less is more

Echt effectieve micro-animaties zijn klein en maken een vloeiende beweging. Bestaat je animatie uit meer dan één beweging? Dan is ‘ie onnodig complex en duurt sowieso te lang. Houd het kort, maar krachtig.

Snelheid

Nog een belangrijke factor: de snelheid. Wil je een duidelijke oorzaak-gevolgrelatie tussen de handeling van de gebruiker en de micro-animatie laten zien? Dan moet je zorgen dat de duur van de animatie overeenkomt met de complexiteit ervan. Hiermee geef je de gebruiker de tijd om de animatie te registreren. Het gevoel van directe manipulatie blijft achter, want de gebruiker heeft het idee dat de animatie reageert op zijn handeling.

Vier scenario’s

Een goede micro-animatie wordt opgebouwd uit de volgende vier scenario’s: trigger, rules, feedback en loops & modus. De trigger initieert een micro-interactie. De rules bepalen wat er gebeurt, terwijl feedback de gebruiker laat weten wat er gebeurt. Ten slotte bepaal je met loops & modus of de interactie zich herhaalt of naar loop van tijd verandert.

Joker 4 opties

 

Van statisch ontwerp tot interactief samenspel

Wil je je conversie eens op een andere manier proberen te verhogen? Micro-animaties bieden een leuke- én functionele oplossing. Ze geven je gebruiker richting, zodat deze niet hoef te verdwalen in een overvol landschap van elementen en content. Ze toveren een statisch ontwerp om tot een interactief samenspel.
En dat vindt niet alleen het kind, maar ook de Visual Designer in mij er het allerleukst aan.

Interviews

De Baltic Sea Circle Rally, het reisverhaal van bikkel Nathalie

Volgend artikel