Cosa sono le microinterazioni e quanto ti costano

C’è una buona probabilità che tu non abbia notato l’ultima microinterazione con cui hai avuto a che fare. Magari un campo che è diventato verde quando hai scritto l’email giusta, un cuore che si è gonfiato per mezzo secondo dopo il tuo clic, un pulsante che si è abbassato appena come se lo avessi premuto davvero. Cose che funzionano proprio perché non chiedono di essere notate: fanno il loro lavoro, ti dicono che è successo qualcosa, e si tolgono di mezzo.

Poi però c’è l’altra metà del web, quella dove ogni elemento rimbalza, pulsa, scivola e si illumina al passaggio del mouse, e dopo dieci secondi vorresti solo che la pagina stesse ferma. Stessa tecnologia, esperienza opposta. E la differenza non è semplicemente una questione di gusto, ma una questione di scelte prese bene o prese “tanto per”.

Se hai cercato “microinterazioni” sperando in un po’ di chiarezza, avrai già incontrato una decina di articoli che si somigliano in modo sospetto: la stessa definizione, le stesse quattro fasi dallo stesso libro, lo stesso cuore di Instagram come esempio. Noi quel cuore lo lasciamo dov’è.

Qui interessa un’altra domanda, che è anche quella che ci poniamo ogni volta che progettiamo un sito: non “quante microinterazioni aggiungere?”, ma “quali interazioni hanno senso di esistere?”.

Un feedback non è (soltanto) una decorazione

Prima di decidere quali microinterazioni meritano spazio, conviene mettersi d’accordo su cosa sia una microinterazione, perché il termine è diventato un contenitore in cui finisce dentro di tutto.

Sostanzialmente le microinterazioni sono piccole risposte visive, animate o sonore che un’interfaccia restituisce a un’azione dell’utente o a un cambiamento di stato del sistema. Fai qualcosa, il sito reagisce, tu capisci che la tua azione è arrivata a destinazione. Scrivi in un campo e appare una spunta. Trascini un file e una barra ti dice a che punto sei. Passi il mouse su un pulsante e quello cambia colore per segnalarti che sì, lì si può cliccare. Un mezzo secondo che, preso singolarmente, può facilmente sembrare trascurabile.

Se vuoi un modo ordinato di guardarle, quello più citato lo si deve a Dan Saffer, che nel suo libro sulle microinterazioni le scompone in quattro momenti: un trigger che le innesca (un clic, uno scroll, una notifica del sistema), delle regole che stabiliscono cosa succede, un feedback che lo comunica all’utente, e dei loop e modi che definiscono quanto dura e come si ripete. Lo citiamo anche noi, sì, come fanno tutti — la differenza è che a noi questo schema interessa per quello che rivela, non per riempire un paragrafo: anche la più innocua delle animazioni è una piccola macchina con quattro parti da pensare. Il che è esattamente il motivo per cui non è mai gratis come sembra.

La differenza sta tra una microinterazione che risponde e una che semplicemente si muove. La prima è un feedback: esiste perché tu hai fatto qualcosa e meriti di sapere com’è andata. La seconda è decorazione: si attiva perché qualcuno ha deciso che quell’angolo della pagina era troppo immobile. Sembrano colleghi ma fanno mestieri completamente differenti tra loro. Una lavora per l’utente, l’altra lavora per l’estetica.

Attenzione: le decorazioni non sono vietate, anzi! Devi però essere consapevole che queste due tipologie di microinterazioni hanno lo stesso costo, pur avendo differente valore. Confonderle è il modo più rapido per ritrovarsi un sito pieno di animazioni di cui nessuno sente davvero il bisogno.

Quando più avanti parleremo di cosa giustifica una microinterazione, sarà sempre questa la linea da tenere d’occhio: sta rispondendo a qualcosa o si sta solo facendo notare?

La domanda implicita a cui una buona microinterazione risponde

Quando usi un sito, per quasi tutto il tempo ti stai facendo domande senza accorgertene. Ho cliccato o non ho cliccato? Sta succedendo qualcosa o si è bloccato? Questo l’ho già aggiunto al carrello o lo sto aggiungendo una seconda volta? Ho compilato il campo come voleva lui o sto per beccarmi un errore? Sono domande che ovviamente non formuli ad alta voce, perché te le risolvi in un istante guardando lo schermo, ma se lo schermo non ti risponde quell’istante si allunga… potenzialmente all’infinito.

Il vero mestiere di una microinterazione è rispondere a queste domande prima ancora che tu finisca di fartela. Il pulsante che si abbassa quando lo premi conferma che il clic è arrivato. Lo spinner che parte dopo l’invio di un form ti dice che la macchina si è messa in moto e non sei tu a dover ricaricare la pagina. Il bordo del campo che diventa rosso mentre scrivi, invece di aspettare che tu prema “invia” per poi sgridarti, ti corregge il tiro quando correggerlo costa ancora poco. In tutti questi casi la microinterazione non sta abbellendo niente: sta togliendo un dubbio.

È un criterio sorprendentemente affilato. Davanti a qualsiasi animazione che stai per aggiungere a un sito puoi chiederti: a quale domanda dell’utente sta rispondendo? Se la risposta arriva subito, quella microinterazione ha un posto.

C’è poi una categoria a parte, quella delle microinterazioni che non confermano un’azione ma insegnano un gesto. La galleria che fa intravedere mezzo secondo di scorrimento per dirti che si può scorrere, l’elemento che ondeggia appena per suggerire che lo puoi trascinare. Anche qui vale la stessa prova: sta aiutando qualcuno a capire come funziona la pagina o sta solo mettendo in mostra che lo sviluppatore sapeva fare quell’effetto?

Ogni microinterazione ha un costo

Il motivo per cui conviene essere selettivi non è una questione di gusto. È che ogni microinterazione introduce un costo e quel costo non sempre viene ripagato da un beneficio reale per l’utente.

1. Il primo costo è quello delle prestazioni. Le animazioni vengono eseguite nel browser di chi visita il sito e non tutte pesano allo stesso modo. Alcune sono quasi gratuite, altre obbligano il browser a continui ricalcoli e possono rendere l’interfaccia meno fluida, soprattutto su dispositivi meno recenti. È lo stesso terreno dei Core Web Vitals: più lavoro chiedi al browser, più aumenti il rischio che la pagina venga percepita come lenta.
2. Il secondo costo è l’attenzione. Ogni elemento che si muove sta chiedendo all’utente di guardarlo. Quando i movimenti sono pochi e mirati, aiutano a capire cosa sta succedendo. Quando diventano troppi, iniziano a competere tra loro. A quel punto anche il feedback davvero importante (ad esempio quello che conferma un acquisto o segnala un errore) rischia di perdersi in mezzo a una serie di animazioni che non hanno nulla da comunicare.
3. C’è poi il costo del tempo. Una microinterazione efficace dura il necessario per essere percepita e poi si fa da parte. Se è troppo lenta diventa un’attesa. Se è troppo veloce passa inosservata. Nella maggior parte dei casi il problema è il fatto che rimanga sullo schermo più o meno a lungo di quanto serva.
4. C’è infine il costo meno visibile: la manutenzione. Ogni animazione è un comportamento che deve continuare a funzionare quando aggiorni il sito, cambi un template o introduci nuove funzionalità. Una singola microinterazione è facile da gestire. Decine di microinterazioni sparse ovunque diventano un’odissea.

C’è stata una fase in cui ci sembrava che qualsiasi elemento statico fosse incompleto. Così nel web sono esplosi hover, effetti animati allo scroll e transizioni praticamente ovunque.

Riguardando quei progetti con più distanza in molti si sono accorti che la maggior parte di quelle animazioni semplicemente non servivano a niente. Non chiarivano nulla, non guidavano nessuna azione, non comunicavano nessun feedback. Erano solo confusione.

Microinterazioni e accessibilità

Fin qui abbiamo parlato dell’utente come se fosse uno solo, mentre invece le persone che arrivano su un sito hanno corpi e sensibilità diverse, anche di fronte a una cosa piccola come un’animazione. Per qualcuno il movimento sullo schermo non è un dettaglio gradevole: è un fastidio fisico vero. Chi soffre di disturbi vestibolari, di emicrania, di certe forme di chinetosi può reagire a una transizione troppo ampia o a un parallasse aggressivo con nausea o capogiro reali. Non è una sensibilità trascurabile, tanto che i browser e i sistemi operativi hanno previsto un modo per dire, una volta per tutte, “preferirei meno movimento”.

Quel modo si chiama prefers-reduced-motion, ed è un’impostazione che l’utente attiva nel proprio dispositivo e che il sito può leggere. Tradotto: chi ha bisogno di un’interfaccia più statica tendenzialmente lo ha già comunicato. Il sito deve solo avere la cortesia di ascoltarlo, riducendo o spegnendo le animazioni non essenziali per quella persona.

C’è poi un principio che vale al di là del movimento, e che torna utile ogni volta che progetti un feedback: una microinterazione non dovrebbe mai essere l’unico canale con cui dici una cosa importante. Se l’unico segnale che un campo è sbagliato è che diventa rosso, hai appena tagliato fuori chi quel rosso non lo distingue. Se la conferma che un’azione è andata a buon fine è solo un’animazione che dura un secondo, chi usa uno screen reader o chi quel secondo se lo perde resta senza informazione. Il feedback visivo è un di più che si appoggia a un’informazione data anche in chiaro, non un sostituto che funziona solo per chi guarda lo schermo nel modo previsto.

È lo stesso ragionamento che facciamo quando parliamo di accessibilità in generale: l’esperienza migliore non è quella riservata a chi rientra nel caso ideale, è quella che regge anche quando il caso ideale salta.

Come decidi quali microinterazioni implementare?

A questo punto verrebbe comodo chiudere con una bella lista di microinterazioni consigliate da copiare nel prossimo progetto. Il problema è che una lista del genere invecchia in fretta e soprattutto sposta l’attenzione sul “cosa” quando il nocciolo è sempre stato il “perché”. Più che un elenco di animazioni promosse, ti viene comodo un modo di ragionare che funzioni anche tra due anni su un progetto che adesso non esiste ancora.

Il primo ragionamento lo conosci già, perché è il filo conduttore di tutto il pezzo: questa microinterazione risponde davvero a una domanda che l’utente si sta ponendo? Se nasce da un’esigenza reale, ha già una buona ragione per esistere. Se invece serve solo a riempire uno spazio della pagina che ti sembra un po’ vuoto, probabilmente vale la pena fermarsi un attimo e chiedersi se sia davvero necessaria.

Il secondo ragionamento è una prova di sottrazione: togli la microinterazione e guarda cosa succede. Se senza di lei l’utente resta davvero spaesato allora stava lavorando bene. Se senza di lei la pagina funziona esattamente come prima, solo un po’ più immobile, hai la tua risposta: era decorazione.

Il terzo ragionamento riguarda la coerenza dell’interfaccia. Una microinterazione non viene percepita in modo isolato: fa parte di un insieme. Quando ogni elemento si comporta in modo diverso — uno scivola, uno rimbalza, un altro sfuma, ciascuno con tempi e dinamiche proprie — il risultato trasmette una sensazione di disordine, anche se le singole animazioni sono realizzate bene.

Per questo è importante mantenere tempi simili, comportamenti prevedibili e una grammatica del movimento coerente in tutto il sito. L’utente non analizzerà consciamente questi dettagli, ma ne percepirà l’effetto complessivo. È la differenza tra un’interfaccia che appare progettata con un criterio preciso e una che sembra il risultato di interventi aggiunti nel tempo senza una direzione comune.

E quando un’animazione ha passato tutti e tre i ragionamenti e merita di esistere, resta la questione di come scriverla, dove vale una regola semplice: parti dal mezzo più leggero che ottiene il risultato. Buona parte delle microinterazioni che servono davvero si fanno con poche righe di CSS, che il browser gestisce in modo efficiente e che non aggiungono peso.

La libreria JavaScript pesante, con tutto quello che si porta dietro, ha senso quando l’effetto lo richiede sul serio, non come prima opzione perché “tanto la usiamo già”. Il dettaglio migliore, anche nel codice, è quello che ottiene l’effetto col minimo necessario.

Come capire se “funziona”?

C’è però un limite che vale la pena riconoscere. Fin qui abbiamo ragionato su cosa possa aiutare l’utente e cosa rischi invece di distrarlo, ma lo abbiamo fatto dal nostro punto di vista. E noi non siamo l’utente.

Chi progetta un sito lo conosce nei minimi dettagli: sa dove si trovano i pulsanti, quali elementi sono cliccabili e cosa dovrebbe accadere dopo ogni interazione. Proprio per questo rischia di essere meno obiettivo di quanto immagini. Una microinterazione che a noi sembra intuitiva può risultare poco chiara a chi arriva sulla pagina per la prima volta e non ha alcun contesto.

Per accorgersene bisogna osservare persone reali mentre utilizzano il sito. Non servono necessariamente laboratori, software complessi o grandi budget. Spesso bastano pochi utenti e un compito concreto da svolgere. Quello che conta è osservare i momenti di esitazione: dove si fermano, dove cliccano due volte, dove si chiedono se qualcosa sia successo oppure no.

Dietro questo lavoro esistono metodologie, strumenti e competenze specifiche che meriterebbero un approfondimento dedicato. Per il momento è sufficiente tenere a mente un principio semplice: il buon senso può aiutarti a decidere quali microinterazioni progettare, ma non può dirti con certezza se funzionano davvero. Quello lo possono stabilire soltanto le persone che le useranno ogni giorno.

Le microinterazioni migliori sono quelle che dimentichi

Le microinterazioni hanno una caratteristica curiosa: quando funzionano bene quasi non le noti, quando funzionano male non riesci a ignorarle. Fanno parte di quella categoria di dettagli che tendono a scomparire sullo sfondo dell’esperienza proprio perché svolgono il loro compito.

È anche per questo che è facile eccedere. Aggiungi un’animazione qui, un effetto lì, convinto di stare arricchendo l’interfaccia. Ma la qualità raramente nasce dalla quantità. Più spesso deriva dalla capacità di scegliere con cura cosa merita davvero di attirare l’attenzione e cosa invece può rimanere invisibile.

Un buon dettaglio non è quello che si mette in mostra. È quello che accompagna l’utente senza interromperlo, che rende un’azione più chiara o una risposta più immediata.