Ottimizzare le interfacce per l’interazione multitouch

Published 7 years ago · 8 mins read

8 mins read

Le interfacce che incontriamo oggi nel Web e nelle applicazioni di oggi sono state principalmente ideate e progettate avendo in mente i dispositivi di input che sono stati utilizzati per più di 20 anni sui PC a partire dai primi Apple Macintosh, cioè tastiera e, sopratutto, il mouse. Ora, con l’avvento della tecnologia multitouch, le regole del gioco stanno cambiando. L’iPhone ha solo aperto la strada: ora la tecnologia multitouch è lo standard nel campo della telefonia di media/alta gamma, è stata il traino per il lancio di una nuova categoria di device, i tablet, e si sta timidamente affacciando anche nel campo dei notebook.

Le possibilità aperte da un’interazione più “naturale” e semplice (NUI, Natural User Interfaces) sono innumerevoli e vanno sfruttate appieno dalle interfacce di nuova generazione (Web e non), così come è necessario tenere conto delle limitazioni che impongono al progettista. Basta pensare ad esempio a quanto è poco preciso il “tocco” delle dita su uno schermo rispetto al puntatore del mouse.

Questo articolo cercherà di proporre una serie di tecniche e linee guida necessarie per rendere la nostra interfaccia il più usabile, semplice e piacevole possibile per un uso touch, Le riassumo brevemente qui di seguito:

  1. Usare interazioni naturali
  2. Dimensioni adeguate degli elementi interattivi
  3. Attenzione alla posizione delle mani
  4. Dimenticatevi dell’hover!
  5. Ottimizzare l’input testuale

1. Usare interazioni “naturali”

Uno dei grandi meriti di questa nuova generazione di interfacce sta nella capacità di rendere l’interazione il più “naturale” possibile, eliminando la mediazione di dispositivi di input non necessari (il mouse). Come? Con una serie di gestures (gesti) più o meno codificate, che permettono di manipolare gli elementi in modo semplice e immediato. L’intuitività delle interfacce multi-touch è evidente in questo video, in cui un bambino usa senza problemi un iPhone.

Quando progettiamo un’applicazione è utile quindi usare elementi interattivi che assecondino la naturalezza dell’interfaccia touch. Vediamone alcuni esempi.

No Scrollbar

Una delle cose più fastidiose delle interfacce classiche point-and-click è utilizzare le scrollbar per scorrere contenuti che sono troppo grandi per la finestra utilizzata. Quando si è trattato di disegnare il nuovo iOS, Apple ha ben pensato di eliminare questo scomodo elemento e di sostituirlo con qualcosa di più naturale: lo scorrimento del dito sullo schermo che permette di scorrere il contenuto in modo del tutto naturale. Poi, per rendere il tutto ancora più simile al mondo reale, i designer Apple hanno introdotto l’inerzia nel movimento (per intendersi se rilasciamo il dito, lo scroll non si interrompe, ma prosegue fermandosi in modo graduale, come accadrebbe nella realtà).

Gesture di zoom

Le gestures usate per attivare lo zoom. Da "Touch Gesture Reference Guide" (link in fondo all'articolo)

Zoom

In quasi tutti i dispositivi touch di ultima generazione, i controlli di zoom sono stati ormai sostituti da una gesture standard (avvicinamento/allontanamento delle dita), che rappresenta un’ottima metafora che riduce il gap concettuale tra effetto desiderato (ingradimento/rimpicciolimento dello schermo) e l’azione necessaria, restringendo quello che Norman chiama il “golfo dell’esecuzione“.

Drag-n-drop

Pensate a questa situazione: abbiamo un insieme di prodotti da scegliere ed aggiungere ad una lista inizialmente vuota. Cosa faremmo nella realtà? Prenderemmo fisicamente i prodotti e li sposteremmo nella nostra lista (che nella realtà può essere il cestino di un negozio). Perché non trasportare l’idea anche nelle interfacce virtuali? I controlli di tipo drag-n-drop, sono ottimi esempi di interazioni naturali, ovvero simili al mondo reale in cui viviamo. Guardate la differenza tra l’esempio a sinistra, in cui i singoli elementi sono aggiunti alla lista con il bottone “aggiungi” e quello a destra, che sfrutta la naturalezza del drag-n-drop.

Drag n drop

Due metodi di interazione a confronto: classico point-and-click VS drag-n-drop

2. Dimensioni adeguate degli elementi interattivi

Una delle prime cose che si nota utilizzando un’interfaccia touch (e una delle critiche più frequenti che le sono state mosse) riguarda la scarsa precisione del “dispositivo” di input, il dito, rispetto a quanto eravamo abituati a fare con il mouse. Questo è solo parzialmente vero: infatti ciò è anche dovuto al fatto che le interfacce erano (e sono ancora!) progettate per i cursori dei mouse, che hanno una precisione di 1-2 pixel. Con le dita non è così.

Le dimensioni dei touch-target devono essere sufficientemente grandi per permettere un’interazione agevole. Esattamente, quanto grandi?

Uno studio del MIT, intitolato Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) ha scoperto una grandezza media per un polpastrello di 8-10 mm. Da qui emerge la dimensione minima consigliata per ogni elemento interattivo. La dimensione in pixel corrispondente dipende dalla risoluzione dello schermo che stiamo considerando: lo schermo dell’iPhone 3GS impone, ad esempio, una dimensione minima di circa 30×44 pixel. Il design dovrebbe seguire la semplice equazione “+ importante = + grande” in modo da facilitare la vita dell’utente.

Gli elementi interattivi vanno poi anche adeguatamente spaziati: target troppo vicini possono far aumentare la probabilità di errore, facendo premere all’utente involontariamente un elemento piuttosto che un altro. Una spaziatura di 1-2 mm è lo standard. Tutte queste considerazioni sono relative in qualche modo alla legge di Fitt, che descrive con una formula matematica la relazione tra il tempo necessario per raggiungere un bersaglio, la sua dimensione e la sua distanza dal punto di partenza.

Nell’articolo LukeW | Touch Target Sizes, troverete una panoramica esaustiva sulle dimensioni minime suggerite dei principali produttori mondiali di smartphone.

3. Attenzione alla posizione delle mani

Una delle principali differenze tra interfacce GUI e NUI (quelle touch per intenderci) sta nel fatto che in quest’ultime il dispositivo di input corrisponde al dispositivo di output (lo schermo in entrambi i casi). Questo, come abbiamo visto, rende il tutto più semplice, ma può anche creare problemi: le mani possono infatti coprire elementi importanti dell’interfaccia, proprio quando ci servono!

Etichette posizionate sotto lo slider

Uno slider con le etichette posizionate sotto di esso: la mano copre informazioni essenziali

L’interfaccia va quindi progettata tenendo a mente queste restrizioni: posizioniamo informazioni in modo che non possano venire coperte dalle mani quando sono necessarie. Evitiamo quindi di posizionare le etichette sotto gli elementi di interazione. L’esempio di prima viene modificato semplicemente in questo modo.

Etichette posizionate sopra lo slider

Ora le etichette sono sopra lo slider: le mani non coprono più le informazioni

4. Dimenticatevi dell’hover!

Il progettista di un’interfaccia per dispositivi touch  deve assolutamente evitare l’uso dell”evento di hover, che attiva comportamenti al passaggio del mouse sopra determinati elementi. Uno dei suoi usi più comuni è l’evidenziazione di elementi interattivi quando il puntatore si posiziona su di essi: ad esempio link che assumono l’aspetto di link solo quando la freccina del mouse è sopra di essi.  Nei device multi-touch l’evento di hover non esiste e non deve essere considerato nel design dell’interfaccia. Un corollario molto importante di questa osservazione è il seguente:

Rendere immediatamente evidente cosa è interattivo nell’interfaccia e cosa no.

Deve essere chiaro cosa può essere toccato, manipolato, trascinato, ecc. e cosa no, senza affidarsi al passaggio del mouse sopra di esso. Ancora più importante, non utilizzare la tecnica (presente ad esempio nel recente redesign di Twitter) che visualizza controlli relativi ad un elemento solo al passaggio del mouse su di esso.

Il nuovo design di Twitter

5. Ottimizzare l’input testuale

Non c’è buon design che tenga: l’input da tastiera su interfacce touch resta il vero problema di questi device. Non a caso, parallelamente al lancio dell’iPad, Apple ha proposto anche una mini docking station per il suo nuovo gioiellino, corredata di una classica tastiera QWERTY per utilizzarlo comodamente quando si è a casa. Cosa deduciamo quindi?

Nuova sveglia su iPhone

Ora e minuti della sveglia per iPhone sono impostati con due comodi controlli select

Le richieste di input scritto all’utente dovrebbero essere ridotte al minimo sulle interfacce touch. Ci sono ovviamente alcuni casi in cui non possono essere eliminate (es. dobbiamo inserire nome e cognome), ma ci sono altri in cui possono essere semplificate o anche sostituite con qualcos’altro. Vediamo alcune tecniche.

Autocompletamento

I meccanismi di auto-completamento dei campi di testo sono essenziali per ridurre l’input di testo richiesto all’utente, che può quindi digitare poche lettere e ricevere suggerimenti sulle parole più comuni, cliccando poi su di esse per completare l’inserimento

Controlli Select Slider

Se le opzioni di inserimento possibili sono limitate (< 50-100) è molto più veloce usare un controllo di tipo Select piuttosto che richiedere l’input manuale da tastiera. In caso di input numerici si può anche utilizzare un controllo di tipo Slider.

Input vocale

Le tecnologie in questo campo sono ancora un po’ acerbe: a volte sono poco precise o non riconoscono parole difficili. Tuttavia ci sono alcune interessanti tentativi in questa direzione, che mira a sostituire lo scomodo input da tastiera con una modalità d’interazione più immediata e consona ad un device touch, che è anche solitamente estremamente mobile. Uno degli esempi migliori si trova nell’app di Google per iPhone e Android, che permette di fare ricerche sul web usando come input la propria stessa voce.

input vocale su iPhone

L'app per iPhone di Google permette di effettuare ricerche sul web usando la voce come input: una modalità molto adatta per il tipico contesto mobile in cui viene usato il device

Usare i nuovi tipi di <input> HTML5

Il recente update del linguaggio di markup web ha introdotto molti nuovi type da assegnare ai campi testuali <input> delle form. Oltre al solito text ora possiamo usare anche email, date, number, search, url solo per citarne alcuni. Oltre ad aumentare notevolmente la semantica del markup, l’uso di questi tipi invece del generico type=text permette ai dispositivi più avanzati di “aiutare” l’utente quando si tratta di inserire l’input testuale.

Non usare:
<input name="yourwebsite" type="text" />
ma:
<input name="yourwebsite" type="url" />

Guardate come cambia la tastiera sull’iPhone quando si usa la seconda notazione. Il dispositivo riconosce il codice e presenta immediatamente all’utente alcuni caratteri utili per scrivere una url (i simboli “.” , “/” e “.com”) e che sarebbero altrimenti stati più lunghi e difficili da raggiungere e da usare. Ottimizzazioni analoghe si possono avere usando i tipi emailnumber e tel.

Campo url su iPhone

La tastiera sull'iPhone presenta caratteri speciali se si usano i nuovi tipi per le form HTML5

Conclusioni

Quella appena finita non vuole assolutamente essere una lista esaustiva di “best practices” da seguire per la progettazione di interfacce multi-touch. Tuttavia negli ultimi anni, mi sono reso conto che il materiale presente in rete sull’argomento è, a parte rari casi, molto frammentato. Ho voluto riassumere qui quelle che ritengo le linee guida più utili per progettare applicazioni e siti web “pensati” per le interfacce che, presto o tardi, soppianteranno largamente le nostre care (ma ormai piuttosto anzianotte) GUI. Come dice Dan Saffer, uno dei guru in materia di interfacce gesturali:

we’re in the midst of an interaction design revolution

paragonabile al passaggio dalle interfacce da linea di comando a quelle basate su finestre, puntatori e icone, usate ancora oggi.

Se l’importanza delle NUI non bastasse a convincervi a tenere in considerazione queste regole pensate anche a questo: l’applicazione di queste tecniche, oltre che ad ottimizzare la User eXperience dell’utente che utilizza la vostra applicazione con un device “touch”, renderà l’interfaccia più usabile e semplice anche per gli utenti che vi accedono utilizzando  i classici dispositivi di input, cioè mouse e tastiera. Target più grandi sono più facili da cliccare anche per chi è dotato di mouse, usare interazioni più naturali permette di avere interfacce più intuitive a prescindere dal dispositivo di input, non affidarsi unicamente all’hover rende più evidenti gli elementi interattivi della pagina, ridurre l’input testuale velocizza le operazioni anche su un normale computer.

Altre risorse:

  • Dan Saffer, “Tap is the new Click”: in questa presentazione, che è stata fonte di grande ispirazione per la stesure di questo articolo,  Dan Saffer ci guida alla scoperta delle interfacce “gesturali” (non solo touch quindi), illustrandoci il loro funzionamento, alcune best practices per il loro design e prototipizzazione. Assolutamente FONDAMENTALE.
  • Touch gesture reference guide: una raccolta esaustiva di tutte le gesture più comuni usate nelle interfacce touch-based, by Luke Wroblewski
  • iPhone User Interface guidelines: dai maestri del design di Cupertino, le linee guida per la progettazione di interfacce per applicazioni e siti web ottimizzati per il melafonino.
  • Android User interface guidelines: le best practices suggerite ai designer che lavorano sul popolarissimo sistema operativo sviluppato da Google
  • UI Design and Interaction Guide for Windows Phone 7: anche Microsoft, dopo il recente lancio del suo nuovo OS per smartphone (molto interessante), propone delle linee guida per il design delle interfacce utente