Microinterazioni: 15 esempi e come progettarli
Spiegazione delle microinterazioni: una definizione, le quattro parti di Dan Saffer, 15 esempi reali raggruppati per tipologia, regole di progettazione e come costruirle in CSS, Framer Motion, GSAP o ExodeUI.
Punto chiave
Una microinterazione è un momento piccolo e contenuto in un'interfaccia che fa una cosa: mettere mi piace a un post, modificare un'impostazione, confermare un modulo o completare un gesto. Il termine e la sua anatomia derivano da Dan Saffer, che definisce quattro parti. Un trigger lo avvia, le regole decidono cosa succede, il feedback mostra il risultato e i cicli o le modalità governano ciò che fa nel tempo. Le buone microinterazioni sono brevi, rispondono all'input dell'utente e rimangono interrompibili.
Cos'è una microinterazione?
Una microinterazione è la più piccola interazione completa in un prodotto: una singola attività con un inizio, un cambiamento e una fine. Non è un flusso completo. Mettere mi piace a un post è una microinterazione; scrivere e pubblicare un commento è un flusso. L'idea e la sua struttura provengono dal libro Microinterazioni di Dan Saffer, che divide ognuna di esse in quattro parti.
Le quattro parti di una microinterazione
La struttura di Dan Saffer suddivide una microinterazione in quattro componenti. Dare loro un nome è utile perché la maggior parte dei bug e dei movimenti errati risiedono in uno dei quattro, non nell'intero.
Grilletto
L'evento che lo avvia. Avviato dall'utente (tocco, passaggio del mouse, pressione prolungata, trascinamento) o avviato dal sistema (termine del download, arrivo di un errore di rete). Credito: Dan Saffer.
Regole
Cosa succede una volta avviato: stati validi, vincoli come limiti di trascinamento o valori minimo e massimo e sequenza di eventi. Credito: Dan Saffer.
Feedback
Come il prodotto racconta all'utente cosa è successo: la stabilizzazione della primavera, il cambio di colore, la trasformazione dell'icona, l'aggiornamento del testo. È qui che risiede la maggior parte del motion design. Credito: Dan Saffer.
Loop e modalità
Cosa fa l'interazione nel tempo e come le modalità la cambiano. Lo stesso interruttore può comportarsi diversamente in modalità oscura o in un layout compatto senza cambiarne la logica. Credito: Dan Saffer.
Perché le microinterazioni sono importanti
Una microinterazione è il modo in cui un'interfaccia risponde all'utente senza un paragrafo di testo. Conferma che un'azione è stata ricevuta, mostra che qualcosa funziona ancora o spiega cosa è appena cambiato. Quando mancano, lo stesso prodotto sembra più pesante: gli utenti toccano due volte perché nulla gli ha detto che il primo tocco è andato a buon fine, oppure aspettano su uno schermo che non dava segni di progresso. Quelli buoni si sentono più che notati, questo è il punto.
15 esempi di microinterazioni
Questi sono raggruppati in base a ciò che comunicano. Laddove ExodeUI fornisce un esempio corrispondente, viene fornito il nome in modo da poterlo aprire e modificare.
Pulsanti e levette (pressione e stato)
1. Pressione del pulsante: scala a circa 0,92 con il puntatore verso il basso e torna indietro al rilascio (esempio ExodeUI: Jelly Button). 2. Interruttore a levetta: traduzione basata su primavera con un cambio di colore al momento del commit (Gooey Toggle). 3. Interruttore di modalità: un controllo segmentato che fa scorrere il suo indicatore e trasforma l'etichetta attiva (Interruttore di movimento).
Feedback del modulo (convalida e invio)
4. Vibrazione dell'input non valida: una breve spinta orizzontale che dice "controlla questo campo" senza una finestra di dialogo (Inserimento testo Wiggle). 5. Invio in corso: il pulsante diventa l'indicatore di avanzamento, in modo che l'utente non perda mai il posto (pulsante di invio animato). 6. Conferma del successo: una piccola esplosione celebrativa sul pulsante quando l'azione avviene (pulsante di lancio del razzo).
Caricamento e avanzamento
7. Andamento circolare: un anello che si riempie al valore reale e si stabilizza con una molla (Radial Gauge). 8. Livello o misuratore di attività: una barra che reagisce in tempo reale ai dati in ingresso come il livello audio (onda sonora).
Navigazione
9. Menu alternato: un'icona che si trasforma tra due stati e rivela il menu in posizione (Morph Nav). 10. Ingrandimento del Dock: gli elementi vicini al cursore si sollevano e crescono, quindi si sistemano (Dock magnetico). 11. Selezione delle schede: un indicatore che scorre tra le schede invece di lampeggiare (barra delle schede Liquid).
Stati vuoti e di successo
12. Stato vuoto: una piccola illustrazione che si anima contemporaneamente per ammorbidire uno schermo vuoto. 13. Rivelazione del premio: un regalo o un badge che si apre in anticipo quando viene raggiunto un traguardo (Surprise Gift Box).
Pull-to-refresh
14. Pull-to-refresh: scorrimento elastico che segue la resistenza, quindi torna indietro e si stabilizza al rilascio. Il feedback è l'allungamento, non uno spinner.
Feedback in stile aptico
15. Impulso di conferma: una breve scala e un bagliore sull'elemento che rispecchia il tocco tattile sul cellulare, quindi la stessa azione risulta identica su un dispositivo senza motore di vibrazione.
Regole di progettazione che li mantengono buoni
Alcune regole separano una microinterazione che aiuta da quella che dà fastidio.
- Sii breve: la maggior parte viene completata in circa 200-400 ms; il movimento più lungo su un piccolo elemento sembra lento
- Inizia nello stesso fotogramma dell'input; una partenza ritardata rompe il senso di causa ed effetto
- Mantienilo interrompibile: se l'utente inverte l'azione durante il movimento, reindirizza con velocità anziché ricominciare da zero
- Il rispetto preferisce il movimento ridotto: fornisce un fallback statico o con dissolvenza incrociata che comunichi comunque il cambiamento
- Dategli un compito: se l'interazione richiede più di una decisione, è un flusso
Come costruire microinterazioni
Lo strumento giusto dipende da quante piattaforme deve essere eseguita la stessa interazione.
Solo CSS
Ottimo per casi semplici e autonomi: sollevatori al passaggio del mouse, anelli di messa a fuoco e levette guidati da :checked o da un cambio di classe. Le transizioni e i @keyframe sono sufficienti e non c'è nulla da aggiungere oltre al foglio di stile.
Framer Motion o GSAP (web)
Buono quando il movimento ha bisogno di molle, gesti o orchestrazione e deve solo scorrere sul web. Entrambi offrono molle interrompibili e possono essere guidati dallo stato React.
ExodeUI (web, iOS e Android da un unico file)
Utilizzalo quando la stessa interazione deve comportarsi in modo identico in un'app React, un'app SwiftUI e Flutter. Lo crei una volta in un file .exode e il runtime lo riproduce su ciascuna piattaforma, quindi non è necessaria alcuna riscrittura per piattaforma.
Estratto di implementazione in produzione
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Principi chiave da ricordare
- Una microinterazione è un piccolo compito con un trigger, regole, feedback e cicli o modalità, le quattro parti nominate da Dan Saffer
- I più buoni vengono completati in circa 200-400 ms, iniziano nello stesso frame dell'input e rimangono interrompibili
- Il feedback è ciò che fa il lavoro: conferma l'azione e spiega cosa è cambiato, spesso senza alcun testo
- Fornire sempre un fallback a movimento ridotto che contenga le stesse informazioni senza movimento