De functie van animaties in websites

door Marisca Zoon

Bij de term animatie denk je al snel  aan veel beweging, complexe parallax ontwerpen of een enorme video op de achtergrond. De term “animatie” is echter veel meer dan dat. Vaak gaat het om kleine bewegingen binnen een website die zo subtiel zijn dat je niet eens door hebt dat het geanimeerd is. Deze subtiele toevoegingen kunnen je onbewust wel aanzetten tot een bepaalde handeling en kunnen daarom erg waardevol zijn.

 

Het W3C heeft met CSS3 een hele nieuwe methode geïntroduceerd om het web dynamischer te maken en om het scherm tot leven te wekken op een manier die we sinds de “GIF animaties” en “Flash websites” niet meer gezien hebben. Animaties en overgangen zijn een geweldige manier om te communiceren met je gebruikers en kunnen de ervaring en beleving van je website enorm verrijken. Maar denk vooral goed na wanneer en waar je animaties gebruikt. Eerst wat meer over het waarom van animaties.

Beleving

Één van de hoofdredenen om animaties te gebruiken is omdat het je site tot leven kan laten komen.
Goede voorbeelden hiervan zijn: (Klik op de plaatjes om de link te openen)

page not found       

Een product of dienst wordt relevant voor de bezoeker door te laten zien hoe het in het dagelijks leven van pas komt door middel van animatie. Ook biedt animatie de mogelijkheid om je productconcept te visualiseren, zoals bij takeitapp.co Een veelgebruikt trucje is om animatie te gebruiken zodat het lijkt alsof een site soepeler en sneller werkt dan hij eigenlijk doet. Bijvoorbeeld door pagina transities, zie mentosfreshener.com

Welke reden je ook hebt om animatie aan je website toe te voegen, hou er rekening mee dat de beleving op verschillende devices erg verschilt. Een animatie kan op desktop bijvoorbeeld heel leuk zijn en echt iets toevoegen, op mobiel werkt het misschien vertragend en daarom irritant.  

Gebruiksvriendelijkheid

Naast beleving is het verhogen van de gebruiksvriendelijkheid van een website een veelgebruikte reden voor animatie. Je kunt door middel van een animatie feedback geven aan de gebruiker wanneer hij bijvoorbeeld een veld in een formulier verkeerd heeft ingevuld. Of extra informatie weergeven bij het aanklikken van een button. Daarnaast kun je eenvoudig de relatie tussen elementen weergeven of juist extra nadruk op een bepaald element leggen door de aandacht daarheen te trekken. Wanneer bijvoorbeeld een product in een webwinkel wordt aangeschaft, is het mogelijk om het product daadwerkelijk in het winkelmandje te animeren. Hierdoor is direct duidelijk dat bovenin beeld het winkelmandje staat, zodat je niet hoeft te zoeken wanneer je klaar bent om af te rekenen.

add to cart

Checklist

Voordat je ergens een animatie in wilt gebruiken  is het goed om jezelf de volgende vragen te stellen:  

  • Is het zien van de animatie essentieel? Kan deze informatie kan ook op een andere manier verkregen worden wanneer de animatie niet gezien wordt door de gebruiker doordat deze bijv. animaties uitgeschakeld heeft of visueel gehandicapt is? Het kan ook zo zijn dat het systeem waarop gewerkt wordt onvoldoende prestaties heeft waardoor animaties niet goed tot hun recht komen.
  • Heeft de animatie invloed op de productiviteit van de gebruiker? Voorwaarden om negatieve invloed van de animatie op de productiviteit te voorkomen zijn: de animatie is  snel, het interfereert niet met de interactie en kan worden onderbroken zodat een gebruiker niet hoeft te wachten.
  • Is de animatie gemakkelijk te negeren en niet storend of vervelend?
  • Heeft de animatie - zelfs na meerdere keren gezien te hebben - nog steeds toegevoegde waarde?
  • Helpt de animatie de doelstellingen te realiseren?
  • Voelt de animatie natuurlijk aan en is het consistent met de rest van de interacties?

Enkele voorbeelden

1 . Geanimeerd scrollen

Bij een lange homepage of een website die uit één pagina bestaat lees je van boven naar beneden, als een lineair verhaal. Door tussen de verschillende hoofdstukken te springen kan je belangrijke informatie missen of overslaan. Door te scrollen van hoofdstuk naar hoofdstuk krijgt de gebruiker feedback wat er gebeurt en waar hij/zij zich bevindt in het verhaal.

 unanimated-scroll animated-scroll

2 . Muisinteractie

Buttons zijn de meest primaire methode om de gebruiker bepaalde acties uit te laten voeren op een website. Deze kleine elementen zijn van groot belang in de flow en begeleiding van de gebruiker. Door het toevoegen van een animatie op de button kan je net wat meer aandacht geven aan een bepaalde actie. Net als dat je op de hover (het bewegen van de muis over een element) net dat kleine beetje extra informatie kan geven. Voor inspiratie, zie tympanus.net

3 . Loading bars

Ook wanneer het lijkt of er niets gebeurd is het goed om te blijven communiceren met je gebruiker. Dit is bijvoorbeeld relevant in een situatie waarbij tijd nodig is om een volgende pagina te laden of om een berekening te maken. De gebruiker verwacht op dit moment een reactie te zien. Door visuele feedback te geven - door het weergeven van een voortgangsindicatie, een geanimeerd laadicoon of door zelfs een pagina vullende animatie te tonen zoals bij us.mentos.com en mazda2015.nl gedaan is - bevestig je dat de handeling in werking is gezet.

Conclusie

Geanimeerde elementen op een website kunnen verleidelijk en krachtig zijn, maar er schuilt tegelijkertijd ook een groot gevaar in het onjuist gebruik ervan. Gebruik ze alleen wanneer je zeker weet dat het iets toevoegt voor de gebruiker. Denk na of de animatie de juiste aandacht trekt en het geen struikelblok is waar de gebruiker steeds opnieuw over valt. Al deze aspecten zijn van belang bij het ontwerpen van een succesvolle animatie.