[ Home ]

Je animaties onder de knie krijgen

Wat betekent dat?

Dit betekent het beperken, controleren of zelfs uitschakelen van bewegingen en visuele effecten die worden geactiveerd zonder dat de gebruiker hier iets voor hoeft te doen.

We hebben het over carrousels die vanzelf scrollen, automatisch afspelende video's, geanimeerde achtergronden of te uitgesproken hover-effecten.

In het kort komt het erop neer dat alles wat op je pagina beweegt zonder dat de gebruiker erom heeft gevraagd en wat mogelijk irritant of desoriënterend kan zijn, correct wordt beheerd.

Waarom?

Wat voor sommige mensen een esthetisch detail lijkt, kan voor anderen een echt obstakel worden.

Sommige animaties, zelfs subtiele, kunnen duizeligheid of misselijkheid veroorzaken, epileptische aanvallen uitlokken of aandachts- en leesproblemen veroorzaken. Ze kunnen ook leiden tot desoriëntatie of vroegtijdige visuele vermoeidheid.

Een achtergrond die beweegt, zelfs langzaam, kan er bijvoorbeeld voor zorgen dat een overgevoelig persoon zich niet kan concentreren op de hoofdinhoud. Ongecontroleerde animaties trekken ongecontroleerd de aandacht, onderbreken het lezen en kunnen de navigatie verstoren als ze te dynamisch zijn of onmogelijk te stoppen.

Hoe pak ik het aan?

Om je animaties onder controle te houden, is het niet de bedoeling om alles te verwijderen, maar om altijd de controle te behouden.

In het ideale geval starten animaties niet automatisch; het is aan de gebruiker om te beslissen of ze al dan niet worden geactiveerd. Als een automatische animatie nodig is, beperk de duur dan en zorg ervoor dat deze op elk moment gepauzeerd, gestopt of verborgen kan worden.

Vermijd in alle gevallen animaties die niet essentieel zijn voor de betekenis van de inhoud of voor een specifieke actie, en gebruik ze in plaats daarvan om de navigatie te ondersteunen (bijvoorbeeld vloeiende overgangen tussen secties).

Tips

N°1.

Pas op voor automatische carrousels: ze kunnen erg storend zijn. Zorg ervoor dat ze een zichtbare en toegankelijke afspeel/pauzeknop hebben (op het toetsenbord en voor schermlezers) en duidelijke navigatieknoppen (Terug/Volgende).

N°2.

Voorkomt animaties die langer dan 5 seconden duren zonder een duidelijke controle om ze te stoppen.

N°3.

Gebruik vloeiende CSS-overgangen voor micro-interacties, maar vermijd te lange vertragingen of effecten die kunnen verrassen.

N°4.

Als een animatie essentieel is voor het begrijpen van de informatie, waarschuw mensen dan voor de aanwezigheid ervan of bied altijd een statische versie van de inhoud aan.

N°5.

Als je vertrouwd bent met CSS, kun je de CSS ‘prefers-reduced-motion’ media query implementeren om te detecteren of de gebruiker een systeemparameter heeft geactiveerd om animaties te verminderen. Je kunt je site dan aanpassen door meer statische versies of versies met minimale animatie aan te bieden.

Hulpmiddelen

Een volledig artikel over waarom en hoe je het kunt implementeren.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors