Animatie in design betekent dat je bewust onderdelen op een scherm laat bewegen, een knop die omhoog komt bij hover, een paneel dat naar binnen schuift, een getal dat omhoog telt, om iets duidelijk te maken in plaats van alleen te versieren. Goede animatie vertelt je wat er net gebeurde of waar je moet kijken.
Denk aan een richtingaanwijzer op een auto. Het knipperen is er niet om er mooi uit te zien; het vertelt andere bestuurders wat je gaat doen. Interface-animatie werkt net zo: een menu dat uitschuift in plaats van plotseling te verschijnen maakt duidelijk dat het van de rand komt, en een rustige fade vertelt je dat inhoud is geladen. Dit loopt van piepkleine micro-animaties op één knop tot vollere motion design over een hele pagina.
Snelheid is een deel van het vak. De meeste nuttige interface-beweging duurt tussen de 150 en 300 milliseconden, snel genoeg om instant te voelen maar traag genoeg om te lezen. Een goede easing-curve helpt ook: dingen die snel starten en zacht uitlopen voelen natuurlijk, terwijl een vlakke, robotachtige beweging goedkoop oogt. Een kleine hover-animatie op een knop is een helder voorbeeld van beweging die zijn werk doet in een fractie van een seconde.
Maar er zit een grens aan. Animatie die te lang duurt, of bij alles afgaat, vertraagt mensen en voelt als een trucje. De beste beweging is snel, heeft een duidelijke taak, en respecteert de instelling voor verminderde beweging voor mensen die er gevoelig voor zijn.
Bij TopDevs houden we animatie doelgericht en licht, en leunen we op de eigen overgangen van de browser zodat klantsites snel blijven en toch reageren op je aanraking.
