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

2,623 views
2,478 views

Published on

Oggi più che mai, se l’obiettivo lo consente, un sito web deve essere progettato, ancor prima che per il desktop, per una consultazione mobile-friendly.
Colui che va a progettare il layout grafico del sito mobile, deve avere in primo luogo tutta una serie di accorgimenti di usabilità, struttura e design che portino ad una navigazione pulita, semplice, immediata ed efficace per l’obiettivo primario dell’utente finale, sia che si tratti di un blog, un sito vetrina o un m-Commerce.
In questo intervento, verranno analizzati proprio i principali accorgimenti che un professionista (un Designer o un Dev in primis) deve prendere in considerazione nel momento in cui va a progettare un layout mobile, dalla giusta scelta tipografica alla dimensione minima di un pulsante per una buona interazione con le dita (cambia da continente a continente), dal più corretto menù di navigazione all’analisi del contesto temporale e fisico in cui si fruirà da mobile, del sito.

Published in: Design

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

  1. 1. Il "Tap" è il nuovo "Click" Siti pensati per il Web Mobile di LUCA DEGLI ESPOSTI WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13 Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 01 / 82
  2. 2. User Experience Comportamento generale dellesperienza utente, linterazione Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 02 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  3. 3. User ExperienceRispetto agli utilizzatori del web attraverso il desktop questa classe di utenti possiede interessi differenti: hanecessità 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 nelmobile web.In secondo luogo si annotano usi del mobile web a scopi meno finalizzati all’efficienza, come la ricerca diintrattenimento 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’accessowireless è 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 divista 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 progettateavendo 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 alpuntatore del mouse. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 03 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  4. 4. Pensa Mobile, non DesktopLe 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 deidispositivi che li dovranno visualizzare, per farlo, non abbiate paura di partire dalla carta, prototipando il layout(http://www.uistencils.com/products/iphone-sticky-pad). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 04 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  5. 5. Ricordati del DesktopOffri unesperienza coerente ed unica con il web desktop: per esempio, se il sito possiede un’area riservata epersonalizzata, l’utente dovrebbe potervi accedere anche se sta utilizzando un telefono cellulare.Limportante è adattare il più possibile le funzionalità del sito desktop ai dispositivi mobile in modo da offrireun’esperienza omogenea tra desktop e device mobili stessi.Lutente deve capire subito che è lo stesso sito che ha visitato 10 giorni fa da desktop o che ha visto stampato in unvolantino pubblicitario per strada. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 05 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  6. 6. Pensa agli utentiComprendi le necessità degli utenti.Devono controllare informazioni in real-time? Intrattenersi con servizi interattivi (mail, social network, svago)?Gestire urgenze legate allattività corrente o al luogo in cui si trovano (come trovare un posto dove dormire omangiare)?Questo ti aiuterà a semplificare la progettazione del layout. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 06 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  7. 7. Touch-friendlyPensa all’uso prevalente di una sola mano.Usa interazioni naturali: rendi tutto naturale, usa le gestures più codificate, immediate e semplici(http://is.gd/AYd0nt).Le interfaccie multi touch sono intuitive.Guarda questo bambino con un iPhone: http://www.youtube.com/watch?v=jVm1qyUuXI0&NR=1 Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 07 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  8. 8. PatternSfrutta pattern che gli utenti già conoscono: UniCredit su iPhone ad esempio ha deciso di sfruttare Google Mapsper il servizio di ricerca filiali e bancomat.La scelta si è rivelata decisamente opportuna: tutti gli utenti, utilizzatori abituali dellApp Google Maps nativa, nonhanno avuto nessuna difficoltà a muoversi e zoomare la mappa per visualizzare i punti UniCredit più vicini ecalcolare il percorso più rapido per raggiungerli. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 08 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  9. 9. DeviceQuando 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 latua attività, per cui è consigliabile inserire una funzionalità che consenta di farsi trovare facilmente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 09 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  10. 10. SemplificaUn sito semplice è anche usabile.Limita la quantità di azioni richieste per la navigazione: il touchscreen, per quanto avanzato, esponemaggiormente al rischio di errori, soprattutto quando gli elementi con i quali si può o si deve interagire sononumerosi; è 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 è dobbligo se hai un sito con più di 5 link di navigazione o deisottomenù. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 10 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  11. 11. CoerenzaFornisci consistenti meccanismi di navigazione, ovvero utilizza le stesse modalità di navigazione in tutte lepagine per aiutare gli utenti a orientarsi e consentire loro di identificare i meccanismi di navigazione più facilmente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 11 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  12. 12. FocusUsa la tecnica del front loading: poni l’informazione più importante ad inizio di titoli, paragrafi, liste e fa che sianofacilmente 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 causadi 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 sitomobile 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 ilcontenuto con informazioni essenziali, senza troppi giri di parole. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 12 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  13. 13. StopI siti mobile devono e sono consultabili in ogni momento, pensa quindi alleventualità che per pochi secondi, ominuti, 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 lutente possa tornare all’esatto punto in cui era senza conseguenze per lanavigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 13 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  14. 14. Layout Struttura ed impaginazione Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 14 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  15. 15. Niente barraQuando 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 degliindirizzi.Un accorgimento da poco, ma che ti fa guadagnare parecchi "pixel" da lasciare al design del tuo sito mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 15 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  16. 16. LinearizzaIl 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’ordinedefinito 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 untablet, 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 colonnasingola è comunque la soluzione ideale in quanto la pagina si adatta facilmente allo schermo e l’utente dovràscorrere solo in verticale. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 16 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  17. 17. Porzioni usabiliSuddividi 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 faremolti tap su diversi link, per raggiungere l’informazione desiderata.Alcuni esperimenti hanno dimostrato che gli utenti preferiscono fare scrolling, piuttosto che dover cliccare sumolti link per raggiungere ciò che desiderano.Una soluzione intelligente è inserire elementi già "collassati" che si espandono al tap dellutente (gli Accordion). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 17 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  18. 18. TitoliFornisci un titolo breve ma descrittivo per ogni pagina (potrebbe venir troncato dal browser o venir utilizzato comeetichetta del bookmark).Utilizza un markup strutturale: indica la struttura logica della pagina (titolo poi sottotitolo poi paragrafo) con dei tagappropriati (H1, H2, P).Ciò consente allutente un accesso più facile e diretto alle sezioni cui è interessato e a te un più facile adattamentodel contenuto quando questo deve essere suddiviso in più pagine. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 18 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  19. 19. No-ScrollUna delle cose più fastidiose delle interfacce classiche point-and-click è utilizzare le scrollbar per scorrere contenutiche 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 linerzia, per renderlo un effetto ancora più reale. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 19 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  20. 20. Touch-friendlyUtilizza elementi touch-friendly, dove possibile, come lo Zoom ed il Drag-n-Drop.Il Drag-n-Drop è lesempio perfetto di uninterazione naturale: simula il "prendi e butta dentro" che facciamo con iprodotti ed il carrello della spessa in un qualsiasi centro commerciale, per questo è molto meglio rispetto ad un tapsu una scritta "Aggiungi". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 20 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  21. 21. No-ZoomEvita per qualsiasi ragione che l’utente debba zoomare durante la navigazione ma se proprio devi, usa lo Zoomcon 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 erimpicciolimento dello schermo) e l’azione necessaria.Non inserire gli elementi grafici "+" e "-" in stile Google Maps su web desktop. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 21 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  22. 22. Portrait o LandscapePartendo dalla regola che il sito mobile dovrebbe funzionare su tutti i dispositivi mobile e con tutti gli orientamenti deldisplay, considera l’importanza di un orientamento piuttosto che laltro, pensa alle esigenze della fruizioneverticale 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 lalinea orizzontale dell’area di visualizzazione, è chiaro però che questo approccio comporta più attenzione (nelmomento del tap) per la navigazione su smartphone rispetto a quella su tablet (dove avrò più spazio). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 22 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  23. 23. MenùInserisci una forma di raggruppamento intelligente attraverso un menù drill-down che ottimizza lo spazio e consistenell’organizzare l’informazione secondo uno schema gerarchico (come titoli o raggruppamenti significativi) e fornirequindi 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 dellapagina (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 allapagina. Posiziona sempre i contenuti più importanti nella parte superiore dell’area di visualizzazione e valuta ilgiusto 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 atutto, nel momento in cui eseguo lo scroll (ad esempio la barra in alto di Facebook). Uno studio, ha dimostrato chequesto tipo di menù rende il 22% più facile e veloce la navigazione (non devo ritornare al top della pagina),facendo guadagnare allutente fino a 36 in una navigazione totale di 5. E naturale che se quei 36 sono cosìsfruttati per la sezione contatti o un acquisto, siamo tutti più contenti. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 23 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  24. 24. Back to TopMetti sempre a fondo pagina il link "Torna su" per tornare all’inizio della sezione/pagina o alla navigazioneprincipale nel caso tu non labbia riproposta anche a fondo pagina e soprattutto se per lutente è lunica cosa chepuò fare (se non ci sono altri link nella pagina, ma solo testo).Se lutente 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 siapresente in fondo alla pagina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 24 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  25. 25. Layout Blog WPLogoMenù di Navigazione principale + Box di ricercaUltimi 5 post . post . post . post . post . postLink SocialContatti / Support Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 25 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  26. 26. Navigazione Links e Menù Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 26 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  27. 27. URI cortiMantieni gli indirizzi delle pagine web del sito mobile il più corto possibile, dal momento che la loro digitazionesu un dispositivo mobile può risultare un’attività difficoltosa: riduci così le possibilità di errore e aumenti lasoddisfazione degli utenti.Se possibile, registra con un nome corto anche il nome di dominio e se proprio devi riadattare un contenuto webgià presente, utilizza un nome corto come alias per la versione mobile.Es: http://2013.bologna.wordcamp.org sarebbe potuto diventare http://bo13.wc.org Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 27 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  28. 28. Pochi “tap”Cerca di bilanciare e valuta la presenza di molti link su una stessa pagina con il fatto di chiedere all’utente di seguiree 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 daituoi utenti tramite Google Analytics e di conseguenza, progetta un layout mobile per cui l’informazione che si ricercapiù 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 ilproprio obiettivo (a maggior ragione se lobiettivo è 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 contoche non era il "tap" giusto. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 28 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  29. 29. Poche voci di MenùIn questo caso, considerando le aree di visualizzazione disponibili per i browser mobile, il consiglio è quello di nonintrodurre più di 5 pulsanti di navigazione per menù: naturalmente questo vincolo potrebbe rivelarsi osticoquando 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 deimenù annidati o sotto forma di liste.Tieni sempre presente che chi naviga tramite smartphone e tablet è spesso un internauta distratto, in movimento econ poco tempo a disposizione, per cui è buona norma mettere a sua disposizione il minor numero di sceltepossibili pilotandone, per quanto possibile, la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 29 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  30. 30. Solo testoE 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 diutilizzare una grande mole di dati.Evita quindi di dover far scaricare una seppur piccola immagine (magari anche solo pochi KB) al tuo utentesolo 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 illato pratico: decine e decine di immagini di pochi KB sotto rete WiFi sono scaricate in un nulla, ma in mobilità, conscarsa copertura, possono anche non venire scaricate o solo parzialmente: quei link non funzioneranno. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 30 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  31. 31. TargetIdentifica chiaramente il target di ciascun link (apre una nuova schermata, apre GoogleMaps, apre AppStore, faaltro?) 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 doverseguire molti link e di conseguenza navigare tra tante pagine.Fai in modo tale che lutente 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 edall’altro, se il link porta ad un file di grandi dimensioni e di formato inatteso rispetto allultima parte dellanavigazione, è bene che tu avverta l’utente dandogli un’idea della dimensione della risorsa.Lascia la scelta libera all’utente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 31 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  32. 32. No-PopOver et similiaEvita di aprire delle finestre di PopOver (o simili) o altre finestre che cambiano la struttura corrente senzaavvertirne prima l’utente.Evita il refresh automatico delle pagine a meno che l’utente ne sia informato e abbia un modo per fermare ilrefresh e non utilizzare markup che applica un redirect automatico delle pagine, altrimenti lutente pensa diessere 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 diconnessione (per esempio effettuando download non richiesti) e ritardano complessivamente l’interazione con il sitomobile.I PopOver sono da sempre fastidiosi: l’utilizzo nei dispositivi mobile è poco confortevole e spesso provocadisfunzioni spiacevoli, come "tap" accidentali sbagliati. Evita luso di Flash, non è supportato dai device Apple.Fai un uso moderato di codice Javascript, utilizzare elementi per creare una grafica dinamica rende il sito mobilevisivamente piacevole, ma questo riduce di gran lunga l’usabilità del sito se gli "effetti" non sono fluidi: è possibileincorrere nel rischio di un "tap" involontario, che rende meno facile la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 32 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  33. 33. Dimentica lhoverSui monitor touch non esiste levento “hover” tramite i CSS ma solo tramite luso di codice JavaScript, quindi inutileimpostarlo sui link dove lutente deve fare solo "tap".E’ fondamentale però far capire all’utente quale oggetto è "a fuoco" dopo lazione del suo "tap", pensa adesempio ad un menù espanso: questo può essere fatto cambiando il colore del carattere, lo sfondo del link/pulsanteoppure aumentando leggermente il padding del link/pulsante.Puoi invece pensare di creare una sorta di effetto “hover” sugli elementi con interazioni "tap and hold" (tienipremuto), 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, allinterno di elementi su cui lutente deve fare per forza un "tap" pervederli. Esempio: per ingrandire il font, deve cliccare sulla lettera "A" che apre un tooltip con allinterno 3 "A" didiverse grandezze. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 33 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  34. 34. RassicuraSemplifica 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 paginaprecedente, 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 senzauscita: tutti noi metteremmo la retromarcia.Se non ci sono vincoli particolari, inserisci le "briciole di pane": lutente già le conosce e capisce subito dove sitrova nel sito. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 34 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  35. 35. Pensa localeAi piedi della pagina, inserisci sempre lindirizzo 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 codicepuoi rendere il numero attivo, in modo tale che dopo il "tap" su di esso il device già ti proponga se chiamare quelnumero. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 35 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  36. 36. Versione completaPoichè, in tutti i casi si tratta di una versione ridotta del sito, è importante fornire sempre un link, ben visibile e infondo 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 potrebberovoler 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 casogli utenti volessero tornare indietro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 36 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  37. 37. Typografia Fonts ed ingombri Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 37 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  38. 38. FontUna 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 aldesktop.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 haidichiarato perché non disponibili, usando quello corrispondente alla famiglia generica.La situazione è leggermente migliore su iOS. Su iOS6 ci sono 260 caratteri disponibili (puoi controllare suhttp://iosfonts.com). Potresti superare queste limitazioni ricorrendo ai Web Fonts, magari sfruttando serviziGoogle Web Fonts, per caricare font personalizzati.Nulla di più sbagliato. Lutente non vuole scaricare 48KB per un font non standard solo per avere il titolo ed isottotitoli 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 KBsolo per un font. Un buon font standard per il web mobile è il Verdana o lHelvetica. Con un pò di codice puoipoi fare in modo di usare font personalizzati solo per il desktop. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 38 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  39. 39. VisibilitàProgetta tutto al fine della visibilità, per essere un sito mobile-friendly a tutti gli effetti la lettura dei contenuti deveessere 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 contrastotra il colore del testo ed il colore di sfondo. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 39 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  40. 40. 5W del giornalismoGli 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 lunghiblocchi di testo: questo mette l’utente in condizione di decidere se approfondire l’informazione presentata oppure diricercare altro altrove. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 40 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  41. 41. Piccoli blocchiDifficilmente lutente usa il web mobile senza uno scopo ben preciso, ma piuttosto per ottenere uninformazioneaggiornata, o interessante, o adatta al contesto in cui si trova.Evita grandi e lunghi blocchi di testo ed usa un linguaggio semplice e chiaro.Un buon riferimento standard può essere un testo di max. 500 caratteri, equamente diviso in 3 paragrafi.Dove possibile, usa gli elenchi puntati. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 41 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  42. 42. Font-sizeIl 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 dallimpostazione del body {font-size:100%} e poi specifica il resto dei testi in "em". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 42 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  43. 43. Kerning & Line-HeightAumenta il Kerning, cioè lo spazio orizzontale tra le parole, in modo da evitare lo spiacevole effetto visivoderivante 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 laffaticamentodegli occhi.Se possibile, a livello di layout, aumenta gli spazi orizzontali tra il blocco di testo ed i bordi della finestra delbrowser mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 43 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  44. 44. H1, H2, PCura al massimo i tuoi contenuti e sii chiaro e diretto, gli utenti mobile hanno un bisogno che deve esseresoddisfatto in brevissimo tempo.Per questo motivo, ancora più che sul web desktop, dedicano poca attenzione ai testi informativi con un effettoancora più negativo se i testi sono inseriti in "alertbox" o PopOver: questo perché tali elementi compaiono spesso insovraimpressione per informare in merito a contenuti aggiuntivi, promozionali o di natura legale.Gli utenti hanno imparato a chiuderli senza leggerli: per questo motivo, utilizza una formattazione corretta (H1,H2, P) per favorire la leggibilità del messaggio che vuoi comunicare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 44 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  45. 45. LinguaggioAbbandona 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 deltuo sito mobile, se lutente è 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 noinoti.Ad esempio, in una Mobile WebApp per un gruppo bancario italiano, di fronte al testo "Banca Via Internet" alcuniutenti 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 "homebanking" del sito mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 45 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  46. 46. Gestione impulsi Input, tastiera, select, slider, form Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 46 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  47. 47. Tastiera, ti odioNon 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’utilizzodella tastiera non è ancora unattività agevole ed immediata.Evita l’immissione di testo libero e se l’utente deve inserire del testo, fornisci se possibile, del testo predefinito daselezionare: usa ad esempio i menù a tendina (select o spinner), pulsanti radio e checkbox su elenchi, utilizza iprecedenti inserimenti come default, rendi possibile la selezione degli elementi della lista direttamente al "tap" e nonattraverso 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 inconsiderazione per organizzare gli elementi in modo tale che non spariscano quelli che servono per la "call toaction". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 47 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  48. 48. AutocompletamentoUna delle cose più belle che puoi fare per lutente è lauto-completamento.Digitare poche lettere e ricevere suggerimenti sulle parole più comuni, cliccando poi su di esse per completarel’inserimento è una delle funzionalità che lutente, su web mobile, ama di più. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 48 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  49. 49. Select & SliderSe 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, comeimpostare lorario della sveglia su iOS). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 49 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  50. 50. Input HTML5Se lutente deve inserire solo dei numeri in un campo di input, tramite HTML5 oggi puoi già far uscire la tastiera conpresenti solo i numeri.Il passaggio tra questi elementi deve avvenire seguendo un ordine logico: posiziona le label (etichette) in manieratale che si dispongano correttamente in relazione allinput.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 lutente nellinput testuale.Ad esempio, con type="url" il dispositivo riconosce il codice e presenta immediatamente all’utente alcuni caratteriutili per scrivere una url (i simboli . la / e .com) che sarebbero altrimenti stati più lunghi e difficili da raggiungere edusare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 50 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  51. 51. Pochi campiSul web si assiste spesso ad una proporzione inversa tra il tasso di conversione e il numero di campi che chiediamoall’utente di compilare.Progettando un layout per una navigazione da web mobile, i "form" diventano ancora più determinanti: pulsantipiccoli, assenza di feedback tattili al "tap", in alcuni casi caratteri alfanumerici da inserire rendono l’input moltocomplesso.Se si trovano in difficoltà o se non sono sicuri di come compilare uno specifico campo, gli utenti abbandonanol’interfaccia. Inserisci moduli brevi con il minor numero possibile di campi, pensa ad inserire solo i campistrettamente necessari (in un form di contatto standard, nome e website dellutente ora non ti servono). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 51 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  52. 52. Rule of thumb Pensa per le dita Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 52 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  53. 53. 44pixelRispetto a quanto siamo abituati a fare con il mouse, il "dispositivo" di input sui device touch, il nostro dito, hauna 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/10mm.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 schermodell’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 vitadell’utente. Nei link ad esempio, aumenta il padding fino a portare il loro ingombro alla dimensione consigliata. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 53 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  54. 54. Fat fingerI 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 pulsantidevono 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 avendoun pollice leggermente più grande della media provano comunque ad interagire con un dispositivo touch) nominatodal 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, sonogli americani, inglesi, messicani, australiani e canadesi. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 54 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  55. 55. Fai spazioLa 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 ilcomando 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 descrivecon una formula matematica la relazione tra il tempo necessario per raggiungere un obiettivo, la suadimensione e la sua distanza dal punto di partenza.Ti invito a leggere larticolo TouchTargetSizes (http://is.gd/W2SCgj) in cui troverai una panoramica esaustivasulle dimensioni minime suggerite dai principali produttori mondiali di smartphone.Evita quindi pulsanti troppo vicini tra loro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 55 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  56. 56. Occhio alle maniNelle interfacce touch, con grande differenza dalle GUI (Graphic User Interface) desktop, il dispositivo di inputcorrisponde 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” esopra lo slider, le etichette di misurazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 56 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  57. 57. Design Grafica, colore, img, icone, responsive Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 57 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  58. 58. Linterazione costaGli 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 volutovisualizzare una lista testuale.Pochissimi degli utenti Android hanno compreso che tale funzionalità si celava dietro l’icona "xy", più chiara edimmediata invece per gli utenti Apple, già abituati alla pulsantiera iTunes per modificare la vista della libreria.Rendi quindi icone, link e titoli parlanti.Aumenta laffordance visiva, fai quindi in modo tale che il processo mentale per capire cosa accadrà o comeinteragire con esso, sia praticamente nullo: dovrebbe essere intuitivo, automatico, come lo è lutilizzo ad esempiodi un cucchiaio.Quante volte ti è capitato di trovarvi davanti ad una maniglia e non capire come la porta vada aperta: tirata, spinta ofatta scorrere? Non è un tuo errore, è scarsa affordance e pessima progettazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 58 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  59. 59. Design minimalistaRendi 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 pochielementi grafici e di quelli che inserisci, chiediti sempre se portano davvero un valore aggiunto allesperienzadellutente.Per la navigazione, se puoi pensa senza icone, piuttosto abituati ad usare particolari gestures. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 59 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  60. 60. ColoreAssicurati che linformazione veicolata dal solo colore sia disponibile anche senza colore (pensa agliipovedenti).Un link, ad esempio, non dovrebbe essere solo differenziato da una scelta cromatica differente, ma anchedalla 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 contrastosufficiente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 60 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  61. 61. ImmaginiQuando usi immagini come sfondo, assicurati che il contenuto risulti completamente leggibile (anche se non èuna buona norma usare immagini di sfondo).Usa solo immagini che risultano con una buona resa (pensa anche agli schermi Retina).Le immagini (ed i video) devono adattarsi al dispositivo e al suo cambio di orientamento (landscape e portrait). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 61 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  62. 62. IconStiamo parlando di mobile web.Capita che lutente trovi interessante il sito e tramite lapposito tasto (su iOS "Aggiungi a Home") decida di salvarlosul 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 dicodice puoi renderla per dispositivi con schermo Retina e non.Se licona non è disponibile, verrà inserita come icona un semplice "print screen" della schermata web mobile.Sicuramente latto di fornire licona, personalizza maggiormente il sito mobile, lo rende più curato edimmediatamente individuabile nellinsieme delle altre icone già presenti sul device. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 62 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  63. 63. Responsive DesignRendi 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 Elevenpreinstallato lo è già, altrimenti ci sono altri temi molto famosi: Responsive, The Bootstrap oppure puoi affidartiad alcuni plugin, alcuni sono WP Touch, MobilePress.Il Responsive Design indica un design, sviluppato con le media queries, facilmente fruibile su tutti i dispositiviportatili attraverso l’utilizzo di layout fluidi e miglioramenti progressivi.Ottimizza le immagini fornendo diversi formati della stessa immagine per le diverse risoluzioni (schermi Retinae non), ottimizza le risorse come gli script e tutti gli altri elementi delle pagine che possano essere più o menonecessari alla navigazione su vari dispositivi, riadatta i contenuti nascondendo elementi presenti sul webdesktop con la proprietà "display:none" e riadatta, come già visto in precedenza, tutti gli elementi dellinterfacciautente (form, menu, slider..) con versioni specifiche e studiate per il dispositivo mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 63 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  64. 64. Icon-fontLe immagini rubano banda e nell’utilizzare le media queries per creare la versione mobile di un sito web, avraispesso 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 dibanda ma non è una tecnica scalabile perchè si tratta comunque sempre di immagini bitmap ed è unprocedimento non così veloce da implementare, poichè trattandosi di un’immagine bitmap, è possibile modificare gliSprites 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 checontenga 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 ladirettiva @font-face. Esistono molte raccolte di icon font già pronte all’uso, sia a pagamento che free. Se non loconosci, Font Squirrel ha un suo generatore, in più puoi fare qualche test usando subito un loro icon font chesi chiama "Modern Pictograms" (http://is.gd/A57B4Z) che contiene un icon font free in formato OTF convertibileda subito in un @font-face Kit pronto alluso. Ma come detto in precedenza, su mobile, evita di usare web font dadecine di KB solo per customizzare il layout con caratteri non standard, piuttosto usa solo un icon font per tuttele icone di cui hai bisogno. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 64 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  65. 65. CSSLe 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 sonoamiche degli spiders dei motori di ricerca. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 65 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  66. 66. Velocità Max 5 Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 66 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  67. 67. Privilegia la velocitàLe connessioni internet mobili sono relativamente più lente delle connessioni standard, è per questo motivo che lamaggior 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 visitarelo 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 abbandonail sito. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 67 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  68. 68. CSSRimuovi dagli elementi, dove possibile, la dichiarazione "position:fixed", questo permette di migliorare lavelocità di scrolling su smartphone e tablet.Fai in modo tale che le dimensioni dei CSS siano piccole, non abbondare nell’utilizzo delle classi, inserisci nelCSS solo gli stili davvero utilizzati, raggruppa gli elementi HTML che condividono lo stesso stile, utilizza unmarkup 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 nellhtml, ma utilizza classi e id. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 68 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  69. 69. ImmaginiSe lutente non ha uno schermo Retina, non fargli comunque scaricare immagini molto grandi, riservando ilcorretto 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 schermoRetina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 69 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  70. 70. ScriptLimita l’uso di script che potrebbero appesantire la fruibilità del sito ed in tutti i casi usa agili e snellemicroarchitetture JavaScript (AJAX ad esempio, con jQuery Mobile) ad esempio per controllare in real-time seun certo form è stato compilato nel modo giusto evitando di inviarlo al server oppure se hai la necessità di operarecon il DOM modificando al volo il contenuto di una pagina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 70 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  71. 71. Richieste HTTPRiduci le richieste HTTP esterne, come i pulsanti social di Facebook o Twitter, che incidono significativamentesull’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 diconcatenare troppi Javascript e CSS: usa un solo file. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 71 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  72. 72. Application CacheUsa tecniche di application cache (ma fai molto attenzione) solo per il contenuto statico, cioè quel contenuto delsito mobile che difficilmente cambierà: immagini, script, stili.Questo rende il sito mobile in parte visualizzabile anche senza una connessione ad internet. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 72 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  73. 73. Error Messaggi e avvisi Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 73 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  74. 74. Gli errori capitanoPresta particolare attenzione ai messaggi derrore e agli avvisi: devono essere informativi ed aiutare l’utente arimediare all’errore e se possibile, fargli capire come non ricrearlo.Offri dove possibile, una "via duscita" per tornare allo stato precedente, come ad esempio un "Torna alla paginaprecedente" 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 haquindi compilato i campi del form. Peccato abbia compilato solo quelli contrassegnati come facoltativi (causale, dataesecuzione, indirizzo…) continuando a lasciare in bianco uno dei pochi campi obbligatori: "Beneficiario". Solo dopoaver rivisto lo stesso messaggio di errore l’ha correttamente compilato. Terminato l’input di tutti i campi, la suasessione, 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 dierrore giusto da implementare era: "è necessario compilare il campo "Beneficiario" per eseguire l’operazione". Enascondere di default tutti i campi facoltativi, rendendoli visibili solo tramite un checkbox. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 74 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  75. 75. Learn & Itera Test, test, test Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 75 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  76. 76. Provalo!Tra i tanti processi che andrebbero attuati prima, durante e dopo lo sviluppo del sito mobile, assicurati che ilcontenuto 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 lanavigazione in diversi posti/soluzioni dove potrebbe usufruirne anche pensando alle distrazioni che causano, aitempi che ha a disposizione, allilluminazione, ai rumori di sottofondo (in autobus, in treno, in mezzo ad unapiazza, in una stanza, mentre si fa la spesa, a casa di amici, in coda dal medico, durante unuscita 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 mentrecammini? Lattenzione sottratta dalla navigazione al compito primario di monitorare lambiente circostante potrebbeanche 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 sitiene annualmente (Mobile HCI, http://is.gd/IwhDvE).Quello che 2 ricercatori volevano capire era se ingrandire automaticamente i bottoni ed il testo dellinterfacciaquando lutente cammina può eliminare la maggior quantità di attenzione richiesta dallo schiacciare i bottoni oleggere testi mentre si è in movimento.Come primo passo, lo studio ha quantificato cosa accade quando gli utenti svolgono questi compiti inmovimento. I risultati sono stati: per la selezione di bottoni, aumento del 31% del tempo richiesto ed aumentodel 23% degli errori commessi mentre per la lettura di brevi testi, aumento del 23% del tempo richiestorispetto al non essere mobile-friendly.Fatto ciò, i ricercatori hanno ripetuto lesperimento provando versioni più grandi dei bottoni e dei testi.Per quanto riguarda i bottoni, un ingrandimento del 40% ha permesso di recuperare quasi completamente laprestazione normale degli utenti. Per i testi, invece le conclusioni sono state negative e non si è ottenuto alcunrecupero di performance poichè ingrandendo i testi si è introdotta lesigenza di scrollare le pagine,complicando la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 76 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  77. 77. TestaPrima 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 apagamento (http://www.browserstack.com) che free.Ma non pensare che un emulatore basti, possibilmente cerca di fare diversi test su dispositivi reali. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 77 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  78. 78. VerificaVerifica il sito mobile con il checker del W3C (http://validator.w3.org/mobile) proprio come faresti con i validatoriCSS ed HTML.Ti offre un valido supporto per verificare il peso del sito e dei singoli file, le richieste HTTP, richieste esterne emolto altro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 78 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  79. 79. AscoltaAscolta, impara ed ottimizza.Fai dei test reali per scoprire quello che gli utenti cercano dal sito mobile e se possibile, partecipa ai test (è moltoimportante 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 è possibileutilizzare una videocamera, fai in modo tale che mentri tu guardi lo schermo/mani del tester, ci sia una figurapredisposta 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 lesperienza utente, effettua le modifiche una alla volta emonitora lottimizzazione con un processo continuo.Cerca poi di capire il comportamento degli utenti per realizzare quali modifiche siano davvero da tenere(diventando quindi definitive) e quali siano invece da eliminare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 79 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  80. 80. Chiudo con... Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 80 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  81. 81. RicordaIl 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 esperienzeinnovative ed appaganti.Oggi è possibile.Prenditi le prossime giornate per guardare veramente cosa fanno le persone e non solo per guardare lespecifiche tecniche dell’ultimo smartphone. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 81 / 82WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  82. 82. Thanks Luca Degli Esposti User Interface Designer Web & Mobile Web: www.Kreolo.com LinkedIn: lucadegliesposti Twitter: @Kreolo Facebook: LucaDegliEspostiBIOUI Designer laureato all’ISIA di Urbino [nel 2007], si occupa ormai da anni di Design per il Web ed ilMobile.Ma si “sporca” volentieri le mani anche con il codice.Dal 2010 lavora come User Interface Designer per GetConnected, AnguriaLab e Mopapp. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 82 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

×