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.
Di cosa parliamo in questo articolo:
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.
Dan Saffer, autore di Microinteractions: Designing with Details, individua 4 fasi che strutturano le microinterazioni:
Il trigger è ciò che da inizio alla microinterazione: un click, uno scroll o anche la notifica di un messaggio
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.
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.
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?
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:
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.
Esistono diverse tipologie di microinterazioni che svolgono diversi tipi di funzione.
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.
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.
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?
É 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.
La gran parte delle schermate di caricamento è noiosa, ma grazie alle animazioni o alle microinterazioni possono risultare più piacevoli.
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
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.
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.
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!