O luminare aurie a unui buton poate indica o acțiune; o rotație fără sfârșit lângă un paragraf poate concura cu lectura. Diferența nu constă în cât de costisitor pare un efect, ci în ceea ce face. Înainte de a adăuga animație, completați propoziția: „Această mișcare ajută persoana să înțeleagă…” Dacă nu există o încheiere clară, efectul este decor și trebuie să cedeze locul conținutului. Aceasta este o metodă de decizie editorială, nu o promisiune de vânzări mai bune.
Stabiliți acțiunea înaintea efectului
Luați ca exemplu un card de articol. Titlul explică subiectul, fragmentul oferă un motiv de lectură, iar un link vizibil deschide textul complet. O scurtă schimbare de culoare la trecerea cursorului poate întări acea acțiune. Dar dacă linkul arată ca un text obișnuit fără sclipire, designul de bază necesită atenție. Verificați mai întâi contrastul, formularea și poziția; adăugați mișcarea după aceea. Un telefon nu are o stare persistentă de survolare cu mouse-ul, așa că acțiunea principală trebuie să rămână inteligibilă și fără ea.
Puneți trei întrebări
Ce pornește animația: încărcarea paginii, derularea sau o acțiune deliberată? Când se încheie? Va avea rezultatul sens și fără mișcare? Pentru un meniu, starea vizibilă deschisă contează mai mult decât o intrare lungă a panoului. Un mesaj de finalizare are nevoie de cuvinte, nu doar de o sclipire care dispare. În lista de verificare a designului, separați efectele decorative de cele care comunică o schimbare de stare. Astfel, discuția devine mai utilă decât un simplu schimb de preferințe și antipatii.
Reducerea mișcării nu trebuie să elimine experiența
MDN descrie prefers-reduced-motion ca pe o modalitate de a respecta preferința dispozitivului pentru mai puțină mișcare neesențială. Aceasta nu repară automat un site: designerii și dezvoltatorii trebuie să decidă o alternativă. Opriți o rotație sau înlocuiți o tranziție cu deplasare amplă prin apariție imediată, păstrând etichetele, accesul la meniu și stările clare ale butoanelor. Nu ascundeți un bloc animat întreg dacă acesta conține și informație utilă. Verificați efectele controlate prin JavaScript, precum și animațiile CSS.
Oferiți vizitatorilor controlul potrivit
Criteriul WCAG 2.2.2, nivel A, tratează informația în mișcare care pornește automat, durează mai mult de cinci secunde și apare alături de alt conținut. În condițiile precizate, este necesară o modalitate de a o pune pe pauză, opri sau ascunde, cu excepția cazului în care mișcarea este esențială. Informația actualizată automat are condiții separate. Aceasta nu este o permisiune generală pentru orice animație mai scurtă de cinci secunde. Criteriul 2.3.3, nivel AAA, tratează separat dezactivarea animației neesențiale declanșate de interacțiune. Un singur comutator nu dovedește conformitatea unui site întreg cu WCAG.
O verificare practică înainte de publicare
Urmați același traseu cu setările obișnuite de mișcare și cu reducerea mișcării activată: deschideți meniul, citiți un card, vizitați un articol și reveniți. Verificați dacă informația rămâne disponibilă și comenzile își păstrează stările semnificative. Repetați cu tastatura și pe telefon. Acolo unde există comenzi pentru mișcare, verificați accesibilitatea și claritatea etichetelor. La final, priviți pagina după un minut de lectură: un efect care pare atrăgător la început poate deveni deranjant. Scopul nu este eliminarea personalității site-ului, ci folosirea lui confortabilă.