Come le microinterazioni migliorano l’esperienza d’uso di un’app

by • 29 Dicembre 2015 • Design, Focus, IspirazioneComments (2)2240

microinQuesto è il terzo di una serie di articoli dedicati alla progettazione di app mobile curati da Frank Rapacciuolo, UX Designer della startup bolognese Musixmatch.

 

Ogni giorno milioni di persone interagiscono con uno smartphone compiendo diverse azioni: inseriscono la password del proprio account mail, disattivano il volume della suoneria, premono sul pulsante like di un post che hanno letto. Ognuna di queste azioni costituisce una microinterazione.

Qualche giorno fa stavo discutendo con un amico su Facebook Messenger e ho scoperto una cosa stupenda. Volevo inviargli un “like” (il pollice verso l’alto) e per sbaglio ho tenuto premuto il pulsante per qualche attimo in più. Ho scoperto che se si tiene premuto il pulsante, l’icona del like diventa sempre più grande fino a che non si allontana il dito dallo schermo. Sono rimasto lì per qualche minuto a ripetere l’operazione per più volte, é stato troppo divertente. Ero praticamente inebetito.

Like, Facebook Messenger

Thumbs up di Facebook Messenger

L’animazione del pollice che diventa sempre più grande costituisce un buon esempio di microinterazione, perché rispetta tre funzioni molto importanti:

  • Comunicare lo stato e fornire un feedback
  • Rafforzare il senso di manipolazione diretta
  • Aiutare le persone a visualizzare i risultati delle loro azioni

Queste sono le funzioni che deve avere una microinterazione secondo Dan Saffer autore del libro Microinteractions.

Cos’è esattamente una microinterazione?

È un’azione da parte dell’utente che attiva un’altra azione da parte del dispositivo. Tecnicamente è suddivisa in:

  • Trigger: l’avvi0 della microinterazione quando l’utente preme il pulsante.
  • Regole: il modo in cui l’interazione si comporta.
  • Feedback: come il design comunica la microinterazione all’utente.
  • Loops e modalità: determina la lunghezza della microinterazione e come si ripete o si evolve con il tempo.

Gli utenti quando usano il loro smartphone interagiscono con due elementi chiave del design: le funzionalità e i dettagli. Le funzionalità attirano le persone ad usare il prodotto, i dettagli sono ciò che li emoziona e li tiene incollati allo schermo.

Con le microinterazioni si può trasformare qualcosa di noioso e privo di vita in un qualcosa di divertente e giocoso. Un’app che funziona bene, senza bugs e facile da usare è il sogno di ogni designer, ma se aggiungiamo a tutto questo la cura dei dettagli e le microinterazioni, l’app diventa perfetta.

Oltre al “like” di Facebook Messenger c‘è un’altra microinterazione che mi ha colpito: il refresh di Google Chrome.

Pull to Refresh, Google Chrome

– Pull to refresh action, Google Chrome. Animation by Chris Lee

Con questo tipo di interazione risulta molto facile ed intuitivo il refresh della pagina. Non è altro che il proseguimento di un gesto naturale che compiamo istintivamente, ovvero trascinare verso il basso la schermata. Nel caso di Chrome al refresh sono state aggiunte altre due azioni che ci servono quando usiamo un browser : “aggiungi finestra” e “chiudi finestra” .

Oltre alle funzionalità molto utili c’è un fattore che bisogna sempre tener presente quando si progetta una microinterazione, si tratta del fattore gioco. Aggiungere una nuova finestra oppure chiuderla sono talmente gradevoli per la forma, i colori e il movimento che mi sembra di giocarci.

Ritornerò ad aprire Chrome perché posso giocare ad aprire nuove finestre e fare nuove ricerche. Provatelo anche voi, vi farà lo stesso effetto!

Loren Brichter che usò per la prima volta il “pull to refresh” per l’app Tweetie dice:

“Perché l’utente deve fermare lo scorrimento della pagina, sollevare il dito, e poi toccare un pulsante? Perché non continuare il gesto che si sta facendo? Quando voglio vedere contenuti più recenti, scorro la pagina verso l’alto.”

Come si progettano le microinterazioni?

Progettare microinterazioni è davvero molto stimolante per i designer, perché permette di sperimentare nuove soluzioni di design e ricercare nuovi modi per sorprendere gli utenti. Ma per creare una microinterazione bisogna tener presente alcuni aspetti:

  1. Mettiti nei panni degli utenti ed usa tutto ciò che hai a disposizione per capire come utilizza l’app.
  2. Crea animazioni funzionali, che abbiano uno scopo. Animazioni che non abbiano solo una valenza estetica ma che siano in grado di migliorare l’esperienza utente.
  3. Divertiti e diverti. Ciò che prova l’utente quando usa l’app costituisce il motivo per cui ritorna ad usarla. Se l’utente si diverte e prova un’esperienza piacevole, ritorna.
  4. Non essere fastidioso. Troppe animazioni hanno l’effetto contrario sugli utenti, possono infastidirlo e di conseguenza non ritornano.
  5. Usa un linguaggio umano e non tecnico. Una frase ironica e divertente può far dimenticare un momento frustrante come potrebbe essere una pagina vuota all’interno dell’app.

Un altro esempio interessante di microinterazione è possibile vederlo nella selezione del genere all’interno dell’app Beats (ora Music)

Select Genres, Beats

Come chiedere quali sono i generi preferiti dell’utente? Beats lo fa in maniera divertente senza annoiare, rendendo la selezione dei generi un gioco. In questo caso si intuisce cosa stia succedendo: nel momento in cui il cerchio viene premuto il genere è selezionato; contemporaneamente in basso compare un pulsante “next” che permette di proseguire verso il prossimo step ; intorno all’avatar dell’utente appare una progress bar che indica il punto esatto del tour.

Di solito gli utenti tendono a saltare gli steps del tour iniziale senza nemmeno leggere cosa ci sia scritto. Questa microinterazione permette di catturare l’attenzione dell’utente e guidarlo tra le varie fasi. Allo stesso tempo trovandosi nel mezzo di un’esperienza piacevole, l’utente si concede qualche secondo per lasciare delle info su di se.

Conclusioni

Con Material Design e iOS9 abbiamo visto un miglioramento significativo nell’esperienza d’uso e a fare la differenza rispetto al passato sono le microinterazioni. Vediamo sempre di più app con interfacce attraenti, simpatiche e gradevoli.

Le microinterazioni possono essere il fattore determinante per il successo di un’app. Oltre ad essere funzionali perché utili a far capire all’utente cosa stia facendo e dove si trova, le microinterazioni possono anche servire ad attirare l’attenzione dell’utente e generare emozioni gradevoli. Questi sono i fattori che determinano il ritorno sull’app da parte dell’utente.

È fondamentale inoltre progettare animazioni che i developers possono realizzare senza difficoltà. Ultimamente mi è capitato di vedere su Dribbble animazioni realizzate in After Effects davvero molto accattivanti, le ho mostrate ad un collega developer e mi ha subito risposto : “Troppo visionario! non si può fare!”.

 

Pin It

Related Posts

2 Responses to Come le microinterazioni migliorano l’esperienza d’uso di un’app

  1. Alberto ha detto:

    Alcune di queste micro interazioni sono davvero fantastiche, altre forse mi ispirano meno ( quella di Apple Music non mi fa impazzire). Ma a proposito quali erano le interazioni di dribble Si cui parlavi? Sarà che è complicato realizzarle però sarebbe interessante vedere delle idee “ispiranti”.

  2. Frank Rapacciuolo ha detto:

    Ciao Alberto! Ho inserito solo queste tre animazioni perché presentano tutte le caratteristiche che deve avere una microinterazione anche se esteticamente possono non piacere. Altri esempi di microinterazioni puoi trovarle su dribbble cercando la parola “GIF”. Molte saranno sicuramente di ispirazione, ma fai attenzione a non esagerare e chiedi il parere di un developer, se l’animazione deve andare in sviluppo. :)

Lascia un commento

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