Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User Experience su Mobile con Enrico Maioli.

170 views

Published on

Enrico Maioli ci illustra come l' User Experience su Mobile diventa fondamentale per capire gli utenti sul Web.

Published in: Marketing
  • Be the first to comment

User Experience su Mobile con Enrico Maioli.

  1. 1. Mobile UX USER EXPERIENCE su mobile
  2. 2. Enrico Maioli mi piace: ◉ migliorare le cose ◉ imparare, insegnare, condividere faccio: ◉ Direttore Creativo ◉ UX, Web Marketing Twitter: @enricomaioli Ciao!
  3. 3. Oggi parliamo di: 1. Cosa è UX? 2. Mobile: non solo Smartphone e Tablet 3. Schema UX Design 4. UI: Design dell’Interfaccia 5. UI/UX Tips
  4. 4. Cosa è UX?1
  5. 5. “ Ciò che una persona prova quando utilizza un prodotto, un sistema o un servizio Definizione di UX
  6. 6. Design Define Discover Deploy Develop Processo di lavoro: 5D
  7. 7. Design Define Discover Deploy Develop Fate entrare l’UX/UI designer!
  8. 8. realizzare la Soluzione a un Problema Il ruolo del Designer
  9. 9. “ ma l’interfaccia non è la soluzione.
  10. 10. Le persone usano lo smartphone nei punti vendita e spesso escono senza acquistare Caso Sephora
  11. 11. Place your screenshot here Soluzione: Revisione
  12. 12. Le Deviazioni ◉ non c’è consenso sul problema ◉ per chi lo risolvo? ◉ quali contenuti devono essere inclusi? ◉ con quale priorità?
  13. 13. “ Il risultato non è una soluzione, è solo un bel disegno
  14. 14. UX non è UI! UX UI
  15. 15. ◉ Intervistate le persone ◉ Recensioni ◉ Prodotti acquistati in precedenza Caso Sephora
  16. 16. Place your screenshot here Revisione UX e UI ◉ Recensioni ◉ Storico acquisti
  17. 17. “ Un buon design è quello che corrisponde alle esigenze di un utente così bene, che è un design invisibile
  18. 18. Mobile = Smartphone?2
  19. 19. “ Non ci capita più di “andare online”. Noi ora viviamo online
  20. 20. Mobile: Un termine generico per una vasta gamma di dispositivi senza fili [...] facili da trasportare e da usare in diversi contesti, incluso l’aria aperta [...] World Wide Web Consortium
  21. 21. Smartphone, Tablet Wearables: smart-glasses, smart-watches, fitness bands
  22. 22. Touchscreen desktop e portatili con controlli touch Tastiera tablet con tastiere esterne Confine tra Mobile e Desktop
  23. 23. a che punto siamo? ✓ Cosa è UX? ✓ Mobile: non solo Smartphone e Tablet ◉ Schema UX Design ◉ UI: Design dell’Interfaccia ◉ UI/UX Tips
  24. 24. UX design: schema3
  25. 25. Design Define Discover Deploy Develop UX Designer: coinvolto dall’inizio
  26. 26. “ Principio UX Design User-Centered design
  27. 27. 1. Anticipa le esigenze
  28. 28. 2. Rilevante
  29. 29. 3. Rapido
  30. 30. Schema UX Design 1. analisi delle persone e del contesto 2. l’offerta e il FIT 3. il design: feedback e revisioni
  31. 31. Analisi delle Persone ◉ Dati demografici ◉ Cattura l’anima! ◉ Strumenti per analisi
  32. 32. Dati demografici: fuorvianti Prodotti per bambini La ricerca evidenzia che il 40% di compratori di questi prodotti vivono in case senza bambini (?!). Nonni, cugini, amici colleghi...
  33. 33. Persone: Cattura l’Anima ◉ Attività nel lavoro e sociali ◉ Cose che rendono felice ◉ Cose che spaventano
  34. 34. Persone: Strumenti di analisi Interviste: ◉ Seguite uno schema, ma senza essere rigidi ◉ Ascoltate di più rispetto a quanto parlate!
  35. 35. Persone: Strumenti di analisi Sondaggi
  36. 36. Persone: Strumenti di analisi Domande on site
  37. 37. il contesto: in cucina
  38. 38. il contesto: alla guida
  39. 39. Offerta ◉ Caratteristiche ◉ Risolve problemi ◉ Genera vantaggi
  40. 40. FIT - Corrispondenza ◉
  41. 41. Schema UX Design ✓ analisi delle persone e del contesto ✓ l’offerta e il FIT ◉ il design: feedback e revisioni
  42. 42. “ il design: feedback e revisioni User-Centered Design: quindi chiedete all’utente (e al cliente)
  43. 43. Realtime Board
  44. 44. inVision
  45. 45. Riepilogo: Schema UX Design User-Centered Design: ✓ analisi delle persone e del contesto ✓ l’offerta e il FIT ✓ il design: feedback e revisioni
  46. 46. A che punto siamo? ✓ Cosa è UX? ✓ Mobile: non solo Smartphone e Tablet ✓ Schema UX Design ◉ UI: Design dell’Interfaccia ◉ UI/UX Tips
  47. 47. UI: Design dell’Interfaccia4
  48. 48. Processo di Design UI 1. Sketches 2. Mockup 3. Prototipi 4. Esecutivi
  49. 49. Sketches Sketches
  50. 50. Sketches
  51. 51. Mockup Tools: Sketch
  52. 52. Mockup Tools: Balsamiq
  53. 53. Mockup Tools: Adobe Illustrator
  54. 54. Prototipi
  55. 55. Esecutivi sul CMS
  56. 56. User feedback: Hotjar heatmaps
  57. 57. A che punto siamo? ✓ Cosa è UX ✓ Mobile: non solo Smartphone e Tablet ✓ Schema UX Design ✓ UI: Design dell’Interfaccia ◉ UI/UX Tips
  58. 58. UX & UI Tips5
  59. 59. Accessibilità Mobile ◉ Posizionare i pulsanti dove sono di facile accesso ◉ Layout coerente ◉ Dimensioni degli elementi Touch e spaziatura ○ almeno 9x9 mm ○ circondati da spazi inattivi ◉ Contrasto
  60. 60. Mobile UX/UI: 5 Tips
  61. 61. 1. Mostra subito il valore
  62. 62. 2. Campo di ricerca in evidenza
  63. 63. 3. Ricerche precedenti e acquisti
  64. 64. 4. Segnala gli errori in real time
  65. 65. 5. Icone ed etichette
  66. 66. Recap 1. Cosa è UX? 2. Mobile: non solo Smartphone e Tablet 3. Schema UX Design 4. UI: Design dell’Interfaccia 5. UI/UX Tips
  67. 67. Domande ? ◉ Twitter: @enricomaioli ◉ enrico@intera.it Grazie!
  68. 68. Credits Credits and References: ◉ Mobile principles: Google mobile ◉ Sephora case study from Google Think ◉ Ux is not UI concepts: Elisabeth Hubert, Erik Flowers ◉ Mobile accessibility from W3C ◉ Mobile Best Pratices from W3C ◉ Presentation template by SlidesCarnival ◉ Photographs by Unsplash Tools: ◉ Hotjar ◉ inVision ◉ getfeedback ◉ Realtimeboard ◉ Sketch App ◉ Balsamiq Mockup UX Books: ◉ The Design of Everyday things by Don Norman ◉ Microinteractions by Dan Saffer ◉ Design is a job by Mike Monteiro ◉ Just Enough Research by Erika Hall ◉ Don’t make me think by Steve Krug

×