5 Semplici ottimizzazioni per la user-experience su Tablet

17 Settembre 2015

Web

Indice Contenuti

Il gigante informatico di Mountain View, secondo indiscrezioni riportate dall’autorevole Wall Street Journal, si appresta ad inserire la funzionalità di acquisto (buy button) direttamente dai risultati di ricerca. Come potrebbe cambiare il mondo del commercio elettronico?

Secondo i dati diffusi da Audiweb Trends lo scorso giugno, la percentuale di utenti che utilizza un tablet per navigare sul web è aumentata del 27,4% nell’ultimo anno. Tablet come l’iPad o il Samsung Galaxy hanno saputo ricavarsi nel giro di pochi anni una fetta di mercato sempre più ampia, unendo vantaggi come la facilità di utilizzo e la possibilità d’uso in mobilità.

A volte, però, l’esperienza di navigazione –la famigerata user-experience! –è deludente: la sensazione prevalente è che il design del sito non tenga conto di tanti limiti fisici e tecnologici del browsing via tablet. Chi non si è ritrovato a imprecare di fronte a link troppo piccoli per essere tappati con la punta delle dita? O a menù che rispondono con tempi geologici? O a compilare moduli in cui l’autocorrezione del dispositivo è tutto fuorché intelligente e collaborativa? La terribile sostituzione di “sa” con “sto arrivando” di iOS ha causato da sola più contumelie del rigore sbagliato da Baggio ai Mondiali del ’94…

In questo articolo sintetizzerò cinque brevi strategie per ottimizzare la user experience su tablet – e per estensione sulla versione mobile del vostro sito.

Aumentare le dimensioni dei font

Certo, i tablet e gli smartphone son sempre più grandi e definiti – si veda l’ingombro crescente del nuovo iPad Pro, ormai usabile anche come tavolo da picnic… e nonostante questo la leggibilità delle pagine resta un punto critico. I fattori da tenere d’occhio sono fondamentalmente la dimensione del font (16px minimo) e l’interlinea (18px minimo); nel caso dei titoli,  un buon letter-spacing può rendere più rilevante la gerarchia visiva della pagina.
Infine, visto che molto spesso i tablet vengono usati in condizioni di luce particolare (all’esterno, con vari riflessi) uno palette cromatica particolarmente contrastata per i caratteri più piccoli è da consigliare (ulteriori approfondimenti sull’aspetto tipografico del web in questo nostro articolo).

Attivare le tastiere contestuali

Le tastiere contestuali sono quelle il cui layout su tablet o su smartphone varia in base al contesto del dato che si sta inserendo. Ad esempio, dichiarando un input in questo modo:

il browser  visualizzerà una tastiera dotata solo di cifre numeriche, rendendo più semplice la digitazione del dato. Altre tastiere che si possono visualizzare includono:

Tastiera per indirizzi web

Tastiera per indirizzi email

Tastiera per numeri di telefono

Tastiera per date

Tastiera standard

Disattivare le funzionalità di correzione automatica e maiuscole automatiche

Questa ottimizzazione è molto semplice da implementare. Nei campi dei form del vostro sito, disattivate le funzionalità del correttore grammaticale e delle maiuscole automatiche; queste due modalità – quando funzionano – possono essere utili, ma nella maggioranza dei casi sono un impiccio. Gli attributi da aggiungere ai tag input sono i seguenti:

Aumentare le dimensioni di link e pulsanti

I punti di interazione del sito devono essere facilmente cliccabili, senza richiedere all’utente la precisione di un cardiochirurgo. Per questo, nella visualizzazione su tablet e smartphone, è utile aumentare il padding di pulsanti e link per un totale di almeno 30-35 pixel, sia in altezza che larghezza.

Non affidarsi agli stati hover

Almeno per il momento, nessun dispositivo touch è in grado di leggere con affidabilità la posizione in hover (la “sovrapposizione” del cursore ad un dato elemento). Questo significa che utilizzarlo nei menù, nei link o altri elementi attivi della pagina rischia di dare risultati non congrui o prevedibili per tutti i dispositivi. Può andar bene mantenerli per la versione desktop, ma non date per scontato che su tablet il comportamento sia lo stesso.

Altre risorse per lo sviluppo responsive