Animaties op je website: functioneel of afleidend?

Elementen die het beeld in schuiven, cijfers die optellen, een header die meebeweegt met je scroll: animatie is niet meer weg te denken uit modern webdesign. Goed gedaan voelt een site erdoor levendig en verzorgd. Slecht gedaan is het een kermis die bezoekers wegjaagt. Het verschil zit in één vraag: heeft deze beweging een functie?

Wat animatie goed kan

• Richting geven. Een subtiele beweging trekt het oog naar wat belangrijk is: de knop, de aanbieding, de volgende stap.
• Feedback geven. Een knop die reageert op je klik of een formulier dat bevestigt dat het verstuurd is, geeft vertrouwen dat er iets gebeurt.
• Structuur voelbaar maken. Secties die rustig verschijnen terwijl je scrolt, verdelen een lange pagina in behapbare stukken.
• Kwaliteit uitstralen. Verzorgde micro-animaties geven hetzelfde signaal als een strak gestucte muur: hier is over nagedacht.

Waar het misgaat

Animatie wordt hinderlijk zodra hij de bezoeker laat wachten of afleidt van de taak. Denk aan tekst die pas na een seconde verschijnt terwijl je al wilt lezen, elementen die bij élke scroll opnieuw binnenvliegen, of parallax-effecten die je zeeziek maken. Ook technisch kan het pijn doen: zware animatiebibliotheken en video-achtergronden drukken op je laadtijd, en juist snelheid is voor Google en je bezoekers doorslaggevend.

Vergeet ook de toegankelijkheid niet. Een deel van je bezoekers wordt letterlijk onwel van veel beweging. Besturingssystemen kennen daarom de instelling “verminderde beweging”, en een nette website respecteert die: wie minder animatie wil, krijgt de inhoud gewoon stilstaand te zien.

Drie vuistregels

Ten eerste: animeer met een reden, niet omdat het kan. Ten tweede: houd het kort en subtiel — beweging van een paar honderd milliseconden voelt vlot, alles boven een seconde voelt traag. Ten derde: de inhoud gaat altijd voor. Als een bezoeker moet wachten op je animatie om te kunnen lezen wat je verkoopt, is de animatie het probleem.

Wij bouwen websites waarin beweging de boodschap ondersteunt in plaats van overschreeuwt — snel, toegankelijk en met oog voor detail. Benieuwd wat dat voor jouw site kan betekenen? Plan een vrijblijvende kennismaking.