CercaEsegui ricerca
Web Design e UXD
6 regole di design per progettare siti web accessibili da dispositivi mobili

6 regole di design per progettare siti web accessibili da dispositivi mobili

14 novembre 2014
6 regole di design per progettare siti web accessibili da dispositivi mobili

Viene descritta in questo articolo la tecnica di design responsivo e vengono forniti una serie di consigli per progettare efficacemente un sito web dal punto di vista della disposizione dei contenuti, concentrandosi in particolare sull'accesso da dispositivo mobile.

Siamo sempre più "connessi" e aumenta la diversità dei dispositivi a nostra disposizione per navigare in internet. La mattina ci colleghiamo a un sito da smartphone, durante la giornata dal computer di lavoro e magari la sera da un tablet. Cambiamo quindi continuamente le dimensioni dello schermo dal quale accediamo a internet e le modalità di interazione con esso (passiamo dai click con il mouse ai tap con le dita della mano). E' in questo contesto che sta prendendo sempre più piede la tecnica di web design definita design responsivo.

Questa tecnica consiste nella realizzazione di siti che si adattano in modo automatico al dispositivo con il quale vengono visualizzati. Nell’adattarsi al dispositivo, i siti web responsivi non solo ridimensionano i contenuti ma li adattano appunto, in maniera da garantire alto il livello di accessibilità al sito.

Un menu dei contenuti verrà ad esempio visualizzato con i testi scritti per esteso se la navigazione avverrà da sistema desktop e verrà invece racchiuso in un unico pulsante se la navigazione avverrà da dispositivo mobile. Al momento del tap dell'utente sul pulsante menù, questo verrà esteso in verticale mostrando i vari elementi in esso contenuti.

Nell'immagine che segue è mostrato un esempio di menù nel caso di accesso da sistema desktop (in alto a destra in figura).

 

menu img internet da browser desktop

 

Accedendo invece da dispositivo mobile, il menù sarà rappresentato da tre segmenti orizzontali (immagine a sinistra) e momento del clic mostrerà l'elenco dei contenuti (immagine a destra).

 

menu img internet da mobile      

Un semplice modo di verificare se un sito è progettato in maniera responsive è quello di ridimensionare la finestra del browser riducendone la larghezza (componente orizzontale) e vedere cosa accade.

Dal momento che la tecnologia mobile è più recente di quella desktop è importante domandarsi quali siano le regole da seguire per rendere un sito web ben accessibile anche da questo tipo di piattaforme.

Il sito webdesignerpot.com elenca 6 regole per il corretto design di un sito web, quando la navigazione avviene da dispositivo mobile. Ne prendiamo spunto integrando i punti anche con quella che è la nostra esperienza:

1: Studia il tuo bacino d’utenza

Uno dei più grandi vantaggi dei sistemi attuali in ambito digitale è la disponibilità di strumenti di analisi sempre più accurati.

E’ possibile infatti, previa corretta configurazione e uso delle piattaforme giuste, effettuare un monitoraggio costante del comportamento dei tuoi utenti e capire sulla base di esso quali sono le disposizioni ideali degli elementi di una pagina dal punto di vista della usabilità e dal punto di vista dei risultati in termini di ROI.

A partire dall' analisi è possibile infatti disporre i contenti nella maniera più adatta alla maggioranza degli utenti del tuo sito.

2: Il contesto è un elemento chiave

In riferimento a quanto trattato al punto precedente è importante approfondire il tema del contesto. In questo caso parliamo delle necessità dei tuoi utenti, soprattutto in relazione al contesto a cui appartengono.

Gli attuali strumenti di analisi consentono di profilare gli utenti in maniera sempre più accurata anche dal punto di vista degli interessi, fasce di età, sesso e contesto sociale.

Il lavoro su questo punto porterà a definire il modo in cui gli elementi debbano essere disposti in una pagina non sulla base di semplici ipotesi ma su misura per chi la utilizzerà. Questo consentirà agli utenti del tuo sito di trovare le informazioni e i prodotti che cercano.

3: Tieni presente la navigazione tramite schermo capacitivo

E’ importante considerare che chi visualizza un sito da mobile non ha a disposizione un mouse. Questo aspetto può sembrare scontato ma la situazione attuale mostra che non è preso ancora del tutto in considerazione. Pensate a quando accedete a un sito e vi appare un’immagine al di sopra dei contenuti del sito che per chiuderla dovete selezionare con il dito una x molto piccola, se presente, nell'angolo in alto a destra.

Nella navigazione di un sito l’utente sta riponendo fiducia in noi, un po’ come quando si attende un servizio seduti al tavolo di un ristorante o nella sala d’attesa in uno studio per una consulenza. La navigazione in un sito alla ricerca di un contenuto o un prodotto può essere paragonato a questo. Se abbiamo in mente di trasmettere agli utenti professionalità, non possiamo trascurarlo.

4: Mantieni il design semplice

Per gli stessi motivi di quanto espresso al punto precedente, l’obiettivo non dovrà essere quello di sorprendere ma accompagnare l’utente verso quello che sta cercando.

La semplicità è la strategia migliore e deve anche a questo la diffusione crescente dell'approccio flat design. Per approfondire questo tema clicca qui.

5: E' preferibile la disposizione a singola colonna

Nell’utilizzo di un dispositivo mobile l’approccio di navigazione più semplice che si può offrire all'utente è quello dello scroll verticale, proprio per il modo in cui si presta in maniera naturale all’utilizzo delle dita sullo schermo per scorrere contenuti.

Posizionare i contenuti su più colonne obbligherà i tuoi utenti a maggiore fatica, e si rischierebbe a lungo andare di comunicargli, magari a differenza di un concorrente, di non avere interesse a farlo sentire a proprio agio.

6: Integra i contenuti con i Social Media

Nell’articolo da cui si è preso spunto si fa riferimento al fatto che è dimostrato che gli utenti che navigano da dispositivo mobile sono particolarmente propensi alla condivisione dei contenuti. Una valida integrazione con i social potrà quindi migliorare il rendimento delle tue pagine. Se sei interessato all'argomento ti consigliamo di consultare le nostre sezioni del blog relative a Marketing e Social Media.

Stampa

2014 Img Internet srl,  via Moretto da Brescia 22 - 20133 Milano tel +39 02 700251 - fax +39 02 7002540
Privacy Policy