Microinterazioni: esempi pratici nel 2021
Scritto da Matteo il 2 Marzo 2021

Microinterazioni: esempi pratici nel 2021

Come utente ogni giorno vedi centinaia di microinteazioni e non ci fai caso, ma quando non ci sono te ne accorgi subito!
Pensa di aprire il tuo browser preferito e non trovare più la barra dello scroll, sono sicuro che proveresti attimi di panico, terrore puro, ansia, sudorazione fredda... ok forse sto esagerando ma certamente noteresti la mancanza e ti chiederesti il perché hanno eliminato una cosa così utile.

1. Cosa sono le microinterazioni?

Una microinterazione è esattamente come ogni interazione con un dispositivo, è usata per dare un feedback all'utente che cerca ogni secondo di capire cosa succede quando compie una determinata azione.
Come umani abbiamo la tendenza di aspettarci che succeda qualcosa quando premiamo un bottone aggiungiamo un prodotto al carrello.

Fu Jakob Nielsen ad elaborare 10 euristiche che racchiudono i principi generali dell'usabilità. Una di queste è relativa alla visibilità dello stato di sistema; questa euristica afferma che ogni sistema deve mantenere gli utenti informati dello stato delle loro azioni mediante un feedback.
Gli umani hanno questa tendenza sì: si aspettano che quando premono un bottone, fanno scroll su una pagina o fanno "swipe" verso sinistra, succeda qualcosa.

Un esempio? Se sbaglio ad inserire un dato o una password, il bordo rosso del campo si illumina quando sbagli password o immetti una mail non valida.

2. La struttura di una microinterazione

Dan Saffer, autore di Microinteractions: Designing with Details, individua 4 fasi che strutturano le microinterazioni:

La struttura di una microinterazione

2.1 Trigger

Il trigger è ciò che da inizio alla microinterazione: un click, uno scroll o anche la notifica di un messaggio

2.2 Regole

Le regole determinano cosa può o non può fare l'utente. Sono regole invisibili, non scritte. Per questo devono essere intuitive e necessitare di un feedback.

2.3 Feedback

Il feedback permette agli utenti di capire cosa succede. Ad esempio inserisco la password sbagliata e il campo diventa rosso. Oppure arriva un nuovo messaggio e compare una notifica.

2.4 Loop

Quest'ultima fase determina come e con quale frequenza o modalità la microinterazione dovrà partire. Si definisce quanto la microinterazione sarà lunga o ripetuta, ad esempio l'icona per il caricamento.
In pratica: cosa succede alla microinterazione quando le condizioni cambiano?

3. Perché le microinterazioni sono importanti?

Le micorinterazioni sono...Micro! Quindi perchè curarsene? Un Web Designer che la pensa così con molta probabilità causerà notevoli perdite al suo cliente.

L'attenzione ai dettagli è ciò che differenzia un buon sito o una buona app da un ottimo sito o ottima app!

Le microniterazioni giocano un ruolo fondamentale nell'esperienza utente:

  • rendono più facile l'interazione tra utente e sito web/app
  • migliorano la navigabilità
  • migliorano l'umore e diminuiscono il senso di frustrazione
  • comunicano informazioni aggiuntive
  • incoraggiano la condivisione o il commento ai tuoi contenuti
  • attirano l'attenzione degli utenti
  • rendono l'esperienza più emozionale!

Quando le microinterazioni sono utilizzate nella giusta misura e in maniera intelligente possono generare sentimenti di positività nei confronti del brand che le utilizza. Questa "eseprienza" viene chiamata Effetto Halo, e ovviamente può essere un'arma a doppio taglio.

4. Esempi di microinteraction

Esistono diverse tipologie di microinterazioni che svolgono diversi tipi di funzione.

4.1 Azioni rapide

Sono azioni che permettono di risparmiare click e tempo. Un esempio di azione rapida o quick action è il tener premuta l'icona di un'app sullo smartphone: facendolo comparirà un menu con azioni, appunto, rapide. Generalmente sono le azioni più utilizzate all'interno dell'app.

Microinterazione | Azioni rapide

4.2 Gestures: swipe

Queste microinterazioni permettono di salvare spazio sullo schermo e sono utilizzate principalmente sugli smarphone o sui dispositivi touch.

Un esempio di swipe è la cancellazione o l'archiviazione delle mail, oppure il rispondere ad una chiamata.

Microinterazione mail

4.3 Fornire Feedback

Come già accennato fornire un feedback è fondamentale per evitare frustrazione o incompresione.
Durante lo sblocco dei telefoni succede spesso di sbagliare Pin e prontamente ci viene mostrata una microinterazione e un messaggio di errore.
In mancanza di questi elementi rimarremmo spaesati e confusi sul da farsi: ho sbagliato pin? Era un Bug? Dovevo fare un'altra azione?

Microinterazione errore

4.4 Indirizzare l'attenzione degli utenti

É importante mostrare agli utenti cosa devono fare e quando devono farlo.
Telegram ad esempio mostra l'icona di invio del messaggio solamente quando il messaggio è stato almeno in parte scritto.

Ux design telegram
Ux design telegram

4.5 Animazioni di caricamento

La gran parte delle schermate di caricamento è noiosa, ma grazie alle animazioni o alle microinterazioni possono risultare più piacevoli.

Microinterazione caricamento

Anche l'attesa durante il caricamento di file di grandi dimensioni o immagini particolarmente grandi può essere una noia mortale:
creare barre di avanzamento o caricamenti può aiutare l'utente a percepire meno lunga e noiosa l'attesa

Microinterazione dowload

5. Come si creano le microinterazioni?

Esistono diversi programmi utili allo scopo. Ovviamente per creare animazioni complesse e super personalizzate ci vogliono skills specifiche, ma con un po' di impegno si può creare qualcosa di piacevole e funzionale anche in modo gratuito.

5.1 Per le animazioni web

Nel web si utilizzano animazioni create con il linguaggio CSS o Javascript oppure con apposite librerie come Anime.js

Si possono utilizzare programmi di animazione avanzata come After Effect per creare animazioni e poi esportarle per il web tramite bodymoving o Lottie.

Così facendo si potrà avere un controllo totale sugli elementi animabili associando trigger ed eventi specifici.

5.2 Per mockup

Ho un'idea davvero originale per una microinterazione con un pulsante di download. Quindi voglio creare un mockup/ un prototipo della mia idea.

Per farlo ci sono programmi più semplici da utilizzare rispetto ad After Effect o scrivere codice.

Quello che preferiamo è Adobe XD, completamente gratuito, che permette di creare prototipi animati funzionanti! Alternative sono Origami Studio e Protopie.

Se l'articolo ti è piaciuto faccelo sapere nei commenti!
Alla prossima!

Scritto da Matteo
UX/UI designer.

Lascia un commento

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