Progettare un sito web partendo da dispositivi mobili e smartphones

Research’s Mobile Internet Report: il numero di smartphone venduti entro il 2012 supererà il numero dei PC e nel 2013 triplicherà.

Ci sono tre buoni motivi perchè siti web e applicazioni web based debbano essere disegnati per adattarsi, prima di tutto, ai dispositivi mobili: non solo ai nuovi smartphone, ma anche a semplici cellulari dotati di servizi web.
Primo motivo: si tratta di un settore coinvolto in una crescita esplosiva. Tra i dati statistici, basterà citarne uno: secondo il Research’s Mobile Internet Report, il numero di smartphone venduti entro il 2012 supererà il numero dei PC e nel 2013 triplicherà.

Non si tratta solo di un’opportunità per creare una versione mobile di un prodotto web già finito, piuttosto di fornire un’esperienza notevolmente migliore per i nostri utenti (UX, user experience) e siamo al secondo motivo.
Prendiamo un esempio noto a chiunque: Facebook, ma anche Twitter ed a cascata tutti i servizi di social networking, sono raggiunti da un numero doppio di utenti da dispositivi mobili rispetto agli utenti da sistemi desktop o laptop. Questo succede perchè i servizi che Facebook offre per gli utenti mobili hanno un impatto diverso (e migliore) dal punto di vista dell’esperienza utente.

E’ chiaro che il disegno per un dispositivo mobile ha un insieme di limiti fisici; secondo alcuni si tratta di limitazioni scomode, ma non è sbagliato considerarle un vero e proprio valore aggiunto. Inoltre lo schermo piccolo, le connessioni lente e il contesto di utilizzo (spesso non comodamente seduti di fronte ad una scrivania) possono essere elementi di stimolo per una perfetta progettazione.

1. Lo spazio sullo schermo
   Questo è il limite che ha il maggiore impatto: lavorare su uno spazio di 320X480 (e viceversa, per Iphone oppure Android Phones) oppure ancora più stretto fino a 240X320 (la stragrande maggioranza dei telefoni cellulari dotati di OS), comporta un taglio di circa l’80% dei contenuti di un sito progettato per una risoluzione di 1024X768.
   La perdita di questa spazio potrebbe, paradossalmente, spingervi a focalizzare gli sforzi solo sulle caratteristiche veramente importanti per i vostri clienti e/o per i vostri affari.
   Alcuni esempi di questa maggiore concentrazione li potete trovare sul sito di Expedia: nella sua versione mobile, la schermata con l’itinerario di viaggio, si presenta unicamente con gli orari di arrivo e di destinazione. Contrariamente alla sua versione desktop, dove l’utente è costretto a muoversi fino a metà della schermata ed a districarsi tra promozioni, immagini e menu estesi, oggetti inutili per il raggiungimento dell’obiettivo dell’utente.
   L’esperienza su un dispositivo mobile deve essere finalizzata, in modo preciso, su ciò di cui ha bisogno il potenziale cliente: non potrebbe essere questo un buon approccio anche per la progettazione di qualsiasi versione del nostro sito web?
2. Le connessioni lente
   La velocità di esecuzione sui dispositivi mobili é importante, nonostante sia difficile trovarsi in situazioni di buona connettività. Non c’é da sorprendersi, quindi, se il materiale utilizzato per sviluppare il disegno di un’interfaccia per mobile debba essere ottimizzato per risultare immediato, anche quando la connessione fornisce prestazioni meno che ideali.
   Ridurre il numero e il peso dei file eseguiti (unito ad un uso corretto di HTML5 e CSS3, a cui dedicheremo un intero tutorial) può aumentare in modo esorbitante la velocità di download.
   Le stesse operazioni sono in grado di rendere più veloce e di risposta (Responsive Design), anche la versione desktop dello stesso sito, e di evitare ai suoi utenti inutili attese di fronte al caricamento di una homepage: attesa che spesso si traduce in un rapidissimo abbandono.
3. Il contesto di utilizzo
   Un utente può avere a disposizione un dispositivo mobile in un qualsiasi momento della giornata e quindi lo può utilizzare in diversi contesti: a casa, al lavoro, in coda ad uno sportello, sui mezzi pubblici, etc. Sono momenti brevi, pochi minuti in cui l’utente vuole captare qualcosa di suo gusto oppure scongiurare la noia per un attimo.
   Questo significa che il nostro sito web deve veicolare informazioni veloci e significative. Ancora una volta si tratta di un approccio riutilizzabile anche per la versione desktop: i prodotti che sono progettati per essere utilizzati più volte durante la giornata (es. lettura dei tweet), incoraggiano il riutilizzo a prescindere dalla piattaforma in cui sono presentati.

Il terzo vantaggio di una progettazione per dispositivi mobili, infine, lo si trova nelle capacità che rendono unici alcuni smartphones, tra cui iPhone: il touch-screen, la geo-localizzazione (con bussola e accelerometro digitale) e la video camera integrata .

1. Le nuove gestualità dei dispositivi multi-touch
   Insieme all’aumento del numero di iPhone venduti, crescerà sicuramente anche il numero delle persone che si muove tra contenuti web con le dita piuttosto che il puntatore di un mouse (qui a fianco riportiamo una tavola che descrive i dieci gesti base per i comandi di un dispositivo touch).
   Alcuni di questi gesti permettono un nuovo tipo di interazione, trasformando una comune attività di ricerca informazioni, in un’esperienza più semplice e anche divertente. Un esempio é l’applicazione di Yahoo! Sketch-a-Search: per cercare qualcosa da mangiare in una zona determinata, basta disegnare un cerchio con il dito sulla mappa per vedere un elenco di risultati locali. Non c’é bisogno di scrivere nulla!
2. La consapevolezza della posizione
   Altre applicazioni, come ad esempio Yelp, permettono di andare oltre: senza bisogno di fornire alcun input iniziale, basta aprire l’applicazione con un singolo tap per vedere subito un elenco di ristoranti nelle immediate vicinanze della posizione del dispositivo mobile. Se poi al rilevamento della posizione si aggiungono anche le potenzialità fornite da una bussola digitale e da una web camera, é possibile fornire all’utente finale informazioni direttamente correlate al suo orientamento nello spazio e disporle sopra ciò che vede attraverso la video-camera: non si tratta di fantascienza ed un web browser di questo tipo esiste già per dispositivi iPhone e Android (www.layar.com).

Quando la realizzazione di un sito web incomincia prendendo in considerazione le potenzialità offerte dai dispositivi mobili, é possibile migliorare – se non addirittura fornire la migliore accesibilità e usabilità. Le limitazioni dello strumento costringono a disegnare siti web con obiettivi precisi, veloci e con una certa frequenza di utilizzo.
Una volta raggiunto questo obiettivo si può ridimensionare il tutto, eliminando quello che un browser per desktop non può ancora interpretare (es. i gesti di un touchscreen) e ottenere così un’esperienza di utilizzo su schermi da tavolo altrettanto diretta e finalizzata. Anche un PC, in fin dei conti può essere geo-localizzato e può disporre di una web-cam…

Per approfondire e conoscere tutti gli aspetti del web design scopri tutti i dettagli dei nostri corsi.