Come progettare microinterazioni con un tocco
Le microinterazioni sono la "salsa segreta" che fa brillare app e siti Web per gli utenti. Questi piccoli dettagli semplificano l'impostazione di un allarme, la pressione di un pulsante o semplicemente la comprensione di come lavorare con un prodotto digitale.
Il segreto è che le migliori microinterazioni sono elementi a cui l'utente probabilmente non pensa nemmeno. Accadono in un istante, spesso con un solo tocco su uno schermo mobile. Nonostante la piccola natura dell'interazione, quindi "micro", il valore è immenso per gli utenti poiché questi impegni diventano più integrati con l'attività quotidiana.
Come si progettano le microinterazioni con un solo tocco che delizieranno gli utenti? Ecco alcune idee.
Esplora Envato Elements
Animare un pulsante
Ti ricordi la prima volta che hai notato Facebook come in Messenger? Hai toccato l'icona "pollice in alto" ed è cresciuto nella casella con la persona con cui stavi chattando. Ti ha fatto sorridere? Quel piccolo movimento ti ha dato un po 'di gioia?
L'animazione semplice, prima del tocco per incoraggiarlo o dopo il tocco per mostrare che la microinterazione funziona, è un modo sicuro per creare qualcosa che gli utenti vogliono toccare. Le piccole animazioni forniscono informazioni su ciò che sta accadendo in modo che gli utenti si sentano a proprio agio e sicuri dei propri ruoli nel circuito di feedback.
non
L'animazione dovrebbe essere semplice come la microinterazione stessa. Mantieni i movimenti semplici e fluidi e, rapidi per iniziare e finire. L'aggiunta di una valutazione su IMDb segue questo principio; passa con il mouse sopra la valutazione e vedi rapidamente il numero di stelle da aggiungere mentre ti sposti sopra ciascuna. Tocca per fare clic per terminare e confermare l'azione.
Fornisci opzioni
È una lezione di UX che risale alle lettere d'amore della scuola elementare e dell'asilo. Ti piaccio? Controlla sì o no.
Grandi microinterazioni possono essere progettate usando lo stesso concetto. Offri agli utenti due scelte rapide. Tocca per avviare (o interrompere) un'azione; tocca per attivare / disattivare. Gli utenti vogliono fare delle scelte e sentirsi in controllo delle esperienze digitali, ma non vogliono impantanarsi con più schermi per arrivarci.
Crea azione immediata
Il modo migliore per garantire che gli utenti interagiscano con la tua microinterazione? Il risultato dovrebbe essere immediato. Il risultato desiderato dovrebbe:
- È successo con un solo tocco
- Fornire l'azione desiderata entro 0, 1 secondi
L'immediatezza delle microinterazioni è vitale per il loro successo. Poiché la natura di questi elementi è piccola, qualsiasi ritardo nell'azione infastidirà gli utenti. (Pensa a quanto sarebbe frustrante se bastassero tre tocchi per spegnere un allarme o se ci fosse un ritardo di 2 secondi per silenziare la suoneria durante una riunione.)
Il passaggio rapido tra un like (o unlike) o seguire su Instagram è un esempio perfetto. Ecco quanto dovrebbe essere veloce la tua microinterazione.
Design per ripetizione
Una delle cose che rende la microinterazione diversa da alcuni altri elementi interattivi nell'interfaccia utente è che verranno utilizzati più e più volte. Le microinterazioni in genere non sono progettate per un utilizzo singolo. (Quante volte hai toccato il pulsante a forma di cuore di Instagram nell'ultima ora?)
Progettare per questa azione ripetitiva, ma l'azione non dovrebbe sembrare un movimento ripetitivo. Anche se potrebbe sembrare molto da prendere, si riduce alla natura intuitiva del rubinetto. È ovvio e naturale? Se un utente non deve pensare a un'azione, non lo troveranno mai ripetitivo da completare.
L'uso di modelli, animazioni e stili di icone comunemente accettati aiuterà a guidare il modo in cui si progettano le microinterazioni. Non reinventare la ruota qui; semplificare agli utenti il completamento delle attività con un solo tocco e senza dover grattarsi la testa su come farlo.
Renderlo leggibile e affidabile
Ecco il passaggio che viene dimenticato troppo spesso: le istruzioni all'interno delle microinterazioni devono essere leggibili e comprensibili.
Leggibile si riferisce a qualsiasi testo o istruzione in relazione alla microinterazione. Le parole devono essere facili da vedere e scansionare. Dal punto di vista del design, selezionare un buon carattere tipografico e assicurarsi che ci sia abbastanza spazio attorno alle parole e un sacco di contrasto tra lettere e sfondo sono fondamentali. Stare lontano da caratteri tipografici condensati, sottili o nuovi che non sono facili da leggere a colpo d'occhio.
Relatable si riferisce al testo che legge allo stesso modo in cui le persone parlano. La lingua non comune o il fraseggio imbarazzante dovrebbero essere evitati. Le istruzioni all'interno dei campi del modulo che svaniscono quando un utente inizia a digitare è un ottimo esempio. Ciò è particolarmente vero quando il testo utilizza un tono o una voce che l'utente si aspetta dal marchio o dal sito Web con cui sta interagendo.
Focus sui dettagli
Una microinterazione è uno dei molti dettagli di progettazione che costituiranno la tua interfaccia. È necessario prestare particolare attenzione a ciascuno di essi.
Le microinterazioni dovrebbero far parte del progetto generale. Ma devi pensare a queste piccole azioni anche in altri modi. Dalle scelte di colore alla dimensione degli elementi con cui un utente deve interagire, questi dettagli incoraggeranno l'azione o indurranno gli utenti ad abbandonare il design per qualcos'altro.
Come faresti con qualsiasi altro elemento di progettazione, crea un insieme di regole di stile e di progettazione per le microinterazioni all'interno di un'app o di un sito Web in modo che le azioni siano coerenti durante la progettazione e facili da trovare e coinvolgere per gli utenti. Più piccolo è l'elemento - o l'interazione - più dettagli importanti diventano.
Keep it Simple
Dirlo un milione di volte non è abbastanza: mantienilo semplice. Ci sono troppi design troppo difficili da usare. Potresti pensare che sia bello, ma gli utenti no. A loro piace la prevedibilità, la coerenza e la semplicità.
Più è facile interagire con qualcosa, più è probabile che gli utenti tocchino effettivamente un pulsante. Ecco perché le azioni con un solo tocco sono così importanti. Come fai a sapere se il tuo design è abbastanza semplice? Ha bisogno di una struttura definita con un circuito di feedback per azioni, semplici istruzioni e elementi visivi e un messaggio che sia comunicato chiaramente ed sia di facile comprensione.
Non smettere di sviluppare
La progettazione di microinterazioni è un processo evolutivo. Perché questo è un concetto così nuovo, sta cambiando continuamente. Ci sono nuove idee e nuovi modi per creare qualcosa che gli utenti vogliono toccare.
Rimanere in pista con l'evoluzione delle microinterazioni risale alle basi che Dan Saffer ha definito per la prima volta. (Ha anche scritto uno dei libri più autorevoli sull'argomento, "Microinterazioni: progettare con i dettagli".) Le microinterazioni includono un processo in quattro fasi che inizia con un'azione di innesco, regole su come funziona l'interazione, un ciclo di feedback in modo che l'utente sappia qualcosa è accaduto e cicli e modalità che dettano come funzioneranno le interazioni future o cosa verrà dopo. Tienilo a mente e sarai sulla strada del successo della microinterazione.
Conclusione
Ci sono molti pezzi per progettare qualcosa di così piccolo. Quindi, non pensare di poter creare una microinterazione in cinque minuti e andare avanti. La progettazione di una microinterazione tiene in particolare considerazione e pianificazione.
Ricorda, le migliori microinterazioni generalmente funzionano con un solo tocco e sono elementi con cui gli utenti non pensano nemmeno di interagire, anche se lo faranno regolarmente.
