Negli ultimi anni è diventato sempre più comune vedere siti web che sostituiscono il classico puntatore del mouse con elementi grafici personalizzati.
Un semplice cerchio colorato, un testo, un’icona.
In certi casi addirittura di immagini animate, effetti particellari o elementi che si muovono con un leggero ritardo rispetto al movimento reale del mouse.
L’obiettivo è quasi sempre lo stesso: rendere il sito più moderno, più creativo, più “wow”.
Il problema è che il cursore non è un elemento decorativo!
È uno degli strumenti più importanti dell’interfaccia e modificarlo senza una reale necessità rischia di peggiorare drasticamente l’esperienza utente, per tutti gli utenti.
A cosa serve davvero il cursore
Quando utilizziamo un sito web, il cursore svolge diverse funzioni fondamentali.
La prima è ovvia: ci permette di capire dove stiamo puntando.
La seconda è comunicare quali elementi sono interattivi.
La terza è fornire feedback immediati durante l’interazione.
Pensiamo a quante volte il puntatore cambia forma durante la navigazione:
- diventa una mano con un dito puntato sopra un link o un bottone;
- assume la forma di una barra verticale quando un elemento può essere scorso;
- cambia aspetto durante il ridimensionamento di un elemento;
- diventa una mano aperta su un elemento trascinabile e si chiude a pugno durante il trascinamento;
- mostra stati diversi in base al contesto.
Questi comportamenti sono il risultato di decenni di convenzioni consolidate, che ormai conosciamo bene e che abbiamo interiorizzato.
Se non siamo sicuri che un elemento sia cliccabile o draggabile, basta posizionarci sopra il cursore, e in base all’aspetto che assumerà capiremo immediatamente come usarlo.
Il problema della sostituzione del cursore
Molti effetti di cursore personalizzato nascondono completamente quello nativo del browser.
Al suo posto compare un elemento grafico che tenta di replicarne la funzione, oppure non la replica affatto ed ha sempre lo stesso aspetto visivo, indipendentemente dall’interazione dell’utente.
I principali problemi di un cursore personalizzato sono:
- perdita di precisione, soprattutto se l’elemento grafico usato è un cerchio, un disegno o un’icona con bordi irregolari e dimensioni elevate;
- l’utente non ha più un riferimento chiaro e immediato per capire il punto esatto in cui si trova;
- perdita di informazione sul tipo di interazione disponibile con un elemento
- perdita di feedback su cosa si sta facendo e se l’interazione sta funzionando correttamente (pensa al drag and drop)
Il delay sul movimento del cursore
C’è un aspetto particolarmente problematico dei cursori custom: quelli che “inseguono” il movimento del mouse.
Si tratta di un effetto per cui il cursore si muove con un leggero ritardo rispetto al movimento, come se questo venisse trascinato dall’utente.
Visivamente può anche sembrare carino, per qualche secondo.
Ma dopo un paio di movimenti, ti garantisco che l’esperienza diventa terribile e l’usabilità è un disastro.
Il puntatore è uno strumento, che serve appunto a “puntare e colpire”, come il mirino di un fucile.
Aggiungere un ritardo artificiale significa rendere meno efficiente il suo uso.
È come quando un sito è molto lento e quando clicchi su un bottone devi aspettare uno o due secondi prima di ricevere un feedback e capire se il click è andato a buon fine.
Onestamente: pensi che ne valga la pena?
Quando il cursore diventa una distrazione
In alcuni casi il cursore personalizzato non sostituisce quello standard ma si aggiunge ad esso, che forse è pure peggio!
L’utente si trova a lavorare con due elementi, uno che segue correttamente il movimento del mouse o del trackpad e un altro, leggermente spostato o sovrapposto al primo.
Due elementi distinti che si muovono insieme in uno spazio limitato.
Considerando che l’occhio umano è naturalmente attratto dal movimento, l’aumento di distrazione è notevole, soprattutto per le persone con problematiche legate all’attenzione.
E l’accessibilità?
Come spesso accade, il problema più grande emerge quando osserviamo la situazione dal punto di vista dell’accessibilità.
Il cursore standard non è stato progettato casualmente. Ogni forma , ogni stato e ogni variazione comunicano informazioni precise che gli utenti conoscono da anni.
Quando questi comportamenti vengono sostituiti con un elemento grafico personalizzato, tutto il sistema di convenzioni grafiche del cursore crollano, e molte persone potrebbero riscontrare grossi problemi nell’utilizzo dell’interfaccia.
Le persone che possono riscontrare maggiori barriere sono:
- utenti con difficoltà cognitive;
- persone con deficit di attenzione;
- utenti poco esperti dal punto di vista digitale;
- persone con difficoltà motorie (es. tremori).
Questo perché i cursori personalizzati aumentano il carico cognitivo e riducono la precisione di puntamento.
Ma allora non vanno mai usati?
Come quasi sempre nel design, la risposta è: dipende.
Esistono contesti particolari in cui una personalizzazione del cursore può avere senso.
Per esempio:
- installazioni artistiche;
- esperienze immersive;
- siti promozionali temporanei;
- progetti sperimentali dove l’obiettivo principale è l’esplorazione creativa.
In questi casi l’interfaccia stessa diventa parte dell’esperienza e, secondo me, può essere interessante creare un cursore personalizzato, purché ben progettato, preciso, senza delay e con cambi di stato chiari.
Ma sono eccezioni!
Per la mia esperienza, quasi tutti i siti aziendali, e-commerce, blog, portali informativi e siti istituzionali devono aiutare l’utente a trovare informazioni, completare attività e raggiungere risultati nel modo più semplice possibile.
In questi contesti il cursore standard è già la soluzione migliore.
Il web design non è un esercizio di stile
Uno degli errori più diffusi è confondere il design con la decorazione.
Ne ho parlato anche nell’articolo I siti di Awwwards sono davvero un modello da seguire?.
Molti web designer e web developer – soprattutto chi si occupa di creatività – pensano che un sito sia ben progettato perché sorprende, perché è memorabile, pieno di animazioni ed effetti “wow”.
In realtà il design non consiste nell’aggiungere elementi spettacolari, ma piuttosto nel prendere decisioni che aiutino le persone a raggiungere un obiettivo.
La parola stessa lo suggerisce: Design significa progettazione.
E progettare significa fare scelte intenzionali per risolvere problemi.
Prima di sostituire il cursore del browser con un effetto grafico personalizzato, vale quindi la pena porsi una domanda molto semplice:
“Sto risolvendo un problema reale oppure sto aggiungendo complessità solo per stupire?”
Nella maggior parte dei casi la risposta è la seconda.
E quando una scelta migliora l’estetica percepita ma peggiora l’usabilità, probabilmente non è una buona scelta di design.