Il "Tap" è il nuovo "Click"
Siti pensati per il Web Mobile
di LUCA DEGLI ESPOSTI
WORDCAMP BOLOGNA - 9 Febbraio 2013
@WordcampBologna # WPCAMPBO13
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 01 / 82

User Experience
Comportamento generale dell'esperienza utente, l'interazione
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 02 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

User Experience
Rispetto agli utilizzatori del web attraverso il desktop questa classe di utenti possiede interessi differenti: ha
necessità più immediate e guidate da precisi obiettivi, spesso connesse al contesto in cui il navigatore si trova.
Cercare in breve tempo informazioni precise e pertinenti sembra essere quindi il comportamento più diffuso nel
mobile web.
In secondo luogo si annotano usi del mobile web a scopi meno finalizzati all’efficienza, come la ricerca di
intrattenimento per colmare attese e tempi morti (per esempio un trasferimento su un mezzo pubblico).
Gli utenti del mobile web si contraddistinguono anche per una differente condizione di connettività: l’accesso
wireless è spesso più lento e inaffidabile di una connessione via cavo. Vanno inoltre presi in esame gli aspetti più
strettamente ergonomici: è più complesso interagire con un dispositivo mobile sia in fase di input sia dal punto di
vista della leggibilità, dal momento che gli schermi sono spesso piccoli e a bassa risoluzione.
Le interfacce che incontriamo oggi nel web e nelle applicazioni sono state principalmente ideate e progettate
avendo in mente i dispositivi di input che sono stati utilizzati per più di 20 anni sui PC a partire dai primi Apple, cioè
tastiera e sopratutto mouse. Con il touch le possibilità si sono aperte ad un’interazione più “naturale” e semplice,
ma occhio, basta pensare ad esempio a quanto è poco preciso il “tocco” delle dita su uno schermo rispetto al
puntatore del mouse.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 03 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pensa Mobile, non Desktop
Le risoluzioni desktop sono visualizzate in maniera a malapena sufficiente sui tablet a risoluzione massima.
Nel migliore dei casi un sito dekstop visualizzato su tablet apparirà poco navigabile, nel peggiore dei casi sembrerà
o sarà malfunzionante.
È quindi assolutamente da evitare una risoluzione desktop ed è consigliato partire da un layout mobile-friendly,
per fare ciò, devi ripensare completamente la struttura e la logica di navigazione del sito web.
Se un contenuto web si vede bene su desktop non significa che andrà bene anche su un dispositivo mobile.
I contenuti per il Mobile necessitano di essere ripensati e semplificati tenendo ben a mente le caratteristiche dei
dispositivi che li dovranno visualizzare, per farlo, non abbiate paura di partire dalla carta, prototipando il layout
(http://www.uistencils.com/products/iphone-sticky-pad).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 04 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Ricordati del Desktop
Offri un'esperienza coerente ed unica con il web desktop: per esempio, se il sito possiede un’area riservata e
personalizzata, l’utente dovrebbe potervi accedere anche se sta utilizzando un telefono cellulare.
L'importante è adattare il più possibile le funzionalità del sito desktop ai dispositivi mobile in modo da offrire
un’esperienza omogenea tra desktop e device mobili stessi.
L'utente deve capire subito che è lo stesso sito che ha visitato 10 giorni fa da desktop o che ha visto stampato in un
volantino pubblicitario per strada.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 05 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pensa agli utenti
Comprendi le necessità degli utenti.
Devono controllare informazioni in real-time? Intrattenersi con servizi interattivi (mail, social network, svago)?
Gestire urgenze legate all'attività corrente o al luogo in cui si trovano (come trovare un posto dove dormire o
mangiare)?
Questo ti aiuterà a semplificare la progettazione del layout.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 06 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Touch-friendly
Pensa all’uso prevalente di una sola mano.
Usa interazioni naturali: rendi tutto naturale, usa le gestures più codificate, immediate e semplici
(http://is.gd/AYd0nt).
Le interfaccie multi touch sono intuitive.
Guarda questo bambino con un iPhone: http://www.youtube.com/watch?v=jVm1qyUuXI0&NR=1
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 07 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pattern
Sfrutta pattern che gli utenti già conoscono: UniCredit su iPhone ad esempio ha deciso di sfruttare Google Maps
per il servizio di ricerca filiali e bancomat.
La scelta si è rivelata decisamente opportuna: tutti gli utenti, utilizzatori abituali dell'App Google Maps nativa, non
hanno avuto nessuna difficoltà a muoversi e zoomare la mappa per visualizzare i punti UniCredit più vicini e
calcolare il percorso più rapido per raggiungerli.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 08 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Device
Quando possibile, sfrutta le capacità del dispositivo per generare esperienze d’uso avanzate ed uniche.
Ad esempio il GPS integrato.
Chi naviga su mobile cerca spesso informazioni a livello locale, come per esempio un ristorante, una farmacia o la
tua attività, per cui è consigliabile inserire una funzionalità che consenta di farsi trovare facilmente.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 09 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Semplifica
Un sito semplice è anche usabile.
Limita la quantità di azioni richieste per la navigazione: il touchscreen, per quanto avanzato, espone
maggiormente al rischio di errori, soprattutto quando gli elementi con i quali si può o si deve interagire sono
numerosi; è chiaro quindi che per l’utente la frustrazione è dietro l’angolo.
Meno tap si traducono quindi in un minor numero di errori.
Meno errori, maggior gratificazione. Un box di ricerca è d'obbligo se hai un sito con più di 5 link di navigazione o dei
sottomenù.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 10 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Coerenza
Fornisci consistenti meccanismi di navigazione, ovvero utilizza le stesse modalità di navigazione in tutte le
pagine per aiutare gli utenti a orientarsi e consentire loro di identificare i meccanismi di navigazione più facilmente.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 11 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Focus
Usa la tecnica del front loading: poni l’informazione più importante ad inizio di titoli, paragrafi, liste e fa che siano
facilmente individuabili.
In questo modo per l’utente è più semplice capire rapidamente di quale argomento tratta il contenuto e valutare se è
di suo interesse. Gli utenti sono irritati se spendono tempo e costi per navigazioni e connessioni rallentate a causa
di testi troppo lunghi, testi poco focalizzati e soprattutto elementi pubblicitari.
Non nascondere ciò che vogliono, dagli ciò che vogliono, quando vogliono. Non vogliono scavare a fondo nel sito
mobile solo per trovare ciò che stanno cercando: il rischio è che lo abbandonino prima.
Limita il contenuto a quanto l’utente ha richiesto: il limitato spazio dello schermo rende indispensabile avere il
contenuto con informazioni essenziali, senza troppi giri di parole.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 12 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Stop
I siti mobile devono e sono consultabili in ogni momento, pensa quindi all'eventualità che per pochi secondi, o
minuti, le attività in corso potrebbero essere sospese da altri fattori più importanti.
Scatta il semaforo, devo salire su un autobus, sono in una zona senza copertura.
Pensa facendo in modo tale che l'utente possa tornare all’esatto punto in cui era senza conseguenze per la
navigazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 13 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Layout
Struttura ed impaginazione
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 14 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Niente barra
Quando si lavora per i dispositivi mobili, il problema principale è rappresentato dalla poca disponibilità di spazio.
Guadagnatelo!
Poche righe di codice JavaScript ti permettono, al caricamento della pagina, di nascondere la barra in alto degli
indirizzi.
Un accorgimento da poco, ma che ti fa guadagnare parecchi "pixel" da lasciare al design del tuo sito mobile.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 15 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Linearizza
Il poco spazio che si ha disposizione va sfruttato per presentare nel modo migliore i contenuti che ritieni essenziali.
La parola d’ordine è "semplifica". Tradotto in codice per il layout significa che sui dispositivi mobile la modalità
ottimale è quella della linearizzazione degli elementi che compongono la pagina.
Nel layout avremo così un unica colonna, i vari elementi si disporranno semplicemente uno sotto l’altro nell’ordine
definito nel markup.
Solo quando avremo spazio sufficiente (a partire dai 768px dei tablet) svilupperemo il layout su eventuali più
colonne, ma max 2, proprio perchè tenendo conto delle ridotte dimensioni dello schermo di un cellulare o di un
tablet, un normale sito a più colonne non è semplice da leggere.
Nonostante gli utenti abbiano la possibilità di ingrandire e di spostarsi nella pagine, utilizzare un layout a colonna
singola è comunque la soluzione ideale in quanto la pagina si adatta facilmente allo schermo e l’utente dovrà
scorrere solo in verticale.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 16 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Porzioni usabili
Suddividi il sito mobile nel giusto numero di pagine/sottopagine e la singola pagina in porzioni usabili, ma limitate.
Se le pagine sono troppo lunghe, ci vorranno molti scroll.
Viceversa se sono troppo corte devi splittare il contenuto in numerose pagine e costringi così l’utente a fare
molti tap su diversi link, per raggiungere l’informazione desiderata.
Alcuni esperimenti hanno dimostrato che gli utenti preferiscono fare scrolling, piuttosto che dover cliccare su
molti link per raggiungere ciò che desiderano.
Una soluzione intelligente è inserire elementi già "collassati" che si espandono al tap dell'utente (gli Accordion).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 17 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Titoli
Fornisci un titolo breve ma descrittivo per ogni pagina (potrebbe venir troncato dal browser o venir utilizzato come
etichetta del bookmark).
Utilizza un markup strutturale: indica la struttura logica della pagina (titolo poi sottotitolo poi paragrafo) con dei tag
appropriati (H1, H2, P).
Ciò consente all'utente un accesso più facile e diretto alle sezioni cui è interessato e a te un più facile adattamento
del contenuto quando questo deve essere suddiviso in più pagine.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 18 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

No-Scroll
Una delle cose più fastidiose delle interfacce classiche point-and-click è utilizzare le scrollbar per scorrere contenuti
che sono troppo grandi per la finestra utilizzata.
Limita lo scrolling ad una sola direzione, quella verticale.
Evita il più possibile uno scrolling secondario, se proprio devi, ponilo a fondo pagina.
Quando Apple ha disegnato in nuovo iOS, ha inserito lo scorrimento del dito in verticale (non ha inserito le scrollbar)
ed ha aggiunto l'inerzia, per renderlo un effetto ancora più reale.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 19 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Touch-friendly
Utilizza elementi touch-friendly, dove possibile, come lo Zoom ed il Drag-n-Drop.
Il Drag-n-Drop è l'esempio perfetto di un'interazione naturale: simula il "prendi e butta dentro" che facciamo con i
prodotti ed il carrello della spessa in un qualsiasi centro commerciale, per questo è molto meglio rispetto ad un tap
su una scritta "Aggiungi".
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 20 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

No-Zoom
Evita per qualsiasi ragione che l’utente debba zoomare durante la navigazione ma se proprio devi, usa lo Zoom
con i controlli nativi, restringendo quello che Norman chiama il "golfo dell’esecuzione".
I controlli per lo zoom sono stati ormai sostituti da una gesture standard (avvicinamento/allontanamento delle dita),
che rappresenta un’ottima metafora che riduce il gap concettuale tra effetto desiderato (ingradimento e
rimpicciolimento dello schermo) e l’azione necessaria.
Non inserire gli elementi grafici "+" e "-" in stile Google Maps su web desktop.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 21 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Portrait o Landscape
Partendo dalla regola che il sito mobile dovrebbe funzionare su tutti i dispositivi mobile e con tutti gli orientamenti del
display, considera l’importanza di un orientamento piuttosto che l'altro, pensa alle esigenze della fruizione
verticale in luogo di quella orizzontale, dove ho sì più spazio ai lati ma dovrò fare molti più scroll in verticale.
Una soluzione è utilizzare ad esempio dei menù basati su un insieme di classici "pulsantoni" sviluppati su tutta la
linea orizzontale dell’area di visualizzazione, è chiaro però che questo approccio comporta più attenzione (nel
momento del tap) per la navigazione su smartphone rispetto a quella su tablet (dove avrò più spazio).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 22 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Menù
Inserisci una forma di raggruppamento intelligente attraverso un menù drill-down che ottimizza lo spazio e consiste
nell’organizzare l’informazione secondo uno schema gerarchico (come titoli o raggruppamenti significativi) e fornire
quindi un menu di accesso veloce alle singole sezioni del sito mobile.
Quando si progetta il posizionamento del menù, è fondamentale pensare al comportamento dei propri visitatori.
Per gli utenti che vogliono passare a nuovi contenuti in modo rapido è preferibile il menù nella parte inferiore della
pagina (leggo un contenuto, scorro verso il basso e passo al successivo).
Per chi invece, preferisce scegliere (tra gruppi, categorie, links di pagine) è meglio avere il menù subito in cima alla
pagina. Posiziona sempre i contenuti più importanti nella parte superiore dell’area di visualizzazione e valuta il
giusto ordine di presentazione degli elementi successivi tenendo sempre conto dello scrolling su diversi display.
Una soluzione può anche essere quella di posizionare un menù "sticky", cioè fisso in alto nella pagina e sopra a
tutto, nel momento in cui eseguo lo scroll (ad esempio la barra in alto di Facebook). Uno studio, ha dimostrato che
questo tipo di menù rende il 22% più facile e veloce la navigazione (non devo ritornare al top della pagina),
facendo guadagnare all'utente fino a 36'' in una navigazione totale di 5'. E' naturale che se quei 36'' sono così
sfruttati per la sezione contatti o un acquisto, siamo tutti più contenti.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 23 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Back to Top
Metti sempre a fondo pagina il link "Torna su" per tornare all’inizio della sezione/pagina o alla navigazione
principale nel caso tu non l'abbia riproposta anche a fondo pagina e soprattutto se per l'utente è l'unica cosa che
può fare (se non ci sono altri link nella pagina, ma solo testo).
Se l'utente non ha fatto nessuno scroll, non mettere il link "Torna su". E' la regola del link alla Home se sono già
nella Home: non serve.
Viceversa, metti un link in alto nella pagina che porti al menù di navigazione secondaria nel caso questo sia
presente in fondo alla pagina.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 24 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Layout Blog WP
Logo
Menù di Navigazione principale + Box di ricerca
Ultimi 5 post
. post
. post
. post
. post
. post
Link Social
Contatti / Support
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 25 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Navigazione
Links e Menù
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 26 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

URI corti
Mantieni gli indirizzi delle pagine web del sito mobile il più corto possibile, dal momento che la loro digitazione
su un dispositivo mobile può risultare un’attività difficoltosa: riduci così le possibilità di errore e aumenti la
soddisfazione degli utenti.
Se possibile, registra con un nome corto anche il nome di dominio e se proprio devi riadattare un contenuto web
già presente, utilizza un nome corto come alias per la versione mobile.
Es: http://2013.bologna.wordcamp.org sarebbe potuto diventare http://bo13.wc.org
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 27 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pochi “tap”
Cerca di bilanciare e valuta la presenza di molti link su una stessa pagina con il fatto di chiedere all’utente di seguire
e valutare troppi link per raggiungere quello che sta cercando.
Se stai rivisitando un sito già esistente su web desktop, analizza le statistiche ed i pattern (flussi) più usati dai
tuoi utenti tramite Google Analytics e di conseguenza, progetta un layout mobile per cui l’informazione che si ricerca
più frequentemente sia raggiungibile attraversando il minor numero possibile di pagine anche se questo può
significare l’allontanamento di altre informazioni dalla pagina iniziale.
L’utente deve essere in grado di raggiungere le informazioni o le funzionalità che sta cercando senza impazzire.
Studi recenti, hanno dimostrato che un utente preferisce non dover eseguire più di 4 "tap" per raggiungere il
proprio obiettivo (a maggior ragione se l'obiettivo è comprare qualcosa).
Ogni passaggio ulteriore determina solo un aumento della complessità e influisce negativamente sull’esperienza.
Pensa a quante volte non ti era chiaro dove portasse quel link, hai fatto "tap", hai aspettato, poi ti sei reso conto
che non era il "tap" giusto.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 28 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Poche voci di Menù
In questo caso, considerando le aree di visualizzazione disponibili per i browser mobile, il consiglio è quello di non
introdurre più di 5 pulsanti di navigazione per menù: naturalmente questo vincolo potrebbe rivelarsi ostico
quando un sito per la navigazione mobile non è che un adattamento ad un precedente progetto web desktop.
In questo caso una possibile soluzione che si vede spesso nei siti mobile potrebbe essere quella di adottare dei
menù annidati o sotto forma di liste.
Tieni sempre presente che chi naviga tramite smartphone e tablet è spesso un internauta distratto, in movimento e
con poco tempo a disposizione, per cui è buona norma mettere a sua disposizione il minor numero di scelte
possibili pilotandone, per quanto possibile, la navigazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 29 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Solo testo
E' plausibile che nel sito mobile ci siano svariati collegamenti, legati a pagine, immagini, file, effetti ed altro.
Per i link usa quindi del semplice testo.
Durante una navigazione mobile le risorse sono molto importanti e spesso la connessione non ci permette di
utilizzare una grande mole di dati.
Evita quindi di dover far scaricare una seppur piccola immagine (magari anche solo pochi KB) al tuo utente
solo per mostrare un pulsante grafico e prediligi una scritta di testo.
Non tanto per il lato estetico, che ovviamente va invece ben curato con le opportune formattazioni CSS quanto per il
lato pratico: decine e decine di immagini di pochi KB sotto rete WiFi sono scaricate in un nulla, ma in mobilità, con
scarsa copertura, possono anche non venire scaricate o solo parzialmente: quei link non funzioneranno.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 30 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Target
Identifica chiaramente il target di ciascun link (apre una nuova schermata, apre GoogleMaps, apre AppStore, fa
altro?) ed indica sempre accanto al link, il formato del file a cui il link porta (è un PDF? apre un video?).
Gli utenti sui device mobile possono avere problemi di lunghi tempi di attesa e costi eccessivi dovuti al fatto di dover
seguire molti link e di conseguenza navigare tra tante pagine.
Fai in modo tale che l'utente sappia in anticipo dove un link porta in modo tale da poter valutare se è
interessato a seguire il link o meno.
Di conseguenza, da un lato è importante dare nomi significativi ai link e specificare la destinazione del link e
dall’altro, se il link porta ad un file di grandi dimensioni e di formato inatteso rispetto all'ultima parte della
navigazione, è bene che tu avverta l’utente dandogli un’idea della dimensione della risorsa.
Lascia la scelta libera all’utente.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 31 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

No-PopOver et similia
Evita di aprire delle finestre di PopOver (o simili) o altre finestre che cambiano la struttura corrente senza
avvertirne prima l’utente.
Evita il refresh automatico delle pagine a meno che l’utente ne sia informato e abbia un modo per fermare il
refresh e non utilizzare markup che applica un redirect automatico delle pagine, altrimenti l'utente pensa di
essere su una pagina (con un url specifico) ma in realtà è altrove.
PopOver, refresh e redirect sono attività che possono generare confusione nell’utente, aumentano i costi di
connessione (per esempio effettuando download non richiesti) e ritardano complessivamente l’interazione con il sito
mobile.
I PopOver sono da sempre fastidiosi: l’utilizzo nei dispositivi mobile è poco confortevole e spesso provoca
disfunzioni spiacevoli, come "tap" accidentali sbagliati. Evita l'uso di Flash, non è supportato dai device Apple.
Fai un uso moderato di codice Javascript, utilizzare elementi per creare una grafica dinamica rende il sito mobile
visivamente piacevole, ma questo riduce di gran lunga l’usabilità del sito se gli "effetti" non sono fluidi: è possibile
incorrere nel rischio di un "tap" involontario, che rende meno facile la navigazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 32 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Dimentica l'hover
Sui monitor touch non esiste l'evento “hover” tramite i CSS ma solo tramite l'uso di codice JavaScript, quindi inutile
impostarlo sui link dove l'utente deve fare solo "tap".
E’ fondamentale però far capire all’utente quale oggetto è "a fuoco" dopo l'azione del suo "tap", pensa ad
esempio ad un menù espanso: questo può essere fatto cambiando il colore del carattere, lo sfondo del link/pulsante
oppure aumentando leggermente il padding del link/pulsante.
Puoi invece pensare di creare una sorta di effetto “hover” sugli elementi con interazioni "tap and hold" (tieni
premuto), allungando leggermente i tempi di reazione.
Non potendo posizionare il mouse su ogni elemento, ricordati sempre di rendere immediatamente evidente cosa è
interattivo nell’interfaccia e cosa no: deve essere subito chiaro su cosa si può fare "tap", cosa si può
manipolare, trascinare e cosa no.
Evita di inserire dei controlli di un elemento, all'interno di elementi su cui l'utente deve fare per forza un "tap" per
vederli. Esempio: per ingrandire il font, deve cliccare sulla lettera "A" che apre un tooltip con all'interno 3 "A" di
diverse grandezze.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 33 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Rassicura
Semplifica la navigazione del sito mobile con pulsanti "Indietro" e "Home" chiari e ben visibili.
Se puoi, non inserire più di 7 link per pagina di navigazione.
Assicurati che almeno le funzionalità di base, come per esempio il pulsante “Indietro” per tornare alla pagina
precedente, siano facilmente localizzabili in qualsiasi momento.
Una buona regola è inserire questo pulsante, in alto, sulla sinistra.
Concettualmente è proprio da dove sono arrivato, come se fossimo in auto in una strada a senso unico e senza
uscita: tutti noi metteremmo la retromarcia.
Se non ci sono vincoli particolari, inserisci le "briciole di pane": l'utente già le conosce e capisce subito dove si
trova nel sito.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 34 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pensa locale
Ai piedi della pagina, inserisci sempre l'indirizzo della tua attività o uno store locator sulla pagina dei contatti.
Includi mappe ed indicazioni stradali.
Dove possibile, utilizza il GPS per personalizzare la mappa e consentire ai tuoi clienti di verificare la disponibilità
nei negozi vicini.
Se nella pagina contatti fornisci un numero di telefono utilizza la funzionalità "click-to-call": con una riga di codice
puoi rendere il numero attivo, in modo tale che dopo il "tap" su di esso il device già ti proponga se chiamare quel
numero.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 35 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Versione completa
Poichè, in tutti i casi si tratta di una versione ridotta del sito, è importante fornire sempre un link, ben visibile e in
fondo alla pagina, alla versione completa, "desktop" del vostro sito.
Serve per offrire agli utenti la versione del sito più adatta alle loro esigenze, questo perché alcuni utenti potrebbero
voler vedere una visione "d’insieme" del sito.
Viceversa, nel sito desktop (solo se visto da mobile) conviene sempre mettere un link alla versione mobile, nel caso
gli utenti volessero tornare indietro.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 36 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Typografia
Fonts ed ingombri
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 37 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Font
Una questione cruciale in tema di tipografia riguarda la giusta scelta dei font.
Anche gli smartphone e i tablet più moderni e sofisticati dispongono di un set di caratteri molto limitato rispetto al
desktop.
Molti dispongono solo di pochissimi font di sistema, come certi dispositivi Android ad esempio.
Significa che quando specifichi un insieme di font per le pagine, un dispositivo Android ignorerà tutti i font che hai
dichiarato perché non disponibili, usando quello corrispondente alla famiglia generica.
La situazione è leggermente migliore su iOS. Su iOS6 ci sono 260 caratteri disponibili (puoi controllare su
http://iosfonts.com). Potresti superare queste limitazioni ricorrendo ai Web Fonts, magari sfruttando servizi
Google Web Fonts, per caricare font personalizzati.
Nulla di più sbagliato. L'utente non vuole scaricare 48KB per un font non standard solo per avere il titolo ed i
sottotitoli delle pagine più belli, vuole semplicemente che sia leggibile. Siamo in mobilità, la parola d’ordine è
semplificare, la banda è una risorsa preziosa, inutile sprecarne facendo scaricare all’utente qualche decina di KB
solo per un font. Un buon font standard per il web mobile è il Verdana o l'Helvetica. Con un pò di codice puoi
poi fare in modo di usare font personalizzati solo per il desktop.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 38 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Visibilità
Progetta tutto al fine della visibilità, per essere un sito mobile-friendly a tutti gli effetti la lettura dei contenuti deve
essere semplificata anche in ambienti poco illuminati, senza affaticare la vista.
La luce del sole è uno dei peggiori nemici dato che spesso rende il testo illeggibile a display.
Un rimedio efficace è quello di mettere in grassetto le parti di testo più importanti e di aumentare il contrasto
tra il colore del testo ed il colore di sfondo.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 39 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

5W del giornalismo
Gli utenti non leggono, ma scorrono l’informazione, quindi usa uno stile breve e diretto, di stampo giornalistico.
Usa le famose 5W del giornalismo, Chi, Cosa, Dove, Quando e Perché (http://is.gd/pnhgm4) prima di lunghi
blocchi di testo: questo mette l’utente in condizione di decidere se approfondire l’informazione presentata oppure di
ricercare altro altrove.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 40 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Piccoli blocchi
Difficilmente l'utente usa il web mobile senza uno scopo ben preciso, ma piuttosto per ottenere un'informazione
aggiornata, o interessante, o adatta al contesto in cui si trova.
Evita grandi e lunghi blocchi di testo ed usa un linguaggio semplice e chiaro.
Un buon riferimento standard può essere un testo di max. 500 caratteri, equamente diviso in 3 paragrafi.
Dove possibile, usa gli elenchi puntati.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 41 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Font-size
Il font size ottimale è di minimo 14px, una dimensione leggibile ma non troppo grande.
In tutti i casi, per fare in modo tale che il font si ridimensioni correttamente, preferisci sempre le misure in "em"
piuttosto che in "px".
Parti dall'impostazione del body {font-size:100%} e poi specifica il resto dei testi in "em".
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 42 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Kerning & Line-Height
Aumenta il Kerning, cioè lo spazio orizzontale tra le parole, in modo da evitare lo spiacevole effetto visivo
derivante dall’assenza di spazi al fine di aumentarne così la leggibilità.
Aumenta anche la line-height tra le singole righe di testo, questo evita la pesantezza del blocco e l'affaticamento
degli occhi.
Se possibile, a livello di layout, aumenta gli spazi orizzontali tra il blocco di testo ed i bordi della finestra del
browser mobile.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 43 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

H1, H2, P
Cura al massimo i tuoi contenuti e sii chiaro e diretto, gli utenti mobile hanno un bisogno che deve essere
soddisfatto in brevissimo tempo.
Per questo motivo, ancora più che sul web desktop, dedicano poca attenzione ai testi informativi con un effetto
ancora più negativo se i testi sono inseriti in "alertbox" o PopOver: questo perché tali elementi compaiono spesso in
sovraimpressione per informare in merito a contenuti aggiuntivi, promozionali o di natura legale.
Gli utenti hanno imparato a chiuderli senza leggerli: per questo motivo, utilizza una formattazione corretta (H1,
H2, P) per favorire la leggibilità del messaggio che vuoi comunicare.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 44 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Linguaggio
Abbandona i termini gergali e parla la "lingua" del tuo utente in base al contenuto del tuo sito.
Non si tratta di fornire la lingua parlata dal tuo utente, di base questo dovrebbe essere il comportamento corretto del
tuo sito mobile, se l'utente è inglese, offrigli il sito in lingua inglese.
Qui si tratta di parlare in un linguaggio vicino a quello del tuo utente, mai dare per scontati concetti solo a noi
noti.
Ad esempio, in una Mobile WebApp per un gruppo bancario italiano, di fronte al testo "Banca Via Internet" alcuni
utenti diedero le più svariate interpretazioni (seppur ridendo, un utente pensò: "banca, in via Internet").
Solo gli utenti che controllano spesso online il loro conto sanno che tale etichetta fa riferimento alla sezione "home
banking" del sito mobile.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 45 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Gestione impulsi
Input, tastiera, select, slider, form
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 46 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Tastiera, ti odio
Non c'è buon design che tenga: l’input da tastiera su interfacce touch resta il vero problema di questi device.
Sul web mobile devi cercare di limitare il più possibile l’attività di inserimento testuale da parte dell’utente: l’utilizzo
della tastiera non è ancora un'attività agevole ed immediata.
Evita l’immissione di testo libero e se l’utente deve inserire del testo, fornisci se possibile, del testo predefinito da
selezionare: usa ad esempio i menù a tendina (select o spinner), pulsanti radio e checkbox su elenchi, utilizza i
precedenti inserimenti come default, rendi possibile la selezione degli elementi della lista direttamente al "tap" e non
attraverso i tasti numerici della tastiera.
Oltre alla scarsa usabilità, c'è un fattore puramente di layout: sui device touch non c'è una tastiera fisica quindi al
"tap" su un campo di input, la tastiera compare e porta via spazio utile al sito mobile, tienilo sempre in
considerazione per organizzare gli elementi in modo tale che non spariscano quelli che servono per la "call to
action".
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 47 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Autocompletamento
Una delle cose più belle che puoi fare per l'utente è l'auto-completamento.
Digitare poche lettere e ricevere suggerimenti sulle parole più comuni, cliccando poi su di esse per completare
l’inserimento è una delle funzionalità che l'utente, su web mobile, ama di più.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 48 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Select & Slider
Se le opzioni di inserimento possibili sono limitate (50, 100 al max) è molto più veloce usare un controllo di tipo
"select" piuttosto che richiedere l’input manuale da tastiera.
In caso di input numerici (limitati) si può anche utilizzare un controllo di tipo "slider" (ad esempio, come
impostare l'orario della sveglia su iOS).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 49 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Input HTML5
Se l'utente deve inserire solo dei numeri in un campo di input, tramite HTML5 oggi puoi già far uscire la tastiera con
presenti solo i numeri.
Il passaggio tra questi elementi deve avvenire seguendo un ordine logico: posiziona le label (etichette) in maniera
tale che si dispongano correttamente in relazione all'input.
Con HTML5 sono stati inseriti molti altri type di input: email, date, tel, number, search, url. (http://is.gd/TeYRee)
Questi "suggerimenti" dati al device, aumentano la semantica ed aiutano l'utente nell'input testuale.
Ad esempio, con type="url" il dispositivo riconosce il codice e presenta immediatamente all’utente alcuni caratteri
utili per scrivere una url (i simboli . la / e .com) che sarebbero altrimenti stati più lunghi e difficili da raggiungere ed
usare.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 50 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Pochi campi
Sul web si assiste spesso ad una proporzione inversa tra il tasso di conversione e il numero di campi che chiediamo
all’utente di compilare.
Progettando un layout per una navigazione da web mobile, i "form" diventano ancora più determinanti: pulsanti
piccoli, assenza di feedback tattili al "tap", in alcuni casi caratteri alfanumerici da inserire rendono l’input molto
complesso.
Se si trovano in difficoltà o se non sono sicuri di come compilare uno specifico campo, gli utenti abbandonano
l’interfaccia. Inserisci moduli brevi con il minor numero possibile di campi, pensa ad inserire solo i campi
strettamente necessari (in un form di contatto standard, nome e website dell'utente ora non ti servono).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 51 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Rule of thumb
Pensa per le dita
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 52 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

44pixel
Rispetto a quanto siamo abituati a fare con il mouse, il "dispositivo" di input sui device touch, il nostro dito, ha
una scarsa precisione.
Le dimensioni dei touch-target devono essere sufficientemente grandi per permettere un’interazione agevole.
Uno studio del MIT (PDF - http://is.gd/DJwoDH) ha scoperto una grandezza media per un polpastrello di 8/10
mm.
Da qui emerge la dimensione minima consigliata per ogni elemento interattivo che deve essere "tappato" (freccia,
link, bottone, pulsante, logo, icona, ecc..).
La dimensione in pixel corrispondente dipende dalla risoluzione dello schermo che stiamo considerando: lo schermo
dell’iPhone4 (già Retina) impone, ad esempio, una dimensione minima di 60×88 pixel.
Il design dovrebbe seguire la semplice equazione "+ importante = + grande" in modo da facilitare la vita
dell’utente. Nei link ad esempio, aumenta il padding fino a portare il loro ingombro alla dimensione consigliata.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 53 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Fat finger
I display touch implicano l’utilizzo delle dita, non sai quali dita però.
Non pensare solo alla regola dei 44pixel, ma disegna anche per chi ha il pollice più grande del tuo: i pulsanti
devono essere grandi e ben spaziati l’uno dall’altro.
Considera quindi anche il fattore "fat finger" ("dito grasso", sì, ci sono utenti con mani molto grandi che pur avendo
un pollice leggermente più grande della media provano comunque ad interagire con un dispositivo touch) nominato
dal Nielsen Norman Group (NNG: fondato da Jakob Nielsen e Donald Norman nel 1998).
Apple ad esempio raccomanda nelle sue linee guida di usare sempre elementi attivi grandi almeno 44×44pixel
(88x88pixel su display Retina), il NNG parla invece di 1x1 cm.
Le popolazioni che da recenti studi hanno dimostrato di avere mani e quindi dita più grandi rispetto alla media, sono
gli americani, inglesi, messicani, australiani e canadesi.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 54 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Fai spazio
La dimensione non è però l’unica variabile: importantissima è anche la disposizione dei pulsanti, poiché
l’eccessiva vicinanza tra diversi "target" aumenta le probabilità di errore, cioè selezionare involontariamente il
comando sbagliato, riducendo l’usabilità del sito mobile. Una spaziatura di 2/3 mm. è lo standard.
Tutte queste considerazioni sono relative in qualche modo alla "Legge di Fitt" (http://is.gd/0UFapN) che descrive
con una formula matematica la relazione tra il tempo necessario per raggiungere un obiettivo, la sua
dimensione e la sua distanza dal punto di partenza.
Ti invito a leggere l'articolo TouchTargetSizes (http://is.gd/W2SCgj) in cui troverai una panoramica esaustiva
sulle dimensioni minime suggerite dai principali produttori mondiali di smartphone.
Evita quindi pulsanti troppo vicini tra loro.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 55 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Occhio alle mani
Nelle interfacce touch, con grande differenza dalle GUI (Graphic User Interface) desktop, il dispositivo di input
corrisponde al dispositivo di output (lo schermo).
Occhio quindi: le mani possono infatti coprire elementi importanti dell’interfaccia, proprio quando servono.
Posiziona le informazioni in modo che non possano venire coperte dalle mani quando sono necessarie.
Evita di posizionare le etichette sotto gli elementi di interazione, ma mettile sempre sopra.
Ad esempio, in uno slider orizzontale che devo “tirare” con il dito, avrò il mio slider con il mio “oggetto trascinabile” e
sopra lo slider, le etichette di misurazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 56 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Design
Grafica, colore, img, icone, responsive
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 57 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

L'interazione costa
Gli utenti non fanno "tap" su ciò che non conoscono.
Durante alcuni test, per conoscere l’indirizzo esatto dei punti visualizzati sulla mappa più di un utente avrebbe voluto
visualizzare una lista testuale.
Pochissimi degli utenti Android hanno compreso che tale funzionalità si celava dietro l’icona "xy", più chiara ed
immediata invece per gli utenti Apple, già abituati alla pulsantiera iTunes per modificare la vista della libreria.
Rendi quindi icone, link e titoli parlanti.
Aumenta l'affordance visiva, fai quindi in modo tale che il processo mentale per capire cosa accadrà o come
interagire con esso, sia praticamente nullo: dovrebbe essere intuitivo, automatico, come lo è l'utilizzo ad esempio
di un cucchiaio.
Quante volte ti è capitato di trovarvi davanti ad una maniglia e non capire come la porta vada aperta: tirata, spinta o
fatta scorrere? Non è un tuo errore, è scarsa affordance e pessima progettazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 58 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Design minimalista
Rendi il sito mobile un luogo chiaro, quindi semplifica.
Un buon design si deve poter vedere su tutti i dispositivi e deve essere utile alla consultazione dei contenuti.
Non deve disturbare la vista né la consultazione, rendilo quindi poco decorato, elimina i fronzoli, inserisci pochi
elementi grafici e di quelli che inserisci, chiediti sempre se portano davvero un valore aggiunto all'esperienza
dell'utente.
Per la navigazione, se puoi pensa senza icone, piuttosto abituati ad usare particolari gestures.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 59 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Colore
Assicurati che l'informazione veicolata dal solo colore sia disponibile anche senza colore (pensa agli
ipovedenti).
Un link, ad esempio, non dovrebbe essere solo differenziato da una scelta cromatica differente, ma anche
dalla sottolineatura, perché alcuni utenti potrebbero non accorgersene o altri, dover zoomare per capire il perchè
quella parola è diversa dalle altre.
Assicurati che la combinazione tra i colori di sfondo e quello del testo in primo piano fornisca un contrasto
sufficiente.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 60 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Immagini
Quando usi immagini come sfondo, assicurati che il contenuto risulti completamente leggibile (anche se non è
una buona norma usare immagini di sfondo).
Usa solo immagini che risultano con una buona resa (pensa anche agli schermi Retina).
Le immagini (ed i video) devono adattarsi al dispositivo e al suo cambio di orientamento (landscape e portrait).
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 61 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Icon
Stiamo parlando di mobile web.
Capita che l'utente trovi interessante il sito e tramite l'apposito tasto (su iOS "Aggiungi a Home") decida di salvarlo
sul suo device come fosse una App nativa.
E' importante quindi che tu aggiunga un icona identificativa (web clip) al tuo sito mobile. Con poche righe di
codice puoi renderla per dispositivi con schermo Retina e non.
Se l'icona non è disponibile, verrà inserita come icona un semplice "print screen" della schermata web mobile.
Sicuramente l'atto di fornire l'icona, personalizza maggiormente il sito mobile, lo rende più curato ed
immediatamente individuabile nell'insieme delle altre icone già presenti sul device.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 62 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Responsive Design
Rendi il sito mobile adattabile, un solo sito sia per smartphone che per tablet (che per desktop).
Un sito mobile-friendly deve essere Responsive, ad esempio se si parla di WordPress, il tema Twenty Eleven
preinstallato lo è già, altrimenti ci sono altri temi molto famosi: Responsive, The Bootstrap oppure puoi affidarti
ad alcuni plugin, alcuni sono WP Touch, MobilePress.
Il Responsive Design indica un design, sviluppato con le media queries, facilmente fruibile su tutti i dispositivi
portatili attraverso l’utilizzo di layout fluidi e miglioramenti progressivi.
Ottimizza le immagini fornendo diversi formati della stessa immagine per le diverse risoluzioni (schermi Retina
e non), ottimizza le risorse come gli script e tutti gli altri elementi delle pagine che possano essere più o meno
necessari alla navigazione su vari dispositivi, riadatta i contenuti nascondendo elementi presenti sul web
desktop con la proprietà "display:none" e riadatta, come già visto in precedenza, tutti gli elementi dell'interfaccia
utente (form, menu, slider..) con versioni specifiche e studiate per il dispositivo mobile.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 63 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Icon-font
Le immagini rubano banda e nell’utilizzare le media queries per creare la versione mobile di un sito web, avrai
spesso la necessità di ridimensionare icone ed altri piccoli elementi grafici allo scalare del layout (schermi Retina).
La tecnica degli Sprites (tramite una sola immagine ed i CSS) ti risolve in parte il problema legato al consumo di
banda ma non è una tecnica scalabile perchè si tratta comunque sempre di immagini bitmap ed è un
procedimento non così veloce da implementare, poichè trattandosi di un’immagine bitmap, è possibile modificare gli
Sprites solo rieditando prima, con un programma di grafica, il file che contiene tutte le immagini.
La tecnica che ti consiglio di usare e che si sta diffondendo a macchia d’olio, è utilizzare un web font che
contenga icone al posto di caratteri tipografici: un Icon Font. Un icon font è vettoriale, è scalabile a piacere,
gode di un’ottima accessibilità e compatibilità browser e può essere embeddato in una pagina web mobile usando la
direttiva @font-face. Esistono molte raccolte di icon font già pronte all’uso, sia a pagamento che free. Se non lo
conosci, Font Squirrel ha un suo generatore, in più puoi fare qualche test usando subito un loro icon font che
si chiama "Modern Pictograms" (http://is.gd/A57B4Z) che contiene un icon font free in formato OTF convertibile
da subito in un @font-face Kit pronto all'uso. Ma come detto in precedenza, su mobile, evita di usare web font da
decine di KB solo per customizzare il layout con caratteri non standard, piuttosto usa solo un icon font per tutte
le icone di cui hai bisogno.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 64 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

CSS
Le tabelle sono morte nel 2005 (o sarebbero dovuto esserlo).
Evita le tabelle, usa solo i fogli di stile per il layout e la presentazione.
Le tabelle sono sintatticamente errate, appesantiscono la pagina rendendola più lenta da caricare e non sono
amiche degli spiders dei motori di ricerca.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 65 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Velocità
Max 5''
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 66 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Privilegia la velocità
Le connessioni internet mobili sono relativamente più lente delle connessioni standard, è per questo motivo che la
maggior parte dei siti web richiedono più tempo per il caricamento sui dispositivi mobili.
Più della metà degli utenti che riscontrano problemi alla prima connessione difficilmente tornano a visitare
lo stesso sito.
Un sito lento uccide la user experience, quindi verifica la velocità generale del sito.
Il 60% degli utenti vuole la pagina richiesta in 3 secondi, la soglia massima è di 5 secondi, poi si abbandona
il sito.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 67 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

CSS
Rimuovi dagli elementi, dove possibile, la dichiarazione "position:fixed", questo permette di migliorare la
velocità di scrolling su smartphone e tablet.
Fai in modo tale che le dimensioni dei CSS siano piccole, non abbondare nell’utilizzo delle classi, inserisci nel
CSS solo gli stili davvero utilizzati, raggruppa gli elementi HTML che condividono lo stesso stile, utilizza un
markup pulito ed efficiente: non lasciare linee e spazi vuoti.
Usa i CSS, non immagini, per i gradienti e gli arrotondamenti degli angoli degli elementi.
Usa i CSS, non Javascript, per le animazioni e le trasformazioni 3D.
Non inserire stili inline nell'html, ma utilizza classi e id.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 68 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Immagini
Se l'utente non ha uno schermo Retina, non fargli comunque scaricare immagini molto grandi, riservando il
corretto ridimensionamento ai CSS o peggio ancora a Javascript.
Imposta con le media queries, le sole immagini grandi da caricare, solo nel caso il dispositivo sia con schermo
Retina.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 69 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Script
Limita l’uso di script che potrebbero appesantire la fruibilità del sito ed in tutti i casi usa agili e snelle
microarchitetture JavaScript (AJAX ad esempio, con jQuery Mobile) ad esempio per controllare in real-time se
un certo form è stato compilato nel modo giusto evitando di inviarlo al server oppure se hai la necessità di operare
con il DOM modificando al volo il contenuto di una pagina.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 70 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Richieste HTTP
Riduci le richieste HTTP esterne, come i pulsanti social di Facebook o Twitter, che incidono significativamente
sull’esperienza di navigazione in termini di caricamento delle pagine.
Per rendere fluido il caricamento, riduci anche le richieste HTTP interne, riduci il numero di immagini ed evita di
concatenare troppi Javascript e CSS: usa un solo file.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 71 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Application Cache
Usa tecniche di application cache (ma fai molto attenzione) solo per il contenuto statico, cioè quel contenuto del
sito mobile che difficilmente cambierà: immagini, script, stili.
Questo rende il sito mobile in parte visualizzabile anche senza una connessione ad internet.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 72 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Error
Messaggi e avvisi
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 73 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Gli errori capitano
Presta particolare attenzione ai messaggi d'errore e agli avvisi: devono essere informativi ed aiutare l’utente a
rimediare all’errore e se possibile, fargli capire come non ricrearlo.
Offri dove possibile, una "via d'uscita" per tornare allo stato precedente, come ad esempio un "Torna alla pagina
precedente" o "Torna alla Home".
Durante il test di un sito mobile già esistente, abbiamo chiesto agli utenti di provare ad effettuare un bonifico.
Un utente ha immesso l’IBAN del destinatario ma ha lasciato vuoto il campo "Beneficiario".
Di fronte al messaggio di errore "è necessario inserire i campi del beneficiario per eseguire l’operazione", l’utente ha
quindi compilato i campi del form. Peccato abbia compilato solo quelli contrassegnati come facoltativi (causale, data
esecuzione, indirizzo…) continuando a lasciare in bianco uno dei pochi campi obbligatori: "Beneficiario". Solo dopo
aver rivisto lo stesso messaggio di errore l’ha correttamente compilato. Terminato l’input di tutti i campi, la sua
sessione, durata oltre 7 minuti, era scaduta. Ha dovuto rifare tutta la procedura. Evita questa esperienza.
Nel caso, come quello del cliente, si siano voluti mantenere tutti i campi (anche quelli facoltativi) il messaggio di
errore giusto da implementare era: "è necessario compilare il campo "Beneficiario" per eseguire l’operazione". E
nascondere di default tutti i campi facoltativi, rendendoli visibili solo tramite un checkbox.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 74 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Learn & Itera
Test, test, test
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 75 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Provalo!
Tra i tanti processi che andrebbero attuati prima, durante e dopo lo sviluppo del sito mobile, assicurati che il
contenuto sia adatto all’utilizzo in un contesto mobile (fuori di casa o dall’ufficio, in ambienti affollati e rumorosi,
mentre si sta camminando). Prova tu stesso a porti un obiettivo che potrebbe avere un tuo utente e simula la
navigazione in diversi posti/soluzioni dove potrebbe usufruirne anche pensando alle distrazioni che causano, ai
tempi che ha a disposizione, all'illuminazione, ai rumori di sottofondo (in autobus, in treno, in mezzo ad una
piazza, in una stanza, mentre si fa la spesa, a casa di amici, in coda dal medico, durante un'uscita in compagnia).
Pensa agli spaccati di realtà nei quali userà il sito mobile e minimizza la sua attenzione: c'è troppo testo? C'è
bisogno di una navigazione più semplice? Qualcosa non si legge bene con il telefono che sobbalza mentre
cammini? L'attenzione sottratta dalla navigazione al compito primario di monitorare l'ambiente circostante potrebbe
anche causargli problemi di sicurezza (http://is.gd/y5fuAJ).
A titolo di esempio, riassumo una ricerca presentata a Lisbona alcuni anni fa ad una conferenza mobile che si
tiene annualmente (Mobile HCI, http://is.gd/IwhDvE).
Quello che 2 ricercatori volevano capire era se ingrandire automaticamente i bottoni ed il testo dell'interfaccia
quando l'utente cammina può eliminare la maggior quantità di attenzione richiesta dallo schiacciare i bottoni o
leggere testi mentre si è in movimento.
Come primo passo, lo studio ha quantificato cosa accade quando gli utenti svolgono questi compiti in
movimento. I risultati sono stati: per la selezione di bottoni, aumento del 31% del tempo richiesto ed aumento
del 23% degli errori commessi mentre per la lettura di brevi testi, aumento del 23% del tempo richiesto
rispetto al non essere mobile-friendly.
Fatto ciò, i ricercatori hanno ripetuto l'esperimento provando versioni più grandi dei bottoni e dei testi.
Per quanto riguarda i bottoni, un ingrandimento del 40% ha permesso di recuperare quasi completamente la
prestazione normale degli utenti. Per i testi, invece le conclusioni sono state negative e non si è ottenuto alcun
recupero di performance poichè ingrandendo i testi si è introdotta l'esigenza di scrollare le pagine,
complicando la navigazione.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 76 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Testa
Prima di partire con lo sviluppo, testa la navigazione con prototipi cartacei.
Una volta entrato nello sviluppo, testa il sito mobile sugli emulatori, online ne puoi trovare di validi, molti sia a
pagamento (http://www.browserstack.com) che free.
Ma non pensare che un emulatore basti, possibilmente cerca di fare diversi test su dispositivi reali.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 77 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Verifica
Verifica il sito mobile con il checker del W3C (http://validator.w3.org/mobile) proprio come faresti con i validatori
CSS ed HTML.
Ti offre un valido supporto per verificare il peso del sito e dei singoli file, le richieste HTTP, richieste esterne e
molto altro.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 78 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Ascolta
Ascolta, impara ed ottimizza.
Fai dei test reali per scoprire quello che gli utenti cercano dal sito mobile e se possibile, partecipa ai test (è molto
importante che tu capisca ad esempio se su un certo elemento, la maggior parte degli utenti fa "tap" o cerca di fare
"swipe" e se si, perchè).
Se possibile, registra il test con una videocamera posizionata su schermo/mani del tester, se non è possibile
utilizzare una videocamera, fai in modo tale che mentri tu guardi lo schermo/mani del tester, ci sia una figura
predisposta a riportare tutto ciò che tu gli riferisci, non devi mai staccare lo sguardo dal tester.
Analizza le statistiche ed i pattern (flussi) più usati dai tuoi utenti tramite Google Analytics.
Una volta capito dove intervenire per migliorare l'esperienza utente, effettua le modifiche una alla volta e
monitora l'ottimizzazione con un processo continuo.
Cerca poi di capire il comportamento degli utenti per realizzare quali modifiche siano davvero da tenere
(diventando quindi definitive) e quali siano invece da eliminare.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 79 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Chiudo con...
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 80 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Ricorda
Il primo vero sforzo di un progettista dovrebbe essere l’osservazione.
Mai prima d’ora, così tanti contesti d’uso sono stati sotto gli occhi di tutti.
E’ importante osservare ciò che ci circonda, capire quali sono i margini per fornire alle persone esperienze
innovative ed appaganti.
Oggi è possibile.
Prenditi le prossime giornate per guardare veramente cosa fanno le persone e non solo per guardare le
specifiche tecniche dell’ultimo smartphone.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 81 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

Thanks
Luca Degli Esposti
User Interface Designer Web & Mobile
Web: www.Kreolo.com
LinkedIn: lucadegliesposti
Twitter: @Kreolo
Facebook: LucaDegliEsposti
BIO
UI Designer laureato all’ISIA di Urbino [nel 2007], si occupa ormai da anni di Design per il Web ed il
Mobile.
Ma si “sporca” volentieri le mani anche con il codice.
Dal 2010 lavora come User Interface Designer per GetConnected, AnguriaLab e Mopapp.
Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 82 / 82
WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13