Microinterazioni: Quando Aiutano, Quando Disturbano
Un pulsante che cresce leggermente si guadagna il suo posto; il movimento in ogni angolo di una pagina no. Dove tracciare il limite in un design.
Team rabbitclipPubblicato: 5 min di lettura
In breve
Una microinterazione è la piccola risposta che una pagina dà all'azione di un visitatore, un clic, un hover, uno scroll: un pulsante che cresce leggermente, un segnale breve che conferma l'invio riuscito di un modulo, un menu che si apre con una transizione morbida. Si guadagna il suo posto nel momento in cui porta un'informazione: questo è stato cliccato, questo è andato a buon fine, questo ora è aperto.
Lo stesso movimento, aggiunto solo come decorazione senza alcuna informazione, diventa rumore. Ogni scheda che ruota entrando nella pagina, ogni titolo che si digita da sé lettera per lettera, fa attendere il visitatore invece di intrattenerlo; questi pochi secondi di ritardo si sommano e fanno sembrare lenta una pagina, indipendentemente dal suo reale tempo di caricamento.
Di seguito tre argomenti: quale movimento si guadagna il suo posto, dove si trova il limite, e come rispettare una preferenza di movimento ridotto.
Quale movimento porta un'informazione
Una microinterazione funzionale risponde a una domanda che il visitatore si pone: quello su cui ho cliccato ha davvero funzionato, ho inviato correttamente il modulo, questo menu è aperto o chiuso. Un breve indicatore di caricamento che compare quando si clicca il pulsante di invio di un modulo d'ordine dice al visitatore che l'azione è in corso; senza di esso, un visitatore potrebbe cliccare una seconda volta, il che può causare un problema reale come un invio duplicato.
Un piccolo segno di spunta verde che appare quando un campo del modulo di iscrizione di un club sportivo viene compilato correttamente rientra nella stessa categoria; mostra al visitatore che sta procedendo bene e riduce la voglia di tornare indietro a controllare tutto prima di terminare.
Dove si trova il limite
Un movimento ha superato il limite non appena dura più di qualche secondo, non appena un'animazione diversa gira in ogni angolo della pagina, o non appena distoglie l'attenzione dal contenuto reale. Ogni elemento visivo che scorre da una direzione diversa sulla landing page di uno studio di videogiochi può impressionare la prima volta, ma alla seconda visita si percepisce come lentezza.
Una misura pratica: il movimento dovrebbe terminare prima che il contenuto inizi a essere letto. Se un elemento sta ancora scorrendo o tremolando mentre un visitatore ha già iniziato a leggere una frase, la durata va accorciata, oppure il movimento va rimosso del tutto.
Rispettare una preferenza di movimento ridotto
Alcuni visitatori tengono attiva l'impostazione «riduci movimento» a livello di sistema operativo; di solito è un'impostazione di accessibilità per chi prova vertigini o nausea causate dal movimento. Il browser trasmette questa preferenza al sito tramite un segnale chiamato prefers-reduced-motion (MDN Web Docs, prefers-reduced-motion); un sito può leggere questo segnale e disattivare le grandi animazioni di scorrimento e rotazione, mantenendo solo le transizioni davvero funzionali, come un cambio di colore.
Anche lo standard WCAG raccomanda che il movimento innescato da un'interazione possa essere disattivato; questo rientra tra i requisiti di accessibilità, non tra le preferenze di design (W3C WCAG 2.1, Animation from Interactions). Saltare questa impostazione sulla landing page di un'app può lasciare un visitatore sensibile al movimento del tutto incapace di usare la pagina.
Come testarlo nella pratica
Prima di andare online, un sito dovrebbe essere navigato sia in modalità normale sia in modalità movimento ridotto, verificando in entrambe che le funzioni chiave, inviare un modulo, aprire un menu, spostarsi tra le pagine, continuino a funzionare senza rompersi.
- Attivare «riduci movimento» a livello di sistema e ritestare il sito
- Chiedersi, per ogni singolo movimento, se porta davvero un'informazione
- Mantenere la durata del movimento sotto un secondo, rimuovere i loop ripetuti
- Assicurarsi che le animazioni di ingresso terminino prima che il contenuto inizi a essere letto
Il movimento può essere anche una scelta di marchio
Per alcuni marchi, un movimento misurato fa parte dell'identità; il sito di un'agenzia creativa o di uno studio di videogiochi può portare un linguaggio del movimento più giocoso della media. Per un'azienda di facility management o uno studio legale, la stessa intensità di movimento può giocare contro la serietà che il marchio vuole trasmettere. La quantità giusta dipende dal settore e dal tono che il visitatore si aspetta.
Stati di caricamento: skeleton screen o spinner
Ciò che compare a schermo mentre il contenuto carica è di per sé una decisione di microinterazione. Uno spinner dice solo «attendi»; uno skeleton screen mostra un contorno pallido di come apparirà il contenuto, dando al visitatore un'idea migliore di cosa sta aspettando.
Blocchi grigio chiaro a forma di scheda che compaiono mentre carica un elenco prodotti generano meno senso di attesa di una schermata vuota o di un semplice spinner; la differenza si nota soprattutto quando un caricamento supera il secondo.
Quando usare suono e vibrazione come feedback
Una leggera vibrazione su un dispositivo mobile può confermare che un'azione si è completata in modo ancora più chiaro di un movimento visivo; ma se usato eccessivamente, questo stesso feedback diventa fastidioso. Funziona meglio se riservato a momenti davvero importanti, invece che attivato a ogni singolo tocco.
Il feedback sonoro è una scelta più rara e rischiosa su un sito web; un suono inatteso può spaventare un visitatore, specialmente in un ambiente silenzioso. Se viene aggiunto un suono, serve comunque un modo chiaro per disattivarlo.
Sulla landing page di un'app, mostrare la vera vibrazione o il vero feedback sonoro del prodotto in un video è di solito una scelta più sicura ed efficace che aggiungere lo stesso effetto sul sito stesso.
Il movimento aiuta quando porta un'informazione, e stanca quando si accumula come decorazione. rabbitclip limita il movimento alla sua funzione in ogni progetto e supporta di default una preferenza di movimento ridotto; come il sito attuale usa il movimento può essere rivisto insieme.
Domande frequenti
Cos'è prefers-reduced-motion?
Una preferenza che un visitatore attiva a livello di sistema operativo; il browser la trasmette al sito, che può quindi ridurre di conseguenza i movimenti più grandi.
Ogni animazione va rimossa in modalità movimento ridotto?
No, solo quelle grandi, scorrimento, rotazione, zoom; le piccole transizioni come un cambio di colore possono restare.
Un'animazione di ingresso al caricamento della pagina è un problema?
Non se termina prima che il contenuto inizi a essere letto; oltre qualche secondo, inizia a far sembrare lenta la pagina.
La quantità giusta di movimento dipende dal settore?
Sì, un linguaggio del movimento giocoso si adatta bene a un'agenzia creativa ma può giocare contro il tono di uno studio legale alla stessa intensità.
Uno skeleton screen va usato per ogni caricamento?
No, aggiunge poco per caricamenti molto brevi (meno di mezzo secondo); il vero beneficio emerge quando il caricamento supera il secondo.
