Verbeter de gebruikerservaring van je website met micro animaties

Herinner je je nog de websites met enkel lappen tekst? Geen afbeeldingen, geen keuzemenu’s, alleen maar letters en woorden. Dit is gelukkig verleden tijd! Hoewel websites steeds complexer worden, bedenken we ook steeds meer creatieve manieren om het de websitebezoeker zo leuk en eenvoudig mogelijk te maken.

Eigenlijk doen we er alles aan om de optimale gebruikerservaring te creëren. De gebruikservaring omvat alle interactie die een persoon heeft met jouw website. Van het vinden van je contactgegevens tot het drukken op een knop naar een nieuwe pagina. Bedrijven zijn hier continu mee bezig. Micro-animaties zijn daarbij een ideaal element voor het verbeteren van de gebruikservaring. Deze kleine, bewegende elementen kunnen je website opleuken, maar hebben ook zeker een functionele waarde. Dat lichten we voor je toe.

1. Wat zijn micro animaties?
2. Verschil micro animaties en geanimeerde GIFs
3. Waarvoor kun je micro animaties gebruiken?

Wat zijn micro animaties?

Micro animaties zijn kleine, bewegende die je vaak verwerkt in een website. Dit soort animaties vallen op het eerste oog niet op, maar trekken daarna wel de aandacht van de websitebezoeker. Want zeg nou zelf, als je iets ziet bewegen op je beeldscherm, kijk je er ook naar. Daarnaast is een micro animatie universeel. Bijvoorbeeld als je op een Portugese versie van een site zit en je nog niet naar de Nederlandse versie hebt genavigeerd. Een bewegend landvlaggetje vertelt je direct dat je daar kunt switchen naar andere talen, ondanks dat je geen Portugees spreekt.

Als animatiestudio maken we natuurlijk ook gebruik van micro animaties. Bekijk voor je beeldvorming hieronder onze micro animaties die we op de homepagina hebben geïmplementeerd. De illustraties maken direct duidelijk welke diensten we bedoelen en de beweging maakt het aantrekkelijker om naar te kijken.

Afhankelijk van je doelstellingen kunnen micro animaties zelfs effectiever zijn dat gewone afbeeldingen. Bijvoorbeeld wanneer je een bezoeker door je website wil sturen. Een knipperend pijltje of bewegende knop maakt het voor de bezoeker duidelijk wat er verwacht wordt. Hierdoor beweegt men gemakkelijker door je website.

Verschil micro animaties en geanimeerde GIFs

Micro animaties zijn dus korte bewegende beelden. Ze komen vaak voor in een loop, waardoor ze veel weg hebben van GIFs. Alleen verschillen micro animaties en geanimeerde GIFs wel degelijk van elkaar:

  • Micro animatie: micro animaties zijn kleine illustraties die bewegen wanneer je over een webpagina scrolt of er met je muis er overheen gaat. Het dynamische aspect van de micro animatie zorgt ervoor dat de aandacht van de gebruiker getrokken wordt.
  • Animated GIFs: de animated GIF is een stuk statischer dan de micro animatie. Dit is vaak een afbeelding of een videofragment die in een loop afspeelt. Ook is het bij animated GIFs vaak niet nodig om er met je muis overheen te gaan, ze bewegen uit zichzelf al.

Waarvoor kun je micro animaties gebruiken?

Het belangrijkste doel van micro animaties is het helpen van de bezoeker. Ze begeleiden de online surfer door de website heen. Daarnaast zijn er voor jou als webbeheerder ook drie interessante redenen om micro animaties te verwerken in je website:

  1. Aandacht trekken: zoals we net vertelden verbeteren micro animaties de gebruikservaring. Dit komt omdat de micro animaties aandacht trekken en daardoor de focus verleggen. Ze sturen de gebruiker in juiste richting en vertellen waar de aandacht naartoe moet. Een goed voorbeeld hiervan is wanneer je een micro animatie verwerkt in je CTA-knop op je website. Onderstaande knop is bijvoorbeeld oranje, maar wanneer je er met je muis overheen beweegt verandert de kleur naar blauw. Deze kleurverandering valt op en triggert de websitebezoeker erop te klikken.
  2. Aanduiding progressie: behalve aandacht trekken, zijn micro animaties ook geschikt om voortgang aan te geven. Dit doen ze bijvoorbeeld door aan te geven hoever je bent in het up- of downloadproces of door te laten zien op welke pagina van de handleiding je jezelf bevindt. Op deze manier weet de gebruiker dat de website niet vastloopt, maar dat hij bezig is om informatie te verwerken.
  3. Feedback of reactie geven: met micro animaties is het ook mogelijk om de gebruiker op een eenvoudige manier feedback of een reactie te geven. Dit doe je door bijvoorbeeld de websitegebruiker een extra bevestiging in de vorm van een blij gezichtje te geven wanneer zij het juiste e-mailadres en wachtwoord hebben ingevoerd. Bij Cooler Media doen we dat net iets anders. Benieuwd hoe? Schrijf je in voor de Cooler Nieuwsbrief en check onze micro animatie.

Weten welke micro animaties er op jouw website passen? Overleg met een van onze video-experts en vraag vrijblijvend naar de mogelijkheden en kosten.

Julie van Rooij - Cooler Media

Julie van Rooij - Online Marketer

Christian de Waard - Cooler Media

Christian de Waard - Video Consultant

Helen Berger - Cooler Media

Helen Berger - Creative Producer

Daniel Visscher - Cooler Media

Daniël Visscher - Art Director

Hoe kunnen wij jou helpen?

Heb je aan vraag, opmerking of idee? Laat je bericht achter en we komen binnen een uurtje bij je terug.

"*" geeft vereiste velden aan