Se c’è un elemento che viene abusato continuamente nel web design moderno, sono gli effetti hover.
Parlo di quelle animazioni o modifiche grafiche che si attivano quando il cursore passa sopra un elemento: un pulsante che cambia colore, una card che si solleva, una sottolineatura che compare sotto un link, un’icona che ruota.
Sono dettagli apparentemente innocui, ma che spesso vengono utilizzati senza una reale strategia, solo perché “sono carini da vedere”.
Niente di più pericoloso per la user experience!
A cosa serve davvero un effetto hover?
La funzione principale di un hover è comunicare qualcosa all’utente.
Più precisamente, serve a fornire un feedback immediato che aiuti a comprendere l’interfaccia.
Quando passiamo con il mouse sopra un pulsante e questo cambia leggermente colore, il sito ci sta dicendo:
“Questo elemento è interattivo.”
È una forma di comunicazione sottile ma estremamente efficace, perché l’abbiamo assimilata e ormai fa parte del nostro modo di interpretare le interfacce web.
Lo stesso vale per una sottolineatura che compare sopra un link o per una card cliccabile che cambia colore o ombreggiatura.
Non servono istruzioni, non devi spiegare all’utente che quell’elemento può essere cliccato, basta un effetto hover.
L’hover è un mezzo, non un obiettivo
Qui nasce il problema.
Molti designer e sviluppatori finiscono per concentrarsi sull’effetto grafico dimenticandosi della sua funzione.
L’hover non deve essere usato come mero “effetto grafico wow”, ma deve comunicare qualcosa, avere uno scopo ben preciso nell’esperienza utente.
Pensa ad esempio a una sezione “I nostri servizi” composta da sei card.
Se ogni card è cliccabile e porta a una pagina di approfondimento, un hover può avere perfettamente senso: la card cambia colore, compare un link o si aggiunge un elemento grafico.
Se invece le card sono semplici contenitori di testo senza alcuna interazione, perché dovrebbero cambiare colore quando ci passo sopra?
Cosa stanno comunicando?
Quale informazione stanno aggiungendo?
Nella maggior parte dei casi la risposta è semplice: nessuna.
L’unico effetto che si ottiene è generare confusione e frustrazione.
Il falso invito all’interazione
Il problema più grande degli hover superflui è che creano aspettative.
L’utente vede un elemento che reagisce al passaggio del mouse e interpreta quel comportamento come un invito all’azione.
È un meccanismo naturale.
Siamo abituati da decenni a considerare certe reazioni visive come indicatori di cliccabilità.
Mi è capitato proprio recentemente di visitare un sito che abusava di effetti all’hover su card di servizio. Dopo aver cliccato su ogni card mi chiedevo:
- forse non ho cliccato bene?
- forse il sito non funziona?
- forse non devo cliccare su tutta la card ma solo su un elemento?
Io sono una web designer con dieci anni di esperienza alle spalle, e ho capito quasi subito che si trattava di un effetto hover su un elemento non interattivo.
Ma quanto tempo ci mettono gli altri utenti a capirlo?
Il problema è ancora più evidente da mobile
Sul desktop l’effetto hover si basa sul puntatore del mouse.
Ma su smartphone l’hover non esiste, perché non c’è un puntatore, ma direttamente il “tap” dell’utente.
In questo secondo caso, l’hover viene assimilato al tap e gestito in varie modalità a seconda del dispositivo e del browser, per esempio in alcuni casi l’effetto hover può essere simulato con un tap lungo, mentre un tap breve attiverà l’effetto hover e subito dopo produrrà l’azione del click.
Insomma, si tratta di un effetto molto instabile da smartphone, e per questo dovrebbe essere usato solo per microanimazioni non fondamentali.
Fatti questa domanda: se l’hover non ci fosse, sarebbe ancora possibile usare quell’elemento? La risposta deve sempre essere “sì”.
La tua interfaccia deve funzionare anche senza CSS
Questa è una buona regola sia di user experience che di accessibilità.
Se una funzionalità essenziale dell’interfaccia si basa sul codice CSS, allora c’è un problema!
Perché il CSS può essere lento a caricare e perché una persona che usa screen reader (es. le persone cieche) non si basano sul CSS per interpretare una pagina, ma sul codice HTML.
Ergo: se non è possibile usare un certo componente dell’interfaccia senza l’attivazione dell’hover (che, ricordiamo, è una regola che viene scritta nel CSS), allora è probabile che tu debba rivederlo.
Quando un hover è utile
Io uso spesso gli effetti all’hover in questi casi:
- un bottone che diventa più chiaro o più scuro
- un link con una freccia che si sposta leggermente a destra
- un elemento interattivo che prende una sottolineatura (es. i tabs)
- una card che cambia colore o ombreggiatura
- un tooltip che compare per spiegare la funzione di un bottone (in questo caso deve comparire anche al focus)
In tutti questi casi esiste un collegamento diretto tra l’effetto visivo e un’informazione utile per l’utente.
Quando è meglio evitarlo
Un hover probabilmente non serve quando:
- l’elemento non è interattivo
- non esiste un’azione associata
- è stato aggiunto semplicemente perché il template lo prevedeva
- viene utilizzato solo per rendere la pagina più “movimentata”.
In questi casi l’effetto rischia di diventare una distrazione anziché un aiuto.
Design professionale significa intenzionalità
Uno degli errori più comuni nel web design è aggiungere elementi perché “stanno bene”.
Questo vale soprattutto per:
- Animazioni.
- Hover.
- Effetti di transizione.
- Parallasse.
- Microinterazioni.
Si tratta di elementi interessanti che contribuiscono a rendere un sito web più memorabile, ma vanno sempre usati con criterio.
L’effetto hover in particolare non può essere un puro esercizio di stile: deve preparare l’utente all’azione che verrà dopo.
La mia regola d’oro è: dopo l’hover deve esserci il click. Se non c’è il click, non c’è neanche l’hover.