Microinteractions: progettazione con dettagli
"I migliori prodotti fanno bene due cose: caratteristiche e dettagli. Le caratteristiche sono ciò che attira le persone verso il tuo prodotto; i dettagli sono ciò che li tiene lì ", afferma Dan Saffer. L'importanza dei dettagli non può essere troppo enfatizzata. I dettagli fanno in modo che gli utenti amino o odi un'app o un sito web. Le microinterazioni sono quei dettagli. Potrebbero essere facilmente trascurati nello schema di progettazione globale, ma in realtà tengono insieme l'intera esperienza.
In questo articolo, spiegherò che cos'è una microinterazione, perché sono importanti e forniscono alcuni ottimi esempi.
Che cos'è una microinterazione
Le microinterazioni sono momenti delicati incentrati sulla realizzazione di un singolo compito. Quasi tutte le applicazioni intorno a noi sono piene di microinterazioni.
L'esempio più noto di microinterazione è esistito molto prima dell'invenzione dei computer. L'interruttore on / off è spesso la prima microinterazione che le persone incontrano con un prodotto.
Alcuni altri esempi di microinterazioni specifiche includono:
- La notifica delle vibrazioni insieme all'icona della modalità silenziosa sul display quando si disattiva l'audio di un iPhone.
- Il pattern UI pull-to-refresh. Collegando il desiderio dell'utente di trovare più contenuti con l'azione di aggiornamento, l'esperienza diventa più semplice.
Credito immagine: Ramotion
- Il pulsante "Mi piace" sui social network che evidenzia i cambiamenti utilizzando animazioni interattive. Tale feedback informa gli utenti che sono nella lista di coloro a cui è piaciuto il post.
Credito immagine: Dribbble
Perché funzionano
In breve, le microinterazioni migliorano la UX rendendo l'interfaccia utente meno macchinosa e più umana. Molte volte pensiamo al look & feel e al suo rapporto con il design. Quando pensiamo alle microinterazioni, costituiscono praticamente un equilibrio su come gli utenti si sentono riguardo al prodotto, al servizio o alla marca. Le microinterazioni perfezionano il design centrato sull'uomo di:
- Fornire feedback immediato - Il feedback visivo attira il naturale desiderio dell'utente di riconoscimento. L'utente sa immediatamente che la sua azione è stata accettata e desidera essere deliziata da una ricompensa visiva.
- Agire come facilitatori per l'interazione - Le microinterazioni hanno il potere di incoraggiare gli utenti a interagire realmente. Possono guidare gli utenti su come lavorare con l'app.
- La gioia del divertimento: le microinterazioni sono l'occasione perfetta per un piccolo piacere extra nel design senza nulla togliere alla nostra esperienza principale.
Benefici addizionali
Poiché le microinterazioni sono di natura breve, devono essere progettate per un uso ripetuto. Le microinterazioni ben progettate sono in grado di creare:
Ciclo abitudine
Le microinterazioni sono le componenti chiave dei cicli di abitudine. Le abitudini si formano quando le persone eseguono ripetutamente le stesse azioni. Il ciclo abitudinario tipico consiste di tre elementi:
- Cue - Trigger che avvia l'azione
- Routine - In risposta alla stecca, si esegue un'azione
- Ricompensa: un vantaggio derivante dal completamento della routine, motivo per il completamento dell'azione
Più forte è la ricompensa, più forte diventa l'abitudine.
La notifica di Facebook sulla richiesta di nuovi amici è un buon esempio di abitudine: il badge rosso e l'icona sbiancata indicano che c'è una nuova richiesta, che fa clic sull'icona ( routine ) per vedere le informazioni sulla persona ( ricompensa ). Dopo un po ', gli utenti fanno automaticamente clic sull'icona quando vedono il badge rosso.
Momenti di firma
Se fatte bene, le microinterazioni possono essere momenti caratteristici che aumentano la fedeltà dei clienti. I momenti di firma sono microinterazioni che sono state elevate a far parte del marchio. Pensa al pulsante Mi piace di Facebook. Diventa parte naturale dell'interfaccia di Facebook. Se Facebook rimuove improvvisamente questa funzione, gli utenti lo noteranno e penseranno che l'app non funzioni.
Identificare opportunità
Parte della bellezza delle microinterazioni è che possono essere inseriti in una varietà di luoghi, attorno a qualsiasi azione potenziale. Le microinterazioni vanno bene per:
Evidenziando le modifiche
Le microinterazioni possono indirizzare l'attenzione dell'utente . In molti casi le animazioni vengono utilizzate per attirare l'attenzione dell'utente su dettagli importanti (ad es. Notifiche).
Crediti immagine: Dribbble
Ridurre al minimo lo sforzo dell'utente
Il completamento automatico è un ottimo esempio di microinterazione. La digitazione ha un costo di interazione elevato; è soggetto a errori e richiede molto tempo anche con una tastiera completa (e ancora di più su un touchscreen). Il completamento automatico aiuta l'utente a fornire la risposta giusta più velocemente e senza errori tipografici. Mentre digiti ogni lettera, il sistema farà le sue ipotesi migliori sulle parole che stai cercando di trovare.
Crediti immagine: fancy.surge.sh
Fornire feedback per mostrare cosa è stato realizzato
Le microinterazioni possono rafforzare le azioni che un utente sta eseguendo. Seguendo il principio " mostra, non dire" , puoi usare il feedback animato per mostrare cosa è stato realizzato. In Esempio di Stripe , quando l'utente fa clic su "Paga", appare brevemente uno spinner prima che l'app mostri lo stato di successo. L'animazione del segno di spunta fa sentire l'utente come se facesse facilmente il pagamento e gli utenti apprezzano tali dettagli importanti.
Fornire informazioni sullo stato
Il primo principio euristico di usabilità di Jakob Nielsen afferma: il sistema dovrebbe sempre tenere gli utenti informati su ciò che sta accadendo. L'indicatore di digitazione nella chat è un ottimo esempio di microinterazioni che fornisce informazioni sullo stato. Appare sullo schermo del tuo amico mentre stai componendo un messaggio in chat.
Crediti immagine: Dribbble
Convalida i dati dell'utente
Una delle parti più importanti e spesso trascurate del design del modulo è la gestione degli errori . È la natura umana a commettere errori, e la tua forma probabilmente non è esente da errori umani. Gli utenti non amano quando passano attraverso il processo di compilazione di un modulo solo per scoprire alla submission, che hanno commesso un errore. Questo è il punto in cui la microinterazione di validazione gioca è parte di una forma user-friendly. La convalida in linea in tempo reale informa immediatamente gli utenti sulla correttezza dei dati forniti. Questo approccio consente agli utenti di correggere gli errori che fanno più velocemente senza dover attendere fino a quando non premono il pulsante di invio per vedere gli errori. Se fatto bene, può trasformare un'interazione ambigua in una chiara.
Conclusione
Il design è nei dettagli. Anche piccoli dettagli meritano molta attenzione, perché tutti questi piccoli momenti costituiscono la sensazione, si uniscono per formare un bellissimo prodotto olistico.
"La differenza tra i prodotti che amiamo e quelli che semplicemente tolleriamo sono spesso le microinterazioni che abbiamo con loro." - Dan Saffer
Se ti interessa l'esperienza utente, devi preoccuparti delle microinterazioni. Perché il tuo prodotto è buono quanto la minima microinterazione che le persone hanno con esso.