Usa un test di utilità, non una lista di tendenze
L'overview di Figma per il 2026 registra 3D immersivo, navigazioni sperimentali, palette vivide, motion, gamification e esperienze assistite dall'AI. Si tratta di esplorazione, non di prova che ogni sito debba riprodurle. Le pagine di servizio e account spesso beneficiano di percorsi prevedibili.
Scrivi il lavoro della pagina prima di scegliere un trattamento. Confronta versioni convenzionali e guidate dalla tendenza sullo stesso compito e sulla stessa misura di successo. L'attenzione da sola non è sinonimo di successo.
Nomina l'azione principale e rendi la sua etichetta, posizione e risultato comprensibili senza hover, gesti o tutorial.
Mantieni una via convenzionale verso i contenuti principali e un modo semplice per rimuovere un miglioramento se le prove sono deboli.
Costruisci sistemi responsivi attorno a contenuti e componenti
Il responsive design mantiene alto valore perché la dimensione dello schermo non predice intento o metodo di input. Google raccomanda breakpoint guidati dal contenuto, evitare overflow orizzontale e non nascondere informazioni solo perché il layout è stretto. Parti dal piccolo e amplia quando il contenuto richiede più spazio.
Le container query adattano un componente allo spazio fornito dal genitore, così una singola card può funzionare sia in una colonna principale sia in una barra laterale. Non sostituiscono le media query: MDN descrive grid, flex e le media query su viewport come approcci di fallback.
Limita le righe di testo troppo lunghe su schermi ampi e verifica che lo zoom non crei colonne ritagliate o scorrimento orizzontale.
Fornisci dimensioni per le immagini in modo che il browser possa allocare lo spazio prima del caricamento e ridurre il movimento del layout.
Fai dell'accessibilità la priorità per le interazioni
Il design che mette l'accessibilità al primo posto riguarda il modo in cui le persone utilizzano un sito, quindi sopravvive alle mode visive. WCAG 2.2 è una Recommendation del W3C. I suoi criteri più recenti offrono casi di revisione concreti: il focus da tastiera non deve essere completamente nascosto da contenuti creati dall'autore a Livello AA; il trascinamento (dragging) necessita di una semplice alternativa per puntatore; e i target per il puntatore hanno un minimo di 24 per 24 CSS-pixel a Livello AA, salvo eccezioni.
Trasforma questi casi in regole di sistema. Non permettere che header, controlli dei cookie, avvii di chat o banner coprano il focus. Mostra uno stato di focus evidente. Quando una lista può essere riordinata tramite trascinamento, offri un'altra operazione semplice. WCAG 2.2 affronta anche aiuto, inserimenti ripetuti e autenticazione accessibile. Possono applicarsi eccezioni legate alla sicurezza; richiedi una revisione qualificata di sicurezza e accessibilità.
Passa con Tab attraverso i percorsi chiave in ogni layout e conferma che il controllo focalizzato sia visibile e identificabile.
Misura i controlli icona compatti e lo spazio tra loro, specialmente in menu e form.
Supportare i password manager e l'incolla può ridurre il carico cognitivo; non indebolire i controlli senza una revisione di sicurezza qualificata.
Usa il motion come guida opzionale
Il motion può chiarire una conferma di salvataggio, un pannello espanso o il passo successivo. Danneggia l'usabilità quando ritarda una scelta, sottrae ripetutamente attenzione ai contenuti o è l'unico modo per comprendere un cambiamento di stato. Sono direzioni, non obblighi.
Rispetta una richiesta di ridurre motion non essenziale. MDN documenta prefers-reduced-motion per rilevare una preferenza utente a rimuovere, ridurre o sostituire il motion. Mantieni le informazioni e i feedback di completamento, ma sostituisci effetti su larga scala, pan, parallasse o autoplay con cambiamenti visivi discreti.
Dichiara l'informazione che ogni animazione comunica; rimuovila se non c'è nulla da comunicare.
Abilita il ridotto motion a livello di sistema operativo e verifica che la pagina resti comprensibile.
Fai di velocità e stabilità criteri di accettazione di design
Le prestazioni sono un vincolo di design, non un compito finale. I Core Web Vitals attuali di Google sono Largest Contentful Paint (LCP) per il caricamento, Interaction to Next Paint (INP) per la reattività e Cumulative Layout Shift (CLS) per la stabilità visiva. Gli obiettivi raccomandati sono: LCP di 2,5 secondi o meno, INP di 200 millisecondi o meno e CLS di 0,1 o meno al 75° percentile, segmentati per mobile e desktop. Sono obiettivi utili, non un sostituto dei test sul compito.
Definisci un budget prima di aggiungere un video hero, font personalizzati, sequenze di immagini, effetti client-side o assistenti di terze parti. I test in laboratorio catturano regressioni prima del rilascio, ma la misurazione sul campo è essenziale perché le condizioni variano.
Riserva spazio per immagini, embed, annunci e elementi dell'interfaccia che caricano tardi.
Usa controlli di laboratorio durante la build e dati real-user dopo il rilascio; rivedi mobile e desktop separatamente.
Tratta interfacce immersive, sperimentali e guidate dall'AI come esperimenti condizionali
3D, navigazione non lineare, narrazione visiva e assistenza conversazionale possono aiutare quando riducono un'incertezza che il contenuto statico non può risolvere. Sono scelte poco adatte come default quando un visitatore cerca un prezzo, una destinazione nota, un form o una risposta. Conserva una via diretta, una descrizione in testo semplice e un percorso utilizzabile mentre un miglioramento è in caricamento o fallisce.
Prototipa prima la versione più piccola possibile. Definisci cosa giustificherebbe mantenerla, per esempio meno selezioni errate o una ricerca di risposte più rapida. Registra il peso degli asset, l'esecuzione degli script, la manutenzione, la dipendenza da vendor, la revisione sulla privacy e le alternative accessibili. Una demo appariscente non dimostra causalità.
Mantieni il testo principale, la navigazione primaria e l'azione principale utilizzabili senza il livello immersivo o l'assistente.
Limita l'esposizione iniziale, confronta i risultati e mantieni una decisione di inversione.
Esegui i cambiamenti di design come modifiche prodotto resilienti
Un layout può modificare la delivery degli asset, il comportamento JavaScript, gli strumenti di consenso e i servizi esterni. Tratta un redesign come una modifica in produzione. Status Is UP supporta l'ottimizzazione proattiva dell'uptime e l'intervento correttivo: identifica dipendenze deboli prima del lancio, imposta controlli, prepara il rollback e risolvi i rischi ricorrenti di delivery. Questo differisce dall'osservare downtime dopo che gli utenti sono stati coinvolti.
Mantieni il percorso precedente finché quello nuovo non supera i controlli su compito, accessibilità e prestazioni. Specifica chi può mettere in pausa una funzione. Riesegui i controlli dopo cambiamenti di contenuto, browser, vendor o campagne.
Verifica i percorsi chiave, gli asset, i form, il comportamento dei consensi e le dipendenze prima del rilascio esteso.
Documenta il percorso di inversione testato, il responsabile della decisione e lo stato previsto del visitatore.