Van meh tot wow! Micro-animaties maken websites groots - Wisemen

Kleine interacties met grote impact op gebruikerservaring

Van meh tot wow! Micro-animaties maken websites groots

Ferre Hamblok
Ferre Hamblok
07 Oct 2022 ·4 min
Like

De attention span van de gemiddelde websitebezoeker krimpt onafgebroken. Websites die de aandacht kunnen vasthouden zijn goud waard. Hoe langer de bezoeker blijft hangen, hoe sterker de connectie én hoe groter de kans op conversie. Micro-animaties zijn een laagdrempelige manier om je bezoekers geboeid te houden en ze subtiel een duwtje in de rug te geven.

Micro-animaties zijn kleine, functionele animaties die de gebruiker ondersteunen aan de hand van visuele feedback. Ze helpen om je interface te verduidelijken en gaan de interactie met de gebruiker aan. Veelzeggend zonder een woord te uiten, micro-animaties maken je website of app boeiender, interactiever en gewoonweg beter.

1. Trek de aandacht met beweging

Het menselijk oog wordt aangetrokken tot beweging. Content lezen op een statistische website voelt al snel aan als huiswerk. Maar door de subtiele bewegingen van micro-animaties in te bouwen vecht je actief mee om de aandacht van de bezoeker en voorkom je dat een andere app, e-mail of website ermee gaat lopen.

De kunst ligt hem in het introduceren van de juiste animaties voor de content van je website of app. Bied je vooral informatieve of serieuze content aan, dan kan een subtiele knoppenanimatie volstaan. Wil je een innovatief product in de kijker zetten zoals e-scooterfabrikant Taito? Dan kan een verrijkte scrollervaring ervoor zorgen dat je websitebezoeker van pixel A tot Z scrollt.

Taito1

2. Guide me home

We geven het zelf misschien niet graag toe maar als gebruiker worden we graag gestuurd wanneer we een website bezoeken. Dat hoeft niet altijd richting een schreeuwerige ‘Bestel’-knop te zijn, maar kan evengoed dienen om meer te weten te komen over een product of service.

Micro-animaties wijzen gebruikers de weg, in het geval van Volumex mag je dat zelfs letterlijk nemen. Deze leasingpartner wilde haar persoonlijke dienstverlening in de verf zetten. In plaats van eenvoudigweg services op te lijsten bedachten we een navigatie-animatie met call to action buttons, die de gebruiker aanzet om de volledige customer journey te doorlopen.

Volumex

3. Click Me!

De wetten van de behavioral science dicteren dat we willen beloond worden voor onze acties. Micro-animaties zijn een luchtige manier om gebruikers instant feedback te geven, bijvoorbeeld bij het drukken op een knop. Het maakt een website of app niet alleen leuk om te bezoeken, het duidt op een geslaagde interactie die correct verwerkt is en dus leidt tot een betere gebruikservaring.

Zoals bijvoorbeeld het toevoegen van een ‘secret tip’ op de website van Daymaker. Om het unlock-effect extra bevredigend te maken creëerde we een micro-animatie die aanvoelt alsof je een cadeautje openmaakt. Instant feedback, instant gratification.

Dagmaker

4. Een streepje context

Meer complexe digitale interfaces, zoals een ERP-systeem of planningstool, vuren al snel een hoop knoppen, tabs, sliders en vensters op je af. Micro-animaties kunnen in dat geval helpen om de gebruiker op een inzichtelijke manier meer context te verschaffen.

Voor het ERP-systeem van robotbouwer RoboJob schakelden we meerdere micro-animaties in om de interface zo helder mogelijk over te brengen naar de gebruiker. Wil je een actie uitvoeren? Dan krijg je een kleine modal (overlappend venster) te zien die duidelijk maakt wat er staat te gebeuren, rechtstreeks gelinkt aan je knop. Zo weet je meteen welke invloed jouw actie op welke data zal hebben.

Robojob

Kortom, micro-animaties geven je website of app niet alleen een intuïtieve gebruikerservaring en premium feel, ze bieden tal van (subtiel) doeltreffende manieren om je gebruikers meer bij je digitaal product te betrekken. Een kleine knoppenanimatie kan een groot verschil maken voor de betrokkenheid van je gebruiker - en voor je conversie natuurlijk. Waarom denk je dat die ‘Koop nu’ knop er altijd zo verdomd clickable uitziet?

Ook micro-animaties op jouw app of website? Druk op de knop (you know you want it)!

Contacteer ons
Ferre Hamblok
Ferre Hamblok, Front End Developer
Een wandelende front end encyclopedie die van lelijke eendjes sierlijke zwanen maakt, Ferre laat apps en websites shinen aan de hand van de nieuwste CSS- en JS-trends. Na de uren deelt hij met gusto de RPG-lakens uit als amateur dungeon master.

Talk
to a
wiseman

Learn more?

There is no better way than to date.
We learn more about you. You learn more about us.
No strings attached.
Contacteer ons
Of plan meteen een kennismakingsgesprek in
(Geheel vrijblijvend)
Liever gecontacteerd worden?