Wat zijn micro-animaties?

Bij B2 is er niet veel dat we vervelender vinden dan wanneer we een website bezoeken waarvan de gebruiksvriendelijkheid te wensen overlaat. Vandaag de dag bestaan websites natuurlijk uit meer dan een simpel menu, wat tekst en een aantal afbeeldingen.

Sterker nog, websites worden alsmaar complexer. Dit komt lang niet altijd de gebruiksvriendelijkheid ten goede. Een manier om de gebruiksvriendelijkheid, het webdesign, maar ook conversies te optimaliseren kan door middel van micro-animaties.

Maar wat zijn micro-animaties en waarvoor maken wij er gebruik van? Dat leggen we je graag uit!

Wat is een micro-animatie?

Zoals het woord eigenlijk al zegt is een micro-animatie een kleine beweging of verandering van bijvoorbeeld kleur op een knop, maar het kan ook een laad icoon zijn dat helpt feedback te geven aan de gebruiker dat er daadwerkelijk iets laadt. Nog een voorbeeld is een ‘hover’, dit houdt in dat wanneer je ergens met je muis overheen gaat het een visuele beweging activeert.

Micro-animaties worden gebruikt om je aandacht te verleggen op een bepaald punt en het gebruik van een product menselijker te maken. Probeer er eens op te letten tijdens een websitebezoek of tijdens het scrollen op je smartphone. Welke animaties komen naar voren en proberen deze je iets te laten ondernemen? Je zal er snel achter komen dat er vaak een doordachte reden achter zit.

Een micro-animatie kan dus wel klein zijn, maar het kan grote gevolgen hebben in wat jij onderneemt. Je komt ze dan ook niet alleen tegen in websites of mobiele applicaties, maar eigenlijk voor bijna alles waar je gebruik maakt van een scherm waarop jij iets onderneemt kan gebruik worden gemaakt van micro-animaties.

Het gebruik van micro-animaties brengt ook de ervaring van een gebruiker tot leven. Het zorgt ervoor dat een webdesign bijvoorbeeld minder statisch is en het de ervaring in kleine dingen zoals het drukken op een knop leuker kan maken. Let wel op! Maak het niet je hoofddoel animaties te gebruiken om het design te bevorderen.

Vier onderdelen van micro-animaties

Micro animaties hebben vier onderdelen:

• Triggers
  brengen interactie tot stand. Deze kunnen geactiveerd worden door de gebruiker, door bijvoorbeeld met de muis te ‘hoveren’ over een knop. Ook kunnen triggers geactiveerd worden door het systeem, software detecteert dan bepaalde factoren die een actie initiëren.
• Regels
  bepalen wat er gebeurt als een micro animatie wordt geactiveerd.
• Feedback
  laat de gebruiker weten wat er gebeurt. Voor een micro-animatie geldt dat deze visueel is.
• Loops en modes
  bepalen de metaregels van de animatie. Zo bepalen deze de lengte van de animatie, maar ook wat er na verloop van tijd met de animatie gebeurt als gebruikscondities veranderen.

Wat maakt een effectieve micro-animatie?

Het is natuurlijk niet de bedoeling dat je website op elke hoek volstaat met micro-animaties. Ze moeten veelal een doel hebben en de gebruiker een actie laten ondernemen zonder dat deze persoon het idee heeft dat iets hem een richting opstuurt. Wil jij ook op een effectieve manier gebruik maken van micro-animaties? Let op de volgende punten:

Klein in uitvoering

Een effectieve micro-animatie is klein in uitvoering. Het moet genoeg opvallen de gebruiker een bepaalde richting op te sturen of een bepaald signaal te geven. Hierdoor zal je als gebruiker soms niet eens doorhebben wat je een richting opstuurt. Een kleine effectieve animatie moet dus een grote impact hebben voor wat jij in het vervolg onderneemt. Hierbij heeft het als hoofddoel jouw gebruikerservaring te verbeteren.

In een webdesign moet goed worden nagedacht over het interactie ontwerp en hoe er genavigeerd hoort te worden voor optimale bruikbaarheid. De micro-animaties spelen hier niet de hoofdrol in, maar moeten ondersteunend zijn zonder dat je het écht door hebt.

Laadtijd: hoe sneller hoe beter

Zoals in alles wat te maken heeft met webdesign moet de laadtijd altijd in gedachte gehouden worden in wat je doet. Zo ook voor micro-animaties moet er gedacht worden aan een optimale laadtijd. Het moet dus niet zo zijn dat een op zichzelf kleine animatie, grote gevolgen heeft voor de laadtijd. Remember! Gebruikerservaring verbeteren is het hoofddoel.

Micro-animaties en CTA

Micro-animaties kunnen mits goed ingezet erg goed werken om conversies te verhogen. Gebruik de animaties voor bijvoorbeeld call-to-action knoppen. Deze knoppen hebben vaak een opvallende kleur en proberen de aandacht te trekken van bezoekers. Met micro-animaties kan een bezoeker nog sneller de aandacht focussen op een call-to-action.

Gebruik maken van micro-animaties?

Hou de volgende drie vragen voor jezelf in kaart:

• Hoe vloeiend loopt de animatie?
• Is de animatie waarneembaar?
• Wanneer wordt de animatie zichtbaar?

Het is natuurlijk wel van groot belang dat je bezoekers de animatie op een goede manier kunnen waarnemen. Hiervoor moet je letten op de ‘flow’, de reactiesnelheid van je bezoekers en de timing. Een bezoeker op een website moet natuurlijk de animatie wel kunnen waarnemen.

Door animaties op een effectieve manier in te zetten, zorg je voor een gebruiksvriendelijke ervaring, je kan bezoekers een bepaalde richting sturen voor conversie, creëer je ruimte in je pagina’s en het laat je website tot leven springen. Bekijk eens hoe B2Design voor wellness center LOFF in Assen gebruik heeft gemaakt van micro-interacties.

Wij maken hier gebruik van dynamische micro-animaties. Zo zie je dat er bij positieveranderingen en door middel van hovers en scrolling animaties in beeld komen die je proberen te ‘triggeren’ een actie te ondernemen.