Venerdì ho partecipato ad una giornata di formazione davvero rilassante immerso nei colli dell'Appennino Bolognese dove abbiamo giocato con presentazioni e lambrusco.

In questo post vorrei "sbobinare" la presentazione che ho fatto sul mobile first: una filosofia di progettazione dei siti web che è diventata il cavallo di battaglia di Luke Wroblewski, autore di un libro e di moltissime presentazioni sull'argomento.

L'approccio classico alla progettazione di un sito web mobile molto spesso è subordinata a quella del sito web per desktop. Generalmente si parte dalla progettazione del sito per desktop, ragionando in profondità sul look 'n feel, sui contenuti da servire all'utente e sulle funzionalità da rendere disponibili.

Dopo aver ragionato per mesi alla versione PC, si passa poi alla progettazione mobile: il rischio di questo processo è che si possa voler in tutti i modi di far incastrare tutti i contenuti in uno schermo molto più piccolo.

Il risultato è un sito web non pensato per gli utenti mobile e che spesso ricalca la stessa struttura e approccio del sito per desktop: questo causa spesso inefficienza e una scarsa soddisfazione degli utenti.

I motivi possono essere molteplici:

• ritardo di progetto a causa dell'incertezza del cliente sul design della grafica dell'homepage;
• la fase di approvazione dell'IA è stata molto faticosa, ripensarla per il mobile potrebbe generare eccessiva tensione nel progetto;
• poca dimestichezza del team a pensare mobile;
• ecc.

Il mobile first, invece, prevede un ribaltamento di prospettiva dove prima viene progettato il sito mobile e solo successivamente si lavora alla versione desktop.

Parlando di processi, pensare mobile first potrebbe permettere un grande anticipo del lavoro di sviluppo: la progettazione mobile generalmente è più breve perché è meno "disturbata" da tanti attori dell'azienda. Gli iter di approvazione sono più veloci poiché la discussione non si concentra su dettagli di interfaccia, sul pixel in più o pixel in meno, sul color grigio ma non troppo grigio, (e chi più ne ha, più ne metta :-) )!

Con la chiusura della progettazione mobile, il team di sviluppo potrebbe già iniziare il suo lavoro, mentre nei piani alti dell'azienda si farà la progettazione per PC e ci si scannerà allegramente su dettagli grafici e isterismi vari degli Hippo. :-)

Visto che nel 99% dei progetti in cui ho lavorato, i tempi di sviluppo sono sempre molto compressi mi sembra che pensare mobile first potrebbe essere davvero un vantaggio!

L’approccio mobile first non è detto che sia vantaggioso sempre, ma può essere utile soprattutto per siti web dove il mobile è effettivamente un fulcro importante per il business.

Pensiamo ad esempio a tutti i servizi di trasporto, i servizi pubblici, i siti web di telefonia mobile, ecc.

Sappiamo bene che se si parla di Trenitalia è come sparare sulla croce rossa, ma probabilmente siamo tutti d'accordo che pensare mobile first per un progetto del genere è davvero vantaggioso, no?

Quali sono i motivi che hanno spinto Luke Wroblewski a sposare questo approccio?

Per tre ragioni principali:

1. Il mobile è in una fase di crescita vertiginosa: Gartner stima che nel 2013 il traffico dati da mobile supererà il traffico dati da PC, diventando così la prima via di accesso al web.
2. I limiti del mezzo mobile, permettono di focalizzarsi non sui ghirigori, bensì sugli utenti, sui task che devono compiere, su informazioni essenziali e mirate: insomma ci si preoccupa più dell’aspetto funzionale senza curare troppo la grafica.
3. Le funzionalità che offrono i dispositivi mobile (ad es. GPS, accelerometro, fotocamera,ecc.) offrono l'opportunità di risolvere i problemi degli utenti, in modo diverso e innovativo!

Analizziamo ora le differenze tra i due approcci di progettazione.

Differenza #1: il contesto

La prima grande differenza è il contesto d'uso: quando si usa il mobile non ci si trova comodamente davanti al PC ma ci si trova in posti diversi in posizioni diversi, probabilmente non seduti davanti ad una scrivania con illuminazione perfetta, sicuramente con meno tempo a disposizione per svolgere un task o risolvere un problema.

L'immagine del manager che attende il business meeting checkando i suoi feeds nel suo feedreader (da notare lo slang), è soltanto uno dei casi. La verità è che in moltissimi usiamo il mobile in situazioni e contesti d'uso che si incastrano nella vita di tutti i giorni: dalla mamma che va a fare la spesa, allo studente pendolare di un'università di Milano, dalla ragazza shopping-addicted che lavora come commessa, all'operaio che va in discoteca tutti i fine settimana e scatta milioni di foto da condividere su Facebook, ecc.

Compete in questo post raccoglie alcune statistiche dei casi classici d'uso del mobile:, riassumibili con il grafico sotto:

In questi contesti d'uso spesso il mobile viene utilizzato in background, mentre si stanno facendo altre cose, il livello di attenzione è molto basso e soggetto a distrazioni. Gli utenti guardano lo smartphone, poi alzano lo sguardo verso la TV, poi riprendono quello che stanno facendo, ecc.

Hanno bisogno di informazioni veloci da consultare in modo immediato.

Luke nel suo libro usa una citazione di Rachel Hinman, ricercatrice di Nokia, davvero illuminante per comparare l'esperienza mobile da quella desktop:

Desktop behavior is 'diving' while mobile is 'snorkeling’

Dal differente contesto d’uso è quindi possibile creare delle personas differenti da quelle del web, alle quali poi assegnare dei task che l’interfaccia e il sistema web deve supportare in modo semplice ed intuitivo.

Differenza #2: lo schermo

Senza dubbio un'altra differenza banale e scontata è che il mobile costringe a progettare per uno schermo più piccolo. Mentre per il desktop lo standard classico adottato è il 1024 x 768, per il mobile la risoluzione alla quale fare riferimento è la 320 x 480. Ad aggiungere maggiore complessità, bisogna considerare che ora per il mobile le risoluzioni di schermo sono diverse da modello a modello.

Se da un certo punto di vista la dimensione dello schermo può sembrare un limite, dall'altro può essere l'opportunità di focalizzarsi sui reali bisogni informativi degli utenti, ragionare sulle cose effettivamente utili per l'utente.

La legge principe di tutta la progettazione è "less is more": la presenza di ogni singolo elemento nella pagina dev'essere ponderata bene lasciando da parte i fronzoli e "voli pindarici markettari". :-)

Lo schermo di dimensioni ridotte anche se costringe ad un design minimalista, permette la progettazione di interfacce che maggiormente interattive, dove ci sono interfacce composte da delle sotto-schermate affiancate l'una con l'altra attivabili attraverso le dita delle mani con le gestures.

Oltre al "less is more", in questo caso è davvero importante e centrale curare nei minimi dettagli l’interaction design: una transizione poco intuitiva potrebbe precludere gli sforzi fatti.

In fase di prototipazione a causa dell'elevata interattività delle pagine, può essere utile non limitarsi ai wireframes ma intraprendere la strada di prototipi HTML navigabili e "toccabili" con mano.

Differenza #3: il modello di interazione

L'interazione non avviene più con i classici dispositivi di input tastiera e mouse, ma tutto avviene in modo più naturale con le dita.

Alcuni telefoni Android permettono anche l'uso di comodi bottoni sull'area inferiore dello smartphone, mentre iPhone ha un solo bottone centrale.

Inoltre, il contesto d'uso prevede un modello di interazione dove l'utente utilizza soltanto una mano: in questo caso bisogna prestare attenzione ai bottoni di azione per evitare che un utente abbia difficoltà a tappare e concludere un'azione.

Il modello di interazione, considerando le dimensione dello schermo, deve prestare attenzione alla grandezza degli elementi di azione, quali bottoni/form, ecc.

Permettere un'esperienza d'uso piacevole anche per gli utenti con grandi manone, in gergo americano "French Fry Finger", molti player del mobile hanno deciso di darsi delle regole sulla dimensione degli elementi di azione di sistemi operativi, applicazioni, ecc.

Microsoft nella sua guida Windows Phone UI Design and Interaction Guide definisce una dimensione minima di 7mm con uno spazio di 2mm tra diversi elementi.

Sebbene lo scenario posse sembrare grigio, le gestures possono essere davvero un fulcro dove lavorare: l'uso della dita permette di svolgere dei compiti in modo veloce e innovativo.

Pensate ad esempio a Yahoo Sketch Search, dove è possibile ricercare un ristorante interagendo con le dita direttamente sulla mappa disegnando l'area all'interno del quale si vuole andare a mangiare.

Differenza #4: le capacità del dispositivo

Le capacità del dispositivo mobile offrono una grandissima opportunità per creare un progetto davvero innovativo ed interessante per gli utenti. Il mobile, infatti, ha dei dispositivi di input e output che possono davvero risolvere dei problemi agli utenti in modo che non hanno mai sperimentato.

Google Googgles, offre ad esempio agli utenti la possibilità di effettuare ricerca di contenuti attraverso l'uso della fotocamera come dispositivo di input.

Nearest Tube, invece, già due anni fa offriva la possibilità di orientarsi nella città di Londra con l'aiuto della sola fotocamera del telefonino ed una connessione internet. E' sufficiente inquadrare la strada sulla quale si sta passeggiando e l'applicazione aggiunge all'immagine del luogo circostante anche l'informazione sulle stazioni della metropolitana più vicina.

Se pensiamo ai siti web di e-commerce che iniziano a targare i prodotti con l'RFID, allora l'immaginazione può portare anche più lontano! :-)

Il mobile grazie a capacità di input che sfruttano il contesto ed il mondo reale, offre all'utente una terza generazione di interfaccia la NUI "Natural User Interface" lasciandosi alle spalle la GUI (Graphical User Interface) e la CLI (Code Line Interface).

Riassumendo...

Mobile first può mettere al centro il mobile nell’esperienza di progettazione di un sito web.

Risolvere dei problemi per gli utenti mobile, significa anche un sottoinsieme di problemi degli utenti PC ma con un approccio diretto.

Permette di concentrarsi sui reali bisogni informativi degli utenti (urgenti) e non sul pixel

Apre le porte a sperimentazioni per l’innovazione.

Può garantire un anticipo della fase di sviluppo migliorando l’efficienza e la qualità del progetto.

Perché non provarci? :-)