Successfully reported this slideshow.

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

5

Share

Loading in …3
×
1 of 82
1 of 82

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

5

Share

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.

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.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 dell'esperienza utente, l'interazione Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 02 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  3. 3. User Experience Rispetto agli utilizzatori del web attraverso il desktop questa classe di utenti possiede interessi differenti: ha necessità più immediate e guidate da precisi obiettivi, spesso connesse al contesto in cui il navigatore si trova. Cercare in breve tempo informazioni precise e pertinenti sembra essere quindi il comportamento più diffuso nel mobile web. In secondo luogo si annotano usi del mobile web a scopi meno finalizzati all’efficienza, come la ricerca di intrattenimento per colmare attese e tempi morti (per esempio un trasferimento su un mezzo pubblico). Gli utenti del mobile web si contraddistinguono anche per una differente condizione di connettività: l’accesso wireless è spesso più lento e inaffidabile di una connessione via cavo. Vanno inoltre presi in esame gli aspetti più strettamente ergonomici: è più complesso interagire con un dispositivo mobile sia in fase di input sia dal punto di vista della leggibilità, dal momento che gli schermi sono spesso piccoli e a bassa risoluzione. Le interfacce che incontriamo oggi nel web e nelle applicazioni sono state principalmente ideate e progettate avendo in mente i dispositivi di input che sono stati utilizzati per più di 20 anni sui PC a partire dai primi Apple, cioè tastiera e sopratutto mouse. Con il touch le possibilità si sono aperte ad un’interazione più “naturale” e semplice, ma occhio, basta pensare ad esempio a quanto è poco preciso il “tocco” delle dita su uno schermo rispetto al puntatore del mouse. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 03 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  4. 4. Pensa Mobile, non Desktop Le risoluzioni desktop sono visualizzate in maniera a malapena sufficiente sui tablet a risoluzione massima. Nel migliore dei casi un sito dekstop visualizzato su tablet apparirà poco navigabile, nel peggiore dei casi sembrerà o sarà malfunzionante. È quindi assolutamente da evitare una risoluzione desktop ed è consigliato partire da un layout mobile-friendly, per fare ciò, devi ripensare completamente la struttura e la logica di navigazione del sito web. Se un contenuto web si vede bene su desktop non significa che andrà bene anche su un dispositivo mobile. I contenuti per il Mobile necessitano di essere ripensati e semplificati tenendo ben a mente le caratteristiche dei dispositivi che li dovranno visualizzare, per farlo, non abbiate paura di partire dalla carta, prototipando il layout (http://www.uistencils.com/products/iphone-sticky-pad). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 04 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  5. 5. Ricordati del Desktop Offri un'esperienza coerente ed unica con il web desktop: per esempio, se il sito possiede un’area riservata e personalizzata, l’utente dovrebbe potervi accedere anche se sta utilizzando un telefono cellulare. L'importante è adattare il più possibile le funzionalità del sito desktop ai dispositivi mobile in modo da offrire un’esperienza omogenea tra desktop e device mobili stessi. L'utente deve capire subito che è lo stesso sito che ha visitato 10 giorni fa da desktop o che ha visto stampato in un volantino pubblicitario per strada. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 05 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  6. 6. Pensa agli utenti Comprendi le necessità degli utenti. Devono controllare informazioni in real-time? Intrattenersi con servizi interattivi (mail, social network, svago)? Gestire urgenze legate all'attività corrente o al luogo in cui si trovano (come trovare un posto dove dormire o mangiare)? Questo ti aiuterà a semplificare la progettazione del layout. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 06 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  7. 7. Touch-friendly Pensa all’uso prevalente di una sola mano. Usa interazioni naturali: rendi tutto naturale, usa le gestures più codificate, immediate e semplici (http://is.gd/AYd0nt). Le interfaccie multi touch sono intuitive. Guarda questo bambino con un iPhone: http://www.youtube.com/watch?v=jVm1qyUuXI0&NR=1 Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 07 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  8. 8. Pattern Sfrutta pattern che gli utenti già conoscono: UniCredit su iPhone ad esempio ha deciso di sfruttare Google Maps per il servizio di ricerca filiali e bancomat. La scelta si è rivelata decisamente opportuna: tutti gli utenti, utilizzatori abituali dell'App Google Maps nativa, non hanno avuto nessuna difficoltà a muoversi e zoomare la mappa per visualizzare i punti UniCredit più vicini e calcolare il percorso più rapido per raggiungerli. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 08 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  9. 9. Device Quando possibile, sfrutta le capacità del dispositivo per generare esperienze d’uso avanzate ed uniche. Ad esempio il GPS integrato. Chi naviga su mobile cerca spesso informazioni a livello locale, come per esempio un ristorante, una farmacia o la tua attività, per cui è consigliabile inserire una funzionalità che consenta di farsi trovare facilmente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 09 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  10. 10. Semplifica Un sito semplice è anche usabile. Limita la quantità di azioni richieste per la navigazione: il touchscreen, per quanto avanzato, espone maggiormente al rischio di errori, soprattutto quando gli elementi con i quali si può o si deve interagire sono numerosi; è chiaro quindi che per l’utente la frustrazione è dietro l’angolo. Meno tap si traducono quindi in un minor numero di errori. Meno errori, maggior gratificazione. Un box di ricerca è d'obbligo se hai un sito con più di 5 link di navigazione o dei sottomenù. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 10 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  11. 11. Coerenza Fornisci consistenti meccanismi di navigazione, ovvero utilizza le stesse modalità di navigazione in tutte le pagine per aiutare gli utenti a orientarsi e consentire loro di identificare i meccanismi di navigazione più facilmente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 11 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  12. 12. Focus Usa la tecnica del front loading: poni l’informazione più importante ad inizio di titoli, paragrafi, liste e fa che siano facilmente individuabili. In questo modo per l’utente è più semplice capire rapidamente di quale argomento tratta il contenuto e valutare se è di suo interesse. Gli utenti sono irritati se spendono tempo e costi per navigazioni e connessioni rallentate a causa di testi troppo lunghi, testi poco focalizzati e soprattutto elementi pubblicitari. Non nascondere ciò che vogliono, dagli ciò che vogliono, quando vogliono. Non vogliono scavare a fondo nel sito mobile solo per trovare ciò che stanno cercando: il rischio è che lo abbandonino prima. Limita il contenuto a quanto l’utente ha richiesto: il limitato spazio dello schermo rende indispensabile avere il contenuto con informazioni essenziali, senza troppi giri di parole. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 12 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  13. 13. Stop I siti mobile devono e sono consultabili in ogni momento, pensa quindi all'eventualità che per pochi secondi, o minuti, le attività in corso potrebbero essere sospese da altri fattori più importanti. Scatta il semaforo, devo salire su un autobus, sono in una zona senza copertura. Pensa facendo in modo tale che l'utente possa tornare all’esatto punto in cui era senza conseguenze per la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 13 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  14. 14. Layout Struttura ed impaginazione Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 14 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  15. 15. Niente barra Quando si lavora per i dispositivi mobili, il problema principale è rappresentato dalla poca disponibilità di spazio. Guadagnatelo! Poche righe di codice JavaScript ti permettono, al caricamento della pagina, di nascondere la barra in alto degli indirizzi. Un accorgimento da poco, ma che ti fa guadagnare parecchi "pixel" da lasciare al design del tuo sito mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 15 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  16. 16. Linearizza Il poco spazio che si ha disposizione va sfruttato per presentare nel modo migliore i contenuti che ritieni essenziali. La parola d’ordine è "semplifica". Tradotto in codice per il layout significa che sui dispositivi mobile la modalità ottimale è quella della linearizzazione degli elementi che compongono la pagina. Nel layout avremo così un unica colonna, i vari elementi si disporranno semplicemente uno sotto l’altro nell’ordine definito nel markup. Solo quando avremo spazio sufficiente (a partire dai 768px dei tablet) svilupperemo il layout su eventuali più colonne, ma max 2, proprio perchè tenendo conto delle ridotte dimensioni dello schermo di un cellulare o di un tablet, un normale sito a più colonne non è semplice da leggere. Nonostante gli utenti abbiano la possibilità di ingrandire e di spostarsi nella pagine, utilizzare un layout a colonna singola è comunque la soluzione ideale in quanto la pagina si adatta facilmente allo schermo e l’utente dovrà scorrere solo in verticale. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 16 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  17. 17. Porzioni usabili Suddividi il sito mobile nel giusto numero di pagine/sottopagine e la singola pagina in porzioni usabili, ma limitate. Se le pagine sono troppo lunghe, ci vorranno molti scroll. Viceversa se sono troppo corte devi splittare il contenuto in numerose pagine e costringi così l’utente a fare molti tap su diversi link, per raggiungere l’informazione desiderata. Alcuni esperimenti hanno dimostrato che gli utenti preferiscono fare scrolling, piuttosto che dover cliccare su molti link per raggiungere ciò che desiderano. Una soluzione intelligente è inserire elementi già "collassati" che si espandono al tap dell'utente (gli Accordion). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 17 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  18. 18. Titoli Fornisci un titolo breve ma descrittivo per ogni pagina (potrebbe venir troncato dal browser o venir utilizzato come etichetta del bookmark). Utilizza un markup strutturale: indica la struttura logica della pagina (titolo poi sottotitolo poi paragrafo) con dei tag appropriati (H1, H2, P). Ciò consente all'utente un accesso più facile e diretto alle sezioni cui è interessato e a te un più facile adattamento del contenuto quando questo deve essere suddiviso in più pagine. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 18 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  19. 19. No-Scroll Una delle cose più fastidiose delle interfacce classiche point-and-click è utilizzare le scrollbar per scorrere contenuti che sono troppo grandi per la finestra utilizzata. Limita lo scrolling ad una sola direzione, quella verticale. Evita il più possibile uno scrolling secondario, se proprio devi, ponilo a fondo pagina. Quando Apple ha disegnato in nuovo iOS, ha inserito lo scorrimento del dito in verticale (non ha inserito le scrollbar) ed ha aggiunto l'inerzia, per renderlo un effetto ancora più reale. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 19 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  20. 20. Touch-friendly Utilizza elementi touch-friendly, dove possibile, come lo Zoom ed il Drag-n-Drop. Il Drag-n-Drop è l'esempio perfetto di un'interazione naturale: simula il "prendi e butta dentro" che facciamo con i prodotti ed il carrello della spessa in un qualsiasi centro commerciale, per questo è molto meglio rispetto ad un tap su una scritta "Aggiungi". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 20 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  21. 21. No-Zoom Evita per qualsiasi ragione che l’utente debba zoomare durante la navigazione ma se proprio devi, usa lo Zoom con i controlli nativi, restringendo quello che Norman chiama il "golfo dell’esecuzione". I controlli per lo zoom sono stati ormai sostituti da una gesture standard (avvicinamento/allontanamento delle dita), che rappresenta un’ottima metafora che riduce il gap concettuale tra effetto desiderato (ingradimento e rimpicciolimento dello schermo) e l’azione necessaria. Non inserire gli elementi grafici "+" e "-" in stile Google Maps su web desktop. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 21 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  22. 22. Portrait o Landscape Partendo dalla regola che il sito mobile dovrebbe funzionare su tutti i dispositivi mobile e con tutti gli orientamenti del display, considera l’importanza di un orientamento piuttosto che l'altro, pensa alle esigenze della fruizione verticale in luogo di quella orizzontale, dove ho sì più spazio ai lati ma dovrò fare molti più scroll in verticale. Una soluzione è utilizzare ad esempio dei menù basati su un insieme di classici "pulsantoni" sviluppati su tutta la linea orizzontale dell’area di visualizzazione, è chiaro però che questo approccio comporta più attenzione (nel momento del tap) per la navigazione su smartphone rispetto a quella su tablet (dove avrò più spazio). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 22 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  23. 23. Menù Inserisci una forma di raggruppamento intelligente attraverso un menù drill-down che ottimizza lo spazio e consiste nell’organizzare l’informazione secondo uno schema gerarchico (come titoli o raggruppamenti significativi) e fornire quindi un menu di accesso veloce alle singole sezioni del sito mobile. Quando si progetta il posizionamento del menù, è fondamentale pensare al comportamento dei propri visitatori. Per gli utenti che vogliono passare a nuovi contenuti in modo rapido è preferibile il menù nella parte inferiore della pagina (leggo un contenuto, scorro verso il basso e passo al successivo). Per chi invece, preferisce scegliere (tra gruppi, categorie, links di pagine) è meglio avere il menù subito in cima alla pagina. Posiziona sempre i contenuti più importanti nella parte superiore dell’area di visualizzazione e valuta il giusto ordine di presentazione degli elementi successivi tenendo sempre conto dello scrolling su diversi display. Una soluzione può anche essere quella di posizionare un menù "sticky", cioè fisso in alto nella pagina e sopra a tutto, nel momento in cui eseguo lo scroll (ad esempio la barra in alto di Facebook). Uno studio, ha dimostrato che questo tipo di menù rende il 22% più facile e veloce la navigazione (non devo ritornare al top della pagina), facendo guadagnare all'utente fino a 36'' in una navigazione totale di 5'. E' naturale che se quei 36'' sono così sfruttati per la sezione contatti o un acquisto, siamo tutti più contenti. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 23 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  24. 24. Back to Top Metti sempre a fondo pagina il link "Torna su" per tornare all’inizio della sezione/pagina o alla navigazione principale nel caso tu non l'abbia riproposta anche a fondo pagina e soprattutto se per l'utente è l'unica cosa che può fare (se non ci sono altri link nella pagina, ma solo testo). Se l'utente non ha fatto nessuno scroll, non mettere il link "Torna su". E' la regola del link alla Home se sono già nella Home: non serve. Viceversa, metti un link in alto nella pagina che porti al menù di navigazione secondaria nel caso questo sia presente in fondo alla pagina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 24 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  25. 25. Layout Blog WP Logo Menù di Navigazione principale + Box di ricerca Ultimi 5 post . post . post . post . post . post Link Social Contatti / Support Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 25 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  26. 26. Navigazione Links e Menù Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 26 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  27. 27. URI corti Mantieni gli indirizzi delle pagine web del sito mobile il più corto possibile, dal momento che la loro digitazione su un dispositivo mobile può risultare un’attività difficoltosa: riduci così le possibilità di errore e aumenti la soddisfazione degli utenti. Se possibile, registra con un nome corto anche il nome di dominio e se proprio devi riadattare un contenuto web già presente, utilizza un nome corto come alias per la versione mobile. Es: http://2013.bologna.wordcamp.org sarebbe potuto diventare http://bo13.wc.org Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 27 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  28. 28. Pochi “tap” Cerca di bilanciare e valuta la presenza di molti link su una stessa pagina con il fatto di chiedere all’utente di seguire e valutare troppi link per raggiungere quello che sta cercando. Se stai rivisitando un sito già esistente su web desktop, analizza le statistiche ed i pattern (flussi) più usati dai tuoi utenti tramite Google Analytics e di conseguenza, progetta un layout mobile per cui l’informazione che si ricerca più frequentemente sia raggiungibile attraversando il minor numero possibile di pagine anche se questo può significare l’allontanamento di altre informazioni dalla pagina iniziale. L’utente deve essere in grado di raggiungere le informazioni o le funzionalità che sta cercando senza impazzire. Studi recenti, hanno dimostrato che un utente preferisce non dover eseguire più di 4 "tap" per raggiungere il proprio obiettivo (a maggior ragione se l'obiettivo è comprare qualcosa). Ogni passaggio ulteriore determina solo un aumento della complessità e influisce negativamente sull’esperienza. Pensa a quante volte non ti era chiaro dove portasse quel link, hai fatto "tap", hai aspettato, poi ti sei reso conto che non era il "tap" giusto. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 28 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  29. 29. Poche voci di Menù In questo caso, considerando le aree di visualizzazione disponibili per i browser mobile, il consiglio è quello di non introdurre più di 5 pulsanti di navigazione per menù: naturalmente questo vincolo potrebbe rivelarsi ostico quando un sito per la navigazione mobile non è che un adattamento ad un precedente progetto web desktop. In questo caso una possibile soluzione che si vede spesso nei siti mobile potrebbe essere quella di adottare dei menù annidati o sotto forma di liste. Tieni sempre presente che chi naviga tramite smartphone e tablet è spesso un internauta distratto, in movimento e con poco tempo a disposizione, per cui è buona norma mettere a sua disposizione il minor numero di scelte possibili pilotandone, per quanto possibile, la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 29 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  30. 30. Solo testo E' plausibile che nel sito mobile ci siano svariati collegamenti, legati a pagine, immagini, file, effetti ed altro. Per i link usa quindi del semplice testo. Durante una navigazione mobile le risorse sono molto importanti e spesso la connessione non ci permette di utilizzare una grande mole di dati. Evita quindi di dover far scaricare una seppur piccola immagine (magari anche solo pochi KB) al tuo utente solo per mostrare un pulsante grafico e prediligi una scritta di testo. Non tanto per il lato estetico, che ovviamente va invece ben curato con le opportune formattazioni CSS quanto per il lato pratico: decine e decine di immagini di pochi KB sotto rete WiFi sono scaricate in un nulla, ma in mobilità, con scarsa copertura, possono anche non venire scaricate o solo parzialmente: quei link non funzioneranno. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 30 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  31. 31. Target Identifica chiaramente il target di ciascun link (apre una nuova schermata, apre GoogleMaps, apre AppStore, fa altro?) ed indica sempre accanto al link, il formato del file a cui il link porta (è un PDF? apre un video?). Gli utenti sui device mobile possono avere problemi di lunghi tempi di attesa e costi eccessivi dovuti al fatto di dover seguire molti link e di conseguenza navigare tra tante pagine. Fai in modo tale che l'utente sappia in anticipo dove un link porta in modo tale da poter valutare se è interessato a seguire il link o meno. Di conseguenza, da un lato è importante dare nomi significativi ai link e specificare la destinazione del link e dall’altro, se il link porta ad un file di grandi dimensioni e di formato inatteso rispetto all'ultima parte della navigazione, è bene che tu avverta l’utente dandogli un’idea della dimensione della risorsa. Lascia la scelta libera all’utente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 31 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  32. 32. No-PopOver et similia Evita di aprire delle finestre di PopOver (o simili) o altre finestre che cambiano la struttura corrente senza avvertirne prima l’utente. Evita il refresh automatico delle pagine a meno che l’utente ne sia informato e abbia un modo per fermare il refresh e non utilizzare markup che applica un redirect automatico delle pagine, altrimenti l'utente pensa di essere su una pagina (con un url specifico) ma in realtà è altrove. PopOver, refresh e redirect sono attività che possono generare confusione nell’utente, aumentano i costi di connessione (per esempio effettuando download non richiesti) e ritardano complessivamente l’interazione con il sito mobile. I PopOver sono da sempre fastidiosi: l’utilizzo nei dispositivi mobile è poco confortevole e spesso provoca disfunzioni spiacevoli, come "tap" accidentali sbagliati. Evita l'uso di Flash, non è supportato dai device Apple. Fai un uso moderato di codice Javascript, utilizzare elementi per creare una grafica dinamica rende il sito mobile visivamente piacevole, ma questo riduce di gran lunga l’usabilità del sito se gli "effetti" non sono fluidi: è possibile incorrere nel rischio di un "tap" involontario, che rende meno facile la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 32 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  33. 33. Dimentica l'hover Sui monitor touch non esiste l'evento “hover” tramite i CSS ma solo tramite l'uso di codice JavaScript, quindi inutile impostarlo sui link dove l'utente deve fare solo "tap". E’ fondamentale però far capire all’utente quale oggetto è "a fuoco" dopo l'azione del suo "tap", pensa ad esempio ad un menù espanso: questo può essere fatto cambiando il colore del carattere, lo sfondo del link/pulsante oppure aumentando leggermente il padding del link/pulsante. Puoi invece pensare di creare una sorta di effetto “hover” sugli elementi con interazioni "tap and hold" (tieni premuto), allungando leggermente i tempi di reazione. Non potendo posizionare il mouse su ogni elemento, ricordati sempre di rendere immediatamente evidente cosa è interattivo nell’interfaccia e cosa no: deve essere subito chiaro su cosa si può fare "tap", cosa si può manipolare, trascinare e cosa no. Evita di inserire dei controlli di un elemento, all'interno di elementi su cui l'utente deve fare per forza un "tap" per vederli. Esempio: per ingrandire il font, deve cliccare sulla lettera "A" che apre un tooltip con all'interno 3 "A" di diverse grandezze. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 33 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  34. 34. Rassicura Semplifica la navigazione del sito mobile con pulsanti "Indietro" e "Home" chiari e ben visibili. Se puoi, non inserire più di 7 link per pagina di navigazione. Assicurati che almeno le funzionalità di base, come per esempio il pulsante “Indietro” per tornare alla pagina precedente, siano facilmente localizzabili in qualsiasi momento. Una buona regola è inserire questo pulsante, in alto, sulla sinistra. Concettualmente è proprio da dove sono arrivato, come se fossimo in auto in una strada a senso unico e senza uscita: tutti noi metteremmo la retromarcia. Se non ci sono vincoli particolari, inserisci le "briciole di pane": l'utente già le conosce e capisce subito dove si trova nel sito. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 34 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  35. 35. Pensa locale Ai piedi della pagina, inserisci sempre l'indirizzo della tua attività o uno store locator sulla pagina dei contatti. Includi mappe ed indicazioni stradali. Dove possibile, utilizza il GPS per personalizzare la mappa e consentire ai tuoi clienti di verificare la disponibilità nei negozi vicini. Se nella pagina contatti fornisci un numero di telefono utilizza la funzionalità "click-to-call": con una riga di codice puoi rendere il numero attivo, in modo tale che dopo il "tap" su di esso il device già ti proponga se chiamare quel numero. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 35 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  36. 36. Versione completa Poichè, in tutti i casi si tratta di una versione ridotta del sito, è importante fornire sempre un link, ben visibile e in fondo alla pagina, alla versione completa, "desktop" del vostro sito. Serve per offrire agli utenti la versione del sito più adatta alle loro esigenze, questo perché alcuni utenti potrebbero voler vedere una visione "d’insieme" del sito. Viceversa, nel sito desktop (solo se visto da mobile) conviene sempre mettere un link alla versione mobile, nel caso gli utenti volessero tornare indietro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 36 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  37. 37. Typografia Fonts ed ingombri Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 37 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  38. 38. Font Una questione cruciale in tema di tipografia riguarda la giusta scelta dei font. Anche gli smartphone e i tablet più moderni e sofisticati dispongono di un set di caratteri molto limitato rispetto al desktop. Molti dispongono solo di pochissimi font di sistema, come certi dispositivi Android ad esempio. Significa che quando specifichi un insieme di font per le pagine, un dispositivo Android ignorerà tutti i font che hai dichiarato perché non disponibili, usando quello corrispondente alla famiglia generica. La situazione è leggermente migliore su iOS. Su iOS6 ci sono 260 caratteri disponibili (puoi controllare su http://iosfonts.com). Potresti superare queste limitazioni ricorrendo ai Web Fonts, magari sfruttando servizi Google Web Fonts, per caricare font personalizzati. Nulla di più sbagliato. L'utente non vuole scaricare 48KB per un font non standard solo per avere il titolo ed i sottotitoli delle pagine più belli, vuole semplicemente che sia leggibile. Siamo in mobilità, la parola d’ordine è semplificare, la banda è una risorsa preziosa, inutile sprecarne facendo scaricare all’utente qualche decina di KB solo per un font. Un buon font standard per il web mobile è il Verdana o l'Helvetica. Con un pò di codice puoi poi fare in modo di usare font personalizzati solo per il desktop. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 38 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  39. 39. Visibilità Progetta tutto al fine della visibilità, per essere un sito mobile-friendly a tutti gli effetti la lettura dei contenuti deve essere semplificata anche in ambienti poco illuminati, senza affaticare la vista. La luce del sole è uno dei peggiori nemici dato che spesso rende il testo illeggibile a display. Un rimedio efficace è quello di mettere in grassetto le parti di testo più importanti e di aumentare il contrasto tra il colore del testo ed il colore di sfondo. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 39 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  40. 40. 5W del giornalismo Gli utenti non leggono, ma scorrono l’informazione, quindi usa uno stile breve e diretto, di stampo giornalistico. Usa le famose 5W del giornalismo, Chi, Cosa, Dove, Quando e Perché (http://is.gd/pnhgm4) prima di lunghi blocchi di testo: questo mette l’utente in condizione di decidere se approfondire l’informazione presentata oppure di ricercare altro altrove. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 40 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  41. 41. Piccoli blocchi Difficilmente l'utente usa il web mobile senza uno scopo ben preciso, ma piuttosto per ottenere un'informazione aggiornata, o interessante, o adatta al contesto in cui si trova. Evita grandi e lunghi blocchi di testo ed usa un linguaggio semplice e chiaro. Un buon riferimento standard può essere un testo di max. 500 caratteri, equamente diviso in 3 paragrafi. Dove possibile, usa gli elenchi puntati. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 41 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  42. 42. Font-size Il font size ottimale è di minimo 14px, una dimensione leggibile ma non troppo grande. In tutti i casi, per fare in modo tale che il font si ridimensioni correttamente, preferisci sempre le misure in "em" piuttosto che in "px". Parti dall'impostazione del body {font-size:100%} e poi specifica il resto dei testi in "em". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 42 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  43. 43. Kerning & Line-Height Aumenta il Kerning, cioè lo spazio orizzontale tra le parole, in modo da evitare lo spiacevole effetto visivo derivante dall’assenza di spazi al fine di aumentarne così la leggibilità. Aumenta anche la line-height tra le singole righe di testo, questo evita la pesantezza del blocco e l'affaticamento degli occhi. Se possibile, a livello di layout, aumenta gli spazi orizzontali tra il blocco di testo ed i bordi della finestra del browser mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 43 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  44. 44. H1, H2, P Cura al massimo i tuoi contenuti e sii chiaro e diretto, gli utenti mobile hanno un bisogno che deve essere soddisfatto in brevissimo tempo. Per questo motivo, ancora più che sul web desktop, dedicano poca attenzione ai testi informativi con un effetto ancora più negativo se i testi sono inseriti in "alertbox" o PopOver: questo perché tali elementi compaiono spesso in sovraimpressione per informare in merito a contenuti aggiuntivi, promozionali o di natura legale. Gli utenti hanno imparato a chiuderli senza leggerli: per questo motivo, utilizza una formattazione corretta (H1, H2, P) per favorire la leggibilità del messaggio che vuoi comunicare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 44 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  45. 45. Linguaggio Abbandona i termini gergali e parla la "lingua" del tuo utente in base al contenuto del tuo sito. Non si tratta di fornire la lingua parlata dal tuo utente, di base questo dovrebbe essere il comportamento corretto del tuo sito mobile, se l'utente è inglese, offrigli il sito in lingua inglese. Qui si tratta di parlare in un linguaggio vicino a quello del tuo utente, mai dare per scontati concetti solo a noi noti. Ad esempio, in una Mobile WebApp per un gruppo bancario italiano, di fronte al testo "Banca Via Internet" alcuni utenti diedero le più svariate interpretazioni (seppur ridendo, un utente pensò: "banca, in via Internet"). Solo gli utenti che controllano spesso online il loro conto sanno che tale etichetta fa riferimento alla sezione "home banking" del sito mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 45 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  46. 46. Gestione impulsi Input, tastiera, select, slider, form Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 46 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  47. 47. Tastiera, ti odio Non c'è buon design che tenga: l’input da tastiera su interfacce touch resta il vero problema di questi device. Sul web mobile devi cercare di limitare il più possibile l’attività di inserimento testuale da parte dell’utente: l’utilizzo della tastiera non è ancora un'attività agevole ed immediata. Evita l’immissione di testo libero e se l’utente deve inserire del testo, fornisci se possibile, del testo predefinito da selezionare: usa ad esempio i menù a tendina (select o spinner), pulsanti radio e checkbox su elenchi, utilizza i precedenti inserimenti come default, rendi possibile la selezione degli elementi della lista direttamente al "tap" e non attraverso i tasti numerici della tastiera. Oltre alla scarsa usabilità, c'è un fattore puramente di layout: sui device touch non c'è una tastiera fisica quindi al "tap" su un campo di input, la tastiera compare e porta via spazio utile al sito mobile, tienilo sempre in considerazione per organizzare gli elementi in modo tale che non spariscano quelli che servono per la "call to action". Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 47 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  48. 48. Autocompletamento Una delle cose più belle che puoi fare per l'utente è l'auto-completamento. Digitare poche lettere e ricevere suggerimenti sulle parole più comuni, cliccando poi su di esse per completare l’inserimento è una delle funzionalità che l'utente, su web mobile, ama di più. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 48 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  49. 49. Select & Slider Se le opzioni di inserimento possibili sono limitate (50, 100 al max) è molto più veloce usare un controllo di tipo "select" piuttosto che richiedere l’input manuale da tastiera. In caso di input numerici (limitati) si può anche utilizzare un controllo di tipo "slider" (ad esempio, come impostare l'orario della sveglia su iOS). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 49 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  50. 50. Input HTML5 Se l'utente deve inserire solo dei numeri in un campo di input, tramite HTML5 oggi puoi già far uscire la tastiera con presenti solo i numeri. Il passaggio tra questi elementi deve avvenire seguendo un ordine logico: posiziona le label (etichette) in maniera tale che si dispongano correttamente in relazione all'input. Con HTML5 sono stati inseriti molti altri type di input: email, date, tel, number, search, url. (http://is.gd/TeYRee) Questi "suggerimenti" dati al device, aumentano la semantica ed aiutano l'utente nell'input testuale. Ad esempio, con type="url" il dispositivo riconosce il codice e presenta immediatamente all’utente alcuni caratteri utili per scrivere una url (i simboli . la / e .com) che sarebbero altrimenti stati più lunghi e difficili da raggiungere ed usare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 50 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  51. 51. Pochi campi Sul web si assiste spesso ad una proporzione inversa tra il tasso di conversione e il numero di campi che chiediamo all’utente di compilare. Progettando un layout per una navigazione da web mobile, i "form" diventano ancora più determinanti: pulsanti piccoli, assenza di feedback tattili al "tap", in alcuni casi caratteri alfanumerici da inserire rendono l’input molto complesso. Se si trovano in difficoltà o se non sono sicuri di come compilare uno specifico campo, gli utenti abbandonano l’interfaccia. Inserisci moduli brevi con il minor numero possibile di campi, pensa ad inserire solo i campi strettamente necessari (in un form di contatto standard, nome e website dell'utente ora non ti servono). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 51 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  52. 52. Rule of thumb Pensa per le dita Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 52 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  53. 53. 44pixel Rispetto a quanto siamo abituati a fare con il mouse, il "dispositivo" di input sui device touch, il nostro dito, ha una scarsa precisione. Le dimensioni dei touch-target devono essere sufficientemente grandi per permettere un’interazione agevole. Uno studio del MIT (PDF - http://is.gd/DJwoDH) ha scoperto una grandezza media per un polpastrello di 8/10 mm. Da qui emerge la dimensione minima consigliata per ogni elemento interattivo che deve essere "tappato" (freccia, link, bottone, pulsante, logo, icona, ecc..). La dimensione in pixel corrispondente dipende dalla risoluzione dello schermo che stiamo considerando: lo schermo dell’iPhone4 (già Retina) impone, ad esempio, una dimensione minima di 60×88 pixel. Il design dovrebbe seguire la semplice equazione "+ importante = + grande" in modo da facilitare la vita dell’utente. Nei link ad esempio, aumenta il padding fino a portare il loro ingombro alla dimensione consigliata. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 53 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  54. 54. Fat finger I display touch implicano l’utilizzo delle dita, non sai quali dita però. Non pensare solo alla regola dei 44pixel, ma disegna anche per chi ha il pollice più grande del tuo: i pulsanti devono essere grandi e ben spaziati l’uno dall’altro. Considera quindi anche il fattore "fat finger" ("dito grasso", sì, ci sono utenti con mani molto grandi che pur avendo un pollice leggermente più grande della media provano comunque ad interagire con un dispositivo touch) nominato dal Nielsen Norman Group (NNG: fondato da Jakob Nielsen e Donald Norman nel 1998). Apple ad esempio raccomanda nelle sue linee guida di usare sempre elementi attivi grandi almeno 44×44pixel (88x88pixel su display Retina), il NNG parla invece di 1x1 cm. Le popolazioni che da recenti studi hanno dimostrato di avere mani e quindi dita più grandi rispetto alla media, sono gli americani, inglesi, messicani, australiani e canadesi. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 54 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  55. 55. Fai spazio La dimensione non è però l’unica variabile: importantissima è anche la disposizione dei pulsanti, poiché l’eccessiva vicinanza tra diversi "target" aumenta le probabilità di errore, cioè selezionare involontariamente il comando sbagliato, riducendo l’usabilità del sito mobile. Una spaziatura di 2/3 mm. è lo standard. Tutte queste considerazioni sono relative in qualche modo alla "Legge di Fitt" (http://is.gd/0UFapN) che descrive con una formula matematica la relazione tra il tempo necessario per raggiungere un obiettivo, la sua dimensione e la sua distanza dal punto di partenza. Ti invito a leggere l'articolo TouchTargetSizes (http://is.gd/W2SCgj) in cui troverai una panoramica esaustiva sulle dimensioni minime suggerite dai principali produttori mondiali di smartphone. Evita quindi pulsanti troppo vicini tra loro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 55 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  56. 56. Occhio alle mani Nelle interfacce touch, con grande differenza dalle GUI (Graphic User Interface) desktop, il dispositivo di input corrisponde al dispositivo di output (lo schermo). Occhio quindi: le mani possono infatti coprire elementi importanti dell’interfaccia, proprio quando servono. Posiziona le informazioni in modo che non possano venire coperte dalle mani quando sono necessarie. Evita di posizionare le etichette sotto gli elementi di interazione, ma mettile sempre sopra. Ad esempio, in uno slider orizzontale che devo “tirare” con il dito, avrò il mio slider con il mio “oggetto trascinabile” e sopra lo slider, le etichette di misurazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 56 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  57. 57. Design Grafica, colore, img, icone, responsive Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 57 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  58. 58. L'interazione costa Gli utenti non fanno "tap" su ciò che non conoscono. Durante alcuni test, per conoscere l’indirizzo esatto dei punti visualizzati sulla mappa più di un utente avrebbe voluto visualizzare una lista testuale. Pochissimi degli utenti Android hanno compreso che tale funzionalità si celava dietro l’icona "xy", più chiara ed immediata invece per gli utenti Apple, già abituati alla pulsantiera iTunes per modificare la vista della libreria. Rendi quindi icone, link e titoli parlanti. Aumenta l'affordance visiva, fai quindi in modo tale che il processo mentale per capire cosa accadrà o come interagire con esso, sia praticamente nullo: dovrebbe essere intuitivo, automatico, come lo è l'utilizzo ad esempio di un cucchiaio. Quante volte ti è capitato di trovarvi davanti ad una maniglia e non capire come la porta vada aperta: tirata, spinta o fatta scorrere? Non è un tuo errore, è scarsa affordance e pessima progettazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 58 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  59. 59. Design minimalista Rendi il sito mobile un luogo chiaro, quindi semplifica. Un buon design si deve poter vedere su tutti i dispositivi e deve essere utile alla consultazione dei contenuti. Non deve disturbare la vista né la consultazione, rendilo quindi poco decorato, elimina i fronzoli, inserisci pochi elementi grafici e di quelli che inserisci, chiediti sempre se portano davvero un valore aggiunto all'esperienza dell'utente. Per la navigazione, se puoi pensa senza icone, piuttosto abituati ad usare particolari gestures. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 59 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  60. 60. Colore Assicurati che l'informazione veicolata dal solo colore sia disponibile anche senza colore (pensa agli ipovedenti). Un link, ad esempio, non dovrebbe essere solo differenziato da una scelta cromatica differente, ma anche dalla sottolineatura, perché alcuni utenti potrebbero non accorgersene o altri, dover zoomare per capire il perchè quella parola è diversa dalle altre. Assicurati che la combinazione tra i colori di sfondo e quello del testo in primo piano fornisca un contrasto sufficiente. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 60 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  61. 61. Immagini Quando usi immagini come sfondo, assicurati che il contenuto risulti completamente leggibile (anche se non è una buona norma usare immagini di sfondo). Usa solo immagini che risultano con una buona resa (pensa anche agli schermi Retina). Le immagini (ed i video) devono adattarsi al dispositivo e al suo cambio di orientamento (landscape e portrait). Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 61 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  62. 62. Icon Stiamo parlando di mobile web. Capita che l'utente trovi interessante il sito e tramite l'apposito tasto (su iOS "Aggiungi a Home") decida di salvarlo sul suo device come fosse una App nativa. E' importante quindi che tu aggiunga un icona identificativa (web clip) al tuo sito mobile. Con poche righe di codice puoi renderla per dispositivi con schermo Retina e non. Se l'icona non è disponibile, verrà inserita come icona un semplice "print screen" della schermata web mobile. Sicuramente l'atto di fornire l'icona, personalizza maggiormente il sito mobile, lo rende più curato ed immediatamente individuabile nell'insieme delle altre icone già presenti sul device. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 62 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  63. 63. Responsive Design Rendi il sito mobile adattabile, un solo sito sia per smartphone che per tablet (che per desktop). Un sito mobile-friendly deve essere Responsive, ad esempio se si parla di WordPress, il tema Twenty Eleven preinstallato lo è già, altrimenti ci sono altri temi molto famosi: Responsive, The Bootstrap oppure puoi affidarti ad alcuni plugin, alcuni sono WP Touch, MobilePress. Il Responsive Design indica un design, sviluppato con le media queries, facilmente fruibile su tutti i dispositivi portatili attraverso l’utilizzo di layout fluidi e miglioramenti progressivi. Ottimizza le immagini fornendo diversi formati della stessa immagine per le diverse risoluzioni (schermi Retina e non), ottimizza le risorse come gli script e tutti gli altri elementi delle pagine che possano essere più o meno necessari alla navigazione su vari dispositivi, riadatta i contenuti nascondendo elementi presenti sul web desktop con la proprietà "display:none" e riadatta, come già visto in precedenza, tutti gli elementi dell'interfaccia utente (form, menu, slider..) con versioni specifiche e studiate per il dispositivo mobile. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 63 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  64. 64. Icon-font Le immagini rubano banda e nell’utilizzare le media queries per creare la versione mobile di un sito web, avrai spesso la necessità di ridimensionare icone ed altri piccoli elementi grafici allo scalare del layout (schermi Retina). La tecnica degli Sprites (tramite una sola immagine ed i CSS) ti risolve in parte il problema legato al consumo di banda ma non è una tecnica scalabile perchè si tratta comunque sempre di immagini bitmap ed è un procedimento non così veloce da implementare, poichè trattandosi di un’immagine bitmap, è possibile modificare gli Sprites solo rieditando prima, con un programma di grafica, il file che contiene tutte le immagini. La tecnica che ti consiglio di usare e che si sta diffondendo a macchia d’olio, è utilizzare un web font che contenga icone al posto di caratteri tipografici: un Icon Font. Un icon font è vettoriale, è scalabile a piacere, gode di un’ottima accessibilità e compatibilità browser e può essere embeddato in una pagina web mobile usando la direttiva @font-face. Esistono molte raccolte di icon font già pronte all’uso, sia a pagamento che free. Se non lo conosci, Font Squirrel ha un suo generatore, in più puoi fare qualche test usando subito un loro icon font che si chiama "Modern Pictograms" (http://is.gd/A57B4Z) che contiene un icon font free in formato OTF convertibile da subito in un @font-face Kit pronto all'uso. Ma come detto in precedenza, su mobile, evita di usare web font da decine di KB solo per customizzare il layout con caratteri non standard, piuttosto usa solo un icon font per tutte le icone di cui hai bisogno. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 64 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  65. 65. CSS Le tabelle sono morte nel 2005 (o sarebbero dovuto esserlo). Evita le tabelle, usa solo i fogli di stile per il layout e la presentazione. Le tabelle sono sintatticamente errate, appesantiscono la pagina rendendola più lenta da caricare e non sono amiche degli spiders dei motori di ricerca. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 65 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  66. 66. Velocità Max 5'' Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 66 / 82 WORDCAMP 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 la maggior parte dei siti web richiedono più tempo per il caricamento sui dispositivi mobili. Più della metà degli utenti che riscontrano problemi alla prima connessione difficilmente tornano a visitare lo stesso sito. Un sito lento uccide la user experience, quindi verifica la velocità generale del sito. Il 60% degli utenti vuole la pagina richiesta in 3 secondi, la soglia massima è di 5 secondi, poi si abbandona il sito. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 67 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  68. 68. CSS Rimuovi dagli elementi, dove possibile, la dichiarazione "position:fixed", questo permette di migliorare la velocità di scrolling su smartphone e tablet. Fai in modo tale che le dimensioni dei CSS siano piccole, non abbondare nell’utilizzo delle classi, inserisci nel CSS solo gli stili davvero utilizzati, raggruppa gli elementi HTML che condividono lo stesso stile, utilizza un markup pulito ed efficiente: non lasciare linee e spazi vuoti. Usa i CSS, non immagini, per i gradienti e gli arrotondamenti degli angoli degli elementi. Usa i CSS, non Javascript, per le animazioni e le trasformazioni 3D. Non inserire stili inline nell'html, ma utilizza classi e id. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 68 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  69. 69. Immagini Se l'utente non ha uno schermo Retina, non fargli comunque scaricare immagini molto grandi, riservando il corretto ridimensionamento ai CSS o peggio ancora a Javascript. Imposta con le media queries, le sole immagini grandi da caricare, solo nel caso il dispositivo sia con schermo Retina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 69 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  70. 70. Script Limita l’uso di script che potrebbero appesantire la fruibilità del sito ed in tutti i casi usa agili e snelle microarchitetture JavaScript (AJAX ad esempio, con jQuery Mobile) ad esempio per controllare in real-time se un certo form è stato compilato nel modo giusto evitando di inviarlo al server oppure se hai la necessità di operare con il DOM modificando al volo il contenuto di una pagina. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 70 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  71. 71. Richieste HTTP Riduci le richieste HTTP esterne, come i pulsanti social di Facebook o Twitter, che incidono significativamente sull’esperienza di navigazione in termini di caricamento delle pagine. Per rendere fluido il caricamento, riduci anche le richieste HTTP interne, riduci il numero di immagini ed evita di concatenare troppi Javascript e CSS: usa un solo file. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 71 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  72. 72. Application Cache Usa tecniche di application cache (ma fai molto attenzione) solo per il contenuto statico, cioè quel contenuto del sito mobile che difficilmente cambierà: immagini, script, stili. Questo rende il sito mobile in parte visualizzabile anche senza una connessione ad internet. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 72 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  73. 73. Error Messaggi e avvisi Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 73 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  74. 74. Gli errori capitano Presta particolare attenzione ai messaggi d'errore e agli avvisi: devono essere informativi ed aiutare l’utente a rimediare all’errore e se possibile, fargli capire come non ricrearlo. Offri dove possibile, una "via d'uscita" per tornare allo stato precedente, come ad esempio un "Torna alla pagina precedente" o "Torna alla Home". Durante il test di un sito mobile già esistente, abbiamo chiesto agli utenti di provare ad effettuare un bonifico. Un utente ha immesso l’IBAN del destinatario ma ha lasciato vuoto il campo "Beneficiario". Di fronte al messaggio di errore "è necessario inserire i campi del beneficiario per eseguire l’operazione", l’utente ha quindi compilato i campi del form. Peccato abbia compilato solo quelli contrassegnati come facoltativi (causale, data esecuzione, indirizzo…) continuando a lasciare in bianco uno dei pochi campi obbligatori: "Beneficiario". Solo dopo aver rivisto lo stesso messaggio di errore l’ha correttamente compilato. Terminato l’input di tutti i campi, la sua sessione, durata oltre 7 minuti, era scaduta. Ha dovuto rifare tutta la procedura. Evita questa esperienza. Nel caso, come quello del cliente, si siano voluti mantenere tutti i campi (anche quelli facoltativi) il messaggio di errore giusto da implementare era: "è necessario compilare il campo "Beneficiario" per eseguire l’operazione". E nascondere di default tutti i campi facoltativi, rendendoli visibili solo tramite un checkbox. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 74 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  75. 75. Learn & Itera Test, test, test Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 75 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  76. 76. Provalo! Tra i tanti processi che andrebbero attuati prima, durante e dopo lo sviluppo del sito mobile, assicurati che il contenuto sia adatto all’utilizzo in un contesto mobile (fuori di casa o dall’ufficio, in ambienti affollati e rumorosi, mentre si sta camminando). Prova tu stesso a porti un obiettivo che potrebbe avere un tuo utente e simula la navigazione in diversi posti/soluzioni dove potrebbe usufruirne anche pensando alle distrazioni che causano, ai tempi che ha a disposizione, all'illuminazione, ai rumori di sottofondo (in autobus, in treno, in mezzo ad una piazza, in una stanza, mentre si fa la spesa, a casa di amici, in coda dal medico, durante un'uscita in compagnia). Pensa agli spaccati di realtà nei quali userà il sito mobile e minimizza la sua attenzione: c'è troppo testo? C'è bisogno di una navigazione più semplice? Qualcosa non si legge bene con il telefono che sobbalza mentre cammini? L'attenzione sottratta dalla navigazione al compito primario di monitorare l'ambiente circostante potrebbe anche causargli problemi di sicurezza (http://is.gd/y5fuAJ). A titolo di esempio, riassumo una ricerca presentata a Lisbona alcuni anni fa ad una conferenza mobile che si tiene annualmente (Mobile HCI, http://is.gd/IwhDvE). Quello che 2 ricercatori volevano capire era se ingrandire automaticamente i bottoni ed il testo dell'interfaccia quando l'utente cammina può eliminare la maggior quantità di attenzione richiesta dallo schiacciare i bottoni o leggere testi mentre si è in movimento. Come primo passo, lo studio ha quantificato cosa accade quando gli utenti svolgono questi compiti in movimento. I risultati sono stati: per la selezione di bottoni, aumento del 31% del tempo richiesto ed aumento del 23% degli errori commessi mentre per la lettura di brevi testi, aumento del 23% del tempo richiesto rispetto al non essere mobile-friendly. Fatto ciò, i ricercatori hanno ripetuto l'esperimento provando versioni più grandi dei bottoni e dei testi. Per quanto riguarda i bottoni, un ingrandimento del 40% ha permesso di recuperare quasi completamente la prestazione normale degli utenti. Per i testi, invece le conclusioni sono state negative e non si è ottenuto alcun recupero di performance poichè ingrandendo i testi si è introdotta l'esigenza di scrollare le pagine, complicando la navigazione. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 76 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  77. 77. Testa Prima di partire con lo sviluppo, testa la navigazione con prototipi cartacei. Una volta entrato nello sviluppo, testa il sito mobile sugli emulatori, online ne puoi trovare di validi, molti sia a pagamento (http://www.browserstack.com) che free. Ma non pensare che un emulatore basti, possibilmente cerca di fare diversi test su dispositivi reali. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 77 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  78. 78. Verifica Verifica il sito mobile con il checker del W3C (http://validator.w3.org/mobile) proprio come faresti con i validatori CSS ed HTML. Ti offre un valido supporto per verificare il peso del sito e dei singoli file, le richieste HTTP, richieste esterne e molto altro. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 78 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  79. 79. Ascolta Ascolta, impara ed ottimizza. Fai dei test reali per scoprire quello che gli utenti cercano dal sito mobile e se possibile, partecipa ai test (è molto importante che tu capisca ad esempio se su un certo elemento, la maggior parte degli utenti fa "tap" o cerca di fare "swipe" e se si, perchè). Se possibile, registra il test con una videocamera posizionata su schermo/mani del tester, se non è possibile utilizzare una videocamera, fai in modo tale che mentri tu guardi lo schermo/mani del tester, ci sia una figura predisposta a riportare tutto ciò che tu gli riferisci, non devi mai staccare lo sguardo dal tester. Analizza le statistiche ed i pattern (flussi) più usati dai tuoi utenti tramite Google Analytics. Una volta capito dove intervenire per migliorare l'esperienza utente, effettua le modifiche una alla volta e monitora l'ottimizzazione con un processo continuo. Cerca poi di capire il comportamento degli utenti per realizzare quali modifiche siano davvero da tenere (diventando quindi definitive) e quali siano invece da eliminare. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 79 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  80. 80. Chiudo con... Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 80 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  81. 81. Ricorda Il primo vero sforzo di un progettista dovrebbe essere l’osservazione. Mai prima d’ora, così tanti contesti d’uso sono stati sotto gli occhi di tutti. E’ importante osservare ciò che ci circonda, capire quali sono i margini per fornire alle persone esperienze innovative ed appaganti. Oggi è possibile. Prenditi le prossime giornate per guardare veramente cosa fanno le persone e non solo per guardare le specifiche tecniche dell’ultimo smartphone. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 81 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13
  82. 82. Thanks Luca Degli Esposti User Interface Designer Web & Mobile Web: www.Kreolo.com LinkedIn: lucadegliesposti Twitter: @Kreolo Facebook: LucaDegliEsposti BIO UI Designer laureato all’ISIA di Urbino [nel 2007], si occupa ormai da anni di Design per il Web ed il Mobile. Ma si “sporca” volentieri le mani anche con il codice. Dal 2010 lavora come User Interface Designer per GetConnected, AnguriaLab e Mopapp. Luca Degli Esposti Mobile vCard: http://goo.gl/Mazwx 82 / 82 WORDCAMP BOLOGNA - 9 Febbraio 2013 @WordcampBologna # WPCAMPBO13

×