Agli albori della progettazione di siti Web per dispositivi mobili, la maggior parte degli sviluppatori ha biforcato la propria offerta di prodotti. Hanno rilasciato una versione desktop completamente funzionale e quindi una versione "ottimizzata per dispositivi mobili" che ha eliminato gran parte del marchio e delle immagini per adattarsi alle funzionalità limitate e alla velocità di rete dei telefoni candy-bar e delle reti wireless 3G.
Gli smartphone contemporanei, tuttavia, possono rendere le pagine Web altrettanto efficienti dei PC desktop, attraverso reti migliori o migliori delle linee DSL di ieri.
Il design, quindi, converge verso un'interfaccia utente singola. Ma il rischio per i progettisti non è che uno smartphone o un tablet non possano rendere un moderno sito web reattivo. Piuttosto, il metodo di input dell'utente su un dispositivo touchscreen richiede modifiche significative alla progettazione del sito sottostante. I giorni di costruzione di un sito Web presumendo che i visitatori abbiano una tastiera e un mouse sono finiti.
Regole di base del design del touchscreen
La progettazione di un'interfaccia Web sensibile al touchscreen richiede un'evoluzione del tradizionale approccio monitor-mouse-tastiera del passato. In particolare, è necessario adattare interazioni come gesti, tocchi e input multitouch.
- TAPpare non è preciso.A meno che il cliente non abbia le dita di un bambino, anche con i controlli del software molto accurati, può essere difficile toccarlo ed essere preciso.
- I gesti sono diversi dai tocchi.Per scorrere una pagina lunga su un touchscreen, l'utente fa scorrere un dito su la finestra del browser. Questo potrebbe non sembrare significativo finché non ti accorgi che navigando con il mouse, muovi il mouse giù .
- Due (e più) rubinetti.Un utente può utilizzare più rubinetti sul dispositivo allo stesso tempo per controllarlo. Questi tocchi aggiuntivi possono significare qualcosa di specifico a seconda del sistema operativo del dispositivo dell'utente.
- Dispositivi ad alta luminosità.Gli schermi della maggior parte dei tablet touchscreen sono fatti di un vetro robusto. Questo materiale può essere molto difficile da leggere, con molta luce vivida, in situazioni di luce intensa. Inoltre, con tutto il tocco, ottengono impronte digitali e macchie sullo schermo che possono influenzare il modo in cui le pagine appaiono.
- Tastiera sullo schermo.Mentre alcuni utenti hanno una tastiera wireless che si connettono ai loro tablet, la maggior parte degli utenti di tablet utilizza la tastiera su schermo per l'immissione dei dati. La voce OSK può risultare in alcuni esilaranti errori di battitura, oltre ad essere scomoda da utilizzare per lunghi periodi di tempo.
A causa di queste funzionalità del dispositivo, i progettisti Web dovrebbero enfatizzare diverse regole di progettazione di base per gli utenti del touchscreen:
- Non mettere oggetti cliccabili troppo vicini tra loro.Non esiste una regola rigida che definisca quanto vicino sia troppo vicino, ma gli elenchi di collegamenti, specialmente in caratteri di piccole dimensioni, possono essere difficili da navigare facendo clic (toccando) con un dito grosso. Può essere fastidioso dover eseguire lo zoom solo per provare e fare clic su un collegamento. Questo principio vale sia per i pulsanti che per i collegamenti.
- Le gerarchie possono essere difficili da mantenere aperte.Una forma popolare di menu dinamico utilizza JavaScript per aprire un sottomenu quando l'utente fa clic e quindi passa il mouse sul sottomenu. Questi stati possono essere molto difficili o impossibili da utilizzare sui touchscreen perché non rimangono aperti o non si chiudono.
- Sposta i collegamenti e le aree selezionabili dal bordo destro della finestra.La maggior parte delle persone è destrorsa e tende a scorrere da quel lato dello schermo. Poiché lo scrolling è fatto con un gesto, a volte è possibile avviare lo swipe su un link per sbaglio. Gli utenti possono annoiarsi se volessero scorrere sulla pagina e invece finirebbero accidentalmente toccando un link. Spostando i collegamenti dal lato destro, puoi aiutarli a evitare questo inconveniente.
- Non c'è il mouse.E questo significa che non c'è il mouse pointer . Non si deve fare affidamento sul cambiamento del puntatore del mouse per indicare che qualcosa è selezionabile.
- Gli stati al passaggio del mouse non esistono.Come corollario di quanto sopra, dato che non c'è il mouse, non c'è nulla con cui passare il mouse. Un collegamento può essere cliccato (TAPpato) o non su un dispositivo touchscreen, in modo che gli utenti non possano dedurre alcuna informazione utile da tali stati di hover come cambiamenti di colore, suggerimenti di strumenti o modifiche alla barra di stato.
- Gli sfondi neri migliorano il bagliore.Un sito con uno sfondo nero può essere molto difficile da leggere su un dispositivo touchscreen a causa del bagliore. Il nero fa apparire le impronte digitali sui dispositivi più nitide, sfocando lo schermo. E il nero può trasformare lo schermo in uno specchio che riflette i volti degli utenti spesso più del testo sullo schermo.
- Lunghi blocchi di testo nei moduli sono difficili da scrivere.Mentre è possibile scrivere interi romanzi su un iPad o un tablet Android o Windows, alla maggior parte delle persone non piace usare la tastiera su schermo per lunghi tratti di testo. Più il tuo progetto può rendere l'inserimento dei dati il più breve e semplice possibile, meglio è.
L'aspetto più importante della progettazione con touchscreen in mente è prova le tue pagine su un dispositivo touchscreen. Sebbene siano disponibili molti emulatori per iPad e Android e un sacco di tablet Windows, non forniscono ancora il senso di un touchscreen. Non puoi dire che i link sono troppo vicini o che i pulsanti sono troppo piccoli o che il riverbero rende la pagina troppo difficile da leggere, a meno che non esca da un tablet e provali prima rilasci il tuo nuovo design del sito web.
