Il web design è un argomento trattato in moltissimi libri, articoli e le regole su cui si basa sono molteplici, noi Ninja però ci siamo chiesti: cosa accade quando un website diventa un mobile site? Abbiamo cercato di raccogliere delle linee guida per i web designer che devono creare la versione mobile di un sito, cosa che spesso viene chiesto loro da un grande brand.
Partiamo dal concetto! Il web design, è un'espressione utilizzata per indicare la progettazione tecnica, strutturale e grafica di un sito web. La figura professionale si definisce web designer, il quale deve avere varie competenze che vanno dallo studio del singolo elemento alla complessità del progetto, ed avere competenze di usabilità ed accessibilità. La realizzazione di un sito web è un'operazione che coinvolge e fonde diverse competenze: il prodotto finale deve essere gradevole, di facile esplorazione, presentare in maniera chiara i propri contenuti ed essere utilizzabile in sicurezza e con semplicità. Occorre quindi elaborare una strategia da parte del brand stesso e dei web designer in modo da rendere gli utenti soddisfatti, per continuare a creare e ad aumentare quella fidelizzazione che porta benefici a entrambe le parti.
Vediamo insieme come arrivare ad un buon risultato.
Attenzione all'esigenza degli utenti
Esattamente come per i siti web, valutare l'importanza degli utenti è fondamentale, prima di tutto bisogna pensare alle loro necessità, alla facilità e soddisfazione con cui l'interazione uomo-strumento si compie, che permetta di trovare l'informazione che si sta cercando, stiamo parlando quindi di usabilità e accessibilità requisiti essenziali di qualsiasi sito, ancor più se si vuole creare un sito mobile dove i cambiamenti non riguardano solo il contenuto ma anche le dimensioni. L'interfaccia grafica di un sito (web e mobile) è il biglietto da visita di un brand con l'utente, ed è compito del web designer renderlo fruibile ed efficace. Insomma user friendly!
Definire la necessità di un mobile site
La partenza per la progettazione della versione mobile di un sito deve iniziare domandandosi i motivi per cui lo si vuole creare, che sia un lavoro indipendente e personale o l'incarico di un'azienda, il sito mobile deve partire con precisi propositi:
- Vendita di un prodotto
- Offrire o rilanciare un servizio
- Intrattenimento dell'utente
Considerare gli obiettivi aziendali
In molti casi sia gli sviluppatori che i designer vengono assunti da un cliente per la progettazione di un sito mobile per il proprio business, quindi le domande da porsi sono: Quali sono gli obiettivi che devono essere raggiunti? Pensate di creare un sito specifico o volete semplicemente adattare quello esistente per la visualizzazione su mobile?
Vi mostriamo 2 esempi realizzati con diverse modalità:
Prendiamo il sito web per Hyundai come esempio. Se si carica hyundai.com in un browser desktop, la prima cosa che si può notare sono le grandi immagini audaci che evocano un legame emotivo ai loro veicoli. Inoltre, si vede una navigazione robusta, richiami ai numerosi vantaggi di possedere una Hyundai, siti di ricerca e social links media.
Ora se si digita hyundai.com nel browser del cellulare si dispone di una versione ridotta del sito. Ma la caratteristica più importante è sempre la stessa: un'immagine relativamente grande del loro ultimo modello di veicolo, seguito da molte altre immagini dei veicoli. Hanno scelto di concentrare il proprio sito mobile sul loro principale obiettivo di business, che è quello di evocare un legame emotivo con la propria auto attraverso le immagini in primo piano.
Il secondo è il sito di Burger King, qui stiamo parlando di tutt'altro prodotto ma il criterio è lo stesso, almeno per quanto riguarda il sito web.
Per il sito mobile Burger King cambia completamente l'interfaccia che diventa semplice e pulita.
Sistemi operativi e Browsers
Prima di poter iniziare a progettare grandi contenuti per siti web mobile, è necessario acquisire familiarità con ciò che è effettivamente web mobile. E' importante essere a conoscenza e decidere per quali sistemi operativi (Windows Mobile, The iPhone platform, Palm OS, Mobile Linux, Symbian OS, The BlackBerry platform, Android) e browsers (Safari for the iPhone, Android browser, Opera Mobile, WebOS browser on Palm devices, BlackBerry browser, Internet Explorer Mobile on Windows Mobile devices) creare.
Studiare i dati del passato prima di procedere
E 'saggio studiare i dati prima di immergersi nella progettazione e nello sviluppo, in modo da valutare le scelte e le opzioni a disposizione.
Semplicità non significa mancanza di contenuti
Come regola generale la conversione da un design desktop in formato mobile, vuole semplificare le cose, ove possibile. Le considerazioni sull'usabilità e l'accessibilità del web mobile richiedono anche un approccio semplificato alla progettazione, configurazione, e la navigazione. Tuttavia, si può ancora creare un buon design ottimizzato per i cellulari. Le esigenze di un'interfaccia funzionale non devono tuttavia far dimenticare che i suoi elementi devono obbedire anche a regole estetico-culturali che danno identità all'ambiente. Integrità estetica significa che l'informazione è organizzata bene ed è coerente rispetto ai principi del visual design. Ciò significa che i contenuti sono ben visualizzati sullo schermo e la tecnologia dell'esposizione è di alta qualità.
Il Layout a colonna singola di solito funziona meglio
Una struttura a colonna singola tende a funzionare meglio, questo aiuta nelle gestione di spazio limitato, usando le tecniche del web design dinamico si può prendere una multi-colonna dal layout del sito desktop e adattarlo a un layout a colonna singola.
Gerarchia Verticale
Il sito ha un sacco di informazioni che devono essere presenti sul sito mobile? Un buon modo per organizzare le cose in modo semplice è quello di istituire una navigazione comprimibile. Utilizzando la struttura a colonna singola è possibile impilare le parti di un grande contenuto in moduli pieghevoli che permettano all'utente di tenere aperto il contenuto che gli interessa e nascondere il resto.
Da Click a Touch
Sul web mobile l'interazione avviene tramite l'utilizzo delle dita stesse anziché col clic del mouse. Questo crea una dinamica molto diversa in termini di usabilità. Durante la conversione da un design desktop al design di un sito mobile, è necessario rivedere gli elementi cliccabili - collegamenti, pulsanti, menu, ecc.
Fornire un feedback di interazione
Parlando di interazione, è necessario assicurarsi di fornire un feedback per qualunque azione che si verifichi sul front-end del sito mobile. Ad esempio, quando l'utente tocca un link o un pulsante, è buona norma vedere che quel pulsante cambia visivamente lo stato per indicare che è stato sfruttato e l'azione è stata avviata. E 'comune vedere un link di colore bianco girare completamente blu su iPhone quando è selezionato. Questo feedback visivo è familiare alla maggior parte degli utenti e sarebbe saggio utilizzarlo. Un'altra buona pratica è quella di usare un'immagine di caricamento animata per indicare qualcosa che è in corso.
Test,Test,Test!
Come per qualsiasi progetto, c'è bisogno di testare il sito web mobile con un maggior numero possibile di dispositivi. Senza possedere tutti questi dispositivi, può essere un po 'complicato trovare il modo di testarlo accuratamente per ciascuno, ma un suggerimento per facilitare questa procedura possono essere gli emulatori come ad esempio MobiReady e MobilePhoneEmulator, il primo fornisce un analisi approfondita su come un sito può funzionare su un dispositivo mobile, il secondo permette attraverso dei parametri da inserire di visualizzare il sito stesso, ma la cosa migliore per chi già possiede un mobile device è sempre quella di eseguire il test per sciogliere ogni dubbio. Inoltre la semplicità di siti web per cellulari rende il processo di testing più facile perché ci sono meno cose che possono andare storte. Con un design accurato e alcuni test ben pianificati, è possibile essere abbastanza certi che un sito web verrà visualizzato correttamente e, soprattutto,utilizzabile sulla maggior parte dei dispositivi mobili.
{NOADSENSE}
