Di nuovo insieme per la prima volta
Introduzione
Per quasi trent'anni, le esperienze di computing sui computer desktop sono state incentrate su una tastiera e un mouse o un trackpad come principali dispositivi di input degli utenti. Tuttavia, negli ultimi dieci anni, smartphone e tablet hanno introdotto un nuovo paradigma di interazione: il tocco. Con l'introduzione dei computer Windows 8 con funzionalità touch e ora con il rilascio del fantastico Chromebook Pixel con funzionalità touch, il tocco sta diventando parte dell'esperienza desktop prevista. Una delle sfide maggiori è la creazione di esperienze che funzionino non solo su dispositivi tattili e mouse, ma anche su questi dispositivi in cui l'utente utilizzerà entrambi i metodi di immissione, a volte contemporaneamente.
Questo articolo ti aiuterà a capire come le funzionalità touch sono integrate nel browser, come puoi integrare questo nuovo meccanismo di interfaccia nelle app esistenti e come il tocco può funzionare bene con l'input del mouse.
Lo stato del tocco nella piattaforma web
L'iPhone è stata la prima piattaforma popolare a disporre di API touch dedicate integrate nel browser web. Diversi altri fornitori di browser hanno creato interfacce API simili create per essere compatibili con l'implementazione iOS, che ora è descritta dalla specifica "Touch Eventi versione 1". Gli eventi touch sono supportati da Chrome e Firefox su computer, Safari su iOS e Chrome e il browser Android su Android, nonché da altri browser per dispositivi mobili come il browser BlackBerry.
Il mio collega Boris Smus ha scritto un ottimo tutorial HTML5Rocks sugli eventi touch, che è comunque un ottimo modo per iniziare, se non hai mai guardato gli eventi touch. Infatti, se non hai mai lavorato con gli eventi touch, leggi l'articolo ora prima di continuare. Vai avanti, aspetto.
Hai finito? Ora che hai una base di base sugli eventi touch, la difficoltà di scrivere interazioni basate sul tocco è che queste possono essere leggermente diverse dagli eventi del mouse (e del trackpad e del trackball che emula il mouse) e, sebbene le interfacce touch tipicamente provino a emulare i topi, l'emulazione non è perfetta o completa. Devi davvero lavorare su entrambi gli stili di interazione e potrebbe essere necessario supportare ciascuna interfaccia in modo indipendente.
Soprattutto: l'utente potrebbe avere il tocco e un mouse
Molti sviluppatori hanno creato siti che rilevano in modo statico se un ambiente supporta gli eventi touch e quindi presumono che debbano supportare solo eventi di tocco (e non del mouse). Si tratta ora di un'ipotesi errata. Invece, il semplice fatto che siano presenti eventi touch non significa che l'utente stia utilizzando principalmente quel dispositivo di input tocco. Dispositivi come Chromebook Pixel e alcuni laptop Windows 8 ora supporteranno sia i metodi di immissione Mouse che quelli touch, e altri lo saranno nel prossimo futuro. Su questi dispositivi, è abbastanza naturale per gli utenti utilizzare sia il mouse che il touchscreen per interagire con le applicazioni, quindi "supporta il tocco" non equivale a "non ha bisogno del supporto del mouse". Non puoi pensare al problema come a "Devo scrivere due diversi stili di interazione e passare da uno all'altro", devi pensare a come le due interazioni interagiranno e in modo indipendente. Sul mio Chromebook Pixel uso spesso il trackpad, ma mi allungo anche verso lo schermo e lo tocco: nella stessa applicazione o pagina, faccio ciò che mi sembra più naturale al momento. D'altra parte, alcuni utenti di laptop touchscreen utilizzano raramente o mai il touchscreen, quindi la presenza di input tocco non dovrebbe disabilitare o ostacolare il controllo del mouse.
Sfortunatamente, può essere difficile sapere se l'ambiente browser di un utente supporta o meno l'input tocco; idealmente, un browser su un computer desktop indicherebbe sempre il supporto per gli eventi touch, pertanto un display touchscreen può essere collegato in qualsiasi momento (ad esempio, se diventa disponibile un touchscreen collegato tramite un KVM). Per tutti questi motivi, le tue applicazioni non dovrebbero tentare di passare dal tocco al mouse, ma supporta solo entrambi.
Supporto per mouse e tocco insieme
1. Fare clic e toccare: l'ordine delle cose "naturale"
Il primo problema è che le interfacce touch tipicamente tentano di emulare i clic del mouse, ovviamente poiché le interfacce touch devono funzionare su applicazioni che in precedenza hanno interagito solo con gli eventi del mouse. Puoi utilizzare questa scorciatoia come scorciatoia perché gli eventi "clic" continueranno a essere attivati, sia che l'utente abbia fatto clic con il mouse o abbia toccato il dito sullo schermo. Tuttavia, questa scorciatoia presenta un paio di problemi.
In primo luogo devi fare attenzione quando progetti interazioni più avanzate con il tocco: quando l'utente utilizza un mouse, risponde con un evento di clic, mentre quando l'utente tocca lo schermo si verificano entrambi gli eventi di tocco e clic. Per un singolo clic, l'ordine degli eventi è:
- touchstart
- movimento tocco
- contatto
- mouseover
- mousemove
- mousedown
- mouseup
- click
Questo, ovviamente, significa che se stai elaborando eventi touch come touchstart, devi assicurarti di non elaborare anche l'evento mousedown e/o clic corrispondente. Se puoi annullare gli eventi di tocco (call preventDefault() all'interno del gestore di eventi), non verranno generati eventi del mouse per il tocco. Una delle regole più importanti dei gestori del tocco è:
Tuttavia, ciò impedisce anche altri comportamenti predefiniti del browser (come lo scorrimento), anche se in genere l'evento touch viene gestito interamente nel gestore, pertanto è consigliabile disattivare le azioni predefinite. In generale, è consigliabile gestire e annullare tutti gli eventi tocco oppure evitare di avere un gestore per gli eventi.
In secondo luogo, quando un utente tocca un elemento in una pagina web su un dispositivo mobile, le pagine che non sono state progettate per l'interazione mobile hanno un ritardo di almeno 300 millisecondi tra l'evento touchstart e l'elaborazione degli eventi del mouse (mousedown). Se vuoi usare Chrome, puoi attivare l'opzione "Emula eventi tocco" negli Strumenti per sviluppatori di Chrome per provare le interfacce touch su un sistema non touch.
Questo ritardo consente al browser di determinare se l'utente sta eseguendo un altro gesto, in particolare il doppio tocco dello zoom. Ovviamente, questo può rappresentare un problema nei casi in cui vuoi avere una risposta immediata al tocco. È in corso un lavoro per cercare di limitare gli scenari in cui si verifica automaticamente questo ritardo.
Il primo e più semplice modo per evitare questo ritardo è "dire" al browser mobile che la pagina non avrà bisogno dello zoom. Questa operazione può essere eseguita utilizzando un'area visibile fissa, ad esempio inserendo nella pagina:
<meta name="viewport" content="width=device-width,user-scalable=no">
Ovviamente ciò non è sempre appropriato; questa opzione disattiva lo zoom tramite pizzico, che potrebbe essere necessario per motivi di accessibilità, quindi usalo con parsimonia se non vuoi affatto (se disattivi la scalabilità degli utenti, potresti fornire un altro modo per aumentare la leggibilità del testo nella tua applicazione). Inoltre, per Chrome su dispositivi di classe desktop che supportano il tocco e altri browser sulle piattaforme mobile quando la pagina ha aree visibili non scalabili, questo ritardo non si applica.
N. 2: Gli eventi con movimento del mouse non vengono attivati al tocco
A questo punto è importante notare che l'emulazione degli eventi del mouse in un'interfaccia touch di solito non si estende all'emulazione di eventi mousemove. Quindi, se crei un bellissimo controllo guidato dal mouse che utilizza eventi di movimento del mouse, probabilmente non funzionerà con un dispositivo touch, a meno che non aggiungi appositamente gestori del movimento.
Generalmente i browser implementano automaticamente l'interazione appropriata per le interazioni touch sui controlli HTML. Di conseguenza, ad esempio, i controlli intervallo HTML5 funzionano solo quando utilizzi le interazioni touch. Tuttavia, se hai implementato i tuoi controlli, probabilmente non funzioneranno con le interazioni di tipo click-and-drag; infatti, alcune librerie di uso comune (come jQueryUI) non supportano ancora in modo nativo le interazioni touch in questo modo (anche se per jQueryUI ci sono diverse correzioni di questo problema). Questo è stato uno dei primi problemi che ho incontrato durante l'upgrade della mia applicazione Web Audio Playground per la compatibilità con il tocco: i cursori erano basati su jQueryUI, quindi non funzionavano con le interazioni clic e trascinamento. Sono passato ai controlli intervallo HTML5 e hanno funzionato. In alternativa, ovviamente, avrei potuto semplicemente aggiungere gestori touchmove per aggiornare i cursori, ma c'è un problema...
N. 3: Touchmove e MouseMove non sono la stessa cosa
Un'insidia in cui ho visto cadere alcuni sviluppatori è far sì che i gestori touchmove e mousemove vengano richiamati negli stessi percorsi in codice. Il comportamento di questi eventi è molto simile, ma leggermente diverso: in particolare, gli eventi touch hanno sempre come target l'elemento che viene toccato AVVIATO, mentre gli eventi del mouse hanno come target l'elemento che si trova attualmente sotto il cursore del mouse. Questo è il motivo per cui esistono eventi mouseover e mouseout, ma non esistono eventi touchover e touchout corrispondenti, solo touchend.
Il modo più comune per mordere è se rimuovi (o riposiziona) l'elemento che l'utente ha iniziato a toccare. Ad esempio, immagina un carosello di immagini con un gestore del tocco sull'intero carosello per supportare un comportamento di scorrimento personalizzato. Man mano che le immagini disponibili cambiano, rimuovi alcuni elementi <img> e aggiungine altri. Se l'utente inizia a toccare una di queste immagini e poi la rimuovi, il gestore (che si trova su un predecessore dell'elemento img) smetterà di ricevere eventi di tocco (perché vengono inviati a un obiettivo che non è più nell'albero). Sembra che l'utente stia tenendo il dito in un punto anche se potrebbe essersi spostato e alla fine l'ha rimosso.
Ovviamente puoi evitare questo problema evitando di rimuovere gli elementi che hanno (o che hanno predecessori) gestori touch quando un tocco è attivo. In alternativa, la soluzione migliore è che piuttosto che registrare gestori touchend/touchmove statici, attendi di ricevere un evento touchstart e poi aggiungi gestori touchmove/touchend/touchcancel al target dell'evento touchstart (e rimuovili alla fine/all'annullamento). In questo modo continuerai a ricevere eventi per il tocco anche se l'elemento target viene spostato o rimosso. Puoi giocare un po' qui: tocca la casella rossa e, tenendo premuto il pulsante Esc, per rimuoverla dal DOM.
N. 4. Tocca e :passaggio del mouse
La metafora del puntatore del mouse separava la posizione del cursore dalla selezione attiva e ciò ha consentito agli sviluppatori di utilizzare gli stati di passaggio del mouse per nascondere e mostrare informazioni che potrebbero essere pertinenti per gli utenti. Tuttavia, al momento la maggior parte delle interfacce touch non rileva che un dito "passa" sopra un obiettivo.Pertanto, fornire informazioni semanticamente importanti (ad es. fornire il popup "Che cos'è questo controllo?") in base al passaggio del mouse è un rifiuto, a meno che tu non fornisca anche un modo intuitivo per accedere a queste informazioni. Devi fare attenzione a come utilizzi il passaggio del mouse per inoltrare informazioni agli utenti.
È interessante notare che, in alcuni casi, la pseudoclasse CSS :hover PUÒ essere attivata dalle interfacce touch; toccando un elemento, lo rende :active mentre il dito è abbassato, e acquisisce anche lo stato :hover. In Internet Explorer, il passaggio del mouse è attivo solo quando l'utente non ha premuto il dito, mentre gli altri browser lo mantengono attivo fino al successivo tocco o al successivo movimento del mouse. Si tratta di un buon approccio per far funzionare i menu a comparsa sulle interfacce touch: un effetto collaterale di un elemento attivo è che viene applicato anche lo stato :hover. Ad esempio:
<style>
img ~ .content {
display:none;
}
img:hover ~ .content {
display:block;
}
</style>
<img src="/awesome.png">
<div class="content">This is an awesome picture of me</div>
Quando un altro elemento viene toccato, l'elemento non è più attivo e lo stato al passaggio del mouse scompare, proprio come se l'utente stesse utilizzando un puntatore del mouse e lo avesse spostato fuori dall'elemento. Potresti aggregare i contenuti in un elemento <a> per renderlo anch'esso un tabstop, in modo che l'utente possa attivare/disattivare le informazioni aggiuntive al passaggio del mouse o al clic, un tocco tocco o la pressione di un tasto, senza che sia necessario JavaScript. Sono rimasta piacevolmente sorpresa quando ho iniziato a lavorare per far sì che il mio Web Audio Playground funzionasse bene con le interfacce touch che i miei menu pop-out funzionavano già bene al tocco, dato che avevo utilizzato questo tipo di struttura.
Il metodo sopra descritto funziona bene per le interfacce basate sul puntatore del mouse e per quelle touch. Questo a differenza dell'utilizzo degli attributi "title" al passaggio del mouse, che NON vengono visualizzati quando l'elemento viene attivato:
<img src="/awesome.png" title="this doesn't show up in touch">
N. 5: Precisione del tocco e del mouse
Sebbene i mouse abbiano una dissociazione concettuale dalla realtà, risulta che sono estremamente precisi, in quanto il sistema operativo sottostante in genere traccia la precisione esatta dei pixel per il cursore. Gli sviluppatori di app mobile, invece, hanno imparato che il tocco delle dita su un touchscreen non è così preciso, principalmente a causa delle dimensioni della superficie del dito quando è a contatto con lo schermo (e in parte perché le dita ostruiscono lo schermo).
Molti privati e aziende hanno condotto ricerche approfondite sugli utenti su come progettare applicazioni e siti che supportano l'interazione basata sulle dita; molti libri sono stati scritti sull'argomento. Il consiglio di base è quello di aumentare le dimensioni dei touch target aumentando la spaziatura interna e di ridurre la probabilità di tocchi errati aumentando il margine tra gli elementi. I margini non sono inclusi nella gestione del rilevamento degli hit degli eventi di tocco e clic, al contrario della spaziatura interna. Una delle principali correzioni che ho dovuto apportare a Web Audio Playground è stata aumentare le dimensioni dei punti di connessione in modo che fossero più facili da toccare con precisione.
Molti fornitori di browser che gestiscono interfacce basate sul tocco hanno inoltre introdotto nel browser una logica per individuare l'elemento corretto quando un utente tocca lo schermo e ridurre la probabilità di clic errati, sebbene in genere questa operazione corregge solo gli eventi di clic e non gli spostamenti (sebbene Internet Explorer modifichi anche gli eventi mousedown/mousemove/mouseup).
N. 6: Mantieni i gestori del tocco o rompono il tuo scorrimento
È inoltre importante mantenere i gestori del tocco limitati solo agli elementi in cui ne hai bisogno; gli elementi touch possono avere una larghezza di banda molto elevata, quindi è importante evitare i gestori del tocco sugli elementi di scorrimento (poiché l'elaborazione potrebbe interferire con le ottimizzazioni del browser per uno scorrimento al tocco rapido e senza jank. I browser moderni cercano di scorrere su un thread GPU, ma è impossibile se devono controllare con JavaScript prima per vedere se ogni evento di tocco sta per essere gestito dall'app). Puoi vedere un esempio di questo comportamento.
Per evitare questo problema, devi assicurarti che, se gestisci gli eventi tocco solo in una piccola parte dell'interfaccia utente, aggiungi solo gestori touch al suo interno (non, ad esempio, nella sezione <body> della pagina); in breve, limita il più possibile l'ambito dei gestori touch.
N. 7. Multi-touch
L'ultima sfida interessante è che, sebbene ci riferiamo all'interfaccia utente "touch", quasi universalmente il supporto è in realtà per il multi-touch, in quanto le API forniscono più di un input tocco alla volta. Quando inizi a supportare il tocco nelle tue applicazioni, è necessario considerare in che modo più tocchi potrebbero influire sull'applicazione.
Se hai sviluppato app basate principalmente sul mouse, sei abituato a creare con al massimo un punto del cursore. I sistemi in genere non supportano più cursori del mouse. Per molte applicazioni, gli eventi touch verranno semplicemente mappati su un'interfaccia a cursore singolo, ma la maggior parte dell'hardware che abbiamo visto per l'input tocco del desktop è in grado di gestire almeno 2 ingressi simultanei e la maggior parte dei nuovi hardware sembra supportare almeno 5 ingressi simultanei. Naturalmente, per sviluppare una tastiera di pianoforte sullo schermo, dovresti poter supportare più input touch simultanei.
Le API W3C Touch attualmente implementate non hanno un'API per determinare il numero di touchpoint supportati dall'hardware, quindi dovrai utilizzare la tua stima migliore per il numero di touchpoint che i tuoi utenti vorranno o, ovviamente, fare attenzione al numero di touchpoint che vedi nella pratica e adattarti. Ad esempio, in un'applicazione pianoforte, se non vedi mai più di due touchpoint, potresti aggiungere alcune UI di "accordi". L'API PointerEvents dispone di un'API per determinare le funzionalità del dispositivo.
Ritocco
Ci auguriamo che questo articolo ti abbia fornito una serie di indicazioni sulle sfide più comuni legate all'implementazione del tocco insieme alle interazioni con il mouse. Più importante di qualsiasi altro consiglio, ovviamente, è che dovete testare la vostra app su dispositivi mobili, tablet e ambienti desktop combinati mouse e-touch. Se non disponi di hardware touch+mouse, utilizza la funzionalità "Emula eventi tocco" di Chrome per provare i diversi scenari.
Non solo è possibile, ma relativamente facile seguire queste indicazioni, creare esperienze interattive coinvolgenti che funzionano bene con input tocco, input del mouse e persino con entrambi gli stili di interazione contemporaneamente.