Best Practices per il Web Mobile by Luca Degli Esposti

81
Luca Degli Esposti UI Designer laureato all’ISIA di Urbino si occupa ormai da anni di Design per il Web ed il Mobile. Ma si “sporca” volentieri le mani anche con il codice. Web Kreolo.com Twitter @Kreolo

description

Oggi un sito web deve esser progettato per una consultazione mobilefriendly ancor prima che per il desktop. Colui che progetta il layout mobile deve avere tutta una serie di accorgimenti di usabilità, struttura e design che rendano la navigazione pulita, semplice ed immediata per lobiettivo dellutente sia che si tratti di sito vetrina o mCommerce. Nellintervento analizzeremo tutti i principali accorgimenti: dalla giusta scelta tipografica alla dimensione minima di un pulsante, dal più corretto menù di navigazione allanalisi del contesto temporale/fisico in cui si fruirà del mobile site.

Transcript of Best Practices per il Web Mobile by Luca Degli Esposti

Page 1: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli EspostiUI Designer laureato all’ISIA di Urbino si occupa ormaida anni di Design per il Web ed il Mobile.Ma si “sporca” volentieri le mani anche con il codice.

Web Kreolo.comTwitter @Kreolo

Page 2: Best Practices per il Web Mobile by Luca Degli Esposti

Il Tap è il nuovo ClickSiti pensati per il Web Mobile

Page 3: Best Practices per il Web Mobile by Luca Degli Esposti

User ExperienceComportamento generale dell'esperienza utente

Page 4: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

User Experience

L'utenza mobile possiede interessi differenti.

Ha una differente condizione di connettività.

Le possibilità si sono aperte ad un'interazione più naturale e semplice.

Page 5: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pensa Mobile, non Desktop

Evita una risoluzione Desktop, parti da un layout mobile-friendly.

Ripensa la navigazione.

Non aver paura di partire dalla prototipazione su carta.

5/81

Page 6: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Ricordati del Desktop

Offri un'esperienza coerente ed unica con il web desktop, un'esperienza

omogenea.

Adatta il più possibile le funzionalità del sito desktop ai dispositivi mobile.

Page 7: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pensa agli utenti

Devono controllare informazioni in real-time? Intrattenersi?

Gestire attività legate al luogo in cui si trovano?

Comprendi le reali necessità degli utenti.

Ti aiuterà a semplificare la progettazione del layout.

Page 8: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Touch-friendly

Usa interazioni naturali: rendi tutto intuitivo, naturale, usa le gestures più

codificate, immediate e semplici (http://is.gd/AYd0nt).

Pensa all'uso prevalente di una sola mano.

Se hai 30''

Guarda questo bimbo con un iPhone (http://is.gd/ipUs9W).

Page 9: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pattern

Usa pattern che gli utenti già conoscono (Es: Google Maps per il servizio

ricerca punti vendita, filiali o altro).

Page 10: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Device

Sfrutta le capacità del dispositivo dove possibile (Es: GPS integrato).

10/81

Page 11: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Semplifica

Limita la quantità di azioni richieste per la navigazione.

Il touchscreen per quanto avanzato espone maggiormente al rischio di

errori involontari.

Meno tap si traducono quindi in un minor numero di errori.

Meno errori, maggior gratificazione.

Page 12: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Coerenza

Utilizza le stesse modalità di navigazione in tutte le pagine.

Così aiuti gli utenti ad orientarsi e consenti loro di identificare i meccanismi

di navigazione più facilmente.

Page 13: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Focus

Poni l'informazione più importante ad inizio di titoli, paragrafi, liste (tecnica

del front loading), non nascondere ciò che gli utenti vogliono.

Così è più semplice e veloce capire se l'argomento è interessante.

Page 14: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Stop

Pensa all'eventualità che per pochi secondi/minuti le attività in corso

potrebbero essere sospese da fattori più importanti.

Fai in modo tale che l'utente possa tornare al punto in cui era senza

conseguenze per la navigazione.

Page 15: Best Practices per il Web Mobile by Luca Degli Esposti

LayoutStruttura ed impaginazione

15/81

Page 16: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Niente barra

Guadagna spazio.

Poche righe di codice JS ti permettono, al caricamento della pagina, di

nascondere la barra in alto degli indirizzi.

Page 17: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Linearizza

Prediligi un unica colonna, disponi i vari elementi uno sotto l'altro

nell'ordine definito nel markup.

Solo quando avrai più spazio (sui tablet) potrai pensare ad un layout a più

colonne (max 2).

Page 18: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Porzioni usabili

Suddividi il sito mobile nel giusto numero di pagine.

Se le pagine sono troppo lunghe, ci vorranno molti scroll.

Se sono troppo corte, costringi 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 molti tap.

Una soluzione: inserisci elementi già “collassati” che si possono poi

espandere (gli Accordion).

Page 19: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Titoli

Fornisci un title breve ma descrittivo per ogni pagina: potrebbe venire

troncato direttamente dal browser o dall'etichetta dei bookmarks.

All'interno delle pagine invece, usa un markup strutturale (titolo, sottotitolo

poi paragrafo) con i tag appropriati (H1, H2, P).

Page 20: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

No-Scroll

Limita lo scrolling ad una sola direzione, quella verticale.

Evita il più possibile uno scrolling secondario, se proprio devi, ponilo a

fondo pagina.

20/81

Page 21: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Touch-friendly

Utilizza elementi touch-friendly (Es: lo Zoom, il Drag-n-Drop).

Il Drag-n-Drop è un esempio perfetto di interazione naturale: simula il

“prendi e butta dentro” che facciamo con i prodotti ed il carrello della

spesa in un centro commerciale.

Page 22: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

No-Zoom

Evita per qualsiasi ragione che l'utente debba zoomare.

Se proprio devi, fai fare lo Zoom con gestures standard (avvicinamento e

allontanamento delle dita): è un ottima metafora che riduce il gap

concettuale tra effetto desiderato/azione necessaria (Golfo dell'esecuzione

di Norman).

Non inserire gli elementi grafici “+” e “–“ in stile Google Maps su web

desktop.

Page 23: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Portrait o Landscape

Considera l'importanza e le possibilità di un orientamento piuttosto che

l'altro.

Pensa all'uso, alle esigenze ed ai benefici della fruizione in verticale rispetto

a quella in orizzontale dove ho si più spazio ai lati, ma a parità di

contenuto, dovrò fare quindi molti più scroll in verticale?

Page 24: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Menù

Inserisci menù drill-down.

Pensa al comportamento degli utenti.

Per gli utenti che vogliono passare a nuovi contenuti in modo rapido è

preferibile il menù nella parte inferiore della pagina.

Per gli utenti che preferiscono scegliere è invece meglio avere il menù subito

in cima alla pagina.

Posiziona i contenuti più importanti sempre nella parte superiore.

Una soluzione: posiziona un menù “sticky” (fisso in alto). Uno studio ha

dimostrato che rende il 22% più facile e veloce la navigazione facendo

guadagnare all'utente fino a 36'' in una navigazione totale di 5'.

Page 25: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Back to Top

Se l'utente ha fatto diversi scroll, inserisci sempre a fondo pagina un link

“Torna su” per tornare all'inizio della sezione/pagina o alla navigazione

principale.

25/81

Page 26: Best Practices per il Web Mobile by Luca Degli Esposti

NavigazioneLinks e Menù

Page 27: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

URI corti

Mantieni gli indirizzi delle pagine mobile i più corti possibile, dal momento

che la loro digitazione sui devices risulta un'attività difficoltosa: riduci così le

possibilità di errore.

Se possibile, registra con un nome corto anche il nome di dominio.

Page 28: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pochi “tap”

Analizza (tramite Google Analytics) le statistiche ed i pattern (fussi) più

usati dagli utenti e progetta quindi un layout in cui l'informazione più

ricercata sia raggiungibile con il minor numero di pagine.

Studi recenti, hanno dimostrato che un utente preferisce non dover seguire

più di 4 “tap” per raggiungere il proprio obiettivo.

Page 29: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Poche voci di Menù

Analizzando le aree di visualizzazione disponibili sui browser mobile, il

consiglio è di non inserire più di 5 pulsanti di navigazione per menù.

E per riadattare un precedente progetto web desktop con decine e decine

di voci di menù?

Una soluzione: adotta dei menù annidati o sotto forma di liste e metti a

disposizione il minor numero di scelte possibili pilotando, per quanto

possibile, la navigazione.

Page 30: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Solo testo

E' plausibile che nel sito mobile ci siano svariati collegamenti a pagine,

immagini, file, effetti.

Per i link “tappabili” usa quindi del semplice testo, evita di far scaricare una

seppur piccola immagine all'utente solo per mostrare un pulsante grafico.

Non tanto per il lato estetico quanto per quello pratico: 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: quei link non

funzioneranno.

30/81

Page 31: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Target

Fai in modo tale che l'utente sappia in anticipo dove un link porta in

maniera da permettergli di valutare se è interessato a seguire il link o meno:

identifica chiaramente il target di ciascun link ed indica sempre accanto al

link il formato del file a cui il link porta.

Dai nomi significativi ai link, specifica la destinazione e se questo porta ad

un file di grandi dimensioni e di formato inatteso rispetto all'ultima parte

della navigazione, avverti l'utente dandogli un'idea della dimensione della

risorsa.

L'utente non vuole aspettare.

A maggior ragione per una cosa che non vuole.

Page 32: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

No-PopOver et similia

Evita di aprire delle finestre di PopOver (o simili), evita il refresh automatico

delle pagine, non utilizzare markup che applica un redirect automatico

delle pagine ed evita l'uso di Flash.

PopOver, refresh e redirect generano confusione nell'utente ed errori con

“tap” accidentali sbagliati, aumentano i costi di connessione e ritardano

l'interazione con il sito mobile.

Page 33: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Dimentica l'hover

Sui monitor touch non esiste l'evento “hover” tramite CSS ma solo tramite

codice JS: non impostarlo sui link dove l'utente deve fare solo “tap”.

Fai però capire all'utente quale oggetto è “a fuoco” dopo il “tap”: in un

menù espanso ad esempio puoi cambiare il colore del carattere, lo sfondo

del link/pulsante oppure aumentarne il padding.

Puoi invece creare una sorta di effetto “hover” su elementi con interazioni

“tap and hold” (tieni premuto) allungando leggermente i tempi di reazione.

Page 34: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Rassicura

Semplifica la navigazione del sito mobile con pulsanti “indietro” e “home”

chiari e ben visibili in qualsiasi momento.

Se puoi, in ogni pagina, non inserire più di 7 link di navigazione.

Se non ci sono vincoli particolari, inserisci le “briciole di pane”: l'utente già

le conosce e capisce subito dove si trova nel sito mobile.

Page 35: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pensa locale

Ai piedi della pagina inserisci sempre l'indirizzo della tua attività o uno

store locator sulla pagina dei contatti.

Dove possibile, utilizza il GPS integrato con mappe e indicazioni stradali.

Se 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à proponga se chiamare quel numero.

35/81

Page 36: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Versione completa

Fornisci sempre un link, ben visibile e in fondo alla pagina, alla versione

completa “desktop” del sito, questo per permettere all'utente di avere una

visione “d'insieme” adattata alle sue esigenze.

Viceversa, nel sito desktop e solo se visto da devices mobile conviene

sempre mettere un link alla versione mobile, nel caso gli utenti volessero

tornare indietro.

Page 37: Best Practices per il Web Mobile by Luca Degli Esposti

TypografiaFonts ed ingombri

Page 38: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Font

Molto importante in tema di tipografia è la giusta scelta dei fonts.

Smartphone e tablet dispongono di un set di caratteri molto limitato, su iOS

puoi controllare su http://iosfonts.com

Una soluzione: puoi ricorrere ai Web Fonts, magari sfruttando servizi come

Google Web Fonts per caricare font personalizzati, ma non abusarne.

Ricorda che siamo in mobilità, la parola d'ordine è semplificare: non far

scaricare quindi centinaia di KB per diversi Web Fonts, limita il numero di

fonts e fai scaricare solo le versioni che userai effettivamente.

Page 39: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Visibilità

Progetta tutto al fine della visibilità, la lettura dei contenuti deve essere

semplificata anche in ambienti poco illuminati, senza affaticare la vista.

Anche la luce del sole è uno dei peggiori nemici.

Una soluzione: metti in grassetto le parti di testo più importanti, aumenta il

contrasto tra colore del testo e colore di sfondo.

Page 40: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

5W del giornalismo

Gli utenti non leggono, ma scorrono l'informazione: usa quindi uno stile

breve e diretto.

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 o meno l'informazione

presentata.

40/81

Page 41: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Piccoli blocchi

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.

Page 42: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Font-size

Il font-size ottimale è di minimo 14px, una dimensione leggibile ma non

troppo grande.

Per fare in modo tale che il font si ridimensioni correttamente, preferisci

sempre misure in “em” piuttosto che in “px”.

Una soluzione: parti dall'impostazione del body (font-size:100%) e poi

specifica il resto dei testi in “em”.

Page 43: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Kerning & Line-Height

Aumenta il Kerning, cioè lo spazio orizzontale tra le parole, al fine di

aumentarne così la leggibilità.

Aumenta la line-height tra le singole righe di testo, questo evita la

pesantezza del blocco e l'affaticamento degli occhi.

Se possibile, aumenta gli spazi orizzontali tra il blocco di testo ed i bordi

della finestra del browser mobile.

Page 44: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

H1, H2, P

Gli utenti mobile hanno un bisogno che deve essere soddisfatto in

brevissimo tempo.

Per questo dedicano poca attenzione ai testi informativi.

Utilizza una formattazione corretta (H1, H2, P) per favorire la leggibilità e

le diverse priorità del messaggio che vuoi comunicare.

Page 45: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Linguaggio

Parla la “lingua” del tuo utente.

Non si tratta di fornire la lingua parlata dal tuo utente, si tratta di parlare

un linguaggio vicino a quello del tuo utente: non dare per scontati concetti

solo a noi noti.

45/81

Page 46: Best Practices per il Web Mobile by Luca Degli Esposti

Gestione impulsiInput, tastiera, select, slider, form

Page 47: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Tastiera, ti odio

L'input da tastiera su interfacce touch resta il vero problema di questi

devices: certa di limitarne il più possibile l'attività.

Evita l'immissione di testo libero e fornisci se possibile del testo predefinito

da selezionare: usa ad esempio i menù a tendina (select), pulsanti radio e

checkbox su elenchi.

Oltre alla scarsa usabilità, c'è un fattore puramente di layout: sui device

touch la tastiera compare e porta via spazio utile, tienilo sempre in

considerazione per organizzare gli elementi in modo che non spariscano

quelli utili per la “call to action”.

Page 48: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

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

Page 49: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

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

all'utente l'input manuale da tastiera.

In caso di input numerici (limitati) si può anche utilizzare un controllo di tipo

“slider” (Es. come impostare la sveglia su iOS).

Page 50: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Input HTML5

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 (Es. type=”url”).

Usa un ordine logico: posiziona le label (etichette) in maniera tale che si

dispongano correttamente in relazione all'input.

50/81

Page 51: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Pochi campi

Su un layout mobile, i “form” diventano ancora più determinanti: pulsanti

piccoli, assenza di feedback tattili al “tap”, input complessi.

Gli utenti in difficoltà o che non sono sicuri di come compilare un campo,

abbandonano l'interfaccia.

Inserisci moduli brevi con il minor numero possibile di campi, pensa ad

inserire solo i campi strettamente necessari.

Page 52: Best Practices per il Web Mobile by Luca Degli Esposti

Rule of thumbPensa per le dita

Page 53: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

44pixel

Sui device touch, il nostro dito ha una scarsa precisione.

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”: su uno schermo Retina (Es: iPhone4)

è di 60x88 pixel (Apple consiglia 88x88px).

Segui la semplice equazione “+ importante = + grande” in modo da

facilitare la vita dell'utente. Nei link, aumenta il padding fino a portare

l'ingombro alla dimensione minima consigliata.

Page 54: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Fat finger

I display touch implicano l'uso delle dita, non sai quali dita però.

Non pensare solo alla regola 44pixel, ma progetta anche per chi ha il

pollice più grande del tuo, considera il fattore “fat finger” nominato dal

Nielsen Norman Group (NNG) che consiglia elementi minimi di 1x1 cm.

Nell'articolo TouchTargetSizes (http://is.gd/W2SCgj) troverai una

panoramica esaustiva sulle dimensioni minime suggerite dai principali

produttori mondiali di smartphone.

Le popolazioni che da recenti studi hanno dimostrato di avere mani e quindi

dita più grandi rispetto alla media, sono americani, inglesi, messicani,

australiani e canadesi.

Page 55: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Fai spazio

Importante non è solo la dimensione ma anche la disposizione dei pulsanti.

Una spaziatura di 2/3 mm. è lo standard.

L'eccessiva vicinanza tra diversi “target” aumenta le probabilità di errore,

cioè selezionare involontariamente il comando sbagliato, riducendo

l'usabilità del sito mobile.

Evita quindi pulsanti troppo vicini tra loro.

55/81

Page 56: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Occhio alle mani

Nelle interfacce touch il dispositivo di input corrisponde al dispositivo di

output (lo schermo).

Pensa quindi alla posizione delle mani, potrebbero coprire elementi

importanti dell'interfaccia proprio quando servono.

Posiziona le informazioni in modo che non possano venire coperte dalle

mani: evita di posizionare le etichette sotto gli elementi di interazione, ma

mettile sempre sopra.

Page 57: Best Practices per il Web Mobile by Luca Degli Esposti

DesignGrafica, colore, img, icone, responsive

Page 58: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

L'interazione costa

Gli utenti non fanno “tap” su ciò che non conoscono.

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 un dato elemento grafico,

sia praticamente nullo: deve essere intuitivo, automatico.

Page 59: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Design minimalista

Rendi il sito mobile un luogo chiaro, quindi semplifica.

Un buon design 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.

Se puoi, pensa senza icone, piuttosto abituati ad usare particolari gestures.

Page 60: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Colore

Assicurati che l'informazione veicolata dal solo colore sia disponibile anche

senza colore (pensa agli ipovedenti).

I link ad esempio, non dovrebbero essere differenziati dal resto del testo

solo da una scelta cromatica, ma anche dalla sottolineatura.

Assicurati che la combinazione tra i colori di sfondo e quelli del testo in

primo piano fornisca un contrasto sufficiente.

60/81

Page 61: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Immagini

Quando usi immagini di sfondo, assicurati che il contenuto risulti

completamente leggibile.

Usa solo immagini che risultano con una buona resa (pensa anche agli

schermi Retina).

Page 62: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Icon

Capita che l'utente trovi interessante il sito mobile e decida di salvarlo sul

suo device (come fosse una App nativa).

E' importante quindi che tu aggiunga un icona identificativa (web clip) al

sito mobile.

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 dell'utente.

Page 63: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Responsive Design

Rendi il sito mobile adattabile (responsive): un solo sito sia per smartphone

che per tablet (che per desktop).

Il Responsive Design indica un design, sviluppato con le media queries,

facilmente fruibile su tutti i dispositivi portatili attraverso l'utilizzo di layout

fuidi e miglioramenti progressivi.

Ottimizza le immagini fornendo diversi formati per diverse risoluzioni,

ottimizza le risorse come gli script, riadatta i contenuti nascondendo

elementi presenti sul web desktop con la proprietà “display:none” e

riadatta tutti gli elementi dell'interfaccia utente (form, menu, slider) con

versioni specifiche e studiate per i dispositivi mobile.

Page 64: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Icon-font

Avrai spesso la necessità di ridimensionare icone ed altri elementi grafici.

La tecnica degli Sprites non è una tecnica scalabile, si tratta sempre di

immagini bitmap.

La tecnica che consiglio è utilizzare un web font che contenga icone al

posto di caratteri tipografici: un Icon Font.

E' 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.

Font Squirrel ha un suo generatore di icon font, se vuoi fare qualche test

puoi usare il loro “Modern Pictograms” (http://is.gd/A57B4Z).

Page 65: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

CSS

Le tabelle sono morte.

Sono sintatticamente errate, appesantiscono la pagina rendendola più lenta

da caricare e non sono amiche degli spiders dei motori di ricerca.

Evita quindi le tabelle ed usa solo i fogli di stile (CSS) per il layout e la

presentazione.

65/81

Page 66: Best Practices per il Web Mobile by Luca Degli Esposti

VelocitàMax 5 secondi

Page 67: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Max 5''

Più della metà degli utenti che riscontrano problemi alla prima connessione

difficilmente tornano a visitare lo stesso sito.

Il 60% degli utenti vuole la pagina richiesta in 3 secondi, la soglia massima

è di 5 secondi, poi si abbandona il sito.

Verifica quindi la velocità generale del sito.

Page 68: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

CSS

Rimuovi dagli elementi la dichiarazione “position:fixed”, questo permette di

migliorare la velocità di scrolling sui dispositivi mobile.

Fai in modo tale che le dimensioni dei CSS siano piccole: non abbondare

nell'uso delle classi, inserisci solo gli stili davvero usati, raggruppa gli

elementi HTML che condividono lo stesso stile e minifica i files.

Usa i CSS, non immagini, per gradienti e arrotondamenti di elementi.

Usa i CSS, non JS, per animazioni e trasformazioni 3D.

Usa .classi e #id, non inserire stili inline nell'HTML.

Page 69: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Immagini

Se l'utente non ha uno schermo Retina, non fargli comunque scaricare

immagini molto grandi, riservando il ridimensionamento ai CSS o a JS.

Imposta con le media queries, le sole immagini grandi da caricare, solo nel

caso il dispositivo sia con schermo Retina.

Page 70: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Script

Limita l'uso di script che potrebbero appesantire il sito ed in tutti i casi usa

agili e snelle micro-architetture JS (AJAX, ad esempio con jQuery Mobile).

70/81

Page 71: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Richieste HTTP

Riduci le richieste HTTP esterne, come i pulsanti social di Facebook e Twitter.

Per rendere fuido il caricamento, riduci anche le richieste HTTP interne,

riduci il numero di immagini ed evita di concatenare troppi JS e CSS: usa un

solo file.

Page 72: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Application Cache

Usa tecniche di application cache (ma fai molta attenzione) solo per il

contenuto statico, quello che difficilmente cambierà: immagini, script, stili.

Questo rende il sito mobile in parte più veloce e visualizzabile anche senza

una connessione attiva.

Page 73: Best Practices per il Web Mobile by Luca Degli Esposti

ErrorMessaggi e avvisi

Page 74: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Gli errori capitano

Rendi informativi i messaggi d'errore e gli avvisi: devono aiutare l'utente a

rimediare all'errore e fargli capire come non ricrearlo.

Offri sempre una “via d'uscita” per tornare allo stato precedente, come il

tasto “Indietro” o “Torna alla Home”.

Page 75: Best Practices per il Web Mobile by Luca Degli Esposti

Learn & IteraTest, test, test

75/81

Page 76: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Provalo

Pensa agli spaccati di realtà nei quali verrà usato il sito mobile.

Prova tu stesso a porti un obiettivo che potrebbe avere l'utente e simula la

navigazione in diversi contesti, anche pensando alle distrazioni che

causano (http://is.gd/y5fuAJ), ai tempi che si hanno a disposizione,

all'illuminazione e ai rumori di sottofondo.

Una ricerca presentata al Mobile HCI (http://is.gd/IwhDvE) ha dimostrato

che rispetto all'essere fermi, in movimento, per la selezione di bottoni si ha

il 23% di errori ed un 31% di tempo richiesto in più. Per la lettura di brevi

testi, un 23% di tempo richiesto in più.

Aumentando del 40% i bottoni si è recuperata la prestazione normale degli

utenti, per i testi invece non vi è stato alcun recupero poiché a testi più

grandi sono corrisposti molti più scroll nella navigazione.

Page 77: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Testa

Prima di partire con lo sviluppo, testa la navigazione con prototipi cartacei.

Una volta entrato nello sviluppo, testa costantemente il sito mobile sugli

emulatori (http://www.browserstack.com).

Ma non pensare che un emulatore basti, cerca di fare diversi test, su

dispositivi reali.

Page 78: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Verifica

Verifica il sito mobile con il checker W3C (http://validator.w3.org/mobile)

proprio come faresti con i validatori CSS ed HTML.

Ti permette di verificare il peso generale del sito e dei singoli file, le

richieste HTTP, le richieste esterne e molto altro.

Page 79: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Ascolta

Fai dei test reali con utenti reali e partecipa ai test.

Registra il test con una videocamera posizionata su schermo/mani del

tester, fai in modo tale di non staccare mai lo sguardo dal tester.

Analizza le statistiche ed i pattern (fussi) più usati dai tuoi utenti tramite

Google Analytics.

Effettua le modifiche che ritieni opportune una alla volta e monitora poi

l'ottimizzazione con un processo continuo. Capirai quali modifiche siano

davvero da tenere e quali siano invece da eliminare.

Page 80: Best Practices per il Web Mobile by Luca Degli Esposti

Chiudo con...</..

80/81

Page 81: Best Practices per il Web Mobile by Luca Degli Esposti

Luca Degli Esposti Kreolo.com

Osserva

Il primo vero sforzo di un progettista dovrebbe essere l'osservazione.

E' importante osservare ciò che ci circonda, capire quali sono i margini per

fornire alle persone esperienze innovative ed appaganti.

Prenditi le prossime giornate per guardare veramente cosa fanno le

persone e non solo per guardare le specifiche tecniche dell'ultimo device.