InternetDays2ottobre2013
Mobile User Experience
PROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ
Roberto Falco...
InternetDays2ottobre2013
Chisiamo
Roberto Falcone
User Experience Designer
@robertofalcone
Niccolò Passolunghi
Mobile Deve...
InternetDays2ottobre2013
UX DESIGN SVILUPPO
InternetDays2ottobre2013
Agenda–Dicosaparleremooggi?
Mobile vs Desktop
2
Native or
responsive?
5
Why care
about Mobile?
1
...
InternetDays2ottobre2013
Conversation
#Mobile UX
#Internet Days
InternetDays2ottobre2013
Why care about Mobile?
InternetDays2ottobre2013
1.2miliardi
SMARTPHONE E TABLET
ATTUALMENTE IN
CIRCOLAZIONE NEL MONDO
InternetDays2ottobre2013
62
*Nielsen 2013
milioni
DISPOSITIVI MOBILE IN ITALIA,
SUPERIORE AL NUMERO
TOTALE DI ABITANTI
InternetDays2ottobre2013
1:2
*CISCO, 2012
STIMA PREVISTA PER IL 2018
DEL RAPPORTO TRA IL
NUMERO DI DISPOSITIVI
MOBILE E LA...
InternetDays2ottobre2013
1.8milioni
NUMERO TOTALE DELLE
APPLICAZIONI IN USO
PRESENTI NEGLI STORE APPLE
E ANDROID
InternetDays2ottobre2013
80%
*Google Our Mobile Planet, 2012
dei possessori di smartphone
NON ESCE DI CASA SENZA
IL PROPRI...
InternetDays2ottobre2013
86%delle persone intervistate
USA LO SMARPTHONE
CONTEMPORANEAMENTE
AD ALTRI MEDIA
*Google Our Mob...
InternetDays2ottobre2013
Mobile vs Desktop
InternetDays2ottobre2013
« If the mobile design only replicates
an existing high web site the result
will range from subpt...
InternetDays2ottobre2013
AMBIENTE
• Impredicibile
• Variabile
InternetDays2ottobre2013
FRUIZIONE
• Ambiente multi-tasking
• Operazione mono-tasking
InternetDays2ottobre2013
Desktop: “Content is king”
InternetDays2ottobre2013
Mobile: “Content is king”
InternetDays2ottobre2013
Mobile: “Content is king”
InternetDays2ottobre2013
Mobile: “Context is king”
InternetDays2ottobre2013
Il contesto dell’interazione mobile
Savio, N. Braiterman, J. Design Sketch: The Context of Mobile...
InternetDays2ottobre2013
INTERAZIONE
• Manipolazione diretta
• Gesture
InternetDays2ottobre2013
SCHERMO
• Dimensione ridotta
• User Interface estesa
• Compressione delle
informazioni
InternetDays2ottobre2013
“Mobilize, don’t miniaturize”
InternetDays2ottobre2013
Mobilizzazione
Raggiunge precisamente i
bisogni e i comportamenti degli
utenti mobile, sfruttando...
InternetDays2ottobre2013
SENSORI
Lo smartphone possiede
sensori integrati che possono
determinare posizione,
movimento, ac...
InternetDays2ottobre2013
«A SPIME is an historical entity with
an accessible, precise trajectory
through space and time.»
...
InternetDays2ottobre2013
Mobile Design Principles
InternetDays2ottobre2013
1. SPAZIALITÀ
• Campi di input ridotti
• Scrolling verticale ridotto
• Scrolling orizzontale da
e...
InternetDays2ottobre2013
2. FEEDBACK
• Wizard e procedure guidate
• Modalità di feedback differenti
• Segnalazione appropr...
InternetDays2ottobre2013
3. STANDARD DESIGN
• Pattern consolidati
• Metafore evocative e chiare
InternetDays2ottobre2013
4. CONTENUTO
• Grandezza del font appropriata
• Navigazione tramite contenuto
InternetDays2ottobre2013
5. EMOZIONALITÀ
• Engagement
• Gamification
InternetDays2ottobre2013
6. SEMPLICITÀ
• Funzionalità necessarie
• Navigazione discreta
• Informazioni compattate
• Progre...
InternetDays2ottobre2013
«Complicare è facile,
semplificare è diicile».
- Bruno Munari
InternetDays2ottobre2013
InternetDays2ottobre2013
InternetDays2ottobre2013
InternetDays2ottobre2013
Mobile User Experience Design
InternetDays2ottobre2013
Idea
Livelli di un’esperienza utente mobile
Obiettivi ContestoAnalisi 
Layout Visual Inte...
InternetDays2ottobre2013
si risparmiano 10$ in visual design
Per ogni $ investito in progettazione
e 100$ in sviluppo.
Per...
InternetDays2ottobre2013
User Centered Design
InternetDays2ottobre2013
1 Personas/Scenario
2 Architettura dell’Informazione
3 Sketch/Wireframe
4 Visual Design
5 Prototi...
InternetDays2ottobre2013
PERSONAS/SCENARIO
Le personas sono archetipi che
identificano e tratteggiano
comportamenti, desid...
InternetDays2ottobre2013
ARCHITETTURA
DELL’INFORMAZIONE
L'AI è la struttura organizzativa
logica e semantica delle
informa...
InternetDays2ottobre2013
SKETCH
Astrazioni a fedeltà molto bassa
del layout, che hanno lo scopo di
rappresentare al meglio...
InternetDays2ottobre2013
PROTOTIPAZIONE
Un prototipo è un modello
approssimato o parziale del
sistema che consente di:
• m...
InternetDays2ottobre2013
WIREFRAME
Rappresentazione ad alta fedeltà
della struttura del sistema, che
permette di:
• ottene...
InternetDays2ottobre2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
InternetDays2ottobre2013
TEST UTENTE
Valutano l'efficacia, l'efficienza e
la soddisfazione con le quali gli
utenti raggiun...
InternetDays2ottobre2013
ANALYTICS
• Utenti attivi
• Coinvolgimento
• Impatto sull’attività
• Real-time update
• Numero in...
InternetDays2ottobre2013
Native or responsive?
InternetDays2ottobre2013
MOBILE
FRAGMENTATION
Apple
• 4 device sizes
• 2 OS supportati
Android
• 4000+ device sizes
• 6 OS...
InternetDays2ottobre2013
- Jeffrey Veen
«Day by day, the number of devices,
platforms, and browsers that need to work
with...
InternetDays2ottobre2013
Responsive Design
InternetDays2ottobre2013
Native App
• Sensori hardware
• Elevato livello di design
• In-app Purchase
• Contenuti off-line
...
InternetDays2ottobre2013
L’esperienza di Facebook e Linkedin con le responsive app
InternetDays2ottobre2013
The future of mobile is just now
InternetDays2ottobre2013
AUGMENTED REALITY
InternetDays2ottobre2013
NEAR FIELD COMMUNICATION
InternetDays2ottobre2013
GOOGLE GLASS
InternetDays2ottobre2013
FINGERPRINT TOUCH ID
InternetDays2ottobre2013
Conclusioni
IlMobileevolverapidamenteedèpartedellanostravitaquotidiana
Il mondo MobileèradicalmentediversodaquelloDesktop
Dicosatenere...
InternetDays2ottobre2013
Ditecilavostra
InternetDays2ottobre2013
Grazie!
InternetDays2ottobre2013
www.digitalnatives.it
Upcoming SlideShare
Loading in …5
×

Mobile User Experience

1,009 views

Published on

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,009
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
42
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Mobile User Experience

  1. 1. InternetDays2ottobre2013 Mobile User Experience PROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ Roberto Falcone - Niccolò Passolunghi Milano, 2 ottobre 2013
  2. 2. InternetDays2ottobre2013 Chisiamo Roberto Falcone User Experience Designer @robertofalcone Niccolò Passolunghi Mobile Developer @nicopasso
  3. 3. InternetDays2ottobre2013 UX DESIGN SVILUPPO
  4. 4. InternetDays2ottobre2013 Agenda–Dicosaparleremooggi? Mobile vs Desktop 2 Native or responsive? 5 Why care about Mobile? 1 Mobile Design Principles 3 Mobile UxD 4 The future of Mobile 6
  5. 5. InternetDays2ottobre2013 Conversation #Mobile UX #Internet Days
  6. 6. InternetDays2ottobre2013 Why care about Mobile?
  7. 7. InternetDays2ottobre2013 1.2miliardi SMARTPHONE E TABLET ATTUALMENTE IN CIRCOLAZIONE NEL MONDO
  8. 8. InternetDays2ottobre2013 62 *Nielsen 2013 milioni DISPOSITIVI MOBILE IN ITALIA, SUPERIORE AL NUMERO TOTALE DI ABITANTI
  9. 9. InternetDays2ottobre2013 1:2 *CISCO, 2012 STIMA PREVISTA PER IL 2018 DEL RAPPORTO TRA IL NUMERO DI DISPOSITIVI MOBILE E LA POPOLAZIONE MONDIALE
  10. 10. InternetDays2ottobre2013 1.8milioni NUMERO TOTALE DELLE APPLICAZIONI IN USO PRESENTI NEGLI STORE APPLE E ANDROID
  11. 11. InternetDays2ottobre2013 80% *Google Our Mobile Planet, 2012 dei possessori di smartphone NON ESCE DI CASA SENZA IL PROPRIO DEVICE
  12. 12. InternetDays2ottobre2013 86%delle persone intervistate USA LO SMARPTHONE CONTEMPORANEAMENTE AD ALTRI MEDIA *Google Our Mobile Planet, 2012 11% Legge il giornaleGioca ai videogame Guarda un film Usa il computer Guarda la TV Ascolta la musica 22%12% 50% 54% 36%31% Legge un libro
  13. 13. InternetDays2ottobre2013 Mobile vs Desktop
  14. 14. InternetDays2ottobre2013 « If the mobile design only replicates an existing high web site the result will range from subptimal to completely unusable». - Morten Hjerde
  15. 15. InternetDays2ottobre2013 AMBIENTE • Impredicibile • Variabile
  16. 16. InternetDays2ottobre2013 FRUIZIONE • Ambiente multi-tasking • Operazione mono-tasking
  17. 17. InternetDays2ottobre2013 Desktop: “Content is king”
  18. 18. InternetDays2ottobre2013 Mobile: “Content is king”
  19. 19. InternetDays2ottobre2013 Mobile: “Content is king”
  20. 20. InternetDays2ottobre2013 Mobile: “Context is king”
  21. 21. InternetDays2ottobre2013 Il contesto dell’interazione mobile Savio, N. Braiterman, J. Design Sketch: The Context of Mobile Interaction
  22. 22. InternetDays2ottobre2013 INTERAZIONE • Manipolazione diretta • Gesture
  23. 23. InternetDays2ottobre2013 SCHERMO • Dimensione ridotta • User Interface estesa • Compressione delle informazioni
  24. 24. InternetDays2ottobre2013 “Mobilize, don’t miniaturize”
  25. 25. InternetDays2ottobre2013 Mobilizzazione Raggiunge precisamente i bisogni e i comportamenti degli utenti mobile, sfruttando al meglio le potenzialità della tecnologia. • Contesto e contenuto specifici Miniaturizzazione Tratta l’ambiente e la tecnologia mobile come un subset dell’ambiente web tradizionale. • Riproposizione di un contenuto esistente vs.
  26. 26. InternetDays2ottobre2013 SENSORI Lo smartphone possiede sensori integrati che possono determinare posizione, movimento, accelerazione, orientamento, prossimità, condizioni climatiche, ecc.
  27. 27. InternetDays2ottobre2013 «A SPIME is an historical entity with an accessible, precise trajectory through space and time.» - Bruce Sterling
  28. 28. InternetDays2ottobre2013 Mobile Design Principles
  29. 29. InternetDays2ottobre2013 1. SPAZIALITÀ • Campi di input ridotti • Scrolling verticale ridotto • Scrolling orizzontale da evitare
  30. 30. InternetDays2ottobre2013 2. FEEDBACK • Wizard e procedure guidate • Modalità di feedback differenti • Segnalazione appropriata degli errori
  31. 31. InternetDays2ottobre2013 3. STANDARD DESIGN • Pattern consolidati • Metafore evocative e chiare
  32. 32. InternetDays2ottobre2013 4. CONTENUTO • Grandezza del font appropriata • Navigazione tramite contenuto
  33. 33. InternetDays2ottobre2013 5. EMOZIONALITÀ • Engagement • Gamification
  34. 34. InternetDays2ottobre2013 6. SEMPLICITÀ • Funzionalità necessarie • Navigazione discreta • Informazioni compattate • Progressive Disclosure
  35. 35. InternetDays2ottobre2013 «Complicare è facile, semplificare è diicile». - Bruno Munari
  36. 36. InternetDays2ottobre2013
  37. 37. InternetDays2ottobre2013
  38. 38. InternetDays2ottobre2013
  39. 39. InternetDays2ottobre2013 Mobile User Experience Design
  40. 40. InternetDays2ottobre2013 Idea Livelli di un’esperienza utente mobile Obiettivi ContestoAnalisi  Layout Visual InterazioneDesign  Porting Coding Test PrototypeSviluppo 
  41. 41. InternetDays2ottobre2013 si risparmiano 10$ in visual design Per ogni $ investito in progettazione e 100$ in sviluppo. Perché è importante una buona progettazione? 1$ 10$ 100$
  42. 42. InternetDays2ottobre2013 User Centered Design
  43. 43. InternetDays2ottobre2013 1 Personas/Scenario 2 Architettura dell’Informazione 3 Sketch/Wireframe 4 Visual Design 5 Prototipazione/Test Utente Processo di User-centered Design
  44. 44. InternetDays2ottobre2013 PERSONAS/SCENARIO Le personas sono archetipi che identificano e tratteggiano comportamenti, desideri ed aspettative di un gruppo specifico di utenti. Realizzate attraverso: • analitiche • ricerche di mercato • giudizio di esperti
  45. 45. InternetDays2ottobre2013 ARCHITETTURA DELL’INFORMAZIONE L'AI è la struttura organizzativa logica e semantica delle informazioni e dei contenuti presenti all'interno del sistema. Findability: classificazione ed organizzazione dei contenuti in modo che siano trovabili dall’utente nella maniera più veloce ed intuitiva.
  46. 46. InternetDays2ottobre2013 SKETCH Astrazioni a fedeltà molto bassa del layout, che hanno lo scopo di rappresentare al meglio il concept, le caratteristiche principali e le diverse alternative di design.
  47. 47. InternetDays2ottobre2013 PROTOTIPAZIONE Un prototipo è un modello approssimato o parziale del sistema che consente di: • mantere il design centrato sull’utente • superare il problema della definizione parziale dei requisiti
  48. 48. InternetDays2ottobre2013 WIREFRAME Rappresentazione ad alta fedeltà della struttura del sistema, che permette di: • ottenere un rapido feedback sul progetto • identificare subito problemi legati alla disposizione e all’importanza degli elementi • apportare modifiche in modo più semplice ed economico
  49. 49. InternetDays2ottobre2013 VISUAL DESIGN • Look & Feel • Colori • Tipografia • Icone
  50. 50. InternetDays2ottobre2013 TEST UTENTE Valutano l'efficacia, l'efficienza e la soddisfazione con le quali gli utenti raggiungono determinati obiettivi di utilizzo del sistema. Consentono di: • identificare criticità e colli di bottiglia dell'interfaccia • comprendere meglio aspettative e comportamenti dell’utente
  51. 51. InternetDays2ottobre2013 ANALYTICS • Utenti attivi • Coinvolgimento • Impatto sull’attività • Real-time update • Numero installazioni • Acquisti in-app
  52. 52. InternetDays2ottobre2013 Native or responsive?
  53. 53. InternetDays2ottobre2013 MOBILE FRAGMENTATION Apple • 4 device sizes • 2 OS supportati Android • 4000+ device sizes • 6 OS supportati
  54. 54. InternetDays2ottobre2013 - Jeffrey Veen «Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive design represents a fundamental shift in how we’ll build websites for the decade to come.»
  55. 55. InternetDays2ottobre2013 Responsive Design
  56. 56. InternetDays2ottobre2013 Native App • Sensori hardware • Elevato livello di design • In-app Purchase • Contenuti off-line Responsive Web App • Budget Limitato • Tempo di rilascio immediato • Frequente aggiornamentovs.
  57. 57. InternetDays2ottobre2013 L’esperienza di Facebook e Linkedin con le responsive app
  58. 58. InternetDays2ottobre2013 The future of mobile is just now
  59. 59. InternetDays2ottobre2013 AUGMENTED REALITY
  60. 60. InternetDays2ottobre2013 NEAR FIELD COMMUNICATION
  61. 61. InternetDays2ottobre2013 GOOGLE GLASS
  62. 62. InternetDays2ottobre2013 FINGERPRINT TOUCH ID
  63. 63. InternetDays2ottobre2013 Conclusioni
  64. 64. IlMobileevolverapidamenteedèpartedellanostravitaquotidiana Il mondo MobileèradicalmentediversodaquelloDesktop DicosatenerecontoquandosiprogettaperilMobile Comeprogettarebeneun’esperienzaMobile Quando realizzare un’appnativaequandoun sitoresponsivo CosaciriservailfuturodelMobile InternetDays2ottobre2013 Cosa portare a casa?
  65. 65. InternetDays2ottobre2013 Ditecilavostra
  66. 66. InternetDays2ottobre2013 Grazie!
  67. 67. InternetDays2ottobre2013 www.digitalnatives.it

×