UX e animazioni per creare un prodotto che gli utenti vogliono usare.

Spostare il focus sull'utente.

Dopo mesi passati a costruire feature, la piattaforma funzionava — ma rifinire l'esperienza non era mai stata la priorità. Eppure anche un prodotto digitale è un oggetto fisico: pop-up, bottoni e modali nascono da qualche parte, reagiscono quando li tocchi, si spostano, escono di scena. Il movimento è l'informazione che li tiene insieme — dice da dove nasce una cosa, dove va, cosa è cambiato — e quando manca l'utente fa più fatica, anche se non sa dirlo.

L'utente non riceveva le giuste risposte.

Prima di scrivere una riga di CSS ho fatto un censimento del movimento esistente: cosa si muoveva, con quale curva, e cosa spariva e basta. Il quadro era coerente — nel senso peggiore: quasi tutto usava i default del browser, o niente.

Rendere il movimento portatore di informazioni.

Il principio alla base di ogni intervento: il movimento deve dare un'informazione — da dove nasce una cosa, dove va, cosa è cambiato — mai attirare l'attenzione su di sé. Il filo conduttore è una curva sola, quella delle tendine di iOS: parte decisa, si posa morbida. Definita una volta nei token, usata ovunque.

Perché parlare quando puoi provare?

Il movimento non si può valutare da uno screenshot. Queste cinque demo ricreano gli interventi principali con i valori reali andati in produzione — stesse curve, stesse durate, stesse origini. Gli scenari sono separati: prova il prima, poi il dopo, e senti la differenza.

Stack, curve di animazione e come sono implementate.

Lo stack è Solid.js, con Kobalte per le primitive dei componenti — popover, select, tooltip: accessibili, e con gli stati giusti da animare — e Motion dove una transition non basta. Ma il cuore è il vocabolario di token che rende le scelte ripetibili: i valori che senti nelle demo qui sopra sono questi.

:root {
  /* la curva delle tendine di iOS: parte decisa, si posa morbida */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* ease-out deciso per i micro-feedback (press, hover) */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);

  --dur-press: 160ms;  /* feedback al tocco */
  --dur-exit: 200ms;   /* uscite di scena */
  --dur-layout: 300ms; /* sidebar e cambi di layout */
}

.button {
  transition:
    background-color var(--dur-press) var(--ease-out-strong),
    scale var(--dur-press) var(--ease-out-strong);
}

.button:active {
  scale: 0.97; /* la proprietà indipendente: non tocca il transform esistente */
}

.drawer[data-state='open'] {
  transform: translateX(0);
  transition: transform var(--dur-exit) var(--ease-drawer);
}

.drawer[data-state='closing'] {
  transform: translateX(100%); /* stessa curva dell'ingresso, al contrario */
  transition: transform var(--dur-exit) var(--ease-drawer);
}

const [state, setState] = createSignal<'open' | 'closing' | 'closed'>('open');

// chiudere non smonta: passa per lo stato intermedio
const close = () => setState('closing');

// il contenuto resta al suo posto per i 200ms dell'uscita;
// solo a transizione conclusa il pannello viene smontato davvero
const onTransitionEnd = () => {
  if (state() === 'closing') setState('closed');
};

@media (prefers-reduced-motion: reduce) {
  .popover {
    /* la dissolvenza resta: qualcosa è apparso */
    animation: fade-in var(--dur-press) linear;
    /* lo spostamento no */
    transform: none;
  }
}

Ridisegnare la gestione dello stato e generalizzare l'intervento.

Le uscite si scontrano con il ciclo di vita dei componenti. Un pannello smontato nell'istante stesso in cui si chiude non lascia niente da animare: per questo le tendine sparivano di colpo. Per arrivare all'obiettivo ho dovuto riorganizzare la gestione dello stato — in meglio: la chiusura è diventata uno stato esplicito del componente, non un evento istantaneo, che tiene in vita pannello e contenuto per i 200ms dell'uscita; lo smontaggio arriva solo a transizione conclusa. Nell'ATS, dove la tendina si svuotava prima ancora di chiudersi, la stessa riorganizzazione ha risolto anche quello.

Generalizzare senza rompere niente. Il punto non era mai il singolo componente: era ridefinire i primitivi condivisi — bottone, popover, select, tendine — perché ogni rifinitura si propagasse da sola a tutta l'app e restasse mantenibile nel tempo. Ogni modifica è stata additiva — uno stato attivo, una curva nei token, mai un cambio di layout — e gli interventi sono stati chiusi uno alla volta, con i fix successivi emersi da review e da uso reale. Così un intervento in un punto solo ha rifinito 162 file.

Cosa è cambiato davvero.