Animaties op uw website: waarom minder beweging meestal beter werkt

U kent het wel. U opent een website, en alles beweegt. De kop schuift van links naar binnen, de foto’s vervagen één voor één in beeld als u scrolt, onderaan tellen drie getallen op tot “250+ tevreden klanten” en ergens draait een pijltje dat u naar beneden wenkt. Bij de presentatie op een groot scherm in de vergaderkamer zag het er indrukwekkend uit. Op uw telefoon in de trein voelt het vooral traag. Onze mening over animaties op een website is dan ook eenvoudig: gebruik beweging als het de bezoeker helpt, en laat het weg als het alleen indruk moet maken. Hieronder leggen we uit waarom.

Wat animaties kosten

Tijd van de bezoeker

Een tekst die pas in beeld komt als hij binnengeschoven is, kan pas gelezen worden als de animatie klaar is. Een halve seconde per blok lijkt weinig, maar bij tien blokken op een pagina zit een bezoeker steeds te wachten. Wie snel scrolt om iets op te zoeken, ziet soms lege vlakken waar de tekst nog moet verschijnen.

Snelheid

Veel animaties komen uit een paginabouwer of een losse animatiebibliotheek die op elke pagina wordt geladen, ook waar niets beweegt. Op een snelle laptop merkt u daar weinig van. Op een middenklasse telefoon wel. Daarnaast laten slecht gebouwde animaties elementen verspringen tijdens het laden, wat Google meet als lay-outverschuiving. Hoe dat werkt, leest u in verspringende elementen oplossen.

Toegankelijkheid

Voor sommige mensen is beweging op een scherm meer dan hinderlijk. Mensen met bepaalde evenwichtsstoornissen kunnen er duizelig of misselijk van worden, en voor mensen met concentratieproblemen trekt bewegende inhoud de aandacht weg van de tekst. De toegankelijkheidsrichtlijnen WCAG nemen dit mee:

• Succescriterium 2.2.2 (niveau A) vraagt dat inhoud die automatisch beweegt, langer dan vijf seconden duurt en naast andere inhoud staat, door de bezoeker te pauzeren, te stoppen of te verbergen is. Denk aan een automatische slider of een bewegende banner.
• Succescriterium 2.3.3 (niveau AAA) gaat over beweging die door een actie van de bezoeker ontstaat, zoals scrollen. Zulke animaties moeten uit te schakelen zijn, tenzij ze echt nodig zijn voor de functie.

Moderne browsers kennen bovendien een instelling waarmee bezoekers in hun besturingssysteem aangeven dat ze minder beweging willen. Een website kan die instelling uitlezen, met de CSS-mediaquery prefers-reduced-motion, en de animaties dan uitzetten of verkorten. Dat is een kleine moeite voor de bouwer, maar het wordt bij het bouwen makkelijk vergeten. Meer over de criteria in WCAG 2.2 leest u in de nieuwe criteria in WCAG 2.2.

De slider is het bekendste voorbeeld

De automatisch wisselende slider op de homepage is misschien de meest gebruikte animatie op bedrijfssites, en tegelijk de minst nuttige. Veel bezoekers zien alleen de eerste dia, terwijl de site de beelden van alle dia’s moet laden. We schreven er een apart stuk over: sliders en snelheid.

Wanneer beweging wel iets toevoegt

We zijn niet tegen elke animatie. Er is beweging die de bezoeker echt helpt:

• Terugkoppeling op een actie. Een knop die even verkleurt als u erop klikt, een vinkje dat verschijnt als een formulier verstuurd is, een winkelmandje dat kort oplicht als er iets in komt. Dat vertelt de bezoeker dat zijn klik is aangekomen.
• Overgangen die uitleggen wat er gebeurt. Een menu dat uitschuift vanaf de kant waar u tikte, een vraag in een FAQ die openklapt. De beweging laat zien waar de nieuwe inhoud vandaan komt.
• Een uitleg die zonder beweging niet werkt. Een korte animatie die laat zien hoe een product in elkaar gaat, of hoe een proces verloopt. Dat is inhoud, geen versiering, en dan mag hij er staan, met een pauzeknop.

Wat die voorbeelden gemeen hebben: ze zijn kort, ze reageren op wat de bezoeker doet, en de inhoud is ook zonder de animatie te begrijpen.

Wat wij doen bij een nieuwe site

Als wij een site bouwen, beginnen we zonder animaties en voegen we ze alleen toe waar ze iets doen. Overgangen houden we kort, meestal een fractie van een seconde. We bouwen ze met CSS in plaats van zware bibliotheken, en we laten de site rekening houden met de instelling voor minder beweging. Automatisch wisselende elementen krijgen een pauzeknop, of we laten ze weg.

Wil een klant toch een opvallende animatie op de homepage, bijvoorbeeld bij een lancering, dan bespreken we wat het kost aan snelheid en toegankelijkheid, en zoeken we samen een vorm die op een telefoon nog prettig werkt. Het is uw site; wij leggen de afweging op tafel.

Een eenvoudige toets voor uw eigen site

Open uw homepage op uw telefoon, op mobiele data, en scrol er in een normaal tempo doorheen. Moet u ergens wachten tot tekst verschijnt? Springt er iets weg op het moment dat u wilt tikken? Beweegt er iets dat u afleidt van wat u zoekt? Dan is er waarschijnlijk winst te halen door beweging weg te halen, niet door er meer bij te zetten.

Toegankelijk vanaf het begin

Rustig ontwerp en toegankelijkheid gaan goed samen. Wilt u een site die prettig werkt voor iedereen, ook voor wie geen beweging verdraagt, kijk dan bij een toegankelijke website laten maken.