#Design

Micro interazioni: un valore aggiunto per la User Experience

luca maraschio
Luca Maraschio
settembre 2019 - 6 minuti
copertina blog palazzina creativa

La mamma ce lo diceva sempre: “Non si giudica un libro dalla copertina”.

Tuttavia, è proprio quello che noi designer dobbiamo fare ogni giorno.

Quando ci approcciamo alla progettazione di un sito web o di un qualsiasi applicativo digitale è proprio questo il fine, rendere la copertina del nostro libro quanto più bella e attraente possibile agli occhi dell’utente, attraverso la riorganizzazione di contenuti, elementi di design, progettazione dello user flow e tutte le armi che abbiamo nella nostra fondina.

E adesso chi glielo dice a mamma che i nostri libri vengono giudicati dalla copertina?

Spesso, però, ci troviamo a navigare un sito web, cambiare pagine, cliccare di qua e di là per ritrovarci a dire: “che noia”. In realtà, c’è un modo per evitare tutto ciò: creare movimento.

Quindi, via libera all’utilizzo di animazioni e, in particolare, di micro-interazioni.

Cosa sono le micro-interazioni?

Le micro-interazioni sono eventi di un singolo elemento che hanno un unico scopo: coinvolgere l’utente per offrire una User Experience soddisfacente e che non lo spinga ad abbandonare la navigazione nel breve termine. Le possiamo trovare nei siti web, applicazioni e dispositivi in generale.

gif decorativa

In parole povere le micro-interazioni sono tutti quegli elementi di design che troviamo in un sito web che, se azionati, ci restituiscono un feedback visivo o di altro tipo.

Vediamo alcuni esempi concreti:

immagine micro interazionimicro interazioni

Ma quindi sono acrobazie visive fini a sé stesse?

Che bello, si muove tutto!

Le micro-interazioni sono solo belle da vedere? Assolutamente no.

Come dicevamo in precedenza, le micro-interazioni hanno lo scopo di migliorare la User Experience e portano plus concreti ai nostri prodotti digitali rendendo più interattive le nostre “copertine”.

Ok, ma concretamente perché il cliente dovrebbe investire per creare un prodotto digitale che prevede la progettazione e lo studio di questi elementi?

Ve lo spieghiamo in 6 semplici motivi:

  • Danno controllo tramite un feedback istantaneo;
  • offrono all’utente una guida “invisibile”;
  • rendono l’esperienza dell’utente molto più gratificante;
  • migliorano la navigazione sul sito, app o qualsiasi altra interfaccia digitale;
  • aumentano di molto la probabilità di conversione;
  • incoraggiano la condivisione, il commento o il gradimento dei contenuti.
gif hover title

Provate a immaginare un utente che naviga un sito web nel quale, cliccando un pulsante, non succede assolutamente niente. Probabilmente rimarrebbe qualche secondo ad attendere per poi, scocciato, abbandonarlo.

Circostanze del genere capitano quando, una volta cliccato il pulsante, il sito si trova a caricare una nuova pagina ma l’utente non viene messo in condizione di recepire questo messaggio. Probabilmente aggiungendo un semplice loader, una barra di caricamento o qualsiasi altro feedback, l’utente comprenderebbe facilmente lo stato di caricamento e, di conseguenza, rimarrebbe nel sito invece di abbandonarlo.

Quindi, come avrete capito, le micro-interazioni, oltre ad essere esteticamente piacevoli e coinvolgenti hanno lo scopo primario di fornire un’informazione su ciò che sta accadendo.

La domanda che bisogna sempre porsi prima di decidere se inserire una micro-interazione o meno è: stiamo aggiungendo significato?

 Se la risposta è “no” allora stiamo sbagliando strada, l’animazione fine a sé stessa ha poco senso e potrebbe rivelarsi controproducente.

gif decorativa

Cosa caratterizza una micro-interazione?

Secondo Dan Saffer le micro-interazioni sono formate da quattro componenti principali:

1.Trigger: è il punto di partenza della micro-interazione, consente all’utente di impegnarsi qualora l’utente lo desideri. Può essere il click del mouse, il passaggio del puntatore su un elemento, lo Swipe in una direzione sui dispositivi touch, ecc. Ci possono essere due diversi tipi di trigger:

  • Trigger di sistema: quando una condizione viene verificata automaticamente dal sistema. Per esempio quando si riceve una notifica.
  • Trigger manuale: quando l’utente interagisce con il sistema. Per esempio lo “Slide to Unlock” dei cellulari;

2.Regole: definiscono cosa deve succedere una volta che il trigger è stato azionato;

3.Feedbackinforma l’utente su cosa sta accadendo in risposta al trigger e fornisce informazioni sullo stato in cui ci si trova;

4.Loopdefinisce quanto la micro-interazione deve durare e se c’è la necessità di essere ripetuta.

In definitiva le micro-interazioni dovranno essere le nostre migliori amiche e compagne di viaggio nella definizione della UX nei nostri progetti ma, soprattutto, sono un concetto di design human-centered.

Quindi, mamma, finalmente hai capito che lavoro faccio…restauro libri!