2024 · 03 · 22 · 2 min

Micro-interazioni: quando animare e quando no

Un'animazione dovrebbe comunicare qualcosa, non decorare. La differenza tra feedback utile e rumore visivo.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

La regola che uso: ogni animazione deve rispondere a una domanda dell'utente. Il button che si schiaccia risponde a 'ho cliccato?'. Il loader risponde a 'sta succedendo qualcosa?'. L'animazione di ingresso del modale risponde a 'questo elemento è nuovo o era già lì?'.

Le animazioni che elimino sempre: hover effects su testi, parallax su elementi non importanti, transizioni di pagina elaborate che rallentano la navigazione. Costano attenzione e non danno nulla in cambio.

Durata standard: 150ms per micro-feedback, 250ms per transizioni di stato, 350ms per apertura di modali o pannelli. Oltre 400ms si percepisce come lento.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?