Web Design in ottica touchscreen

Fino a qualche tempo fa il lavoro degli sviluppatori web mirava alla creazione di due distinte versioni dello stesso sito: una versione desktop ed una versione mobile priva di alcune immagini e/o elementi non compatibili con i dispositivi portatili. L’evoluzione degli smartphone e il miglioramento delle velocità di navigazione stanno riportando il web design verso una gestione univoca del progetto convergendo la progettazione su una interfaccia utente unica. Il problema da gestire resta quello della diversa gestione degli input e delle interazioni sui dispositivi touchscreen; Un web design basato sulla consapevolezza che le interazioni non avvengono solo con tastiera e mouse.

 

 

 

 

Regole di design di base per i touchscreen

L’approccio tradizionale monitor-mouse-keyboard appartiene al passato. È ora necessario considerare interazioni quali tap, multitouch, gesti, ecc.

  • Imprecisione del tapping – Pur utilizzando software di controllo accurati è difficile che il tap sullo schermo sia preciso.
  • I gesti sono diversi dal tap – Per effettuare lo scroll di una pagina l’utente deve scorrere il dito dal basso verso l’alto. Può sembrare un’informazione insignificante fino a quando non realizzi che con il mouse avviene l’esatto contrario (i.e. muovi il mouse dall’alto verso il basso).
  • Due o più tap – L’utente può effettuare il tap sullo schermo con più dita. Tale azione può avere un significato diverso rispetto al tap con un singolo dito in funzione del sistema operativo utilizzato dall’utente.
  • Dispositivi high-glare – I dispositivi portatili in alcune condizioni di luce possono rendere complicata la lettura.

 

 

Regole di design di base per i dispositivi mobili

  • Non posizionare elementi cliccabili troppo vicino l’uno all’altro.
  • Difficolta di gestione delle gerarchie – Alcuni menu dinamici gestiti da JavaScript mostrano i sottomenu quando il mouse passa sopra una determinata voce (i.e. hover). Sui dispositivi portatili questi menu potrebbero non funzionare correttamente o non funzionare del tutto e non mostrare i sottomenu.
  • Posizionare link e aree cliccabili distanti dal lato destro dello schermo – La maggior parte delle persone utilizza la mano destra e può capitare che in fase di scrolling, se un link è situato troppo vicino al lato destro dello schermo, si attivi inavvertitamente un altro collegamento.
  • Non esiste un mouse – La mancanza di un puntatore non rende possibile capire se un elemento della pagina sia cliccabile oppure no.
  • L’hover non è possibile – Le funzioni da eseguire quando il mouse passa sopra un elemento non sono possibili perché non esiste un mouse. Niente cambiamenti di colore dei pulsanti, nessun tooltip o cambiamenti di status della barra orizzontale o verticale.
  • I background neri possono rendere difficile la lettura quando il dispositivo si trova in condizioni di luce particolari.

 

Il modo migliore per capire se il sito che si sta costruendo sia compatibile con dispositivi touch è quello di testare continuamente le pagine che lo compongono. Esistono diversi tool con questa funzione, ma il controllo diretto è, al momento, quello più efficace e funzionale.

You may also like