Progettare microinterazioni intuitive

Jared M. Spool

User Interface Engineering

articolo orginale:

Designing Intuitive Microinteractions

26 Agosto 2014

Ecco come viene trasferito un STD (vedi più avanti – n.d.t.). In questo caso, avevo appena sbloccato il mio iPhone facendo scorrere il dito sopra l’icona di una notifica.

iphone_notification

Nell’iOS6, è possibile sbloccare il telefono utilizzando l’icona accanto a ogni notifica

iphone_lockscreen

Basta toccare la notifica e farla scorrere verso destra e il telefono passa direttamente all’applicazione della notifica.

La persona in piedi accanto a me non aveva mai visto nessuno sbloccare il telefono in quel modo. Aveva sempre avuto un iPhone, fin dall’inizio e non aveva idea che si potesse fare così.

Per forza, come avrebbe potuto? Non ci sono suggerimenti visivi che l’icona di notifica sia abilitata allo scorrimento. Se ve l’avessero detto all’inizio, quando avete preso il telefono, ora probabilmente ve ne sareste dimenticati, a meno che non lo aveste utilizzato sempre.

STD: dettagli trasmissibili socialmente

Ho scoperto che si può sbloccare il telefono in quel modo perché l’ho visto fare a qualcun altro. Era in piedi accanto a me e ha fatto slittare l’icona, facendomi esclamare: “aspetta! Come hai fatto?”

Gli abbiamo dato questo nome: Dettagli Trasmessi Socialmente (in realtà, all’inizio lo chiamammo Funzionalità trasmessa socialmente ma STD faceva molto più ridere di STF).

Le STD sono interazioni del design che gli utenti imparano da altri utenti. Non ci sono istruzioni o indizi nell’interfaccia che vi suggeriscono quella interazione.

Il tipico dettaglio trasmesso socialmente è qualcosa che sia con il drag and drop. Spostare un file dentro un’applicazione, per esempio. Sapere che potete trascinare un’immagine sull’icona di un editor fotografico per aprirlo, è qualcosa che probabilmente non scoprireste da soli. Ve lo dovrebbero dire.

Richiamo alla scala mobile magica delle conoscenze acquisite

Per definizione le funzionalità nascoste dietro i dettagli trasmessi socialmente non sono intuitive. Dal momento che gli utenti non le conoscono, non possono usarle.

La maggior parte di queste funzioni si nascondono nelle microinterazioni, come la funzione di notifica slide-to-unlock. Dan Saffer, che ha scritto un intero libro su microinterazioni dice che sono interazioni contenute in un prodotto, che ruotano intorno a un singolo caso d’uso. Esse hanno un compito di primaria importanza. Il compito principale della funzione slide-to-unlock è quella di sbloccare il telefono, portando contemporaneamente l’utente di quell’informazione a quella determinata applicazione.

Perché le microinterazioni offrano dei vantaggi, devono essere intuitive per l’utente. Come facciamo a sapere se stiamo progettando qualcosa intuitivo? Ecco dove entra in gioco la scala mobile magica delle conoscenze acquisite.

Qualche tempo fa, abbiamo inventato la scala mobile delle conoscenze acquisite per aiutarci a spiegare come funziona il design intuitivo. Quando progettiamo le microinterazioni i punti della scala mobile più interessati sono la conoscenza corrente dell’utente e la conoscenza che è loro richiesta.

Le conoscenze attuali sono quello che il nostro utente già sa quando si avvicina al design. Potrebbe includere l’esperienza precedente con design simili o conoscenze mutuate dal mondo reale (come funziona un libro o il cruscotto di un’auto).

La conoscenza richiesta è quella di cui il nostro utente ha bisogno di acquisire per raggiungere il suo obiettivo. Qualunque cosa il nostro design richieda agli utenti, che essi già non sappiano, è la differenza fra la conoscenza richiesta e le conoscenze attuali.

IMG1

La Scala mobile magica delle conoscenze acquisite aiuta a spiegare cosa dobbiamo fare per rendere intuitive le nostre microinterazioni.

Per rendere le nostre microinterazioni intuitive per gli utenti, dobbiamo trarre vantaggio dalle loro conoscenze attuali. Un design è intuitivo quando le conoscenze correnti e le conoscenze richieste sono vicine. Quindi dobbiamo progettare su quello che i nostri utenti sanno già. Purtroppo, quando progettiamo un STD, ci allontaniamo dal design intuitivo.

Pensare intuitivamente

Se utilizzate l’app Polar di Luke Wroblewski, probabilmente vorrete vedere se sono stati aggiunti dei nuovi sondaggi dai vostri amici. Come molte altre app per gli smartphone, anche lui ha incluso l’interazione pull-to-refresh (tira verso il basso e rilascia per aggiornare – n.d.t.).

Polar cerca di rafforzare le conoscenze correnti dell’utente, offrendogli un piccolo suggerimento che gli dice di “Tirare giù per aggiornare …”, appena accennano a tirare verso il basso. Tirando giù ulteriormente, ricompensa l’utente con una grafica carina (che varia ogni volta) e cambia le istruzioni in “Rilascia per aggiornare …”. Questa interazione, che dura solo un secondo o poco più, rende chiaro cosa fare, facendolo percepire come intuitivo.

pull_refresh

In Polar tirando la pagina verso il basso si avvia l’operazione di aggiornamento

release_refresh

Dopo che l’utente ha tirato abbastanza da vedere la grafica, rilasciando avvia l’aggiornamento

Polar ha ancora il problema che gli utenti devono sapere che prima di tutto devono tirare. Se hanno usato molte altre applicazioni, allora sarà nel loro stato attuale delle conoscenze. Molti utenti potrebbero farlo inconsciamente; la chiamiamo memoria del dito, poiché le dita sembrano fare da sole.

Tuttavia, gli utenti nuovi all’uso del telefono potrebbero non sapere ancora di questa gesture e potrebbe non avergliela detta nessuno. In questo caso non beneficeranno della microinterazione dell’aggiornamento.

Un percorso lungo per ogni scorciatoia (per lo più)

Una soluzione è quella di considerare l’STD come una scorciatoia per la funzionalità. Ciò significa che deve essere previsto anche un percorso lungo, per raggiungere le stesse funzioni. Possiamo trascinare un file sull’icona dell’app per aprirla, ma possiamo anche aprire l’applicazione e utilizzare i comandi File > Apri per raggiungere lo stesso obiettivo. Far scorrere il dito sull’icona di notifica per sbloccare l’iPhone è la scorciatoia, mentre utilizzare il cursore di sblocco standard e aprire l’applicazione è il percorso lungo.

Un altro approccio è quello di aggirare del tutto la scorciatoia; l’app per iPhone della United Airline aveva una microinterazione di pull-to-refresh per aggiornare le informazioni sullo stato del volo e della prenotazione. In un recente aggiornamento del design, hanno cambiato questo comportamento, per utilizzare invece un’icona di aggiornamento che è sempre visibile nella parte superiore dello schermo.

united_app

L’app per iPhone della United Airline ha sostituito la microinterazione pull-to-refresh con un pulsante

Feedback consistente

Che cosa fa una microinterazione? Se vogliamo che sia intuitiva, deve fare ciò che l’utente si aspetta. Tali aspettative derivano anche dalle conoscenze correnti dell’utente.

In molte app per smartphone, la microinterazione pull-to-refresh fa rimbalzare la pagina al suo posto immediatamente. Se i dati vengono aggiornati subito l’utente è felice. E’ quello che si aspettavano.

Ma che succede se non è cambiato nulla? Significa che l’operazione non ha funzionato? (Forse l’utente pensa di non aver tirato giù abbastanza?) O è solo che il server è lento a rispondere?

Alcuni design utilizzano un indicatore animato di elaborazione in corso (come lo “spinner”, la rotella che gira) per indicare che l’app sta ancora recuperando i dati. Alcuni non fanno lo scatto indietro fino a quando il server non ha risposto, lasciando la schermata aperta a fluttuare, per indicare che i dati sono ancora in viaggio. In alcuni casi, viene visualizzato un messaggio di testo che dice: “Controllo degli aggiornamenti …”, o qualcosa del genere.

Le microinterazioni ben progettate offrono all’utente un feedback consistente; tengono vive le loro aspettative, anche se si manifesta in un modo che non avevano mai visto prima. Questa è la base di un modello mentale: causa ed effetto. L’azione dell’utente ha prodotto il risultato atteso.

Microtesto chiaro

Incastonate nella maggior parte dei progetti delle microinterazioni, ci sono le parole. Prendete ad esempio un’app per l’online banking. Ad un certo punto un utente può aver bisogno di cancellare un pagamento automatico. Siccome è una operazione delicata, il sistema deve verificare con l’utente che il pagamento automatico debba effettivamente scomparire per sempre. Tale verifica è un altro tipo di microinterazione: il tipo che deve essere intuitivo.

Un microinterazione di verifica mal progettata può porre la domanda tramite i tasti standard OK e ANNULLA. Ma cosa significa ANNULLA quando stiamo verificando un annullamento? ANNULLA eliminare il pagamento automatico o fa annullare l’annullmento?

payment_button_1

Cosa fa CANCEL in questo caso?

Un microinterazione di verifica progettata meglio potrebbe usare un linguaggio più chiaro per aiutare l’utente a capire le sue opzioni. Dei pulsanti con un testo migliorato potrebbero utilizzare frasi complete come “Sì, procedi e annulla il pagamento”.

payment_button_2

In testo migliorato potrebbe aiutare l’utente a fare la scelta giusta

Progettare microinterazioni intuitive

Al centro di ogni esperienza interattiva ci sono decine di microinterazioni: quei piccoli dettagli che fanno funzionare un design. Usando la nostra conoscenza nello sviluppo dei design intuitivi, possiamo concentrare gli sforzi nel fare le scelte giuste, per aiutare i nostri utenti a capire cosa fare, come farlo e cosa aspettarsi.

Rendere memorabili le microinterazioni

Il pensiero di Dan Saffer sull’identificazione delle microinterazioni così come gli eventi fisici, di sistema e gli eventi manuali scatenati dagli utenti in autonomia, sono i componenti critici necessari per progettare le microinterazioni. E’ gran parte di ciò su cui Dan si concentrerà nel mese di Ottobre, durante il suo workshop a giornata piena UX Immersion: Interactions Designing the Critical Details using Microinteractions. Perché non vi esponete alla metodologia, alla lingua, e alle tecniche necessarie per rendere le microinterazioni memorabili (per tutti le giuste ragioni), partecipando al UX Immersion: Interactions?

Condividete i vostri pensieri con noi

Avete progettato microinterazioni intuitive? Condivideteli con noi sul blog UIE Brain Sparks.

Jared M. SpoolJared M. Spool

Questo articolo è stato ripubblicato con l’autorizzazione di User Interface Engineering. Per altri articoli e informazioni, visitate il sito www.uie.com/

Traduzione di

L’autore
Jared M. Spool è il fondatore di User Interface Engineering. Trascorre il suo tempo lavorando con i gruppi di ricerca presso la sua azienda e aiuta i clienti a capire come risolvere i loro problemi di design. Potete seguire Jared su Twitter @jmspool.

Stampa articolo Scarica il file in formato PDF

Elenco Articoli di Jared M. Spool

Post A Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *