Zo zorgen micro-animaties voor een betere gebruikers-ervaring
Bij BIG FAT Internet maken we haast geen websites meer zonder micro-animaties toe te passen. Deze kleine, vaak subtiele bewegingen op een pagina zien er niet alleen fraai uit, ze hebben ook een doel. Zo zorgen micro-animaties voor een betere gebruikerservaring op de website. Onze designer Tom en frontend-teamleider Simon leggen uit waarom wij fan zijn van micro-animaties.
Of ze nog kunnen herinneren wat de eerste website was waarbij ze micro-animatie hebben toegepast? Tom (16 jaar in dienst) en Simon (12,5 jaar in dienst) moeten even goed nadenken. “Ik denk dat dat Share That Quote moet zijn, de ansichtkaartenlijn van Annemarie van Gaal en Heleen Dura-van Oord”, zegt Tom. “Deze website ontwikkelden we in 2018. Sindsdien hebben we heel vaak micro-animaties toegepast.”
Wat zijn micro-animaties?
Even terug naar de basis. Wat zijn micro-animaties nou eigenlijk? Het zijn korte, subtiele animaties op een webpagina, die sturen op de aandacht van de eindgebruiker. Bijvoorbeeld een alinea die subtiel in beeld vliegt, een icoon dat wiebelt of een knop die oplicht. Ze zorgen ervoor dat de aandacht van de websitebezoeker daarheen gaat waar de designer dat wil. Micro-animaties hebben dus altijd een doel: ze maken bepaalde functionaliteiten duidelijker en/of ze maken de website als geheel visueel aantrekkelijker.
Bij BIG FAT Internet zetten we micro-animaties met regelmaat in bij websitemenu’s, maar we schuwen ze ook niet bij verschillende soorten content. Bevat een pagina bijvoorbeeld een contentlaag met foto’s, dan ontwerpen en ontwikkelen we die zo dat tijdens het naar beneden scrollen die laag zó in beeld komt dat voor de gebruiker duidelijk wordt dat het een carrousel is en dat er dus meer foto’s te zien zijn. Ook gebruiken we micro-animaties om bijvoorbeeld een call-to-action-button op te lichten of te laten bewegen, zodat de gebruiker wordt uitgenodigd om hierop te klikken.
Functioneel én aantrekkelijk
Een goede micro-animatie is niet alleen functioneel, maar ook aantrekkelijk. “Wat ik zelf altijd een mooi voorbeeld vind hiervan is de homepage van Ingage, voor wie we in 2023 een website hebben opgeleverd”, aldus Simon. “Als bezoeker denk je op een normale homepage te zijn beland, maar zodra je scrollt word je eerst meegenomen naar rechts, dan naar onder, dan naar links, dan weer naar onder… Hierdoor springt de website van Ingage meteen in het oog. Het is namelijk absoluut geen dertien-in-een-dozijn-website. Het kostte aardig wat tijd om het te ontwikkelen, maar de klant was er erg blij mee! En wij ook, want dit vinden we altijd heel gave dingen om te doen.”
Een zitting van alle kanten laten zien tijdens het scrollen
Een ander leuk voorbeeld uit eigen doos is de productwebsite die we voor vaste klant Life & Mobility ontwikkelden. Voor Newton, een innovatief en uniek zitconcept voor manuele en elektrische rolstoelen, zetten we micro-animaties in om goed te kunnen laten zien hoe zo’n zitting er van alle kanten uitziet.
Op de website van Newton wordt ook op een andere, wederom functionele manier micro-animatie ingezet. Klik je bijvoorbeeld op de pagina over de zitvisie van Life & Mobility dan begint het menu uitgeklapt om vervolgens uit zichzelf in te klappen. Het idee hierachter? Aan de klant laten zien dat dáár het menu zit, zonder het menu de hele tijd te hoeven tonen.
Subtiele micro-animaties
Een micro-animatie kan door verschillende acties worden getriggerd. Zoals hierboven al werd genoemd kan een animatie ‘geactiveerd’ worden doordat de gebruiker scrollt, maar het kan net zo goed gebeuren als men met de muis over een afbeelding of object gaat, of wanneer men swipet.
Een micro-animatie hoeft niet altijd zo in your face te zijn. Sterker nog, het is eigenlijk beter als de animatie subtiel wordt getoond, want de bezoeker mag er niet op een vervelende manier door afgeleid raken.
“Een van de subtielere micro-animaties die wij hebben toegepast is het kopje koffie aan de rechterkant van de website van DO-IT ICT & Audiovisuele toepassingen. We hadden ook alleen een kopje koffie kunnen tonen, maar zowel wij als de klant vonden het wel leuk als de damp boven het kopje bewoog”, aldus Simon.
En ook bij de eerdergenoemde website van Ingage zit een subtiele en vloeiende micro-animatie verwerkt. Als je vanuit het topmenu een van de bovenste menu-items aanklikt, dan wordt op de achtergrond de desbetreffende pagina geladen, zonder dat de gebruiker dit als dusdanig opmerkt.
En het menu van ZoZorgt Gelderse Vallei is ook niet alledaags. Waar websitemenu’s normaal gesproken gewoon rustig uitklappen, transformeert dat van ZoZorgt Gelders Vallei van een klein knopje rechtsboven tot een fullscreen-menu.
Sommige micro-animaties zijn al ingeburgerd
Sommige vormen van micro-animatie zijn ook zo ingeburgerd dat je ze op heel veel plekken ziet. “Neem bijvoorbeeld de MVO-website van onze klant Life & Mobility. Als je scrollt, komen de diverse contentlagen een voor een in beeld. En wat ook leuk is aan deze site, zijn de grafieken die worden getoond op de pagina’s over grondstoffenverbruik. Je kan boven de grafiek verschillende onderdelen aanklikken en dan verdwijnen ze uit de grafiek. Ook dit is een vorm van micro-animatie.”
Je ziet, er zijn tal van micro-animaties mogelijk. Voor welke vorm wij ook kiezen, de micro-animatie moet ook wel echt een doel hebben. “Je moet niet dingen laten bewegen puur om het laten bewegen. Neem bijvoorbeeld de laadbalk die je ziet bij jouwkerstverhaal.nl, onze kerstactie van het afgelopen jaar. Het is belangrijk dat we die laten zien, anders haken mensen eerder af en klikken ze ons weer weg. Nu weten dat ze er iets staat te gebeuren. Vergelijk het met de visuele timers bij verkeerslichten. Mensen vinden het dan veel minder vervelend om te wachten, omdat ze kunnen zien wanneer het licht gaat verspringen.”
Wil jij eens met Tom of Simon sparren over de inzet van micro-animaties op jouw website? Aarzel dan niet en neem gewoon eens vrijblijvend contact met ze op!
