web design for mobile

Pratiche utili allo sviluppo di un web design mobile.

March 19, 2012

Le interfacce per mobile, destinate a siti web o ad applicazioni native, richiedono una pratica progettuale differente rispetto a quella per il tipico web design. Come sottolineato ormai in almeno 3 articoli passati (uno, due e tre ), la previsione della visualizzazione da mobile è ormai un requisito per la maggior parte dei progetti, e negli anni a venire questo fatto sarà ancora più diffuso. Il dispositivo è portatile, lo spazio display notevolmente ridotto e la navigazione avviene con una serie di gesture differenti dal “click” di un mouse: il buon progettista deve prendere in considerazione moltissime “best practice” per evitare i tipici errori da noob.
In questo articolo presenterò alcune delle migliori pratiche di base per la progettazione di un buon web mobile, e le differenze principali nella progettazione per il “web tradizionale”.

La navigazione

Così come è importante pianificare e progettare la navigazione efficace per un sito normale, è ancora più importante importante fare lo stesso per una interfaccia mobile.

La navigazione è il primo punto ESSENZIALE su cui tutti i web designer e sviluppatori hanno bisogno di concentrarsi. Senza una buona, navigazione usabile, l’utente si confonde, non è in grado di trovare ciò di cui ha bisogno, e inevitabilmente abbandonerà il sito.
Se optate per un look creativo, sentitevi liberi di tenerlo creativo: accessibilità e creatività non si escludono a vicenda.
Se avete in mente un sito responsive ci sono pochi punti essenziali da ricordare:

  • Tasti di grandi dimensioni con un padding extra per facilitare il “tap”.
  • Mantenere la navigazione semplice. E’ inutile inondare una barra di navigazione con diverse opzioni; meglio sceglierne cinque o meno, e creare menù di sub-navigazione, se necessario.
  • La navigazione verticale è molto più di una tendenza, è il metodo migliore per non sbagliare. Se si decide di creare un qualsiasi tipo di navigazione orizzontale uno stile minimal è essenziale per renderlo utilizzabile.

design web mobile

design web mobile

Sinteticità dei contenuti

Dal momento che lo scorrimento orizzontale non è previsto da molti browser per dispositivi mobile, la principale modalità di visualizzazione dei contenuti sarà con scorrimento verticale. Nessun utente vuole scorrere all’infinito lunghi contenuti, quindi è necessario evitare lunghe pagine testuali e prevedere che in qualsiasi momento sia possibile aprire una nuova pagina senza scorrere nuovamente la pagina.
Ecco alcune tecniche:

  • Organizzate delle “pause”, punti in cui sia possibile interrompere la lettura o aprire un menù di navigazione.
  • Prevedete le varie pagine come sezioni da vedere e nascondere (hide e show in accordion per esempio ).
  • Prevedete la realizzazione di un sito complesso? Abbondate di sottomenù. Affinano le ricerche di ciò che l’utente sta navigando attraverso diverse piccole finestre.

design web mobile

design web mobile

Web responsive

Se possibile bisogna sempre pensare responsive. Occhio al tempo però.

Il web responsive aiuta anche in questo settore. Avere un layout che è completamente flessibile, realizzando al tempo stesso una sola pagina che viene ottimizzata per un supporto o l’altro… ha enormi vantaggi.
Lo svantaggio principale è che la realizzazione di un layout responsive richiede una lunga progettazione, tanto tempo e una realizzazione a regola d’arte. Per esempio bisogna prevedere che gli utenti iPad possono passare in un istante dalla visualizzazione landscape a portrait. Inoltre durante la creazione del sito responsive, il ridimensionamento avviene con strumenti web che simulano la trasformazione, ma questa non è sempre fedelissima!

design web mobile

L’utilità delle icone

L’uso delle icone rende tutto più semplice e veloce: navigazione, orientamento, comprensione dei contenuti.

Come per le applicazioni mobili native, le icone sono una parte standard dell’interfaccia. Usate icone in abbondanza sopratutto nella navigazione principale, ma anche per link immediati, come i contatti o l’accesso al profilo su qualsiasi social network. L’uso di icone rende anche tutto più user friendly dato che un bottone è più semplice da “tappare” rispetto ad un piccolo link testuale.

design web mobile

design web mobile

Queste sono le prime regole essenziali che ho avuto modo di identificare negli ultimi 2-3 mesi di mobile, ma di sicuro ci sono altri fattori da considerare!
Voi per esempio quali consigli aggiuntivi avreste per la creazione di interfacce mobile a prova di bomba?

Tags: , , , , ,

Leave a Comment