Geschreven door Lotte Bijl

Sinds mijn twaalfde maak ik animaties. Toen ik mijn eigen marquee tag in html kon maken, volgde een hele pagina vol met gekleurde, knipperende tekst en animerende gifjes. Je hoeft mij niets uit te leggen over de zin en onzin van animatie. Soms passen animaties alleen niet in de projectplanning of -begroting en dat haalt dan net de kers van de taart.

Tijdens mijn stage bij Online Department heb ik gemerkt dat opdrachtgevers soms al tevreden zijn als we een html-versie van het ontwerp hebben neergezet. Maar het is onze missie om een menselijke ervaring te creëren. Dat gaat verder dan alleen een klikbare, digitale versie van het opgezette ontwerp. Juist animatie kan helpen om het ontwerp naar een hoger niveau te tillen. Daarom: vijf redenen om vooral budget en tijd vrij te maken voor animatie:

1. Animatie maakt van een website een beleving

Een website zonder animaties is zoals een auto zonder stuurbekrachtiging. Je kunt prima rijden en inparkeren, maar echt prettig is het niet. Je houdt de gebruiker als het ware tegen om soepel en probleemloos door een website te gaan. En dat is toch waar je uiteindelijk naartoe wilt om de bezoeker datgene te laten doen waarvoor je de webpagina hebt ontworpen.

2. Animatie versimpelt complexe informatie

Als ontwerper wil je dat informatie voor de gebruiker duidelijk is zonder dat je daar veel stilistische elementen voor moet inzetten. Onthoud dat functionele elementen niet altijd een vaste positie hoeven te hebben en altijd zichtbaar moeten zijn. Ze kunnen ook getimed worden, zodat ze zichtbaar worden op het moment dat de gebruiker het wilt zien.

Door elementen alleen op het juiste moment zichtbaar te maken, versimpel je de interface. Een onderliggend element wordt bijvoorbeeld geïntroduceerd als de gebruiker er met zijn muis overheen gaat. Dan maak je gelijk duidelijk waar een element voor staat en weten gebruikers waar ze bijvoorbeeld een menu kunnen vinden. Door het element op één plek te laten transformeren, hoeft de gebruiker minder informatie te verwerken.

3. Animaties hebben minder pixelruimte nodig

Naast dat je complexe informatie kunt versimpelen, neemt een animatie ook minder ruimte in beslag op de website. Die ruimte ontstaat doordat alle relevante informatie op één plek verschijnt. Denk bijvoorbeeld aan animerende infographic of screencast. De animatie vervangt de zware how-to-video’s, waarvoor de gebruiker ook nog een extra handeling moet verrichten, namelijk het aanklikken van de ‘play’ button. Met een gifje wordt wel de informatie getoond, maar houd je je website licht.

4. Met animaties begeleid je de gebruiker

Een goede user interface beperkt zich niet tot tekst, icoontjes of opvallende kleuren om aan te geven hoe je de website moet gebruiker. Met animatie kun je net zo goed de aandacht vragen van de gebruiker. Ga af op intuïtie, een subtiele bounce kan als seintje al voldoende zijn om de gebruiker te laten weten dat hij iets met het element kan doen.

5. Met animaties geef je feedback aan de gebruiker

Met de juiste bewegingen en timing kun je de gebruiker feedback geven dat hij een actie goed heeft uitgevoerd zonder naar een hele nieuwe pagina te laden. Je kunt dat realiseren door de submitbutton dynamisch te laten veranderen in een vinkje. Het is een simpel icoontje, maar de gebruiker weet precies wat je bedoelt en wordt bevestigd in zijn handeling.

Animaties maken een website of -shop fijner om naar te kijken en te gebruiken. Het zijn de details die een ervaring van een 7 naar een 9+ trekken. Je maakt het voor jezelf ook een stuk aantrekkelijker: je website wordt lichter, je kunt gebruikers meer sturen naar de gewenste handeling en het is hartstikke hip. Dat vraagt nu wellicht wat extra van je budget en tijd, maar uiteindelijk betaalt het zich allemaal terug.