Animatie

Animatie is een krachtige tool om informatie over te brengen. Het moet wel optioneel zijn, kort (maar krachtig) en niet te veel bewegen. Ook moet het altijd een usability-gerelateerd doel hebben.

Optioneel ๐ŸŽ›

Niet iedereen wil graag animatie zien in software. Animaties die kleur of doorzichtigheid veranderen zijn voor de grootste groep okรฉ. Animaties die bewegen of van vorm veranderen kunnen voor sommige mensen een probleem zijn. Daarom is het belangrijk om animatie optioneel te maken. De software moet adaptief zijn volgens de richtlijnen. Houdt dus rekening in het design dat animatie uitgezet kan worden, terwijl de beleving gelijkwaardig moet blijven.

OkรฉAdaptief/optioneelNiet okรฉ
Kleur, doorzichtigheidSchaling, beweging, draaiing, vorm

Parallax scroll, flikkeringen, grote delen van het scherm die bewegen

Kort maar krachtig ๐Ÿƒโ€โ™€๏ธ

Gebruik animatie echt met een usability-gerelateerd doel. De Doherty Threshold (Doherty-drempel) toont ook aan dat de aandacht en productiviteit van mensen toenemen als de reactie van de interactie binnen 400 milliseconden ligt. In UX systemen wordt vaak gebruik gemaakt van korte en snelle animaties met betekenis. Deze zijn vaak niet langer dan 200 milliseconden. Voor grotere elementen of grotere afstanden voelt het vaak natuurlijker om een langere animatie te gebruiken. Redenen voor animatie kunnen zijn:

  • Hiรซrarchie verduidelijken
  • Aandacht trekken (bijvoorbeeld bij een foutmelding)
  • Veranderingen in de interface verduidelijken
  • Systeemfeedback geven

Vermijden ๐Ÿ™…โ€โ™€๏ธ

Grote gebieden

Parallax scroll en onverwachtste bewegingen van grote delen van het beeld moeten vermeden worden. Deze kunnen voor mensen met vestibulaire stoornissen (evenwichtsstoornissen) een probleem zijn. Ook is dit extra prikkelend voor mensen die last hebben van overprikkeling.

Flikkeringen

Er is richtlijn 2.3.1 waar wij aan moeten voldoen als het om flitsen gaat. Vermijd altijd flitsende beelden, maar als je ze toch gebruikt mag het niet meer dan drie keer per seconde flitsen. Lees meer op de pagina van de WCAG over flitsende beelden.

Verder lezen

Meer weten?

Externe bronnen zijn niet verbonden met NTR