SlideShare a Scribd company logo
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

More Related Content

Viewers also liked

UX laws - How to design a great user experience
UX laws - How to design a great user experienceUX laws - How to design a great user experience
UX laws - How to design a great user experience
Luca Mascaro
 
Manage custom options pages in Wordpress
Manage custom options pages in WordpressManage custom options pages in Wordpress
Manage custom options pages in Wordpress
Simone D'Amico
 
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletSviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletLuca Bartoli
 
Perché odio i temi di WordPress
Perché odio i temi di WordPressPerché odio i temi di WordPress
Perché odio i temi di WordPress
matteo cavucci
 
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
Corley S.r.l.
 
Medicos sinfronteras
Medicos sinfronterasMedicos sinfronteras
Medicos sinfronterasjose22jam
 
Starbucks & foursquare
Starbucks & foursquareStarbucks & foursquare
Starbucks & foursquare
Andreia DIONISIO
 
Zk doc1
Zk doc1Zk doc1
Zk doc1
Rupalli Das
 
How to recognize gods voice
How to recognize gods voiceHow to recognize gods voice
How to recognize gods voice
Samson Sanggah
 
Justin deskin
Justin deskinJustin deskin
Justin deskin
James Deskin
 
law enforcement powerpoint template - Slide World
law enforcement powerpoint template - Slide Worldlaw enforcement powerpoint template - Slide World
law enforcement powerpoint template - Slide World
http://www.slideworld.com/
 
Hotpots practice for_ced
Hotpots practice for_cedHotpots practice for_ced
Hotpots practice for_ced
Joan Ripoll
 
Meeting Powerpoint Template - SlideWorld
Meeting Powerpoint Template - SlideWorldMeeting Powerpoint Template - SlideWorld
Meeting Powerpoint Template - SlideWorld
http://www.slideworld.com/
 

Viewers also liked (13)

UX laws - How to design a great user experience
UX laws - How to design a great user experienceUX laws - How to design a great user experience
UX laws - How to design a great user experience
 
Manage custom options pages in Wordpress
Manage custom options pages in WordpressManage custom options pages in Wordpress
Manage custom options pages in Wordpress
 
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver BulletSviluppare plugin per WordPress: Best Practice e Silver Bullet
Sviluppare plugin per WordPress: Best Practice e Silver Bullet
 
Perché odio i temi di WordPress
Perché odio i temi di WordPressPerché odio i temi di WordPress
Perché odio i temi di WordPress
 
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
Cloud Computing & WordPress - Scalability and High Availability - wpcampbo13
 
Medicos sinfronteras
Medicos sinfronterasMedicos sinfronteras
Medicos sinfronteras
 
Starbucks & foursquare
Starbucks & foursquareStarbucks & foursquare
Starbucks & foursquare
 
Zk doc1
Zk doc1Zk doc1
Zk doc1
 
How to recognize gods voice
How to recognize gods voiceHow to recognize gods voice
How to recognize gods voice
 
Justin deskin
Justin deskinJustin deskin
Justin deskin
 
law enforcement powerpoint template - Slide World
law enforcement powerpoint template - Slide Worldlaw enforcement powerpoint template - Slide World
law enforcement powerpoint template - Slide World
 
Hotpots practice for_ced
Hotpots practice for_cedHotpots practice for_ced
Hotpots practice for_ced
 
Meeting Powerpoint Template - SlideWorld
Meeting Powerpoint Template - SlideWorldMeeting Powerpoint Template - SlideWorld
Meeting Powerpoint Template - SlideWorld
 

Similar to Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Wordcamp Bologna

Mobile UX - Web vs. Mobile due esperienze d'uso a confronto
Mobile UX - Web vs. Mobile due esperienze d'uso a confrontoMobile UX - Web vs. Mobile due esperienze d'uso a confronto
Mobile UX - Web vs. Mobile due esperienze d'uso a confrontoSilvia Soccol
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile UsabilityKEA s.r.l.
 
Ristomarketing art.5
Ristomarketing art.5Ristomarketing art.5
Ristomarketing art.5
Domenico DI PAOLA
 
Turismo in Movimento: Sito Mobile, Applicazioni e Geolocalizzazione
Turismo in Movimento: Sito Mobile, Applicazioni e GeolocalizzazioneTurismo in Movimento: Sito Mobile, Applicazioni e Geolocalizzazione
Turismo in Movimento: Sito Mobile, Applicazioni e GeolocalizzazioneFormazioneTurismo
 
Business plan
Business planBusiness plan
Business plan
meonmysofa
 
The Mobile Challenge - World Plone Day, Bologna 2015
The Mobile Challenge - World Plone Day, Bologna 2015The Mobile Challenge - World Plone Day, Bologna 2015
The Mobile Challenge - World Plone Day, Bologna 2015
Irene Capatti
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobile
aperinfo
 
Web o app? Questo è il dilemma!
Web o app? Questo è il dilemma!Web o app? Questo è il dilemma!
Web o app? Questo è il dilemma!
KEA s.r.l.
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
Jservice
 
Evernote e i professionisti digitali
Evernote e i professionisti digitaliEvernote e i professionisti digitali
Evernote e i professionisti digitali
Francesco Posati
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for successAcrmnet s.r.l.
 
7 Errori da Evitare nell’Home Page del tuo Hotel
7 Errori da Evitare nell’Home Page del tuo Hotel7 Errori da Evitare nell’Home Page del tuo Hotel
7 Errori da Evitare nell’Home Page del tuo HotelFormazioneTurismo
 
Sito Web Mobile su Dominio di Terzo Livello
Sito Web Mobile su Dominio di Terzo LivelloSito Web Mobile su Dominio di Terzo Livello
Sito Web Mobile su Dominio di Terzo Livello
Carlenzoli Yuri
 
Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
Alessandro Ceccarelli
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successo
Diego La Monica
 
Domainshow.it
Domainshow.itDomainshow.it
Domainshow.it
Francesco Cetraro
 
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Giovanni Sacheli
 

Similar to Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Wordcamp Bologna (20)

Mobile UX - Web vs. Mobile due esperienze d'uso a confronto
Mobile UX - Web vs. Mobile due esperienze d'uso a confrontoMobile UX - Web vs. Mobile due esperienze d'uso a confronto
Mobile UX - Web vs. Mobile due esperienze d'uso a confronto
 
Mobile Usability
Mobile UsabilityMobile Usability
Mobile Usability
 
Ristomarketing art.5
Ristomarketing art.5Ristomarketing art.5
Ristomarketing art.5
 
Turismo in Movimento: Sito Mobile, Applicazioni e Geolocalizzazione
Turismo in Movimento: Sito Mobile, Applicazioni e GeolocalizzazioneTurismo in Movimento: Sito Mobile, Applicazioni e Geolocalizzazione
Turismo in Movimento: Sito Mobile, Applicazioni e Geolocalizzazione
 
Business plan
Business planBusiness plan
Business plan
 
Responsivedesign
ResponsivedesignResponsivedesign
Responsivedesign
 
The Mobile Challenge - World Plone Day, Bologna 2015
The Mobile Challenge - World Plone Day, Bologna 2015The Mobile Challenge - World Plone Day, Bologna 2015
The Mobile Challenge - World Plone Day, Bologna 2015
 
Aperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - MobileAperinfo maggio-2012 - Mobile
Aperinfo maggio-2012 - Mobile
 
Web o app? Questo è il dilemma!
Web o app? Questo è il dilemma!Web o app? Questo è il dilemma!
Web o app? Questo è il dilemma!
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
 
Evernote e i professionisti digitali
Evernote e i professionisti digitaliEvernote e i professionisti digitali
Evernote e i professionisti digitali
 
Define & design apps for success
Define & design apps for successDefine & design apps for success
Define & design apps for success
 
7 Errori da Evitare nell’Home Page del tuo Hotel
7 Errori da Evitare nell’Home Page del tuo Hotel7 Errori da Evitare nell’Home Page del tuo Hotel
7 Errori da Evitare nell’Home Page del tuo Hotel
 
Workshop internet days 2013
Workshop internet days 2013Workshop internet days 2013
Workshop internet days 2013
 
Sito Web Mobile su Dominio di Terzo Livello
Sito Web Mobile su Dominio di Terzo LivelloSito Web Mobile su Dominio di Terzo Livello
Sito Web Mobile su Dominio di Terzo Livello
 
Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
 
TESI definitiva
TESI definitivaTESI definitiva
TESI definitiva
 
Presentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successoPresentarsi sul mercato globale con app di successo
Presentarsi sul mercato globale con app di successo
 
Domainshow.it
Domainshow.itDomainshow.it
Domainshow.it
 
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018Come creare una PWA Progressive Web App @ Inbound Strategies 2018
Come creare una PWA Progressive Web App @ Inbound Strategies 2018
 

Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Wordcamp Bologna

  • 1. 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
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. Layout Struttura ed impaginazione Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 14 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. Navigazione Links e Menù Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 26 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 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
  • 37. Typografia Fonts ed ingombri Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 37 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 38. 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
  • 39. 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
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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
  • 46. 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
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. 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
  • 52. 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
  • 53. 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
  • 54. 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
  • 55. 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
  • 56. 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
  • 57. Design Grafica, colore, img, icone, responsive Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 57 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 58. 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
  • 59. 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
  • 60. 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
  • 61. 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
  • 62. 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
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. Velocità Max 5'' Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 66 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 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
  • 73. Error Messaggi e avvisi Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 73 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 74. 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
  • 75. Learn & Itera Test, test, test Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 75 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 76. 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
  • 77. 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
  • 78. 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
  • 79. 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
  • 80. Chiudo con... Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 80 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  • 81. 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
  • 82. 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