Geschreven door Lotte Bijl

Als je als webdeveloper of -designer aan de slag wilt met animatie, houd er dan rekening mee dat je een heel nieuw vakgebied betreedt. Het is een vak apart om een effectieve, karakteristieke animatie te ontwikkelen die een grote rol kan vervullen in de user interface van je nieuwe website. Een goede animatie heeft de juiste flow en brengt de juiste informatie naar voren op het moment dat de gebruiker daar behoefte aan heeft.

Als de beweging van een animatie niet vloeiend of subtiel is, lijkt het op een ouderwetse robot. Wanneer een element te snel in beeld komt of wanneer een formulier uitklapt zonder animatie of transitie, voelt het houterig, onpersoonlijk en onnatuurlijk. Dat doet de user experience geen goed; de gebruiker kan het zelfs als storend ervaren.

Wat te doen?

1. Verdiep jezelf

Als je aan de slag wilt met onderscheidende animaties, vergis je dan niet in wat er allemaal bij komt kijken en hoeveel aandacht die nodig hebben. Denk bijvoorbeeld aan easing: een term die omschrijft op welke manier het object in beeld komt. Of neem cushioning, een term die aangeeft hoe snel de verandering plaats vindt. Kort door de bocht geeft animatie de illusie dat iets leeft. Houd rekening met natuurkunde zoals zwaartekracht en weerstand.

2. Experimenteer met papier

Paper prototyping, waarmee je, zoals de naam zegt, met papier een prototype maakt, is een goede manier om erachter te komen hoe een animatie of interface kan gaan werken. Of gebruik een simpel digitaal ontwerp zoals hieronder weergegeven. Ontdek snel en eenvoudig hoe je een nieuw blok kan introduceren en welke technieken je kunt gebruiken: transparantie, schaal, rotatie of positie? Als je hiermee experimenteert, ontwikkel je een animatie die natuurlijker aanvoelt.

3. Liever goed gejat, dan slecht bedacht…

Ontwerpers zijn graag creatief en origineel, maar het gevaar is dat aparte ervaringen worden gecreëerd waar de gebruiker niet op zit te wachten. Leer daarom van de beste (Disney), kijk af en pas de technieken toe voor je eigen merk of omgeving. Bedenk bijvoorbeeld hoe je de onderstaande animatie kan toepassen in je eigen user interface en hoe je er een draai aan kan geven, zodat het precies past bij jouw identiteit.

Feedback na de ‘tap’: 
het geeft de illusie dat je een wateroppervlakte aanraakt door de kringen.

Sliders: 
het geeft het idee dat de verschillende schermen kaartjes zijn die je door kunt bladeren.

De toggle:
een knop die reageert als een fysiek schuifknopje.

De accordeon of waaier:
dit geeft duidelijk aan dat er meerdere links onder de hoofdlink aanwezig zijn.

De carousel:
een fijne manier om te navigeren omdat het focus geeft op wat er voorop ligt en laat zien dat je links en rechts kunt swipen.

Nee-schudder van de MacBook (of Spotify):
we hebben deze waarschijnlijk allemaal al een keer gezien. Bij het invoeren van een incorrect wachtwoord schudt de hele interface mee en simuleert daarmee nee schudden.

Hoewel het goed is om onderzoek te doen naar natuurlijke bewegingen en achterliggende functies, hoeft het ontwikkelen van animaties echt niet veel tijd te kosten. Met CSS3, jQuery en eindeloze libraries en tools op het web kun je al snel een animatie ontwikkelen en implementeren. En als je oplet, kun je overal inspiratie vinden. Zo stond ik laatst net iets te lang een interactief scherm in een volle McDonalds te bestuderen.

Inspiratie

Codrop’s Playground

Een aantal tools

Easing Tool
Easing Functies

Libraries & Plugins

jQuery Easing Plugin
Animate.css
Bounce.js