Frontend

Affrontare il problema del mouse-over sui device touch

Lettura 4 minuti

Le animazioni CSS che appaiono al passaggio del mouse su immagini, link ed elementi della pagina sono ormai comuni. Se ben utilizzati rendono un design curato, migliorano l’esperienza utente e sono relativamente facili da realizzare.

Non è altrettanto facile declinare al meglio queste interazioni sui device che non dispongono, o non dispongono soltanto, di un mouse.

Al momento, purtroppo, non sono ancora disponibili soluzioni completamente affidabili, né javascript né CSS, per rilevare che tipo di puntatore utilizza il dispositivo corrente.

A maggior ragione è fondamentale tenere conto di come si comporterà l’interfaccia nei dispositivi touch screen, sui quali lo status over non esiste. Smartphones e tablet sono sempre più connessi e si stanno diffondendo sempre più dispositivi che sono touch screen e contemporaneamente supportano la navigazione con il mouse; quindi, ipoteticamente, lo stesso utente potrebbe cambiare metodo di navigazione anche durante la stessa sessione!

Per i developer che si trovano a dover implementare un comportamento diverso in base al tipo di device sono ancora tempi duri, in particolare è facile cadere nella trappola di alcune supposizioni sbagliate.

Un primo errore è usare le media query “device-width” e supporre che un dispositivo sia touch screen in base alla ridotta dimensione dello schermo; monitor datati potrebbero avere basse risoluzioni (e ovviamente non essere touch) ed esistono dispositivi touch screen di grandi dimensioni.

Nel documento Media Queries Level 4 attualmente in draft, sono in fase di discussione nuove media query, tra cui quella sul tipo di puntatore (media query “pointer”), che potrebbe risolvere questo problema, ma per il momento i CSS non ci possono essere d’aiuto!

Un’altra supposizione sbagliata, o meglio, una soluzione incompleta, è pensare che se il browser supporta un evento come “touchstart” l’utente stia usando un touch screen. Anche Modernizr ha scelto questa soluzione, ma alcuni browser, tra cui alcune versioni di Chrome, implementano questo evento indipendentemente dal dispositivo, quindi non si può fare affidamento nemmeno su questo tipo controllo.

function is_touch_device() {
   return 'ontouchstart' in window;
}

Una soluzione javascript più corretta è quella di Jenn Luckas, che prevede di inizializzare la pagina ipotizzando che il dispositivo sia touch e aspettare che avvenga un movimento del mouse, oppure un tap, per stabilire con certezza su che dispositivo ci si trova. Il limite, come si vede nella demo, è che finché non avviene un’azione dell’utente, la funzionalità over va considerata non disponibile.

Come fare quindi affinché davvero le interazioni al mouse over migliorino l’esperienza utente e non la penalizzino?

Al momento la soluzione più affidabile è progettare design che funzionino perfettamente per i dispositivi che non possono contare sull’evento over e delegare all’over solo effetti secondari, che possono essere piacevoli e utili per l’utente ma non fondamentali.
Se non fosse possibile o fosse troppo limitante, si potrebbe chiedere esplicitamente all’utente di indicare che tipo di dispositivo sta usando e modificare il design di conseguenza.

Qualche esempio pratico: spesso il secondo livello di navigazione (megamenu o menu dropdown) è mostrato all’over sulle voci del menu principale. Per chi può usufruire dello status over è molto comodo, ha una veloce preview delle sottosezioni e può scegliere se andare al livello di navigazione inferiore o in quello principale. Cosa succede a chi è su un dispositivo touch? Nativamente l’over è interpretato come un tap, quindi al tap sulla voce di primo livello apparirà solo per un istante il menu, mentre inizia a caricarsi la pagina linkata. Un design che preveda che i link alle sottosezioni siano presenti anche nella pagina della categoria principale assicura che problemi nella rilevazione del dispositivo non compromettano la navigazione rendendo le voci nel menu a comparsa irraggiungibili.

In alternativa si può far apparire il menu di secondo livello al click e non all’over, perde un po’ di immediatezza per chi usa un mouse, ma in questo modo si può essere sicuri che funzionerà in ogni caso.

Un’altra situazione abbastanza comune negli e-commerce, è mostrare all’over sul singolo prodotto, ad esempio nella lista  prodotti di categoria, varianti colore, link e bottoni (come aggiungi al carrello, aggiungi ai preferiti) e animazioni CSS.

Anche se le animazioni possibili sono ormai numerose e scenografiche è bene valutare l’effettiva utilità di queste soluzioni e, soprattutto, fare attenzione a non costringere l’utente su un dispositivo touch a fare un doppio tap per entrare nel dettaglio della scheda prodotto (il primo per attivare l’effetto che sarebbe stato all’over e il secondo per attivare il link). È accettabile se al primo tap appare una possibilità di scelta, ad esempio se entrare nel dettaglio del prodotto oppure aggiungere il prodotto al carrello, ma se usato solo per mostrare un’animazione rappresenta un fastidioso rallentamento nella navigazione.

In conclusione lascio alcuni link di approfondimento e spero di poter tornare presto sull’argomento non appena saranno disponibili nuove soluzioni più affidabili.

Approfondimenti

Articolo scritto da

Federica Villata

☝ Ti piace quello che facciamo? Unisciti a noi!

Ti potrebbe interessare anche..