UX migliore attraverso le microinterazioni

Quando si progetta un prodotto, ci sono molti modi per migliorare l'esperienza dell'utente, inclusa la definizione di personas, un'architettura dell'informazione ben strutturata e contenuti scritti in modo ponderato. Ma dopo che questa struttura di alto livello è stata impostata, creare piacere per un utente arriva nei dettagli più piccoli dell'interaction design .

Questi dettagli, noti come microinterazioni , sono momenti individuali nel prodotto progettati per svolgere un singolo compito, migliorando al contempo il flusso naturale del prodotto. Scorrere verso l'alto per aggiornare i dati, apprezzare il contenuto o modificare un'impostazione sono tutte microinterazioni. Possono anche includere semplici animazioni dell'interfaccia utente, ad esempio il modo in cui un menu scorre quando viene toccato o una scheda scivola fuori dallo schermo quando viene strisciata.

Spesso le microinterazioni non vengono nemmeno notate consapevolmente dall'utente, ma i loro sottili dettagli rendono il prodotto più piacevole e facile da usare , e quindi migliorano la sua esperienza utente.

Vantaggi delle microinterazioni

Le microinterazioni e l'animazione dell'interfaccia utente sono così cruciali che possono creare o distruggere un progetto, o come disse Charles Eames, famoso per il design di mobili e l'architettura:

I dettagli non sono i dettagli. Fanno il disegno.

Alcuni vantaggi chiave dell'incorporazione delle microinterazioni in un prodotto sono:

• Creare un effetto emotivo positivo sull'utente grazie a interazioni più fluide dell'interfaccia utente
• Fornire un feedback immediato all'utente in base alle azioni intraprese
• Guidare l'utente attraverso un'app in modo più fluido e intuitivo
• Incoraggiare gli utenti a interagire con un'app rispondendo a una notifica o condividendo contenuti
• Prevenire gli errori degli utenti

Migliori pratiche di progettazione di microinterazione

Ora che abbiamo stabilito una definizione e un contesto su ciò che fanno le microinterazioni e fornito un esempio di come migliorano l'esperienza dell'utente, discutiamo le migliori pratiche per la creazione di microinterazioni.

Identificare e comprendere il problema dell'utente

La prima regola in qualsiasi progettazione dell'esperienza utente è scoprire e comprendere i problemi degli utenti: non è diverso per le microinterazioni. Il modo migliore per capire di cosa ha bisogno l'utente è condurre sondaggi o interviste o osservare il comportamento attraverso la ricerca degli utenti. Il designer Toptal Ivan Annikov approfondisce la comprensione delle esigenze degli utenti nel suo articolo "Going Guerrilla: Suggerimenti e alternative per la ricerca UX a prezzi accessibili".

Mantieni le microinterazioni naturali

L'obiettivo è colmare il divario tra l'utente e un prodotto in modi che sembrino intuitivi e naturali, quindi evita strane animazioni che richiedono troppo tempo per essere caricate o che possono distrarre l'utente. Invece, crea design che scorrono perfettamente con il prodotto. La sottigliezza è la chiave nelle microinterazioni. Non lasciare l'utente perplesso e pensare: "Cos'è stato?"

Testare e ripetere i risultati dei test utente

Anche i designer esperti raramente ottengono i progetti completamente giusti al primo tentativo. Ecco perché l'utilizzo di un processo di test utente e progettazione iterativa è un modo semplice per ridurre i difetti di usabilità prima del lancio del prodotto.

Durante la fase di test dell'utente, le microinterazioni vengono testate e analizzate per l'usabilità e riviste durante la fase di progettazione successiva. Questo processo viene ripetuto fino a quando i problemi di usabilità e i punti deboli non vengono corretti.

Segui la struttura delle microinterazioni

Secondo Dan Saffer, Sr. Staff Product Designer di Twitter e autore di "Microinteractions: Designing with Details", ci sono quattro parti di una microinterazione.

1. Trigger — Un trigger avvia le microinterazioni. Un tipo di trigger è un interruttore a levetta che attiva e disattiva una funzionalità.
2. Regole: una regola determina come una microinterazione risponde a un trigger e definisce cosa accade durante l'interazione. Ad esempio, un'app torcia utilizza un pulsante come grilletto che accende e spegne la luce.
3. Feedback: il feedback dice all'utente cosa sta accadendo durante la microinterazione. Un esempio di feedback è un modulo di iscrizione con convalida in linea: il colore del bordo diventa verde se il campo è compilato correttamente e diventa rosso se qualcosa non è corretto. In questo modo l'utente sa immediatamente che qualcosa è giusto o sbagliato.
4. Loop e modalità: loop e modalità definiscono le metaregole della microinterazione e il modo in cui la microinterazione cambia se utilizzata ripetutamente. Ad esempio, nell'eCommerce, un pulsante "Compralo ora" potrebbe cambiare in "Compra un altro" quando l'utente ha già acquistato l'articolo.

Decostruire il design della microinterazione

Per mostrare il processo di pensiero alla base della progettazione di microinterazioni, decostruiamo una microinterazione di Google: la microinterazione del suggerimento del nome del file in Google Docs.

Questa microinterazione prende la prima riga di un documento e suggerisce quel pezzo di testo come nome per il documento, rendendo il processo di creazione del nome più intuitivo.

Il processo di progettazione di una microinterazione è lo stesso di qualsiasi attività di progettazione: identificare il punto dolente dell'utente e risolverlo. Tenendo presenti le migliori pratiche precedenti, iniziamo a identificare il problema.

Il problema dell'utente

Un modo semplice e intuitivo per organizzare i documenti è semplicemente nominarli in modo descrittivo. Nella maggior parte degli editor di testo, il campo "Assegna un nome al documento" rimane vuoto, anche se esiste una forte possibilità che il nome del file venga eventualmente correlato al contenuto del documento. Questo è un processo che vale la pena affrontare con una microinterazione.

La soluzione di Google

Google Docs gestisce questo in due modi, a seconda delle scelte dell'utente: 1) Gli utenti possono fare clic nel campo del nome e modificare il nome del documento immediatamente prima di digitare qualsiasi contenuto e modificare "Documento senza titolo" con il nome di loro scelta, oppure 2 ) Una volta che un utente digita la prima riga di testo, Google la compila automaticamente come nome del documento. L'utente può mantenerlo così com'è o cambiarlo.

Esaminiamo i dettagli:

Trigger

Potrebbero esserci alcuni possibili trigger per nominare il documento, utilizzando la funzione di menu File > Salva come o premendo cmd+s su un Mac ( ctrl+s su Windows) sulla tastiera come nelle applicazioni desktop. Ma nessuno di questi sfrutta la natura interattiva del web e non migliora particolarmente il flusso degli utenti.

Invece, il trigger principale di Google Docs è semplicemente fare clic sul campo del nome del documento. Lo stato al passaggio del mouse sul campo mostra un suggerimento "Rinomina". Il trigger secondario è File > Rinomina , che evidenzia il campo di input del nome.

Regole

Le regole definiscono cosa succede dopo aver fatto clic sul trigger. In questo caso, la prima riga di testo apparirà come nome del documento. Ma cosa succede se l'utente non vuole avere la prima riga di testo come nome? Quando l'utente fa clic sul campo di immissione del nome, tutto il testo viene selezionato e verrà eliminato premendo qualsiasi tasto, semplificando la creazione di un nuovo nome per l'utente.

Risposta

La modifica del colore del bordo del campo di input è un modello di interazione comune ed è ciò che Google Docs utilizza qui per fornire all'utente un feedback immediato.

Cicli e modalità

L'utente ha creato correttamente il nome del documento e il trigger rimane al suo posto con una differenza fondamentale: il documento è stato nominato.

A questo punto, l'utente potrebbe voler modificare solo alcune lettere o aggiungere una data al nome, anziché modificare l'intero nome precedentemente definito. In questo caso, contrariamente alla regola precedente, la regola per evidenziare l'intero nome del documento è disabilitata.

Risultato

Dopo aver definito il problema e aver focalizzato tutte e quattro le parti di una microinterazione, il risultato è un'esperienza più naturale e facile da usare. La soluzione di denominazione dei file di Google Docs aiuta l'utente a rimanere organizzato con file con nomi appropriati e semplifica il processo di denominazione dei documenti.

Microinterazioni in azione: esempi del mondo reale

Riordinare un elenco di attività

I promemoria di Apple iOS aiutano gli utenti a rimanere organizzati ed eliminare diversi passaggi consentendo loro di toccare, tenere premuto e trascinare un elemento dell'elenco per cambiarne la posizione nell'ordine dell'elenco.

Reagire ai post sui social media

Mettere "Mi piace" ai contenuti facendo clic su un pulsante o un'icona del pollice in su è diventato un modello di progettazione UX comune in molte app e siti Web. Facebook si è basato su questa interazione aggiungendo più opzioni oltre al "mi piace" attraverso una sottile microinterazione.

Evidenziazione del testo con marchio

Nella maggior parte dei browser è possibile sostituire il colore di selezione del testo predefinito. IKEA utilizza questo modello di interazione per aggiungere un sottile dettaglio del marchio evidenziando il testo nei suoi iconici colori giallo e blu.

Condivisione della tua posizione

Google Hangouts presuppone che una delle volte in cui un utente potrebbe voler condividere la propria posizione sia quando qualcuno scrive "Dove sei?"

Quando l'utente visualizza questo messaggio, viene visualizzato un pulsante "Condividi la tua posizione" come opzione contestuale. Possono quindi toccare quel pulsante per inviare automaticamente una mappa della loro posizione all'altro utente.

Scorri per selezionare

Le microinterazioni possono essere utilizzate per rispondere a semplici domande sì o no in un'app. Tinder lo fa facendo scorrere l'utente verso sinistra o verso destra (no/sì) a seconda che gli piaccia o meno la loro possibile corrispondenza.

Espansione della ricerca

L'app Google Inbox non solo raggruppa in modo intelligente la posta con i pacchetti, ma è anche progettata per consentire la ricerca vocale o scegliere tra i contatti più recenti con un solo tocco.

Aggiunta rapida delle informazioni di contatto di un amico

SeatGeek semplifica il processo di compilazione dei moduli compilando automaticamente le informazioni dai contatti di un utente toccando il pulsante "Aggiungi dai contatti".

Ulteriori informazioni sulle microinterazioni

Le microinterazioni sono una parte fondamentale per migliorare l'esperienza dell'utente e sono disponibili molte risorse per saperne di più, alcune delle quali sono elencate di seguito.

Per saperne di più sulle microinterazioni in generale, visita Microinteractions, il sito web creato come accompagnamento per il già citato libro “Microinteractions: Designing with Details” di Dan Saffer. Sul sito sono presenti spiegazioni dettagliate delle microinterazioni e informazioni sull'origine di microinterazioni note, come la correzione automatica, il completamento automatico e il taglia e incolla. Il primo capitolo del libro è disponibile anche come download gratuito.

Per ispirarti alla microinterazione, visita Little Big Details, una raccolta curata di microinterazioni nei prodotti digitali. Mostra esempi di come aziende come Apple, Trello e Stack Overflow implementano microinterazioni e animazioni dell'interfaccia utente.

Per imparare come creare microinterazioni in Framer, leggi Toptal Designer, l'articolo di Wojciech Dobry, Tutorial di Framer: 7 semplici microinterazioni per migliorare i tuoi prototipi.

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• I principi del design e la loro importanza
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Esplorare i principi della Gestalt del design
• Adobe XD vs. Sketch: quale strumento UX è giusto per te?
• I 10 risultati UX utilizzati dai migliori designer