Feedback, il cuore dell’interazione digitale

Anni fa, a NewYork, i passeggeri che volevano prendere la metropolitana dovevano inserire delle monetine nei tornelli. Le monetine cadendo “inghiottite” nel tornello emettevano un tipico tintinnio: il segnale per i passeggeri che il tornello era aperto e potevano raggiungere i treni della metropolitana.
Quando le monetine vennero sostituite con le tessere magnetiche come metodo di pagamento, i passeggeri ebbero molte difficoltà perchè, non sentendo più il rassicurante tintinnio delle monetine, non sapevano se il tornello fosse aperto o meno.

Ciò creò confusione e proteste finchè la società che gestiva gli ingressi della metropolitana, non intervenne realizzando anche per le tessere magnetiche feedback sonori e visivi per comunicare ai passeggeri l’apertura dei tornelli.

Questo episodio è illuminante perchè spiega molto bene quali caratteristiche deve avere l’interazione uomo -macchina:  quando interagiamo con una macchina o un dispositivo, affinchè l’interazione sia efficace, è necessario che all’azione (inserire monetine nei tornelli) segua un feedback (il tintinnio delle monetine) e quindi il risultato atteso (il tornello è sbloccato).

Tale schema vale anche per le interazioni digitali e, come vedremo in questo articolo, è indispensabile per offrire un’esperienza utile, comprensibile e piacevole nelle applicazioni o siti web.

Tempo «digitale»

Il «tempo» che un’app impiega a rispondere all’azione dell’utente, gioca un ruolo fondamentale nella costruzione dell’interazione utente- prodotto, contribuendo ad offrire un’esperienza positiva o frustrante.

Quando navighiamo pochi secondi possono fare una grande differenza e ciò dipende dal fatto che abbiamo limiti di memoria e di attenzione e amiamo avere tutto sotto controllo.

Quante volte ci è capitato di spazientirci quando clicchiamo su un bottone o un link e non accade nulla? Nessun segnale, nessuna reazione.

Nell’interazione con un’interfaccia digitale, se a seguito di una nostra azione non cambia nulla, proviamo disappunto e ci formiamo un parere negativo verso il sito che stiamo navigando.

Dalla tabella –che riporta i risultati della ricerca Nielsen&Norman – risulta chiaramente che, per creare delle interazioni efficaci tra utente e prodotto, è necessario progettare interfacce altamente reattive. O mostriamo immediatamente il risultato atteso o in alternativa un feedback per intrattenere l’utente nell’attesa ed evitare così che abbandoni il sito.

Tipologia dei feedback

Vediamo alcune best practice.

1. Bottoni e cards.
I bottoni o call to action una volta «toccati» devono cambiare colore e forma dando così l’impressione di essere stati premuti.
Anche gli oggetti come le cards si trasformano in risposta all’azione dell’utente come vediamo nell’immagine sotto.

2. Messaggi di conferma.
La trasformazione grafica dell’oggetto va accompagnata da un messaggi del tipo: “azione andata a buon fine”,  “prodotto aggiunto al carrello”,  “articolo salvato nei preferiti”,  “transazione conclusa con successo”, come si vede nell’esempio qui accanto.

3. Loading icon.
Quando viene compiuta un’azione che richiede del tempo per visualizzare il risultato, utilizziamo delle icone animate, dette loading icons che hanno il duplice scopo di:

• comunicare che azione dell’utente è stata «ricevuta» ma che è necessario attendere per avere un risultato
• intrattenerlo durante l’attesa

Le loading icons vengono impiegate nel caricamento delle pagine quando non è possibile mostrare fin da subito tutti i contenuti e quando una call to action del tipo «aggiungi al carrello» o «procedi al’acquisto» ha bisogno di tempo per essere elaborata.

Material Design

Animazioni

Le animazioni contribuiscono a rendere le interazioni più efficaci perchè hanno la capacità di rendere più “viva” e “reattiva” l’interfaccia; ciò vale soprattutto quando navighiamo sui dispositivi mobili e siamo generalmente più distratti e soggetti a svariate interruzioni.
In particolar modo le animazioni sono utili per:

• Guidare l’attenzione dell’utente
• Visualizzare i risultati dell’azione
• Comunicare il cambio di status, come vediamo nel video qui sotto da Material Design

Una danza fluida e armoniosa

La progettazione delle interazioni (interaction design)  è paragonata non a caso anche a una danza: ai passi dell’utente devono corrispondere quelli della app.

Una danza per essere tale deve avere ritmo, essere fluida e armoniosa.

Il consiglio è quindi di curare ogni aspetto del prodotto in modo che ad ogni input dell’utente corrisponda una risposta che non dovrà essere tardiva ma immediata e significativa.

Costanza Mosi
UX Designer
LinkedIn