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
Il Tap è il nuovo ClickSiti pensati per il Web Mobile
User ExperienceComportamento generale dell'esperienza utente
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.
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
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.
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.
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).
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).
Luca Degli Esposti Kreolo.com
Device
Sfrutta le capacità del dispositivo dove possibile (Es: GPS integrato).
10/81
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.
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.
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.
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.
LayoutStruttura ed impaginazione
15/81
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.
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).
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).
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).
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
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.
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.
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?
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'.
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
NavigazioneLinks e Menù
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.
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.
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.
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
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.
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.
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.
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.
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
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.
TypografiaFonts ed ingombri
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.
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.
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
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.
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”.
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.
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.
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
Gestione impulsiInput, tastiera, select, slider, form
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”.
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ù.
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).
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
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.
Rule of thumbPensa per le dita
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.
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.
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
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.
DesignGrafica, colore, img, icone, responsive
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.
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.
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
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).
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.
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.
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).
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
VelocitàMax 5 secondi
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.
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.
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.
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
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.
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.
ErrorMessaggi e avvisi
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”.
Learn & IteraTest, test, test
75/81
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.
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.
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.
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.
Chiudo con...</..
80/81
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.