Un talk che racconta alcune delle best practice da applicare quando si progetta una mobile app.

1. Lo Zen e l’arte dello
UX Design Mobile
@qba75
Francesco Ronchi

2. What we do (in short)
Design & Development of
high-quality and effective
digital solutions
@qba75

3. What we do (more in detail)
• Quality Software Design & Development
• Mobile Apps, Web solutions, Ecommerce
• User Interface (UI) and Interaction Design (IxD)
• User Experience (UX), Service Design
• Digital Strategies
@qba75

4. Perché questo talk
• Voglio sfruttare in modo efficace il canale mobile
• Serve un progetto => design!
• Ci concentriamo sulle App (ma i princìpi sono generali)
• Consigli e best practices sulla UX Design
• “sensibilizzazione” sull’importanza del progetto UX.
@qba75

5. Produzione di una App (e non solo…)
@qba75

6. Produzione di una App (e non solo…)
@qba75

7. Produzione di una App (e non solo…)
il successo di un progetto si gioca qui!
@qba75

8. Cos’è (e cosa non è) lo UX Design
• User Experience (X) ≠ User Interface (UI)
(ma la include)
• Uno UX designer può anche non essere un grafico
creativo
• “UX is the intangible design of a strategy that brings us
to a solution.”
@qba75

9. Le principali componenti
• UI (grafica accattivante, informazioni ben presentate)
• Engineering (sviluppo affidabile, responsivo)
• IxD (interazione semplice, essenziale, pochi click)
@qba75

10. What is UX Design?
)
http://www.slideshare.net/Hienadz.Drahun/50-visual-definitions-of-user-experience@qba75

11. L’Utente nello UX Design
• User Centric
l’utente è al centro della progettazione, e spesso viene
direttamente coinvolto (interview, focus group, test)
• Identifica bene il tuo target: studialo, interrogalo,
scopri le sue esigenze => definisci le “Personas”
• Make you Happy :-)
una buona UX è quella che rende
felice l’utente (e quindi il cliente,
il committente e il fornitore!)
@qba75

12. Gli step a partire dall’idea
• Studio target mercato (e della concorrenza)
• Scelta delle piattaforme mobile
• User stories (as a [user role], I can [story] so that [benefit])
• Design (wireframe, storyboard)
• Prototipo
• Testing (con gli utenti)
• Layout visual design (moodboard, mockups)
• Ottimizzazione
@qba75

13. Mobile UX Design
• Mobile = Apps & Mobile Web
• L’ interfaccia di una App non segue gli stessi pattern
del Web (Mobile ≠ Web!)
• Regole UX diverse, schermi, limitazioni, opportunità,
testing e ragionamenti differenti.
• “Don’t shrink, Rethink!” <=> “Mobile First”
@qba75

14. (contro) Esempi
• Troppe informazioni
• Pulsanti troppo piccoli
• Problemi di leggibilità
• Poco appeal grafico
• Comportamento inaspettato
• Assenza di feedback
@qba75

15. (contro) Esempi
• Troppe informazioni
• Pulsanti troppo piccoli
• Problemi di leggibilità
• Poco appeal grafico
• Comportamento inaspettato
• Assenza di feedback
@qba75

16. @qba75

17. Lo Zen?
• "lo zen non è una forma di esaltazione ma è la
concentrazione nelle nostre attività quotidiane"
Shunryu Suzuki
@qba75

18. (alcuni) princìpi Zen
• Fai una cosa per volta
• Lavora con concentrazione
• Porta ciò che fai a compimento
• Fai di meno
• Crea dei rituali
• Stabilisci dei momenti precisi per ogni attività
• Rifletti su ciò che è davvero necessario
• Vivi in semplicità
@qba75

19. Consigli
… liberamente ispirati

20. Fai una cosa per volta
@qba75

21. Fai una cosa per volta
• Less is More! (…Apple insegna)
• Evitate la troppa attenzione nei dettagli
=> low-fi wireframing
• Evitate di fare troppe cose in una app
=> MVP, pensare per step successivi
@qba75

22. Lavora con concentrazione
@qba75

23. Lavora con concentrazione
• Pensa la grandezza e posizione degli elementi in
base anche al target ed in che condizioni si utilizza
l’app
@qba75

24. Lavora con concentrazione
@qba75

25. Lavora con concentrazione
@qba75

26. Lavora con concentrazione
• “The UX of UP: Urinals and Usability”
http://www.propelics.com/ux-of-up-urinals-and-usability/
@qba75

27. Lavora con concentrazione
• Glanceability
“glanceability refers to how
quickly and easily the visual
design conveys information”.
• rendete più visibili le
informazioni importanti
@qba75

28. Fai di meno
@qba75

29. Fai di meno
• Pensaci prima di inventare interfacce troppo
“originali”:
• possono disorientare l’utente
• possono incrementare molto la complessità
(= tempi e costi) di sviluppo
• preferire i pattern standard (anche se ci sono
“controesempi” che hanno fatto scuola, es. Flipboard)
@qba75

30. Fai di meno
• keep it simple - per l’utente e per lo sviluppatore!
@qba75

31. Fai di meno
• Non reinventare la ruota!
• Google, Apple e Microsoft hanno investito milioni di
$ per creare delle UX/UI consistenti e forniscono
documentazione e linee guida
• Gli utenti si sentiranno “a casa”
@qba75

32. Fai di meno
iOS Android Windows Phone
UX ed UI vanno declinate sulle rispettive piattaforme
@qba75

33. Fai di meno
• Es. Material Design di Google
https://design.google.com/
@qba75

34. Rifletti su ciò che è davvero necessario
@qba75

35. Rifletti su ciò che è davvero necessario
• Riduci al minimo i passaggi da far fare all’ utente per
raggiungere un determinato scopo (story)
• Regola 80/20
80% delle persone usa il 20% delle funzioni di un app
• focus sugli elementi importanti e dai meno spazio a
quelli meno utilizzate per aumentare l’usabilità della
tua app
@qba75

36. Rifletti su ciò che è davvero necessario
Solar vs. Weather
@qba75

37. Rifletti su ciò che è davvero necessario
Clear vs Reminders
@qba75

38. Rifletti su ciò che è davvero necessario
• Minimalismo o interfaccia ? La virtù è nel mezzo
• Giusto equilibrio tra UX e contenuti
• Cerca di utilizzare al lo spazio a disposizione senza
frammentare le informazioni da dare all’utente
@qba75

39. Rifletti su ciò che è davvero necessario
• Non abusare delle
gesture “nascoste”,
fornire eventualmente
delle alternative
• Sapiente uso delle animazioni (vedi ad es. Material
Design): non fini a se stesse utili a rendere fluido
l’utilizzo dell’interfaccia, evidenziando e suggerendo
interazioni.
@qba75

40. Rifletti su ciò che è davvero necessario
• Non abusare delle icone (se non di uso comune)

41. Rifletti su ciò che è davvero necessario
• Consistenza!
• Se l’app si comporta in modo consistente (con se
stessa e con il sistema operativo) l’utente saprà
sempre esattamente cosa aspettarsi basandosi sulle
precedenti esperienze
@qba75

42. Rifletti su ciò che è davvero necessario
• es: “Add”: forma, colore, testo e comportamento consistente
@qba75

43. Rifletti su ciò che è davvero necessario
https://twitter.com/startupvitamins/status/494471640496209920
@qba75

44. Porta ciò che fai a compimento
@qba75

45. Porta ciò che fai a compimento
• La % di persone che scaricano un’app e la usano una
sola volta è altissima (1 su 5!)
• Costruisci un tour la prima volta che l’utente apre l’app
per non perderlo e diminuire cosi’ la % di abbandono
fonte Localytics*
@qba75

46. Porta ciò che fai a compimento
• Riduci la “frizione”, es:
• non inserire subito la
registrazione/login
• se puoi inserisci almeno
uno “skip”
• permetti il login rapido
via social
@qba75

47. Porta ciò che fai a compimento
• Progressive on-boarding:
• L’utente è incoraggiato a
entrare a provare subito
qualche funzione, ancora
prima di fare login
• Lo stesso viene fatto
quando si incontra la prima
volta una nuova funzione
@qba75

48. Porta ciò che fai a compimento
• Richiedi i permessi nel modo corretto (motivandoli)
@qba75

49. Porta ciò che fai a compimento
• Richiedi i feedback
SODDISFATTO?
SI NO
@qba75

50. Porta ciò che fai a compimento
• Richiedi i feedback nel modo corretto :)
SODDISFATTO?
Dai 5 stelle sullo
Store!
Inviaci il tuo feedback!
SI NO
App store
@qba75

51. Stabilisci dei momenti precisi per ogni attività
@qba75

52. Stabilisci dei momenti precisi per ogni attività
• Context =
@qba75

53. Stabilisci dei momenti precisi per ogni attività
• Context = Place + Time + Purpose
• Il tempo e l’attenzione che l’utente dedica alle app è
definito dal contesto
• Progettare per: scarsa attenzione, interruzioni e ripresa
• Il contesto si può prevedere o riconoscere (context
aware, es. servizi Google, geolocalizzazione, …)
http://www.smashingmagazine.com/2012/07/elements-mobile-user-experience/
@qba75

54. Stabilisci dei momenti precisi per ogni attività
• Informa sempre l’utente su quello che
sta succedendo
• Gestisci sapientemente la cache, il
preloading ed il caricamento on-
demand, per gestire dati offline, ridurre
le attese e la latenza
• Gestire comportamenti diversi tra
offline, 3G e Wifi
• Progetta - e gestisci - gli errori!
@qba75

55. Stabilisci dei momenti precisi per ogni attività
• Micro moments are brief interactions where apps can
capture the attention of users and anticipate their
needs in 5-10 seconds interactions (several times a
day).
http://www.slideshare.net/mmikowska/micromoments-mobile-ux
@qba75

56. Stabilisci dei momenti precisi per ogni attività
@qba75

57. Vivi in semplicità
@qba75

58. Vivi in semplicità
• Farsi ispirare dagli altri è ricerca delle best practices!
@qba75

59. Vivi in semplicità
Pattern!
• pttrns.com
• mobile-patterns.com/
• inspired-ui.com
• appreciateui.com
e molti altri…
… http://goo.gl/jFGPL
@qba75

60. Vivi in semplicità
Pattern!
• pttrns.com
• mobile-patterns.com/
• inspired-ui.com
• appreciateui.com
e molti altri…
… http://goo.gl/jFGPL
@qba75

61. Vivi in semplicità
Pattern!
• pttrns.com
• mobile-patterns.com/
• inspired-ui.com
• appreciateui.com
e molti altri…
… http://goo.gl/jFGPL
@qba75

62. Crea dei rituali
@qba75

63. Crea dei rituali
• Dopo la fase di design create un prototipo
• partendo da wireframe (anche cartacei)
• marvelapp.com
• Utilizzatelo per testare!
@qba75

64. Crea dei rituali
• Ascolta e dialoga con il tuo gruppo di test
• Raccogli informazioni post-lancio:
• feedback e recensioni sugli store
• analytics
• Ottimizza seguendo i loro consigli
@qba75

65. In conclusione…
@qba75

66. …in conclusione
Prendete seriamente la progettazione UX! :)
@qba75

67. Contattaci per…
• Una consulenza sulla UX/UI della tua App!
• Bere un caffè con noi e parlare di come progettare e
realizzare insieme la tua idea :)
Portfolio http://synesthesia.it/portfolio
Behance https://www.behance.net/synesthesia
@qba75

68. GRAZIE!
Francesco Ronchi - Synesthesia srl
Sede Legale: C.so Galileo Ferraris 110, 10129 Torino
Sede Operativa: Via Amedeo Peyron 29, 10143 Torino
Tel: +39 011 0437401 - .
http://synesthesia.it
@qba75 @synesthesiait
https://it.linkedin.com/in/francescoronchi

69. GRAZIE!
Francesco Ronchi - Synesthesia srl
Sede Legale: C.so Galileo Ferraris 110, 10129 Torino
Sede Operativa: Via Amedeo Peyron 29, 10143 Torino
Tel: +39 011 0437401 - .
http://synesthesia.it
@qba75 @synesthesiait
https://it.linkedin.com/in/francescoronchi
Vuoi la versione scaricabile di questa
presentazione? Iscriviti alla nostra
newsletter: http://bit.do/syn-news