Sviluppi per Touch Screen ? Trucco 2 di 4 - la posizione delle dita

Continua la serie di post sulle interfacce per touch screen iniziata venerdì scorso con il Trucco 1.

Stavolta parliamo di una avvertenza quasi scontata che però ogni tanto produce qualche vittima.

Trucco 2. Valutare la posizione delle mani e delle dita

Sapere come è posizionato o usato il touch screen su cui andrete a gestire l’interfaccia vi può dare indicazioni utili sulla posizione delle dita dell’utente al di sopra del vostro schermo.

A cosa vi serve sapere la posizione delle dita ? A capire quali zone dello schermo sono coperte dal dito stesso, o dalla mano.

Un giorno ho implementato uno strumento grafico il cui cursore poteva essere trascinato per lo schermo. Durante il trascinamento, un valore di riferimento veniva aggiornato in tempo reale.
Il design dell’interfaccia prevedeva che il valore in questione, per esigenze grafiche, fosse posizionato al di sotto dell’oggetto trascinato. Errore ! Orrore ! Il valore veniva coperto dal dito, e quindi risultava illeggibile dall’utente..

Quando progettate un'interfaccia utente per touch screen, ragionate su come viene 'toccato' l'hardware. Si tratta di un pannello a parete montato ad una certa altezza ? Si tratta di un tablet che viene tenuto a due mani, lateralmente ? Si tratta di un cellulare tenuto da una sola mano ?

Il modo in cui la mano si avvicina al touch determina anche l'angolazione (dal basso, dai lati) con cui il dito si appoggia allo schermo (e alla vostra UI) e quali zone dello schermo stesso sono 'critiche', nel senso che vengono oscurate dalla mano o dal dito stesso.

Trattate queste zone come 'zone rosse' (vedi foto) in cui posizionare meno oggetti possibili o comunque nessuna informazione rilevante quando coperte dal dito dell'utente.

Un esempio pratico di questo 'trucco' lo si può vedere come design pattern estremamente diffuso nelle interfacce dei videogiochi per iPhone / iPod Touch.

Quando il videogioco richiede la presenza di controlli in stile 'console', questi vengono sovrapposti alla schermata del gioco, ma vengono posizionati nei margini estremi del display (nella foto, negli angoli in basso a destra e in basso a sinistra).

In questo modo la 'zona rossa' viene ridotta al minimo indispensabile.

Banale, ma importante. Ricordiamocene.

Aggiornamento successivo alla pubblicazione: 

Visto che siamo in tema riporto questo post dall'ottimo blog 'ignore the code', in cui si suggerisce, per aumentare l'usabilità dei giochi basati su touch screen, di simulare uno stick analogico invece di uno digitale.