Quando ti fermi a pensarci, le nostre vite sono solo una serie di interazioni, sia micro che macro.
Chiedere al tuo partner cosa vuole mangiare a colazione è un'interazione tra due persone, ma quando fai colazione hai anche micro interazioni con tutti gli elettrodomestici intorno a te:
– Il tostapane si apre per dirti che il tuo toast è pronto
– Il bollitore fischia per farti sapere che è bollito
– Il timer per le uova emette un segnale acustico per informarti che le tue uova sono cotte alla perfezione
Queste interazioni sono così piccole che viviamo le nostre vite senza mai pensarci. È solo quando le cose non vanno come previsto che ci rendiamo conto del loro significato. Ad esempio, se il tostapane si apre troppo tardi e ti presenta due fette di pane bruciato.
Allora... perché ti stiamo dicendo tutto questo?
Bene, le microinterazioni esistono anche nel mondo online. Rendono il tuo sito Web più accogliente e coinvolgente e offrono ai clienti un elemento di feedback o soddisfazione per il completamento di un'attività, anche se minima.
Al momento della stesura di questo articolo, ci sono 1,9 miliardi di siti Web online e il numero aumenta ogni secondo che passa. È molto di concorrenza. Quindi hai bisogno che il tuo sito web sia il migliore possibile e nel 2022 questo significa microinterazioni!
In questo articolo daremo un'occhiata a tutto ciò che devi sapere sulle microinterazioni, dagli usi comuni ai nostri migliori suggerimenti...
Cos'è una microinterazione?
Secondo Dan Saffer, autore dell'apprezzato libro:Microinteractions:Designing with Details, una microinterazione è:
"Un momento prodotto contenuto che ruota attorno a un singolo caso d'uso o attività. ”
Usa gli esempi di "mettere mi piace a un post" o "impostare un allarme" come microinterazioni comuni che la maggior parte di noi fa ogni giorno.
Saffer spiega anche nel suo libro che le microinterazioni possono essere scomposte in una struttura a 4 parti:
Il primo passo, o "trigger", è ciò che avvia la microinterazione. Ad esempio, se vuoi lavarti le mani con un tocco del sensore, agiterai la mano davanti al sensore.
Il secondo passaggio, o "regole", determina cosa accadrà. Attenendosi all'esempio del tocco, il sensore riconosce le tue mani.
Il terzo passo, o "feedback", è la verifica della microinterazione. Questo è quando il rubinetto inizia a scorrere, quindi puoi lavarti le mani.
Il passaggio finale è "loop e modalità", e questo determina le meta-regole della microinterazione. Se la microinterazione deve essere ripetuta, si attiverà in loop, come un allarme da frigorifero che non smette di emettere segnali acustici fino a quando non chiudi la porta. Le modalità controllano le azioni che non richiedono ripetizioni.
Naturalmente, tutto questo si riferisce a microinterazioni attivate da una persona. Ma non tutte le microinterazioni avvengono in questo modo. Alcuni sono avviati dal sistema, in altre parole, attivati dal software.
Un esempio ben noto è quando inserisci la password sbagliata e vedi la casella di accesso che si sposta un po' da un lato all'altro:
O quando scorri verso il basso un sito web e vedi una fantastica animazione che cattura la tua attenzione:
Quando qualcuno atterra sulla home page di Wyzowl, abbiamo una piccola microinterazione ingegnosa che saluta il nostro nuovo visitatore e poi dà loro una sbirciatina su cosa possiamo fare con l'animazione.
Microinterazioni:usi comuni
Ora che sai cosa sono le microinterazioni, diamo un'occhiata ad alcuni usi popolari di esse nella nostra vita quotidiana...
1. Scorrimento
Sapevi che puoi attivare una microinterazione semplicemente scorrendo verso il basso una pagina web?
Lo scorrimento è una delle microinterazioni online più comuni e spesso diamo per scontata. L'interazione avviene perché tu, come utente, stai cambiando la tua posizione sulla pagina e ricevendo un feedback visivo su questo, in altre parole, vedi ciò che vuoi vedere.
Alcune pagine web ti dicono anche quanto sei lontano, o quanta parte della pagina è rimasta prima di arrivare in fondo, grazie a una barra di scorrimento sul lato destro, come l'esempio sopra da HubSpot. Anche questo è un tipo di microinterazione.
2. Caricamento
Le schermate di caricamento sono una vista familiare a chiunque abbia mai giocato ai videogiochi. Negli anni sono diventati sempre più impressionanti, prendi ad esempio la schermata di caricamento di Skyrim:
La schermata di caricamento presenta diversi modelli 3D con cui gli utenti possono interagire mentre aspettano di giocare.
Il caricamento è un male necessario, ma le microinterazioni possono rendere il processo più coinvolgente. Se hai una funzione sul tuo sito che richiede un po' di tempo per il caricamento, prendi in considerazione l'implementazione di una microinterazione per intrattenere gli utenti nel frattempo. Ecco un esempio da Namelix:
3. Download in corso
Simile al caricamento, down il caricamento è un'altra azione che richiede tempo e, grazie a questo mondo di "gratificazione istantanea" in cui ci troviamo, gli utenti possono essere impazienti.
In effetti, uno studio su 2.000 britannici ha rilevato che la persona media si sente frustrata in soli 16 secondi quando aspetta che qualcosa si carichi.
Una microinterazione può aiutare a intrattenere gli utenti o a mantenere la loro attenzione in attesa del download.
4. Inviti all'azione
Il tuo invito all'azione è così importante. È l'unica cosa vuoi che i tuoi clienti facciano clic, quindi dovresti assicurarti che l'esperienza sia allettante per loro. Non è necessario reinventare la ruota qui (o con microinterazioni ), solo una sottile animazione può essere sufficiente per incoraggiare gli utenti a fare clic:
Questo esempio mostra agli utenti i diversi cicli della luna quando passano il mouse sopra il pulsante, catturando ulteriormente la loro attenzione e, si spera, invogliandoli a fare clic.
5. Notifiche
Uno studio del New York Post ha rilevato che le persone controllano il proprio telefono ogni 12 minuti , sono 80 volte al giorno! E cosa stanno controllando?
Notifiche!
Le microinterazioni possono rendere le notifiche più interessanti e anche più evidenti per gli utenti. Un po' di movimento (come visto sopra) è molto più accattivante di una grafica fissa.
6. Scorrimento
I touchscreen sono una parte così grande della nostra vita che lo scorrimento è quasi diventato una seconda natura. Le microinterazioni aiutano a dare agli utenti un riconoscimento del loro passaggio:
Questo divertente concetto per una microinterazione consente agli utenti di eliminare gli elementi scorrendo. È importante che gli utenti non eliminino mai qualcosa accidentalmente e una microinterazione può assicurarsi che ciò non avvenga richiedendo attenzione e attenzione da parte dell'utente.
7. Interruttori
Il passaggio da una vista all'altra, o da una cartella all'altra, è un'altra microinterazione che le persone utilizzano quotidianamente. Ecco un esempio:
Questo è un modo davvero interessante e fresco per mostrare un interruttore, il che è ottimo per la felicità dei clienti. Ma è anche molto funzionale, il che è estremamente importante quando si tratta di microinterazioni.
8. Passando sopra qualcosa
Potresti aver notato che quando passi il mouse sul pulsante Mi piace su Facebook vengono visualizzate diverse emoticon animate tra cui scegliere:
I social network sono incentrati sul coinvolgimento degli utenti e microinterazioni come questa incoraggiano gli utenti a interagire con i post in modi diversi.
9. Evidenziazione
Una microinterazione di evidenziazione è molto simile al passaggio del mouse sopra qualcosa. Fa semplicemente sapere all'utente che c'è qualcosa che merita la sua attenzione, che si tratti di un'icona cliccabile o solo di un'animazione divertente:
Questo concetto mostra diversi modi in cui le icone possono essere animate quando sono evidenziate, ma le possibilità con questo sono praticamente infinite.
10. Quando si collegano i dispositivi
Alcune microinterazioni sono "piacevoli da avere" e altre sono assolutamente necessarie. Quando colleghi i dispositivi, hai bisogno di una sorta di feedback che ti faccia sapere che la connessione funziona. Probabilmente una microinterazione come questa ti è familiare:
È un esempio dell'aspetto dei dispositivi quando cercano un altro dispositivo a cui connettersi tramite Bluetooth. Questo può richiedere un po' di tempo, quindi le microinterazioni, oltre ad essere funzionali, forniscono anche un po' di intrattenimento agli utenti per evitare che si annoino o si sentano frustrati mentre aspettano.
Esempi di microinterazioni efficaci
Quindi, sembra che le microinterazioni siano praticamente ovunque! Diamo un'occhiata ad alcuni esempi particolarmente efficaci...
1. Condivisione sociale
Potresti non rendertene conto, ma quando condividiamo cose sui social media aspettiamo sempre una "ricevuta", la prova che il post è stato effettivamente pubblicato. Ecco un esempio:
Questo ci è stato inculcato perché è così che funziona la maggior parte dei social network, ma mostra che le sottili microinterazioni sono ovunque e la maggior parte delle volte non le notiamo nemmeno!
2. Digitando...
Un'altra microinterazione comune a cui siamo abituati a vedere è la funzionalità di "digitazione" che ora fa parte della maggior parte delle app di messaggistica. Ecco un esempio:
Questa piccola interazione mantiene gli utenti coinvolti, con la finestra aperta, poiché sanno che una risposta è imminente. Fornisce inoltre agli utenti un'indicazione su quando digitare e quando attendere che l'altra persona finisca di digitare il messaggio.
3. Download in corso
Abbiamo già parlato del download sopra, ma ovviamente alcune microinterazioni sono migliori di altre. Ecco un ottimo esempio di microinterazione di download:
Anche se potrebbe non sembrare, stanno succedendo molte cose qui. C'è un contatore e anche una barra verde che viaggia attraverso, a simboleggiare l'avanzamento del download. Una volta completata la microinterazione, il pulsante di download passa a "Fatto" e diventa verde.
Questo è solo un esempio di come creare una microinterazione di download:le possibilità sono praticamente infinite!
4. Tira per aggiornare
"Pull to refresh" è un'interazione comune sulla maggior parte dei dispositivi intelligenti, ma l'unico modo per sapere che la pagina è stata effettivamente aggiornata è se esiste una sorta di microinterazione per mostrarti che il software ha compreso la tua richiesta.
Questo concetto di design per un'animazione di aggiornamento è ottimo perché è pulito e chiaro, ma anche ben marchiato. Presentare un marchio in modo coerente su tutte le piattaforme può aumentare le entrate fino al 23% .
5. Scorri
Un'altra interazione a cui ci siamo abituati come utenti di software è lo "swipe". Come accennato in precedenza, lo scorrimento è ormai quasi una seconda natura per le persone che utilizzano dispositivi intelligenti. Ecco un esempio:
Questo esempio mostra un modo divertente per eliminare e archiviare le e-mail con un semplice passaggio. I colori rosso e verde consentono agli utenti di distinguere facilmente tra ciascuna opzione.
Creare microinterazioni:5 consigli utili
Finora abbiamo esaminato MOLTE microinterazioni e, se non ne hai sul tuo sito, forse ti senti un po' FOMO (paura di perderti ). Cambiamo quello!
Ecco i nostri 5 migliori consigli per creare microinterazioni...
1. Rendili funzionali
Per prima cosa, le microinterazioni devono avere uno scopo. Dopotutto, dovrebbero incoraggiare gli utenti a interagire con una determinata parte del tuo sito Web, quindi rendili funzionali.
2. Mantieni la semplicità
Si chiamano micro interazioni per un motivo. Dovrebbero essere brevi e dolci. Le microinterazioni servono a migliorare la tua interfaccia utente e rendere tutto più pulito, quindi mantenerle semplici è fondamentale.
3. Segui la struttura
Quando si tratta di microinterazioni, Dan Saffer sa il fatto suo. Quindi assicurati che le tue microinterazioni seguano la sua struttura in 4 parti. Ricorda:Trigger> Regole> Feedback> Loop e modalità .
4. Pensa alla longevità
Una delle cose chiave che abbiamo menzionato più e più volte è che le microinterazioni dovrebbero sembrare così naturali che gli utenti non le notano nemmeno la maggior parte del tempo. E se lo fanno, dovrebbe essere perché hanno avuto un'esperienza piacevole, non perché sono stufi di vedere un'animazione che distrae o eccessivamente elaborata.
Quindi, quando crei le tue microinterazioni, pensa a come resisteranno nel tempo.
5. Sperimenta e prova
Come per tutto ciò che stai lanciando al pubblico, le microinterazioni devono essere testate e migliorate. Assicurati di raccogliere molti feedback degli utenti dalle tue microinterazioni e sperimenta diversi modi di fare le cose.
Pensieri finali
Nel 2022 è sicuro prevedere che gli utenti vorranno di più dalle loro interazioni. E un modo per assicurarti di soddisfare tale esigenza è con microinterazioni sottili, ma utili.
Ci auguriamo che questo articolo sia stato utile per insegnarti tutto su come funzionano e che ti senti ispirato a crearne uno tuo. Se sei pronto per iniziare, creiamo effettivamente microinterazioni come servizio, coprendo tutto, dall'ideazione al design e all'animazione.