Curve di easing e brand: una sola curva dà il tono al prodotto

Una curva di easing è la regola che decide quanto veloce si muove un valore animato in ogni istante della sua durata. In un prodotto fa il lavoro della direzione artistica: una sola curva, usata per ogni drawer, menu e notifica, dà all'interfaccia un carattere che le persone riconoscono prima ancora di saperlo nominare. Due prodotti possono avere la stessa palette, lo stesso carattere tipografico e la stessa griglia e sembrare comunque diversi: uno chiude ogni movimento con una coda lunga e morbida, l'altro scatta in posizione.

Il tema riguarda chi risponde di come si percepisce un prodotto: chi guida il design e sta impostando un design system, il founder la cui app sembra giusta negli screenshot e sbagliata in mano, il responsabile frontend alle prese con quaranta valori di transizione diversi. Sulla carta il risultato è piccolo. Una curva firma, due o tre varianti, tre durate, tutto scritto come token. Nell'uso, il prodotto si muove come una cosa sola.

Cos'è una curva di easing, in pratica?

Ogni animazione lega il tempo all'avanzamento. Allo 0 per cento della durata l'elemento è dove è partito, al 100 per cento è dove arriva. Quello che succede in mezzo lo decide la curva. Una curva lineare copre la stessa distanza a ogni fotogramma, e si legge come meccanica. Tutte le altre accelerano, rallentano o fanno entrambe le cose.

Sul web la curva si scrive in due modi:

• cubic-bezier(x1, y1, x2, y2): quattro numeri che posizionano due punti di controllo. La prima coppia dà forma alla partenza, la seconda all'arrivo. Le parole chiave ease, ease-in e ease-out sono valori predefiniti di questa funzione.
• linear(): un elenco di punti che il browser unisce con segmenti dritti. Con abbastanza punti disegna molle e rimbalzi che una singola curva di Bézier non riesce a fare, perché i valori possono superare 1 e tornare indietro. Funziona in tutti i motori principali da quando Safari 17.2 l'ha introdotta, a dicembre 2023, dopo Chrome 113 e Firefox 112 (MDN).

Le piattaforme native seguono le stesse due idee. Nel 2023 SwiftUI di Apple ha reso una molla (spring) l'animazione predefinita, come spiega la sessione WWDC23 Animate with springs. Una molla si descrive con risposta e smorzamento invece che con punti di controllo, ma sullo schermo resta una curva con una sua forma.

Come fa una curva a dare il tono?

La forma di una curva si legge come un carattere tipografico. Quattro forme coprono quasi tutti i prodotti:

• Partenza rapida, arrivo lungo. L'elemento parte subito e arriva piano. Sembra reattivo e calmo insieme. Ci vive la maggior parte delle interfacce di prodotto.
• Partenza lenta, arrivo rapido. L'elemento esita, poi accelera e se ne va. In entrata sembra pigro. In uscita si legge come deciso, ed è per questo che i design system la riservano a ciò che lascia lo schermo.
• Ease-in-out simmetrico. Accelera e rallenta allo stesso modo. Neutro e un po' meccanico: l'equivalente, nel movimento, di un sans serif di default.
• Overshoot. L'elemento supera il punto d'arrivo e torna indietro. Giocoso, fisico, a volte infantile. Usato una volta segna un momento. Usato ovunque stanca.

I design system pubblici mostrano quanto queste scelte siano intenzionali. Material 3 di Google imposta l'easing standard a cubic-bezier(0.2, 0, 0, 1): partenza velocissima e atterraggio lungo e silenzioso. Per le transizioni principali aggiunge una curva emphasized decelerate, cubic-bezier(0.05, 0.7, 0.1, 1), che copre quasi tutta la distanza subito (token di easing e durata di Material 3). Carbon di IBM va oltre e dà un nome al tono: una curva standard productive, cubic-bezier(0.2, 0, 0.38, 0.9), e una expressive, cubic-bezier(0.4, 0.14, 0.3, 1), con l'indicazione di tenere il movimento espressivo per momenti rari e importanti (linee guida di Carbon sul motion).

Messi uno accanto all'altro, i numeri mostrano i caratteri. La curva di Material dice «già fatto». Quella productive di Carbon dice «efficiente, senza storie». Quella expressive prende fiato prima di muoversi.

La durata è l'altra metà del tono

La stessa curva a 120 ms e a 600 ms dà due prodotti diversi. Secondo Nielsen Norman Group la maggior parte delle animazioni d'interfaccia sta tra 100 e 500 ms: circa 100 ms per un feedback semplice come una checkbox o un toggle, da 200 a 300 ms per cambi più ampi come l'apertura di una modale (NN/g sulla durata delle animazioni). Le linee guida di Apple chiedono un movimento breve e preciso (Human Interface Guidelines, Motion).

Una regola pratica: la curva fissa il carattere, la durata fissa l'energia. Un brand calmo tiene la curva e allunga un po' le durate. Un brand asciutto, da strumento di lavoro, tiene la stessa curva e le accorcia. Se le cambi tutte e due insieme, il confronto non dice più niente.

Perché una curva sola e non una per componente?

È la coerenza a trasformare il movimento in identità. Se il menu usa una curva, il drawer un'altra e la notifica una terza, nessuno percepisce un brand. Si percepisce un prodotto messo insieme da mani diverse, ed è spesso proprio quello che è successo. Una curva firma funziona come una famiglia di caratteri: le varianti ci sono, e si vede che stanno insieme.

In pratica «una curva» vuol dire una piccola famiglia:

1. Standard, per tutto quello che si sposta tra due posizioni di riposo sullo schermo.
2. Entrata, una versione della stessa forma che rallenta, per ciò che arriva.
3. Uscita, una versione che accelera, per ciò che se ne va, di solito più rapida.
4. Se serve, una variante espressiva, tenuta per pochi momenti precisi: un primo risultato, la fine dell'onboarding, una schermata di lancio.

Il modello di Carbon è esattamente questo, tre curve in due modalità. Quello di Material ci si avvicina. Nessuno dei due ha una curva per componente.

Come scegliere la curva firma

Scegliere una curva è una decisione di design, quindi segue gli stessi passi della scelta di un carattere.

1. Scrivi il tono in due parole. «Calmo e preciso», «rapido e caldo», «costante e serio». Due parole bastano a scartare quasi tutte le candidate.
2. Disegna tre o quattro curve candidate in un editor di Bézier (i devtools del browser ne hanno uno) e tienile come semplici numeri.
3. Prova ognuna su tre momenti: la pressione di un pulsante a circa 100 ms, un drawer o una modale a circa 250 ms, una transizione di pagina a circa 400 ms. Una curva che funziona su tutti e tre è una candidata. Una che rende bene solo sulla transizione lunga è decorazione.
4. Confronta sul prodotto vero, mai su un quadrato di prova. Una curva elegante su un riquadro grigio può sembrare lenta su una tabella densa.
5. Ricava le varianti di entrata e uscita dalla curva scelta e scrivi tutto come token.

I token stanno accanto a colori e tipografia nello stesso sistema, con nomi che dicono il ruolo e non la forma, come spieghiamo nell'articolo sul naming dei token:

--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
--motion-ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
--motion-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
--motion-duration-quick: 120ms;
--motion-duration-base: 240ms;
--motion-duration-slow: 400ms;

I valori qui sopra sono quelli di Material, usati solo come esempio leggibile. Il senso del lavoro è arrivare a tre curve che appartengano al prodotto.

Quando un prodotto non dovrebbe usare un easing espressivo?

Quando lo si usa per ore. In una dashboard, in un pannello di amministrazione o in uno strumento per i dati lo stesso pannello si apre decine di volte al giorno. Un overshoot simpatico alla prima apertura toglie attenzione alla quarantesima. Questi prodotti vogliono il lato productive: partenza rapida, durata breve, nessun rimbalzo. Ne abbiamo scritto nel pezzo sulla calm UI.

Il movimento espressivo trova posto dove il tempo non è un costo: pagine marketing, onboarding, stati vuoti che diventano un primo risultato, app consumer usate per minuti e non per ore. Anche lì resta l'eccezione, e la curva standard serve proprio a farla notare.

Movimento ridotto: resta il ritmo, sparisce lo spostamento

Ad alcune persone il movimento sullo schermo provoca vertigini o nausea. Il criterio WCAG 2.3.3, Animation from Interactions (livello AAA), chiede che il movimento attivato da un'interazione si possa disattivare, a meno che non sia essenziale (W3C, Understanding 2.3.3). Il modo più diffuso per rispettarlo è la media query prefers-reduced-motion, che il W3C documenta come tecnica C39.

Ridurre il movimento non obbliga a cancellare il brand. Il criterio riguarda gli spostamenti, e una dissolvenza non è uno spostamento. Un drawer che scorre di 320 px, con il movimento ridotto, può comparire in dissolvenza sul posto con la stessa durata e la stessa curva. Il ritmo resta; lo spostamento sparisce. La nostra checklist sull'animazione funzionale copre il resto delle verifiche da fare prima del rilascio.

@media (prefers-reduced-motion: reduce) {
  .drawer { transform: none; transition-property: opacity; }
}

Come si presenta su un prodotto vero

Prendi un SaaS B2B con schermate pulite e un movimento che è rumore: il default di un framework CSS qui, la molla di una libreria là, un hover da 600 ms aggiunto di corsa. Il lavoro si fa in tre passaggi. Primo, l'inventario: si cercano nel codice tutte le transition, le animation e i valori di easing, e si contano quelli diversi. Secondo, la scelta: il tono in due parole, tre curve candidate, la prova sui tre momenti. Terzo, la migrazione: ogni valore sostituito da un token, ogni componente controllato con il movimento ridotto.

Le schermate restano le stesse. Il prodotto però comincia a sembrare un pezzo unico, e il movimento entra nella stessa direzione artistica di colori e tipografia.