Consigli utili per migliorare l’esperienza di navigazione grazie al cursore del mouse.
Il mouse è uno degli strumenti più utilizzati per navigare le pagine web, ed il cursore del mouse è il principale indicatore a disposizione. Le forme che può assumere non sono casuali, e ad ognuna corrisponde un preciso significato.
Lavorando con i CSS, può capitare di cambiare stile al cursore del mouse in corrispondenza di determinate azioni, ma è sempre bene non esagerare. La creatività infatti è da apprezzare finché non va contro anni di consuetudini.
Un chiaro esempio di quanto sia importante il feedback offerto dal puntatore del mouse si ha sui link di una pagina, sia testuali che in altra forma: vedere apparire la classica mano al posto della freccia indica che l’oggetto in questione è proprio un link con cui è possibile interagire.
Cambiare questo comportamento non solo è sbagliato, ma può confondere gli utenti: è fondamentale evitare di modificare questo tipo di feedback.
Un altro esempio è quello dei campi input e delle textarea dei form. In questo caso il cursore cambia forma per indicare un diverso tipo di interazione, ed è bene che questo feedback sia sempre presente. Anche quando si utilizzano tecnologie diverse da HTML e CSS (vedi Flash), è necessario ricordarsi di tale comportamento per non disorientare l’utente.
Un caso in cui è sempre utile un intervento tramite CSS è quello dei tasti submit dei form. Il cursore infatti normalmente non cambia forma al mouseover. E’ un comportamento diffuso ed al quale siamo abituati, ma niente vieta di migliorare l’usabilità del proprio sito con una modifica semplice, aggiungendo cursor: pointer allo stile di tali elementi.
Sono piccoli accorgimenti che possono fare la differenza: anche se il mouse non è l’unico strumento utilizzato per navigare il web, è sicuramente il più diffuso. Il cursore è uno dei primi strumenti a disposizione per dare un feedback all’utente, sarebbe ingenuo non preoccuparsene.
Potete approfondire l’argomento leggendo anche Usability Post: Mouse Cursor Affordance.
Sui submit, da un po’ di tempo, adotto anch’io la soluzione che indichi. Non ho capito invece quella sul download. Perché il cursore in formato link non dovrebbe andar bene?
Molto interessante e anche semplice da implementare come soluzione.
E’ da tanto che modifico il cursore dei bottoni per evidenziare all’utente la possibilità di fare click su tale elemento…però ultimamente ho smesso di farlo e ho anche smesso di formattare link che sembrano bottoni e bottoni che sembrano link, indipendentemente dalla loro veste grafica.
Sono due elementi differenti e forse è corretto che il cursore si comporti di conseguenza, che ne pensate?
@Ted: forse c’è stato un fraintendimento, nell’esempio del link in formato “bottone” indico come sia giusto che il cursore mantenga la forma della mano, per far capire che è un collegamento. Se leggi, ho scritto che “Cambiare questo comportamento non solo è sbagliato, ma può confondere gli utenti”.
@Marinella: se parli di link in formato pulsante (es. il tasto download del post) e di pulsanti di invio dei form, lo sappiamo solo noi che sono due elementi differenti nel codice della pagina. Per il visitatore hanno una funzione simile, ed è giusto che il mouse si comporti alla stessa maniera. Spero di aver capito la tua osservazione :)
Ciao Tom. Ho letto con interesse il tuo articolo. Perché sul pulsante “Invia commento” non hai modificato anche tu il cursore?
Grazie.
@Andrew grazie per la segnalazione, mia dimenticanza appena corretta :)
@Tom si si hai capito :)
era un dubbio che avevo da un pò: se cioè non si debba far capire all’utente che bottoni e link sono differenti e (spesso) hanno funzionalità differenti.
Quoto Marinella sulle funzionalita’, molti non conoscono la differenza, secondo me va fatto capire.
Veramente interessante ed utile. Non ci avevo pensato al cursor:pointer !
Saluti