Rompere la simmetria aggiunge contrasto e fascino ai tuoi progetti. Scopri quando e come applicarlo ai tuoi progetti.
La durata asimmetrica dell'animazione migliora l'esperienza utente consentendoti di esprimere la tua personalità e allo stesso tempo di rispondere rapidamente alle interazioni degli utenti. Inoltre, mette in risalto un contrasto che rende l'interfaccia visivamente più accattivante.
- Utilizza tempi di animazione asimmetrici per aggiungere personalità e contrasto al tuo lavoro.
- Preferisci sempre l'interazione dell'utente: utilizza durate più brevi quando rispondi a tocchi o clic e riserva durate più lunghe per volte in cui non lo sei.
Come gran parte delle "regole" dell'animazione, dovresti sperimentare per scoprire cosa funziona per la tua applicazione, ma quando si tratta dell'esperienza utente, gli utenti sono notoriamente impazienti. Come regola generale devi rispondere sempre rapidamente alle interazioni di un utente. Detto questo, nella maggior parte dei casi l'azione dell'utente è asimmetrica, di conseguenza anche l'animazione può esserlo.
Ad esempio, quando un utente tocca per visualizzare una barra di navigazione laterale, dovresti mostrarla il più rapidamente possibile, con una durata di circa 100 ms. Tuttavia, quando l'utente chiude il menu, puoi permetterti di animare la vista un po' più lentamente, ad esempio intorno ai 300 ms.
Al contrario, quando attivi una visualizzazione modale, in genere viene visualizzato un errore o un altro messaggio critico. In questi casi, ti consigliamo di attivare la visualizzazione un po' più lentamente, sempre intorno ai 300 ms, mentre la chiusura, che l'utente attiva, dovrebbe avvenire molto rapidamente.
La regola generale è quindi la seguente:
- Per le animazioni dell'interfaccia utente attivate dall'interazione di un utente, ad esempio visualizza le transizioni o mostrare un elemento, devi avere un'introduzione rapida (breve durata) e una chiusura lenta (durata più lunga).
- Per le animazioni dell'interfaccia utente attivate dal tuo codice, ad esempio errori o visualizzazioni modali, imposta un'introduzione più lenta (durata maggiore) e una chiusura veloce (breve durata).