Juli 2022

Micro-animaties, ja of nee?

Home > Blog > Micro-animaties, ja of nee?

#InHetKort

Micro-animaties

Bezoekers komen, bezoekers gaan. Maar hoe kan je ze langer op je website houden? In dit artikel ontdek je hoe je meer betrokkenheid kan creëren met je bezoekers om hun ervaring te optimaliseren en je site beter te laten renderen.

Micro-wat?

Micro-animaties zijn kleine animaties die getriggerd worden door een bepaalde interactie zoals scrollen, verzenden, laden, meldingen,… Deze animaties zijn niet altijd eenvoudig te integreren en worden best feilloos verwerkt in het design zodat de gebruiksvriendelijkheid van de website optimaal blijft.

"Een goede micro-animatie zorgt voor een aangename beleving, een ondoordachte animatie zorgt voor ergernis."

All eye's on me. 👀

Doordat je ogen meteen aangetrokken worden tot de micro-animaties zal de gebruiker zich sneller focussen op dat onderdeel van de website. Dankzij deze micro-interacties krijgt de gebruiker meteen feedback en dit zorgt voor voldoening bij de gebruiker. Zorg er dus voor dat deze micro-animaties op doordachte elementen gebruikt worden.

Daarnaast zorgen de kleine bewegingen ervoor dat de interactie met de gebruiker vergroot en zo de gebruiker (hopelijk) iets langer op de website blijft omdat deze getriggerd wordt door een aangenamere beleving van je app of website. Je wil uiteraard niet dat je gebruiker afhaakt tijdens het invullen van een formulier. Een micro-animatie tussen de verschillende stappen kan ervoor zorgen dat de gebruiker een betere beleving krijgt tijdens het invullen.

Wat is een goede animatie?

Een micro-animatie mag niet té veel zijn maar moet wel nog genoeg opvallen. De kunst is om ze zodanig te ontwerpen dat ze de flow van de website niet verstoren en passen bij de sfeer en design van de website.
Micro-animaties kunnen het best functioneel zijn zodat dit de gebruiksvriendelijkheid optimaal kan opkrikken. Ook kunnen ze best aansluiten bij de 'echte' wereld, zo moet de gebruiker zeker niet nadenken wat de betekenis is van de animatie.

Duur animatie: 100–500 ms | 0,1 - 0,5 seconde

Een animatie kan best niet langer duren dan 500ms omdat de gebruiker dan het gevoel heeft dat hij wordt opgehouden en korter dan 100ms kan het gevoel creëren dat je iets gemist hebt omdat het zo snel gaat. Dit kan wel variëren naargelang de grootte van je scherm. Hoe groter het scherm hoe langer een animatie mag duren.

Natuurlijke beweging/flow

De beweging van de animatie moet zo vlot en natuurlijk mogelijk overkomen. Hiervoor worden schokkende bewegingen, harde kleurveranderingen of onverwachte bewegingen best vermeden. Schokkende bewegingen kunnen een onrustig gevoel geven aan de gebruiker, harde kleurveranderingen zouden epilepsie kunnen triggeren (je weet nooit wie je platform gebruikt) en onverwachte bewegingen kunnen de gebruiker verwarren.

Hoe eenvoudiger, hoe beter!

Een micro-animatie moet eenvoudig blijven. Hoe ingewikkelder de animatie hoe onhandiger en verwarrender de website aanvoelt.

Ja of nee?

Micro-animaties zijn zeker niet verplicht maar zeker een meerwaarde voor je website om de gebruikers directe feedback te bezorgen en ze geïnteresseerd te houden op je website. De interactie met de website wordt verhoogd en de gebruikers krijgen van beweging een meer betrokken ervaring door het "actie-reactie" gevoel.

Wil jij ook micro-animaties integreren in je website?

Laat het ons zeker weten en aarzel niet om ons te contacteren!

Contacteer ons

5 redenen waarom je een webshop met Shopify moet overwegen

Juni 2024

De cijfers van online shoppen en daarbij ook die van de e-commerce stijgen jaar na jaar. Nog niet aanwezig in het digitale winkelcentra waar je kan verkopen aan een breder publiek? Wie weet verander je van gedachten na het lezen van dit artikel.

API koppelingen: De toekomst van digitale integratie

Mei 2024

In de huidige digitale wereld zijn API-koppelingen cruciaal voor de naadloze integratie van meerdere applicaties of systemen. Moet je data meerdere malen ingeven op verschillende platformen? Lees dan zeker verder!