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

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


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.



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).



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.



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.



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



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.



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.



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ù.



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.



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.



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.



Layout
Struttura ed impaginazione



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.



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.



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).



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.



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.



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".



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.



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).



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.



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.



Layout Blog WP

Logo

Menù di Navigazione principale + Box di ricerca

Ultimi 5 post
. post
. post
. post
. post
. post

Link Social

Contatti / Support



Navigazione
Links e Menù



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



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.



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.



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.



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.



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.



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.



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.



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.



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.



Typografia
Fonts ed ingombri



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.



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.



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.



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.



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".



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.



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.



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.



Gestione impulsi
Input, tastiera, select, slider, form



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".



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ù.



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).



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.



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).



Rule of thumb
Pensa per le dita



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.



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.



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.



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.



Design
Grafica, colore, img, icone, responsive



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.



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.



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.



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).



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.



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.



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.



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.



Velocità
Max 5''



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.



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.



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.



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.



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.



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.



Error
Messaggi e avvisi



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.



Learn & Itera
Test, test, test



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.


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.



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.



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.



Chiudo con...



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.



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.



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

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (13)

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

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

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