Micro interazioni e siti web: come e perché crearle

Quando si parla di esperienza utente, stiamo in realtà parlando di micro interazioni.

Dopo che i dispositivi touch screen sono usciti sul mercato, le micro interazioni hanno iniziato a diffondersi ovunque. Tuttavia, gli utenti sentivano ancora la necessità di interagire sui propri dispositivi mobile allo stesso modo con cui interagivano con un pc.

Oggi le cose sono cambiate e molte micro interazioni rappresentano uno standard. Solo concentrandosi sulla loro ottimizzazione è possibile avere un vantaggio competitivo e influenzare in modo significativo la conversione di un utente.

[easy-tweet tweet=”micro interazioni web: come e perché #venetoformazione” url=”http://bit.ly/21axx9d”]

Quali sono le micro interazioni?

La maggior parte di noi utilizza uno smartphone o un tablet e quotidianamente compie delle micro interazioni. Quando scorriamo la pagina verso il basso per aggiornare un’app e appare l’icona di caricamento, abbiamo compiuto una micro interazione. Possono passare in secondo piano, ma sono queste azioni che ci fanno percepire che un evento è stato completato in modo corretto. L’esperienza utente, possiamo dire che misura il grado di soddisfazione che l’utente riconosce, quando compie una micro interazione.

I quattro pilastri della Micro Interaction Design

Il trigger (l’innesco) è quello che avvia il processo di micro interazione. Un trigger è un intervento manuale, come fare tap su un’icona, ma può anche essere integrato nel sistema che si verifica ogni volta che viene completata un’azione. Ad esempio, il suono che si sente quando si riceve un messaggio è il risultato di un trigger di sistema. Quando l’innesco è attivo, esso impegna le regole dell’interazione. Le regole coordinano cosa può o non può fare una micro interazione. Dal momento che queste regole non sono percepibili dall’utente è necessario un feedback.

Il feedback quindi ci informa come la micro-interazione sta lavorando. Ad esempio, la vibrazione che produce lo smartphone quando viene impostata la modalità silenziosa. Il segnale informa che è stata attivata una regola in modo corretto.

I loops o modes sono le fasi finali della micro interazione. I Loops definiscono per quanto tempo una micro-interazione verrà ripetuta, ad esempio l’icona di caricamento. I modes sono invece delle azioni non comuni, indispensabili per continuare il processo, come l’inserimento di dati geografici per visualizzare le previsioni del tempo.

Come progettare le micro interazioni?

Prima di tutto bisogna considerare che le micro interazioni devono essere a misura d’uomo.
Devono essere, quindi, intuitive e facili da capire. L’interazione utente-device deve svilupparsi nel modo più naturale possibile.

Ecco alcune linee guida generali per la progettazione di micro interazioni:

• Prima di tutto è necessario conoscere il potenziale utente per rendere l’esperienza più familiare e più umana possibile.
• Considerare eventuali errori umani e tentare di impedirli, assicurandosi che il processo di interazione non si interrompa accidentalmente.
• Evitare il disordine. Utilizzare funzioni già disponibili sulla piattaforma invece di aggiungere elementi nuovi. Ad esempio, il cursore, un quadrante, un pulsante, oppure una barra di scorrimento possono essere programmati rispettando il feedback della micro interazione.
• Parlare con la stessa lingua degli utenti. Se la micro interazione viene innescata da un testo, bisogna utilizzare un linguaggio il può comprensibile possibile. Il gergo tecnico è accettato solo se l’utente finale è in grado di capirlo.
• Le micro interazioni devono resistere alla prova del tempo. Non c’è niente di peggio di una micro interazione che si sviluppa fastidiosamente ogni volta che viene attivata. Evitare assolutamente le animazioni esagerate e fuori luogo.
• Usare con giudizio le animazioni collegate alle micro interazioni, in modo che la funzionalità non ne risenta. Ad esempio, quando si vuole cancellare un app su iPhone, tutte le icone iniziano ad agitarsi come se fossero spaventate. Si tratta di un’animazione piacevole ma non pregiudica l’usabilità.
• I colori sono importanti sia ne web design che nella progettazione delle micro interazioni. Bisogna assicurarsi che i vari elementi si sposino in modo corretto e siano disposti ordinatamente. La micro interazione è solo una piccola parte del design di una pagina web.
• Verificare, infine, se e in che modo l’interazione evolverà in futuro.

Micro-Interazioni nella Social Media e Applicazioni

Le micro interazioni sono incredibilmente importanti nei dispositivi mobile, in particolare le applicazioni. Se ci pensate, sono questi elementi che condizionano il nostro giudizio positivo o meno e di conseguenza influenzano le decisioni degli altri utenti tra un’applicazione e le sue dirette rivali. Nel caso delle applicazioni social, più semplici e intuitive sono, meglio è.

Image Source: Favorite Animation By John Noussis..

Il motivo è semplice. Quasi tutti gli utenti accedono a queste applicazioni da un dispositivo mobile. Il pulsante mi piace su Instagram è un esempio perfetto perché è immediatamente comprensibile, facile da trovare, e offre un feedback senza interrompere altre funzioni.

Quando effettuo un doppio tap sull’immagine e il cuore appare per un breve momento, si capisce subito che cosa significa.

Utilizzando le micro-Interazioni per insegnare qualcosa di nuovo

Le micro-interazioni non sono utilizzate solo per migliorare la funzionalità di un sito web, ma possono insegnare agli utenti come interagire con un nuovo concetto. Per esempio, quando una foto-gallery è inserita in un layout non comune, una micro interazione può insegnare agli utenti come scorrere le immagini e navigare altre pagine del sito. Ad esempio, una semplice freccia vi può indicare la direzione da seguire per visualizzare le immagini oppure un’animazione.

In questo modo, le micro interazioni vanno oltre la semplice conferma di un evento, ma istruiscono l’utente su come interagire con un sito web.

Image Source: Cut Copy Share Delete By Srikant Shetty.

Micro-interazioni e call-to-action

Un altro ottimo modo per utilizzare le micro interazioni è nelle call-to-action (CTA).

Sappiamo tutti che le CTA sono importanti per confermare una interazione tra utente e azienda o brand, come una condivisione, un acquisto, una iscrizione, ecc.

Per questo motivo, utilizzare delle CTA creative con micro interazioni uniche e interessanti potrebbe incoraggiare gli utenti a fare clic, condividere e soprattutto spezzare la monotonia di CTA tutte uguali, come fossero state progettate da un’unica mente.

Nell’esempio riportato, l’animazione si attiva una volta che il puntatore del vostro mouse si trova nei pressi della CTA.