Come progettare microinterazioni One-Tap

Le microinterazioni sono la "salsa segreta"? che rendono le app e i siti web brillanti per gli utenti. Questi piccoli dettagli rendono facile impostare un allarme, premere un pulsante o semplicemente capire meglio 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 in quanto questi impegni diventano più integrati con l'attività quotidiana.

Come progettate microinterrazioni con un solo tocco che delizieranno gli utenti? Ecco alcune idee.

Animare un pulsante

Ti ricordi la prima volta che hai notato Facebook come in Messenger? Hai toccato i pollici? icona ed è cresciuto nella casella per la persona con cui stavi chattando. Ti ha fatto sorridere? Ti è piaciuto un po 'di movimento?

Animazione semplice, prima del tocco per incoraggiarlo o dopo il tocco per mostrare che la microinterazione sta funzionando è un modo infallibile per creare qualcosa che gli utenti vogliono toccare. Le animazioni di piccole dimensioni forniscono informazioni su ciò che sta accadendo in modo che gli utenti si sentano a loro agio e sicuri dei propri ruoli nel ciclo di feedback.
non
L'animazione dovrebbe essere semplice quanto la microinterazione stessa. Mantieni i movimenti semplici e fluidi e, veloce all'inizio e alla fine. Aggiungere una valutazione su IMDb segue questo principio; passa il mouse sopra il punteggio e visualizza rapidamente il numero di stelle da aggiungere mentre ti sposti su ciascuna di esse. Toccare per fare clic per terminare e confermare l'azione.

Fornire opzioni

È una lezione di UX che risale alle lettere d'amore delle elementari e delle scuole materne. Ti piaccio? Controlla sì o no.

Grandi microinterazioni possono essere progettate usando lo stesso concetto. Offri agli utenti due scelte rapide. Toccare per iniziare (o interrompere) un'azione; tocca per attivare. Gli utenti vogliono fare scelte e sentirsi in controllo delle esperienze digitali, ma non vogliono essere impantanati con schermi multipli 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:

  • Capita 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 ci fossero voluti tre tap per spegnere un allarme o se ci fosse un ritardo di 2 secondi per silenziare la suoneria durante una chiamata durante una riunione.)

Il passaggio rapido tra un mi piace (o diverso) o il seguito su Instagram è un esempio perfetto. Ecco quanto dovrebbe essere veloce la tua microinterazione.

Design per la ripetizione

Una delle cose che rende la microinterazione diversa da altri elementi interattivi nell'interfaccia utente è che verranno utilizzati più e più volte. Le microinterazioni in genere non sono progettate per un uso singolo. (Quante volte hai toccato il pulsante a forma di cuore di Instagram nell'ultima ora?)

Progetta questa azione ripetitiva, ma l'azione non dovrebbe sembrare un movimento ripetitivo. Anche se questo 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 troverà mai ripetitivo da completare.

L'utilizzo di schemi utente, animazioni e stili di icone comunemente accettati ti aiuterà a progettare 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.

Rendilo leggibile e affidabile

Ecco il passaggio che viene dimenticato troppo spesso: le istruzioni all'interno delle microinterazioni devono essere leggibili e facilmente riconoscibili.

Leggibile si riferisce a qualsiasi testo o istruzione in quanto si riferiscono alla microinterazione. Le parole devono essere facili da vedere e scansionare. Dal punto di vista del design, è fondamentale selezionare un buon carattere tipografico e assicurarsi che ci sia abbastanza spazio attorno alle parole e un sacco di contrasto tra caratteri e sfondo. 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 si legge nello stesso modo in cui le persone parlano. Dovrebbe essere evitato linguaggio poco comune o fraseggio scomodo. Le istruzioni all'interno dei campi del modulo che spariscono mentre un utente inizia a digitare è un ottimo esempio. Ciò è particolarmente vero quando la formulazione utilizza un tono o una voce che l'utente si aspetta dal marchio o dal sito Web con cui stanno interagendo.

Concentrarsi sui dettagli

Una microinterazione è uno dei molti dettagli di progettazione che costituiranno la tua interfaccia. È necessario prestare particolare attenzione ad ognuno di essi.

Le microinterazioni dovrebbero essere parte del design 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 design, crea un insieme di regole di stile e di design per le microinterazioni all'interno di un'app o di un sito Web in modo che le azioni siano coerenti in tutto il design e facili da trovare e coinvolgere dagli utenti. Più piccolo è l'elemento - o interazione - i dettagli più importanti diventano.

Keep it Simple

Dirlo un milione di volte non è abbastanza, mantienilo semplice. Ci sono troppi progetti troppo difficili da usare. Potresti pensare che sia bello, ma gli utenti no. Amano 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 ciclo di feedback per azioni, istruzioni e visuali semplici e un messaggio che è comunicato in modo chiaro ed è facile da capire.

Non smettere di sviluppare

Progettare microinteractions è un processo evolutivo. Perché questo è un concetto così nuovo, sta cambiando tutto il tempo. Ci sono nuove idee e nuovi modi per creare qualcosa che gli utenti vogliono toccare.

Stare sulla buona strada con l'evoluzione delle microinterazioni torna alle basi che Dan Saffer ha definito per la prima volta. (Ha anche scritto uno dei libri più autorevoli sull'argomento, "Microinteractions: Design with Details.?) Le microinterazioni includono un processo in quattro fasi che inizia con un'azione di trigger, regole su come funziona l'interazione, un ciclo di feedback in modo che l'utente sappia qualcosa è accaduto e loop e modalità che determinano 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. Progettare una microinterazione richiede una considerazione e una pianificazione speciali.

Ricorda, le migliori microinterazioni generalmente funzionano con un singolo tocco e sono elementi a cui gli utenti non pensano nemmeno di impegnarsi, anche se lo faranno regolarmente.