Luca Degli EspostiUI Designer laureato all’ISIA di Urbino si occupa ormaida anni di Design per il Web ed il Mobile.Ma si “...
Il Tap è il nuovo ClickSiti pensati per il Web Mobile
User ExperienceComportamento generale dellesperienza utente
User ExperienceLuca Degli Esposti                                                   Kreolo.comLutenza mobile possiede inte...
Pensa Mobile, non DesktopLuca Degli Esposti                                                   Kreolo.comEvita una risoluzi...
Ricordati del DesktopLuca Degli Esposti                                                      Kreolo.comOffri unesperienza ...
Pensa agli utentiLuca Degli Esposti                                             Kreolo.comDevono controllare informazioni ...
Touch-friendlyLuca Degli Esposti                                                      Kreolo.comUsa interazioni naturali: ...
PatternLuca Degli Esposti                                                 Kreolo.comUsa pattern che gli utenti già conosco...
DeviceLuca Degli Esposti                                                    Kreolo.comSfrutta le capacità del dispositivo ...
SemplificaLuca Degli Esposti                                              Kreolo.comLimita la quantità di azioni richieste...
CoerenzaLuca Degli Esposti                                                      Kreolo.comUtilizza le stesse modalità di n...
FocusLuca Degli Esposti                                                      Kreolo.comPoni linformazione più importante a...
StopLuca Degli Esposti                                                    Kreolo.comPensa alleventualità che per pochi sec...
LayoutStruttura ed impaginazione                             15/81
Niente barraLuca Degli Esposti                                                 Kreolo.comGuadagna spazio.Poche righe di co...
LinearizzaLuca Degli Esposti                                                      Kreolo.comPrediligi un unica colonna, di...
Porzioni usabiliLuca Degli Esposti                                                      Kreolo.comSuddividi il sito mobile...
TitoliLuca Degli Esposti                                                     Kreolo.comFornisci un title breve ma descritt...
No-ScrollLuca Degli Esposti                                                    Kreolo.comLimita lo scrolling ad una sola d...
Touch-friendlyLuca Degli Esposti                                                   Kreolo.comUtilizza elementi touch-frien...
No-ZoomLuca Degli Esposti                                                   Kreolo.comEvita per qualsiasi ragione che lute...
Portrait o LandscapeLuca Degli Esposti                                                      Kreolo.comConsidera limportanz...
MenùLuca Degli Esposti                                                   Kreolo.comInserisci menù drill-down.Pensa al comp...
Back to TopLuca Degli Esposti                                                     Kreolo.comSe lutente ha fatto diversi sc...
NavigazioneLinks e Menù
URI cortiLuca Degli Esposti                                                        Kreolo.comMantieni gli indirizzi delle ...
Pochi “tap”Luca Degli Esposti                                                    Kreolo.comAnalizza (tramite Google Analyt...
Poche voci di MenùLuca Degli Esposti                                                  Kreolo.comAnalizzando le aree di vis...
Solo testoLuca Degli Esposti                                                     Kreolo.comE plausibile che nel sito mobil...
TargetLuca Degli Esposti                                                     Kreolo.comFai in modo tale che lutente sappia...
No-PopOver et similiaLuca Degli Esposti                                                      Kreolo.comEvita di aprire del...
Dimentica lhoverLuca Degli Esposti                                                   Kreolo.comSui monitor touch non esist...
RassicuraLuca Degli Esposti                                                      Kreolo.comSemplifica la navigazione del s...
Pensa localeLuca Degli Esposti                                                     Kreolo.comAi piedi della pagina inseris...
Versione completaLuca Degli Esposti                                                    Kreolo.comFornisci sempre un link, ...
TypografiaFonts ed ingombri
FontLuca Degli Esposti                                                     Kreolo.comMolto importante in tema di tipografi...
VisibilitàLuca Degli Esposti                                                       Kreolo.comProgetta tutto al fine della ...
5W del giornalismoLuca Degli Esposti                                                  Kreolo.comGli utenti non leggono, ma...
Piccoli blocchiLuca Degli Esposti                                                  Kreolo.comEvita grandi e lunghi blocchi...
Font-sizeLuca Degli Esposti                                                     Kreolo.comIl font-size ottimale è di minim...
Kerning & Line-HeightLuca Degli Esposti                                                      Kreolo.comAumenta il Kerning,...
H1, H2, PLuca Degli Esposti                                                   Kreolo.comGli utenti mobile hanno un bisogno...
LinguaggioLuca Degli Esposti                                                      Kreolo.comParla la “lingua” del tuo uten...
Gestione impulsiInput, tastiera, select, slider, form
Tastiera, ti odioLuca Degli Esposti                                                       Kreolo.comLinput da tastiera su ...
AutocompletamentoLuca Degli Esposti                                                  Kreolo.comUna delle cose più belle ch...
Select & SliderLuca Degli Esposti                                                      Kreolo.comSe le opzioni di inserime...
Input HTML5Luca Degli Esposti                                                      Kreolo.comCon HTML5 sono stati inseriti...
Pochi campiLuca Degli Esposti                                                  Kreolo.comSu un layout mobile, i “form” div...
Rule of thumbPensa per le dita
44pixelLuca Degli Esposti                                                     Kreolo.comSui device touch, il nostro dito h...
Fat fingerLuca Degli Esposti                                                     Kreolo.comI display touch implicano luso ...
Fai spazioLuca Degli Esposti                                                   Kreolo.comImportante non è solo la dimensio...
Occhio alle maniLuca Degli Esposti                                                     Kreolo.comNelle interfacce touch il...
DesignGrafica, colore, img, icone, responsive
Linterazione costaLuca Degli Esposti                                                 Kreolo.comGli utenti non fanno “tap” ...
Design minimalistaLuca Degli Esposti                                                     Kreolo.comRendi il sito mobile un...
ColoreLuca Degli Esposti                                                     Kreolo.comAssicurati che linformazione veicol...
ImmaginiLuca Degli Esposti                                                   Kreolo.comQuando usi immagini di sfondo, assi...
IconLuca Degli Esposti                                                      Kreolo.comCapita che lutente trovi interessant...
Responsive DesignLuca Degli Esposti                                                          Kreolo.comRendi il sito mobil...
Icon-fontLuca Degli Esposti                                                        Kreolo.comAvrai spesso la necessità di ...
CSSLuca Degli Esposti                                                       Kreolo.comLe tabelle sono morte.Sono sintattic...
VelocitàMax 5 secondi
Max 5Luca Degli Esposti                                                   Kreolo.comPiù della metà degli utenti che riscon...
CSSLuca Degli Esposti                                                        Kreolo.comRimuovi dagli elementi la dichiaraz...
ImmaginiLuca Degli Esposti                                                 Kreolo.comSe lutente non ha uno schermo Retina,...
ScriptLuca Degli Esposti                                                       Kreolo.comLimita luso di script che potrebb...
Richieste HTTPLuca Degli Esposti                                                    Kreolo.comRiduci le richieste HTTP est...
Application CacheLuca Degli Esposti                                                      Kreolo.comUsa tecniche di applica...
ErrorMessaggi e avvisi
Gli errori capitanoLuca Degli Esposti                                                    Kreolo.comRendi informativi i mes...
Learn & IteraTest, test, test                   75/81
ProvaloLuca Degli Esposti                                                      Kreolo.comPensa agli spaccati di realtà nei...
TestaLuca Degli Esposti                                                    Kreolo.comPrima di partire con lo sviluppo, tes...
VerificaLuca Degli Esposti                                                       Kreolo.comVerifica il sito mobile con il ...
AscoltaLuca Degli Esposti                                                       Kreolo.comFai dei test reali con utenti re...
Chiudo con...</..                80/81
OsservaLuca Degli Esposti                                                  Kreolo.comIl primo vero sforzo di un progettist...
Upcoming SlideShare
Loading in …5
×

Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma

1,189 views
1,120 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,189
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Best Practices Mobile Web: Il "Tap" è il nuovo "Click" @ Codemotion Roma

  1. 1. Luca Degli EspostiUI Designer laureato all’ISIA di Urbino si occupa ormaida anni di Design per il Web ed il Mobile.Ma si “sporca” volentieri le mani anche con il codice. Web Kreolo.com Twitter @Kreolo
  2. 2. Il Tap è il nuovo ClickSiti pensati per il Web Mobile
  3. 3. User ExperienceComportamento generale dellesperienza utente
  4. 4. User ExperienceLuca Degli Esposti Kreolo.comLutenza mobile possiede interessi differenti.Ha una differente condizione di connettività.Le possibilità si sono aperte ad uninterazione più naturale e semplice.
  5. 5. Pensa Mobile, non DesktopLuca Degli Esposti Kreolo.comEvita una risoluzione Desktop, parti da un layout mobile-friendly.Ripensa la navigazione.Non aver paura di partire dalla prototipazione su carta. 5/81
  6. 6. Ricordati del DesktopLuca Degli Esposti Kreolo.comOffri unesperienza coerente ed unica con il web desktop, unesperienzaomogenea.Adatta il più possibile le funzionalità del sito desktop ai dispositivi mobile.
  7. 7. Pensa agli utentiLuca Degli Esposti Kreolo.comDevono controllare informazioni in real-time? Intrattenersi?Gestire attività legate al luogo in cui si trovano?Comprendi le reali necessità degli utenti.Ti aiuterà a semplificare la progettazione del layout.
  8. 8. Touch-friendlyLuca Degli Esposti Kreolo.comUsa interazioni naturali: rendi tutto intuitivo, naturale, usa le gestures piùcodificate, immediate e semplici (http://is.gd/AYd0nt).Pensa alluso prevalente di una sola mano.Se hai 30Guarda questo bimbo con un iPhone (http://is.gd/ipUs9W).
  9. 9. PatternLuca Degli Esposti Kreolo.comUsa pattern che gli utenti già conoscono (Es: Google Maps per il servizioricerca punti vendita, filiali o altro).
  10. 10. DeviceLuca Degli Esposti Kreolo.comSfrutta le capacità del dispositivo dove possibile (Es: GPS integrato). 10/81
  11. 11. SemplificaLuca Degli Esposti Kreolo.comLimita la quantità di azioni richieste per la navigazione.Il touchscreen per quanto avanzato espone maggiormente al rischio dierrori involontari.Meno tap si traducono quindi in un minor numero di errori.Meno errori, maggior gratificazione.
  12. 12. CoerenzaLuca Degli Esposti Kreolo.comUtilizza le stesse modalità di navigazione in tutte le pagine.Così aiuti gli utenti ad orientarsi e consenti loro di identificare i meccanismidi navigazione più facilmente.
  13. 13. FocusLuca Degli Esposti Kreolo.comPoni linformazione più importante ad inizio di titoli, paragrafi, liste (tecnicadel front loading), non nascondere ciò che gli utenti vogliono.Così è più semplice e veloce capire se largomento è interessante.
  14. 14. StopLuca Degli Esposti Kreolo.comPensa alleventualità che per pochi secondi/minuti le attività in corsopotrebbero essere sospese da fattori più importanti.Fai in modo tale che lutente possa tornare al punto in cui era senzaconseguenze per la navigazione.
  15. 15. LayoutStruttura ed impaginazione 15/81
  16. 16. Niente barraLuca Degli Esposti Kreolo.comGuadagna spazio.Poche righe di codice JS ti permettono, al caricamento della pagina, dinascondere la barra in alto degli indirizzi.
  17. 17. LinearizzaLuca Degli Esposti Kreolo.comPrediligi un unica colonna, disponi i vari elementi uno sotto laltronellordine definito nel markup.Solo quando avrai più spazio (sui tablet) potrai pensare ad un layout a piùcolonne (max 2).
  18. 18. Porzioni usabiliLuca Degli Esposti Kreolo.comSuddividi il sito mobile nel giusto numero di pagine.Se le pagine sono troppo lunghe, ci vorranno molti scroll.Se sono troppo corte, costringi lutente a fare molti tap su diversi link perraggiungere linformazione desiderata.Alcuni esperimenti hanno dimostrato che gli utenti preferiscono farescrolling piuttosto che molti tap.Una soluzione: inserisci elementi già “collassati” che si possono poiespandere (gli Accordion).
  19. 19. TitoliLuca Degli Esposti Kreolo.comFornisci un title breve ma descrittivo per ogni pagina: potrebbe veniretroncato direttamente dal browser o dalletichetta dei bookmarks.Allinterno delle pagine invece, usa un markup strutturale (titolo, sottotitolopoi paragrafo) con i tag appropriati (H1, H2, P).
  20. 20. No-ScrollLuca Degli Esposti Kreolo.comLimita lo scrolling ad una sola direzione, quella verticale.Evita il più possibile uno scrolling secondario, se proprio devi, ponilo afondo pagina. 20/81
  21. 21. Touch-friendlyLuca Degli Esposti Kreolo.comUtilizza elementi touch-friendly (Es: lo Zoom, il Drag-n-Drop).Il Drag-n-Drop è un esempio perfetto di interazione naturale: simula il“prendi e butta dentro” che facciamo con i prodotti ed il carrello dellaspesa in un centro commerciale.
  22. 22. No-ZoomLuca Degli Esposti Kreolo.comEvita per qualsiasi ragione che lutente debba zoomare.Se proprio devi, fai fare lo Zoom con gestures standard (avvicinamento eallontanamento delle dita): è un ottima metafora che riduce il gapconcettuale tra effetto desiderato/azione necessaria (Golfo dellesecuzionedi Norman).Non inserire gli elementi grafici “+” e “–“ in stile Google Maps su webdesktop.
  23. 23. Portrait o LandscapeLuca Degli Esposti Kreolo.comConsidera limportanza e le possibilità di un orientamento piuttosto chelaltro.Pensa alluso, alle esigenze ed ai benefici della fruizione in verticale rispettoa quella in orizzontale dove ho si più spazio ai lati, ma a parità dicontenuto, dovrò fare quindi molti più scroll in verticale?
  24. 24. MenùLuca Degli Esposti Kreolo.comInserisci menù drill-down.Pensa al comportamento degli utenti.Per gli utenti che vogliono passare a nuovi contenuti in modo rapido èpreferibile il menù nella parte inferiore della pagina.Per gli utenti che preferiscono scegliere è invece meglio avere il menù subitoin cima alla pagina.Posiziona i contenuti più importanti sempre nella parte superiore.Una soluzione: posiziona un menù “sticky” (fisso in alto). Uno studio hadimostrato che rende il 22% più facile e veloce la navigazione facendoguadagnare allutente fino a 36 in una navigazione totale di 5.
  25. 25. Back to TopLuca Degli Esposti Kreolo.comSe lutente ha fatto diversi scroll, inserisci sempre a fondo pagina un link“Torna su” per tornare allinizio della sezione/pagina o alla navigazioneprincipale. 25/81
  26. 26. NavigazioneLinks e Menù
  27. 27. URI cortiLuca Degli Esposti Kreolo.comMantieni gli indirizzi delle pagine mobile i più corti possibile, dal momentoche la loro digitazione sui devices risulta unattività difficoltosa: riduci così lepossibilità di errore.Se possibile, registra con un nome corto anche il nome di dominio.
  28. 28. Pochi “tap”Luca Degli Esposti Kreolo.comAnalizza (tramite Google Analytics) le statistiche ed i pattern (fussi) piùusati dagli utenti e progetta quindi un layout in cui linformazione piùricercata sia raggiungibile con il minor numero di pagine.Studi recenti, hanno dimostrato che un utente preferisce non dover seguirepiù di 4 “tap” per raggiungere il proprio obiettivo.
  29. 29. Poche voci di MenùLuca Degli Esposti Kreolo.comAnalizzando le aree di visualizzazione disponibili sui browser mobile, ilconsiglio è di non inserire più di 5 pulsanti di navigazione per menù.E per riadattare un precedente progetto web desktop con decine e decinedi voci di menù?Una soluzione: adotta dei menù annidati o sotto forma di liste e metti adisposizione il minor numero di scelte possibili pilotando, per quantopossibile, la navigazione.
  30. 30. Solo testoLuca Degli Esposti Kreolo.comE plausibile che nel sito mobile ci siano svariati collegamenti a pagine,immagini, file, effetti.Per i link “tappabili” usa quindi del semplice testo, evita di far scaricare unaseppur piccola immagine allutente solo per mostrare un pulsante grafico.Non tanto per il lato estetico quanto per quello pratico: decine di immaginidi pochi KB sotto rete WiFi sono scaricate in un nulla, ma in mobilità conscarsa copertura, possono anche non venire scaricate: quei link nonfunzioneranno. 30/81
  31. 31. TargetLuca Degli Esposti Kreolo.comFai in modo tale che lutente sappia in anticipo dove un link porta inmaniera da permettergli di valutare se è interessato a seguire il link o meno:identifica chiaramente il target di ciascun link ed indica sempre accanto allink il formato del file a cui il link porta.Dai nomi significativi ai link, specifica la destinazione e se questo porta adun file di grandi dimensioni e di formato inatteso rispetto allultima partedella navigazione, avverti lutente dandogli unidea della dimensione dellarisorsa.Lutente non vuole aspettare.A maggior ragione per una cosa che non vuole.
  32. 32. No-PopOver et similiaLuca Degli Esposti Kreolo.comEvita di aprire delle finestre di PopOver (o simili), evita il refresh automaticodelle pagine, non utilizzare markup che applica un redirect automaticodelle pagine ed evita luso di Flash.PopOver, refresh e redirect generano confusione nellutente ed errori con“tap” accidentali sbagliati, aumentano i costi di connessione e ritardanolinterazione con il sito mobile.
  33. 33. Dimentica lhoverLuca Degli Esposti Kreolo.comSui monitor touch non esiste levento “hover” tramite CSS ma solo tramitecodice JS: non impostarlo sui link dove lutente deve fare solo “tap”.Fai però capire allutente quale oggetto è “a fuoco” dopo il “tap”: in unmenù espanso ad esempio puoi cambiare il colore del carattere, lo sfondodel link/pulsante oppure aumentarne il padding.Puoi invece creare una sorta di effetto “hover” su elementi con interazioni“tap and hold” (tieni premuto) allungando leggermente i tempi di reazione.
  34. 34. RassicuraLuca Degli Esposti Kreolo.comSemplifica la navigazione del sito mobile con pulsanti “indietro” e “home”chiari e ben visibili in qualsiasi momento.Se puoi, in ogni pagina, non inserire più di 7 link di navigazione.Se non ci sono vincoli particolari, inserisci le “briciole di pane”: lutente giàle conosce e capisce subito dove si trova nel sito mobile.
  35. 35. Pensa localeLuca Degli Esposti Kreolo.comAi piedi della pagina inserisci sempre lindirizzo della tua attività o unostore locator sulla pagina dei contatti.Dove possibile, utilizza il GPS integrato con mappe e indicazioni stradali.Se fornisci un numero di telefono utilizza la funzionalità “click-to-call”: conuna riga di codice puoi rendere il numero attivo, in modo tale che dopo il“tap” su di esso il device già proponga se chiamare quel numero. 35/81
  36. 36. Versione completaLuca Degli Esposti Kreolo.comFornisci sempre un link, ben visibile e in fondo alla pagina, alla versionecompleta “desktop” del sito, questo per permettere allutente di avere unavisione “dinsieme” adattata alle sue esigenze.Viceversa, nel sito desktop e solo se visto da devices mobile convienesempre mettere un link alla versione mobile, nel caso gli utenti volesserotornare indietro.
  37. 37. TypografiaFonts ed ingombri
  38. 38. FontLuca Degli Esposti Kreolo.comMolto importante in tema di tipografia è la giusta scelta dei fonts.Smartphone e tablet dispongono di un set di caratteri molto limitato, su iOSpuoi controllare su http://iosfonts.comUna soluzione: puoi ricorrere ai Web Fonts, magari sfruttando servizi comeGoogle Web Fonts per caricare font personalizzati, ma non abusarne.Ricorda che siamo in mobilità, la parola dordine è semplificare: non farscaricare quindi centinaia di KB per diversi Web Fonts, limita il numero difonts e fai scaricare solo le versioni che userai effettivamente.
  39. 39. VisibilitàLuca Degli Esposti Kreolo.comProgetta tutto al fine della visibilità, la lettura dei contenuti deve esseresemplificata anche in ambienti poco illuminati, senza affaticare la vista.Anche la luce del sole è uno dei peggiori nemici.Una soluzione: metti in grassetto le parti di testo più importanti, aumenta ilcontrasto tra colore del testo e colore di sfondo.
  40. 40. 5W del giornalismoLuca Degli Esposti Kreolo.comGli utenti non leggono, ma scorrono linformazione: usa quindi uno stilebreve e diretto.Usa le famose 5W del giornalismo, Chi, Cosa, Dove, Quando e Perchè(http://is.gd/pnhgm4) prima di lunghi blocchi di testo: questo mette lutentein condizione di decidere se approfondire o meno linformazionepresentata. 40/81
  41. 41. Piccoli blocchiLuca Degli Esposti Kreolo.comEvita grandi e lunghi blocchi di testo ed usa un linguaggio semplice echiaro.Un buon riferimento standard può essere un testo di max. 500 caratteri,equamente diviso in 3 paragrafi.Dove possibile, usa gli elenchi puntati.
  42. 42. Font-sizeLuca Degli Esposti Kreolo.comIl font-size ottimale è di minimo 14px, una dimensione leggibile ma nontroppo grande.Per fare in modo tale che il font si ridimensioni correttamente, preferiscisempre misure in “em” piuttosto che in “px”.Una soluzione: parti dallimpostazione del body (font-size:100%) e poispecifica il resto dei testi in “em”.
  43. 43. Kerning & Line-HeightLuca Degli Esposti Kreolo.comAumenta il Kerning, cioè lo spazio orizzontale tra le parole, al fine diaumentarne così la leggibilità.Aumenta la line-height tra le singole righe di testo, questo evita lapesantezza del blocco e laffaticamento degli occhi.Se possibile, aumenta gli spazi orizzontali tra il blocco di testo ed i bordidella finestra del browser mobile.
  44. 44. H1, H2, PLuca Degli Esposti Kreolo.comGli utenti mobile hanno un bisogno che deve essere soddisfatto inbrevissimo tempo.Per questo dedicano poca attenzione ai testi informativi.Utilizza una formattazione corretta (H1, H2, P) per favorire la leggibilità ele diverse priorità del messaggio che vuoi comunicare.
  45. 45. LinguaggioLuca Degli Esposti Kreolo.comParla la “lingua” del tuo utente.Non si tratta di fornire la lingua parlata dal tuo utente, si tratta di parlareun linguaggio vicino a quello del tuo utente: non dare per scontati concettisolo a noi noti. 45/81
  46. 46. Gestione impulsiInput, tastiera, select, slider, form
  47. 47. Tastiera, ti odioLuca Degli Esposti Kreolo.comLinput da tastiera su interfacce touch resta il vero problema di questidevices: certa di limitarne il più possibile lattività.Evita limmissione di testo libero e fornisci se possibile del testo predefinitoda selezionare: usa ad esempio i menù a tendina (select), pulsanti radio echeckbox su elenchi.Oltre alla scarsa usabilità, cè un fattore puramente di layout: sui devicetouch la tastiera compare e porta via spazio utile, tienilo sempre inconsiderazione per organizzare gli elementi in modo che non spariscanoquelli utili per la “call to action”.
  48. 48. AutocompletamentoLuca Degli Esposti Kreolo.comUna 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 completare linserimento è una dellefunzionalità che lutente, su web mobile, ama di più.
  49. 49. Select & SliderLuca Degli Esposti Kreolo.comSe le opzioni di inserimento possibili sono limitate (50, 100 al max) è moltopiù veloce usare un controllo di tipo “select” piuttosto che richiedereallutente linput manuale da tastiera.In caso di input numerici (limitati) si può anche utilizzare un controllo di tipo“slider” (Es. come impostare la sveglia su iOS).
  50. 50. Input HTML5Luca Degli Esposti Kreolo.comCon 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 aiutanolutente nellinput testuale (Es. type=”url”).Usa un ordine logico: posiziona le label (etichette) in maniera tale che sidispongano correttamente in relazione allinput. 50/81
  51. 51. Pochi campiLuca Degli Esposti Kreolo.comSu un layout mobile, i “form” diventano ancora più determinanti: pulsantipiccoli, assenza di feedback tattili al “tap”, input complessi.Gli utenti in difficoltà o che non sono sicuri di come compilare un campo,abbandonano linterfaccia.Inserisci moduli brevi con il minor numero possibile di campi, pensa adinserire solo i campi strettamente necessari.
  52. 52. Rule of thumbPensa per le dita
  53. 53. 44pixelLuca Degli Esposti Kreolo.comSui device touch, il nostro dito ha una scarsa precisione.Uno studio del MIT (PDF – http://is.gd/DJwoDH) ha scoperto unagrandezza media per un polpastrello di 8/10 mm.Da qui emerge la dimensione minima consigliata per ogni elementointerattivo che deve essere “tappato”: su uno schermo Retina (Es: iPhone4)è di 60x88 pixel (Apple consiglia 88x88px).Segui la semplice equazione “+ importante = + grande” in modo dafacilitare la vita dellutente. Nei link, aumenta il padding fino a portarelingombro alla dimensione minima consigliata.
  54. 54. Fat fingerLuca Degli Esposti Kreolo.comI display touch implicano luso delle dita, non sai quali dita però.Non pensare solo alla regola 44pixel, ma progetta anche per chi ha ilpollice più grande del tuo, considera il fattore “fat finger” nominato dalNielsen Norman Group (NNG) che consiglia elementi minimi di 1x1 cm.Nellarticolo TouchTargetSizes (http://is.gd/W2SCgj) troverai unapanoramica esaustiva sulle dimensioni minime suggerite dai principaliproduttori mondiali di smartphone.Le popolazioni che da recenti studi hanno dimostrato di avere mani e quindidita più grandi rispetto alla media, sono americani, inglesi, messicani,australiani e canadesi.
  55. 55. Fai spazioLuca Degli Esposti Kreolo.comImportante non è solo la dimensione ma anche la disposizione dei pulsanti.Una spaziatura di 2/3 mm. è lo standard.Leccessiva vicinanza tra diversi “target” aumenta le probabilità di errore,cioè selezionare involontariamente il comando sbagliato, riducendolusabilità del sito mobile.Evita quindi pulsanti troppo vicini tra loro. 55/81
  56. 56. Occhio alle maniLuca Degli Esposti Kreolo.comNelle interfacce touch il dispositivo di input corrisponde al dispositivo dioutput (lo schermo).Pensa quindi alla posizione delle mani, potrebbero coprire elementiimportanti dellinterfaccia proprio quando servono.Posiziona le informazioni in modo che non possano venire coperte dallemani: evita di posizionare le etichette sotto gli elementi di interazione, mamettile sempre sopra.
  57. 57. DesignGrafica, colore, img, icone, responsive
  58. 58. Linterazione costaLuca Degli Esposti Kreolo.comGli utenti non fanno “tap” su ciò che non conoscono.Rendi quindi icone, link e titoli parlanti.Aumenta laffordance visiva, fai quindi in modo tale che il processo mentaleper capire cosa accadrà o come interagire con un dato elemento grafico,sia praticamente nullo: deve essere intuitivo, automatico.
  59. 59. Design minimalistaLuca Degli Esposti Kreolo.comRendi il sito mobile un luogo chiaro, quindi semplifica.Un buon design non deve disturbare la vista né la consultazione, rendiloquindi poco decorato, elimina i fronzoli, inserisci pochi elementi grafici e diquelli che inserisci, chiediti sempre se portano davvero un valore aggiuntoallesperienza dellutente.Se puoi, pensa senza icone, piuttosto abituati ad usare particolari gestures.
  60. 60. ColoreLuca Degli Esposti Kreolo.comAssicurati che linformazione veicolata dal solo colore sia disponibile anchesenza colore (pensa agli ipovedenti).I link ad esempio, non dovrebbero essere differenziati dal resto del testosolo da una scelta cromatica, ma anche dalla sottolineatura.Assicurati che la combinazione tra i colori di sfondo e quelli del testo inprimo piano fornisca un contrasto sufficiente. 60/81
  61. 61. ImmaginiLuca Degli Esposti Kreolo.comQuando usi immagini di sfondo, assicurati che il contenuto risulticompletamente leggibile.Usa solo immagini che risultano con una buona resa (pensa anche aglischermi Retina).
  62. 62. IconLuca Degli Esposti Kreolo.comCapita che lutente trovi interessante il sito mobile e decida di salvarlo sulsuo device (come fosse una App nativa).E importante quindi che tu aggiunga un icona identificativa (web clip) alsito mobile.Latto di fornire licona, personalizza maggiormente il sito mobile, lo rendepiù curato ed immediatamente individuabile nellinsieme delle altre iconegià presenti sul device dellutente.
  63. 63. Responsive DesignLuca Degli Esposti Kreolo.comRendi il sito mobile adattabile (responsive): un solo sito sia per smartphoneche per tablet (che per desktop).Il Responsive Design indica un design, sviluppato con le media queries,facilmente fruibile su tutti i dispositivi portatili attraverso lutilizzo di layoutfuidi e miglioramenti progressivi.Ottimizza le immagini fornendo diversi formati per diverse risoluzioni,ottimizza le risorse come gli script, riadatta i contenuti nascondendoelementi presenti sul web desktop con la proprietà “display:none” eriadatta tutti gli elementi dellinterfaccia utente (form, menu, slider) conversioni specifiche e studiate per i dispositivi mobile.
  64. 64. Icon-fontLuca Degli Esposti Kreolo.comAvrai spesso la necessità di ridimensionare icone ed altri elementi grafici.La tecnica degli Sprites non è una tecnica scalabile, si tratta sempre diimmagini bitmap.La tecnica che consiglio è utilizzare un web font che contenga icone alposto di caratteri tipografici: un Icon Font.E vettoriale, è scalabile a piacere, gode di unottima accessibilità ecompatibilità browser e può essere embeddato in una pagina web mobileusando la direttiva @font-face.Font Squirrel ha un suo generatore di icon font, se vuoi fare qualche testpuoi usare il loro “Modern Pictograms” (http://is.gd/A57B4Z).
  65. 65. CSSLuca Degli Esposti Kreolo.comLe tabelle sono morte.Sono sintatticamente errate, appesantiscono la pagina rendendola più lentada caricare e non sono amiche degli spiders dei motori di ricerca.Evita quindi le tabelle ed usa solo i fogli di stile (CSS) per il layout e lapresentazione. 65/81
  66. 66. VelocitàMax 5 secondi
  67. 67. Max 5Luca Degli Esposti Kreolo.comPiù della metà degli utenti che riscontrano problemi alla prima connessionedifficilmente tornano a visitare lo stesso sito.Il 60% degli utenti vuole la pagina richiesta in 3 secondi, la soglia massimaè di 5 secondi, poi si abbandona il sito.Verifica quindi la velocità generale del sito.
  68. 68. CSSLuca Degli Esposti Kreolo.comRimuovi dagli elementi la dichiarazione “position:fixed”, questo permette dimigliorare la velocità di scrolling sui dispositivi mobile.Fai in modo tale che le dimensioni dei CSS siano piccole: non abbondarenelluso delle classi, inserisci solo gli stili davvero usati, raggruppa glielementi HTML che condividono lo stesso stile e minifica i files.Usa i CSS, non immagini, per gradienti e arrotondamenti di elementi.Usa i CSS, non JS, per animazioni e trasformazioni 3D.Usa .classi e #id, non inserire stili inline nellHTML.
  69. 69. ImmaginiLuca Degli Esposti Kreolo.comSe lutente non ha uno schermo Retina, non fargli comunque scaricareimmagini molto grandi, riservando il ridimensionamento ai CSS o a JS.Imposta con le media queries, le sole immagini grandi da caricare, solo nelcaso il dispositivo sia con schermo Retina.
  70. 70. ScriptLuca Degli Esposti Kreolo.comLimita luso di script che potrebbero appesantire il sito ed in tutti i casi usaagili e snelle micro-architetture JS (AJAX, ad esempio con jQuery Mobile). 70/81
  71. 71. Richieste HTTPLuca Degli Esposti Kreolo.comRiduci le richieste HTTP esterne, come i pulsanti social di Facebook e Twitter.Per rendere fuido il caricamento, riduci anche le richieste HTTP interne,riduci il numero di immagini ed evita di concatenare troppi JS e CSS: usa unsolo file.
  72. 72. Application CacheLuca Degli Esposti Kreolo.comUsa tecniche di application cache (ma fai molta attenzione) solo per ilcontenuto statico, quello che difficilmente cambierà: immagini, script, stili.Questo rende il sito mobile in parte più veloce e visualizzabile anche senzauna connessione attiva.
  73. 73. ErrorMessaggi e avvisi
  74. 74. Gli errori capitanoLuca Degli Esposti Kreolo.comRendi informativi i messaggi derrore e gli avvisi: devono aiutare lutente arimediare allerrore e fargli capire come non ricrearlo.Offri sempre una “via duscita” per tornare allo stato precedente, come iltasto “Indietro” o “Torna alla Home”.
  75. 75. Learn & IteraTest, test, test 75/81
  76. 76. ProvaloLuca Degli Esposti Kreolo.comPensa agli spaccati di realtà nei quali verrà usato il sito mobile.Prova tu stesso a porti un obiettivo che potrebbe avere lutente e simula lanavigazione in diversi contesti, anche pensando alle distrazioni checausano (http://is.gd/y5fuAJ), ai tempi che si hanno a disposizione,allilluminazione e ai rumori di sottofondo.Una ricerca presentata al Mobile HCI (http://is.gd/IwhDvE) ha dimostratoche rispetto allessere fermi, in movimento, per la selezione di bottoni si hail 23% di errori ed un 31% di tempo richiesto in più. Per la lettura di brevitesti, un 23% di tempo richiesto in più.Aumentando del 40% i bottoni si è recuperata la prestazione normale degliutenti, per i testi invece non vi è stato alcun recupero poiché a testi piùgrandi sono corrisposti molti più scroll nella navigazione.
  77. 77. TestaLuca Degli Esposti Kreolo.comPrima di partire con lo sviluppo, testa la navigazione con prototipi cartacei.Una volta entrato nello sviluppo, testa costantemente il sito mobile sugliemulatori (http://www.browserstack.com).Ma non pensare che un emulatore basti, cerca di fare diversi test, sudispositivi reali.
  78. 78. VerificaLuca Degli Esposti Kreolo.comVerifica il sito mobile con il checker W3C (http://validator.w3.org/mobile)proprio come faresti con i validatori CSS ed HTML.Ti permette di verificare il peso generale del sito e dei singoli file, lerichieste HTTP, le richieste esterne e molto altro.
  79. 79. AscoltaLuca Degli Esposti Kreolo.comFai dei test reali con utenti reali e partecipa ai test.Registra il test con una videocamera posizionata su schermo/mani deltester, fai in modo tale di non staccare mai lo sguardo dal tester.Analizza le statistiche ed i pattern (fussi) più usati dai tuoi utenti tramiteGoogle Analytics.Effettua le modifiche che ritieni opportune una alla volta e monitora poilottimizzazione con un processo continuo. Capirai quali modifiche sianodavvero da tenere e quali siano invece da eliminare.
  80. 80. Chiudo con...</.. 80/81
  81. 81. OsservaLuca Degli Esposti Kreolo.comIl primo vero sforzo di un progettista dovrebbe essere losservazione.E importante osservare ciò che ci circonda, capire quali sono i margini perfornire alle persone esperienze innovative ed appaganti.Prenditi le prossime giornate per guardare veramente cosa fanno lepersone e non solo per guardare le specifiche tecniche dellultimo device.

×