Indice Contenuti
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.