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

1. Mobile UX
USER EXPERIENCE
su mobile

2. Enrico Maioli
mi piace:
◉ migliorare le cose
◉ imparare, insegnare, condividere
faccio:
◉ Direttore Creativo
◉ UX, Web Marketing
Twitter: @enricomaioli
Ciao!

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. Cosa è UX?1

5. “
Ciò che una persona prova
quando utilizza un prodotto, un
sistema o un servizio
Definizione di UX

6. Design
Define
Discover
Deploy
Develop
Processo di lavoro: 5D

7. Design
Define
Discover
Deploy
Develop
Fate entrare l’UX/UI designer!

8. realizzare la Soluzione
a un Problema
Il ruolo del Designer

9. “
ma l’interfaccia
non è la
soluzione.

10. Le persone usano
lo smartphone
nei punti vendita
e spesso escono
senza acquistare
Caso Sephora

11. Place your screenshot
here
Soluzione: Revisione

12. Le Deviazioni
◉ non c’è consenso sul problema
◉ per chi lo risolvo?
◉ quali contenuti devono essere inclusi?
◉ con quale priorità?

13. “
Il risultato non è
una soluzione,
è solo un bel
disegno

14. UX non è UI!
UX UI

17. ◉ Intervistate le persone
◉ Recensioni
◉ Prodotti acquistati in
precedenza
Caso Sephora

18. Place your screenshot
here
Revisione UX e UI
◉ Recensioni
◉ Storico acquisti

19. “
Un buon design è quello che
corrisponde alle esigenze di
un utente così bene,
che è un design invisibile

20. Mobile = Smartphone?2

21. “
Non ci capita più di
“andare online”.
Noi ora viviamo online

22. 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

23. Smartphone, Tablet
Wearables:
smart-glasses, smart-watches, fitness bands

24. Touchscreen
desktop e portatili con
controlli touch
Tastiera
tablet con tastiere
esterne
Confine tra Mobile e Desktop

25. a che punto siamo?
✓ Cosa è UX?
✓ Mobile: non solo Smartphone e
Tablet
◉ Schema UX Design
◉ UI: Design dell’Interfaccia
◉ UI/UX Tips

26. UX design: schema3

27. Design
Define
Discover
Deploy
Develop
UX Designer: coinvolto dall’inizio

28. “
Principio UX Design
User-Centered design

29. 1. Anticipa le
esigenze

30. 2. Rilevante

31. 3. Rapido

32. Schema UX Design
1. analisi delle persone e del contesto
2. l’offerta e il FIT
3. il design: feedback e revisioni

33. Analisi delle Persone
◉ Dati demografici
◉ Cattura l’anima!
◉ Strumenti per analisi

34. 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...

35. Persone: Cattura l’Anima
◉ Attività nel lavoro e
sociali
◉ Cose che rendono
felice
◉ Cose che
spaventano

36. Persone: Strumenti di analisi
Interviste:
◉ Seguite uno schema,
ma senza essere rigidi
◉ Ascoltate di più
rispetto a quanto
parlate!

37. Persone: Strumenti di analisi
Sondaggi

38. Persone: Strumenti di analisi
Domande on site

39. il contesto: in cucina

40. il contesto: alla guida

41. Offerta
◉ Caratteristiche
◉ Risolve problemi
◉ Genera vantaggi

42. FIT - Corrispondenza
◉

43. Schema UX Design
✓ analisi delle persone e del contesto
✓ l’offerta e il FIT
◉ il design: feedback e revisioni

44. “
il design: feedback e revisioni
User-Centered Design:
quindi chiedete all’utente
(e al cliente)

45. Realtime Board

46. inVision

47. Riepilogo: Schema UX Design
User-Centered Design:
✓ analisi delle persone e del contesto
✓ l’offerta e il FIT
✓ il design: feedback e revisioni

48. A che punto siamo?
✓ Cosa è UX?
✓ Mobile: non solo Smartphone e
Tablet
✓ Schema UX Design
◉ UI: Design dell’Interfaccia
◉ UI/UX Tips

49. UI: Design dell’Interfaccia4

50. Processo di Design UI
1. Sketches
2. Mockup
3. Prototipi
4. Esecutivi

51. Sketches
Sketches

52. Sketches

53. Mockup Tools: Sketch

54. Mockup Tools: Balsamiq

55. Mockup Tools: Adobe Illustrator

56. Prototipi

57. Esecutivi sul CMS

58. User feedback: Hotjar heatmaps

59. A che punto siamo?
✓ Cosa è UX
✓ Mobile: non solo Smartphone e Tablet
✓ Schema UX Design
✓ UI: Design dell’Interfaccia
◉ UI/UX Tips

60. UX & UI Tips5

61. 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

62. Mobile UX/UI: 5 Tips

63. 1. Mostra subito il valore

64. 2. Campo di ricerca in evidenza

65. 3. Ricerche precedenti e acquisti

66. 4. Segnala gli errori in real time

67. 5. Icone ed etichette

68. Recap
1. Cosa è UX?
2. Mobile: non solo Smartphone e
Tablet
3. Schema UX Design
4. UI: Design dell’Interfaccia
5. UI/UX Tips

69. Domande ?
◉ Twitter: @enricomaioli
◉ enrico@intera.it
Grazie!

70. 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