Dă fiecărei animații un rol

Împarte ideile în trei categorii: feedback, orientare și decor. Feedbackul arată că un buton a răspuns. Orientarea explică unde s-a mutat un panou. Decorul creează atmosferă. Toate pot avea sens, însă primele două trebuie să susțină o acțiune concretă. Dacă nu poți explica ce înțelege mai bine vizitatorul, animația este probabil decorativă.

Într-o pagină de servicii, apariția lentă a fiecărui paragraf poate deveni o piedică. Textul ar trebui să fie accesibil atunci când omul ajunge la el. Păstrează gesturile expresive pentru momente în care au spațiu: o ilustrație introductivă sau o demonstrație scurtă, separată de informația necesară pentru a lua o decizie.

Proiectează și experiența fără mișcare

Înainte de implementare, alege imaginea statică și verifică dacă pagina rămâne inteligibilă. O schemă nu trebuie să își piardă explicația când animația este oprită. Un buton nu trebuie să își comunice starea numai printr-un salt sau o rotație. Textul, poziția și aspectul stabil trebuie să ducă informația esențială.

W3C descrie folosirea preferinței de sistem pentru mișcare redusă prin interogarea CSS prefers-reduced-motion. Aceasta poate permite înlocuirea animațiilor neesențiale cu o prezentare mai calmă. Preferința trebuie testată pe pagina finală, nu doar bifată într-o listă. Referință tehnică: https://www.w3.org/WAI/WCAG22/Techniques/css/C39.html.

Verifică greutatea în pagina reală

Nu alege formatul doar după felul în care arată fișierul în aplicația de creație. Compară alternativele în browser, cu dimensiunea reală de afișare și cu restul paginii prezent. Un export foarte mare pentru o zonă mică poate consuma date fără un avantaj vizibil. O animație aparent simplă poate solicita mult dispozitivul dacă este implementată ineficient.

Înregistrează mărimea fișierelor, timpul până când conținutul important devine utilizabil și comportamentul la derulare pe un telefon modest. Compară pagina cu și fără animație. Aceste observații sunt mai utile decât o promisiune generală că un anumit format este întotdeauna rapid. Setează un prag de acceptare împreună cu persoana care construiește site-ul.

Verifică și ce vede persoana înainte de pornirea animației. Zona nu ar trebui să rămână inexplicabil goală sau să își schimbe brusc dimensiunea când apare conținutul. Rezervarea unui spațiu stabil și alegerea unui cadru inițial relevant țin de experiența vizitatorului. Ele merită discutate încă din faza de design, nu adăugate la final.

Lasă controlul la vizitator

Pentru conținutul în mișcare care pornește automat, durează peste cinci secunde și apare alături de alt conținut, criteriul WCAG privind pauza, oprirea sau ascunderea cere un mecanism de control, cu excepția situațiilor în care mișcarea este esențială. Preferința pentru mișcare redusă nu trebuie tratată ca înlocuitor automat al acelui control. Referință: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html.

În testul final, încearcă să găsești un serviciu, să citești o explicație și să ajungi la formular folosind tastatura și un ecran mic. Observă dacă animația acoperă elemente, întârzie răspunsuri sau mută atenția de la sarcină. Păstrează ceea ce clarifică interacțiunea și simplifică ceea ce obligă omul să urmărească spectacolul înainte de a putea folosi pagina.