MasterNewMedia Italia
Scopri i migliori tool per comunicare,
collaborare e fare marketing
   
Curated by: Luigi Canali De Rossi
 


16 novembre 2007

Usabilità Per Contenuti Mobile: Migliorare Il Design Dei Contenuti Per Chi Visita Il Tuo Sito Dal Cellulare


Sempre più utenti accedono ad Internet con cellulari e smartphone. E tu, cosa stai facendo per rendere il tuo sito o il tuo blog fruibile per chi è così fedele da seguirti anche con il telefonino?

BBC-on-mobile-phone.jpg
Photo credit: BBC Mobile

In alcuni Paesi europei, per esempio, la diffusione dei telefoni cellulari ha già quasi raggiunto il punto di saturazione, e molti dei browser installati sui telefonini riescono ormai a visualizzare siti web che erano stati costruiti esclusivamente per la fruizione via pc. Oggi, infatti, oltre il 20% degli utenti inglesi naviga utilizzando il proprio cellulare (fonte: 3G.co.uk).

Ecco perché, se al giorno d'oggi disegni o gestisci un sito web, non puoi fare a meno di sottovalutare o trascurare come questi contenuti verranno visualizzati sullo schermo dei cellulari.

Abid Warsi e il team dedito all'usabilità della WebCredible, hanno raccolto sette regole base per chi vuole ottimizzare la fruibilità del proprio sito per gli utenti mobili.

Queste regole si basano su una ricerca che WebCredible sta ancora conducendo, sebbene non siano stati specificati dati relativi al numero degli utenti. Agli utenti componenti il campione è stato chiesto di descrivere la loro esperienza di navigazione tramite dispositivi mobili, su popolari siti web. Il frutto dei problemi e delle difficoltà incontrate sono queste sette linee guida.

 

nokia-n95-interface.jpg

 

7 Usability Guidelines for Websites on Mobile Devices




1) Accontenta Velocemente l'Utente

yahoo-one-search.gif
OneSearch di Yahoo! individua cosa l'utente sta cercando e adatta i risultati al luogo in cui si trova.

Gli utenti via telefonino e via pc possono visitare lo stesso sito per motivi molto differenti.

Chi naviga stando in movimento ha bisogno di informazioni legate maggiormente al luogo e al momento in cui effettua la ricerca. Inoltre questi utenti possono desiderare di trovare un posto in cui rilassarsi per poco tempo nelle vicinanze, oppure cercano qualcosa da leggere sull'autobus o mentre aspettano un amico.

Pertanto il tuo compito, in qualità di gestore del sito, sarà quello di individuare i bisogni di chi consulta i tuoi contenuti ed essere in grado di procurare le informazioni cercate nel minor tempo possibile. Ogni contenuto dovrebbe seguire questa regola, a parte quelli che vengono scaricati ed immagazzinati nella memoria del telefonino (es. le suonerie).

Yahoo! è riuscita in questo intento con il suo nuovo servizio dedicato al mondo mobile oneSearch. Cercando la parola 'Cinema', sarà creata una lista delle sale cinematografiche ubicate nelle vicinanze dell'utente, completa di indirizzi e numeri di telefono. A questo punto basterà cliccare sul link Call accanto al numero per contattare il cinema desiderato. In futuro probabilmente si potrà cliccare su una mappa, selezionando direttamente la destinazione che ti interessa.



2) Evita di Ripetere la Navigazione in Ogni Pagina

bbc-mobile-breadcrumb.gif
La linea che rappresenta la collocazione di una pagina all'interno di una struttura gerarchica, presente nel sito della BBC, risparmia spazio ed è un'ottima alternativa alla ripetizione del menù di navigazione.

I siti usabili creati per i pc tendono a ripetere il menù di navigazione in ogni pagina.

Sicuramente lo sfruttamento dello spazio è fondamentale nel presentare testi e immagini sui piccoli schermi dei telefonini. Per esempio la barra di navigazione nel sito della BAA occupa l'intera schermata, così da costringere chi legge a usare lo scroll in ogni sua pagina, operazione piuttosto fastidiosa.

Per il tuo sito web mobile è necessario che il menù di navigazione sia visualizzato solo nell'homepage. Basterà inserire nelle altre pagine un link che rimanda alla homepage o permettere di ripercorrere a ritroso tutto il cammino compiuto fino a quel momento. È il caso di inserire i link in cima e in fondo alla pagina, in modo da non doversi spostare mai troppo da dove si sta leggendo. La versione Mobile del sito BBC mette in pratica realmente tutto questo con la linea che rappresenta la collocazione di una pagina all'interno di una struttura gerarchica (in inglese breadcrumb trail) all'inizio della pagina e i link cliccabili in fondo.



3) Evidenzia Chiaramente gli Elementi Selezionati

o2-active-highlighting.gif thomson-local-highlighting.gif
Gli elementi selezioanti su O2's dovrebbero essere più marcati per essere visibili. In Thomson Local il design semplice delle pagine permette di far risaltare la selezione in maniera più efficace.

Chi naviga con il cellulare ha scarso controllo del cursore.

Questo perché puntando verso il basso (con il joystick o con il pulsante di direzione), si comanda contemporaneamente lo scroll e lo scorrimento attraverso le voci dei link o i campi dei form. Per evitare questo inconveniente è importante dare sempre all'utente un feedback visuale, utile a capire quale sia la voce selezionata. Basterà dare un aspetto diverso all'elemento selezionato in modo da farlo risaltare. Per esempio puoi cambiare font o evidenziare con un colore differente lo sfondo dei link.

Un altro esempio è il portale mobile di O2 che non fa risaltare i pulsanti in maniera corretta. Si limita a bordare di blu la voce selezionata sul fondo celeste. In questo modo risulta scarsamente visibile e l'utente è costretto a muovere il joystick per ritrovare il cursore. Peggio ancora, Thomson Local distingue le varie voci rendendole solo leggermente più spesse del normale. Viceversa, i suoi link sono molto visibili perché viene modificato il font ed il colore, ed il contrasto con il fondo bianco è ottimo.



4) Semplifica il più possibile l'Inserimento di Input

thomson-local-text-entry.gif odeon-mobile-cinema-list.gif
Spesso si commettono errori inserendo lunghi testi su Thomson Local. E' possibile invece trovare il cinema giusto utilizzando la Cinema List dell'Odeon.

È meglio che l'utente abbia la possibilità di scegliere tra diverse voci, piuttosto che inserire del testo.

Come sai, inserire il testo con un telefonino è spesso tremendamente lento, inoltre è facile fare errori utilizzando la tastiera standard da 12 pulsanti. Una serie di link ben progettati e pagine di facile e veloce caricamento sono in questo caso molto più efficaci.

Su Thomson Local, per esempio, è impossibile trovare posti o eventi. Spesso utilizziamo abbreviazioni che portano ad errori nei risultati delle ricerca. Il sito web mobile di Odeon, invece, permette di cercare un cinema sia con la ricerca che con la navigazione. Nel primo caso è facile commettere degli errori, ma nel secondo si riesce a trovare la risposta giusta cliccando al massimo un paio link.



5) Mostra solo le Informazioni Essenziali

thomson-local-highlighting.gif BAA-unnecessary-links.gif
Contenuti non necessari spostano la search box di Thomson Local e le informazioni principali della BAA in una zona dello schermo non visibile.

Gli schermi dei cellulari sono piccoli e possono contare solo su una frazione dei pixel che un monitor per pc mette a disposizione.

Per questo, assicurati sempre di inserire soltanto le informazioni essenziali in grado di soddisfare le richieste degli utenti. Altrimenti rischi che contenuti importanti finiscano in fondo alle pagine e risultino così difficili da trovare. Inoltre, molti utenti pagano la connessione a tempo e per loro potrebbe essere molto frustrante dover spendere denaro per caricare elementi della pagina che non ritengono utili.

I link di testa dei siti di BAA e Thomson Local occupano molto spazio e rendono difficoltosa la ricerca delle informazioni più importanti. 'About BAA', 'Help' e 'Advertise with us' non sono certamente contenuti utili per gli utenti mobili.



6) Posiziona i Comandi Principali del Browser nella Pagina

tfl-browsing-controls.gif
Il sito di TFL è semplice da navigare perchè i comandi base sono in ogni pagina.

Per risparmiare spazio, spesso i browser per dispositivi mobili non mostrano comandi base oppure mantengono la visualizzazione a tutto schermo. È importante includere sempre il comando 'Back' in ogni pagina al di fuori dell'homepage.

Il sito di Transport for London mostra sempre i comandi 'Next page', 'Back to results' e 'New journey', in fondo ad ogni pagina.



7) Crea un Layout Mobile-Friendly

tfl-screen-rendering.gif BAA-screen-rendering.gif
Il sito web mobile di TFL viene visualizzato bene sullo schermo del cellulare, mentre nessuno di coloro che hanno progettato il sito della BAA ha pensato agli utenti dei cellulari.

Assicurati di progettare la pagina in modo da presentare il contenuto nel giusto ordine e da essere visualizzata correttamente sullo schermo di un telefonino.

Il layout delle pagine pensate per la visualizzazione sui monitor dei pc non funziona correttamente sugli schermi dei cellulari, i quali sono predisposti per pagine a sviluppo verticale.

Per questo motivo è consigliabile mantenere differenti layout per la versione per pc e per quella mobile. Se poi gli utenti via telefono rappresentano larga parte del tuo business, è opportuno creare un sito dedicato soltanto a loro. Se un sito è costruito e pensato per un cellulari o dispositivi mobili in generale, funzionerà sicuramente meglio di uno che invece non lo è.

Per esempio, la visualizzazione del sito di BAA sullo schermo del cellulare appare imbarazzante; è chiaro che il layout è stato pensato per lo schermo di un pc, e il codice retrostante è stato progettato di conseguenza (in termini di relazioni tra elementi). Singole parole vengono spalmate anche su quattro righe, aumentandone la difficoltà di lettura. Invece la versione mobile della homepage di TFL presenta semplici serie di link molto facili da utilizzare.



Consigli

Non trascurare i tuoi lettori attuali o potenziali evitando di pensare e progettare il tuo sito anche per la navigazione via telefono cellulare.

Prova a seguire queste regole, ma non dimenticare di eseguire degli usability test del tuo sito su telefoni cellulari. Questo ti permetterà di non farti sfuggire problemi che le sole regole non sono capaci di rilevare.

In sintesi: quando finalmente deciderai di considerare quei lettori che provano a visitare il tuo sito dal loro cellulare le tue opzioni saranno le seguenti:

  1. Non fare nulla
    Evitare qualsiasi provvedimento non è certamente una soluzione, ma è sicuramente l'opzione più semplice! Gli apparecchi cellulari stanno diventando sempre più sofisticati e pensati per la navigazione. Se il tuo sito si basa sui CSS (non usa le tabelle per il layout) potrebbe anche essere visualizzato in modo decente sul telefonino, ma, in genere, i siti pensati per i pc hanno una resa scarsa, per non dire infima, sugli schermi dei cellulare.
  2. Creare un foglio di stile per dispositivi mobili
    Una buona soluzione di breve periodo (semplice da implementare) è quella di creare un foglio di stile utilizzato esclusivamente per dispositivi mobili, capace di garantire maggior controllo su aspetto e contenuto del tuo sito. L'uso dei fogli di stile permette inoltre di nascondere elementi nella versione mobile, impostando in CSS il parametro 'display: none'. Il problema è che non tutti i browser supportano i fogli di stile per dispositivi mobili.
  3. Costruisci un sito esclusivamente dedicato al mobile
    La miglior soluzione è creare un sito web modificato appositamente per apparecchiature mobili, ma naturalmente è anche la più dispendiosa in termini di tempo. Avrai bisogno di migliorare il rilevamento server-side per verificare che gli utenti siano collegati tramite cellulare e quindi rimandarli al sito specificatamente dedicato.

 
 
 
 
 
Commenti    
blog comments powered by Disqus

 

 

 

 

8251
 




 

I Toolkit di Robin


 









 

 

 

 

  • RSS Feed

          Mail
    Nome:
    Email:
     



     
     

     

    Web Analytics