mobile user experience
DESCRIPTION
TRANSCRIPT
![Page 1: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/1.jpg)
Internet Days 2 ottobre 2013
Mobile User ExperiencePROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ
Roberto Falcone - Niccolò Passolunghi
Milano, 2 ottobre 2013
![Page 2: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/2.jpg)
Internet Days 2 ottobre 2013
Chi siamo
Roberto FalconeUser Experience Designer
@robertofalcone
Niccolò PassolunghiMobile Developer
@nicopasso
![Page 3: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/3.jpg)
Internet Days 2 ottobre 2013
UX DESIGN SVILUPPO
![Page 4: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/4.jpg)
Internet Days 2 ottobre 2013
Agenda – Di cosa parleremo oggi?
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
![Page 5: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/5.jpg)
Internet Days 2 ottobre 2013
Conversation#Mobile UX
#Internet Days
![Page 6: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/6.jpg)
Internet Days 2 ottobre 2013
Why care about Mobile?
![Page 7: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/7.jpg)
Internet Days 2 ottobre 2013
1.2miliardi
SMARTPHONE E TABLET ATTUALMENTE IN
CIRCOLAZIONE NEL MONDO
![Page 8: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/8.jpg)
Internet Days 2 ottobre 2013
62
*Nielsen 2013
milioni
DISPOSITIVI MOBILE IN ITALIA, SUPERIORE AL NUMERO
TOTALE DI ABITANTI
![Page 9: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/9.jpg)
Internet Days 2 ottobre 2013
1:2
*CISCO, 2012
STIMA PREVISTA PER IL 2018 DEL RAPPORTO TRA IL
NUMERO DI DISPOSITIVI MOBILE E LA POPOLAZIONE
MONDIALE
![Page 10: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/10.jpg)
Internet Days 2 ottobre 2013
1.8milioni
NUMERO TOTALE DELLE APPLICAZIONI IN USO
PRESENTI NEGLI STORE APPLE E ANDROID
![Page 11: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/11.jpg)
Internet Days 2 ottobre 2013
80%
*Google Our Mobile Planet, 2012
dei possessori di smartphone
NON ESCE DI CASA SENZA IL PROPRIO DEVICE
![Page 12: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/12.jpg)
Internet Days 2 ottobre 2013
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
![Page 13: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/13.jpg)
Internet Days 2 ottobre 2013
Mobile vs Desktop
![Page 14: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/14.jpg)
Internet Days 2 ottobre 2013
« If the mobile design only replicates an existing high web site the result will range from subptimal to completely unusable».
- Morten Hjerde
![Page 15: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/15.jpg)
Internet Days 2 ottobre 2013
AMBIENTE
• Impredicibile
• Variabile
![Page 16: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/16.jpg)
Internet Days 2 ottobre 2013
FRUIZIONE
• Ambiente multi-tasking
• Operazione mono-tasking
![Page 17: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/17.jpg)
Internet Days 2 ottobre 2013
Desktop: “Content is king”
![Page 18: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/18.jpg)
Internet Days 2 ottobre 2013
Mobile: “Content is king”
![Page 19: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/19.jpg)
Internet Days 2 ottobre 2013
Mobile: “Content is king”
![Page 20: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/20.jpg)
Internet Days 2 ottobre 2013
Mobile: “Context is king”
![Page 21: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/21.jpg)
Internet Days 2 ottobre 2013
Il contesto dell’interazione mobile
Savio, N. Braiterman, J. Design Sketch: The Context of Mobile Interaction
![Page 22: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/22.jpg)
Internet Days 2 ottobre 2013
INTERAZIONE
• Manipolazione diretta
• Gesture
![Page 23: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/23.jpg)
Internet Days 2 ottobre 2013
SCHERMO
• Dimensione ridotta• User Interface estesa• Compressione delle
informazioni
![Page 24: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/24.jpg)
Internet Days 2 ottobre 2013
“Mobilize, don’t miniaturize”
![Page 25: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/25.jpg)
Internet Days 2 ottobre 2013
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.
![Page 26: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/26.jpg)
Internet Days 2 ottobre 2013
SENSORI
Lo smartphone possiede sensori integrati che possono determinare posizione, movimento, accelerazione, orientamento, prossimità, condizioni climatiche, ecc.
![Page 27: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/27.jpg)
Internet Days 2 ottobre 2013
«A SPIME is an historical entity with an accessible, precise trajectory through space and time.»
- Bruce Sterling
![Page 28: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/28.jpg)
Internet Days 2 ottobre 2013
Mobile Design Principles
![Page 29: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/29.jpg)
Internet Days 2 ottobre 2013
1. SPAZIALITÀ
• Campi di input ridotti
• Scrolling verticale ridotto
• Scrolling orizzontale da evitare
![Page 30: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/30.jpg)
Internet Days 2 ottobre 2013
2. FEEDBACK
• Wizard e procedure guidate
• Modalità di feedback differenti
• Segnalazione appropriata degli errori
![Page 31: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/31.jpg)
Internet Days 2 ottobre 2013
3. STANDARD DESIGN
• Pattern consolidati
• Metafore evocative e chiare
![Page 32: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/32.jpg)
Internet Days 2 ottobre 2013
4. CONTENUTO
• Grandezza del font appropriata
• Navigazione tramite contenuto
![Page 33: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/33.jpg)
Internet Days 2 ottobre 2013
5. EMOZIONALITÀ
• Engagement
• Gamification
![Page 34: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/34.jpg)
Internet Days 2 ottobre 2013
6. SEMPLICITÀ
• Funzionalità necessarie
• Navigazione discreta
• Informazioni compattate
• Progressive Disclosure
![Page 35: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/35.jpg)
Internet Days 2 ottobre 2013
«Complicare è facile,
semplificare è diicile».- Bruno Munari
![Page 39: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/39.jpg)
Internet Days 2 ottobre 2013
Mobile User Experience Design
![Page 40: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/40.jpg)
Internet Days 2 ottobre 2013
Idea
Livelli di un’esperienza utente mobile
Obiettivi ContestoAnalisi
Layout Visual InterazioneDesign
Porting Coding Test PrototypeSviluppo
![Page 41: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/41.jpg)
Internet Days 2 ottobre 2013
si risparmiano 10$ in visual design
Per ogni $ investito in progettazione
e 100$ in sviluppo.
Perché è importante una buona progettazione?
1$
10$
100$
![Page 42: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/42.jpg)
Internet Days 2 ottobre 2013
User Centered Design
![Page 43: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/43.jpg)
Internet Days 2 ottobre 2013
1 Personas/Scenario
2 Architettura dell’Informazione
3 Sketch/Wireframe
4 Visual Design
5 Prototipazione/Test Utente
Processo di User-centered Design
![Page 44: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/44.jpg)
Internet Days 2 ottobre 2013
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
![Page 45: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/45.jpg)
Internet Days 2 ottobre 2013
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.
![Page 46: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/46.jpg)
Internet Days 2 ottobre 2013
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.
![Page 47: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/47.jpg)
Internet Days 2 ottobre 2013
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
![Page 48: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/48.jpg)
Internet Days 2 ottobre 2013
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
![Page 49: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/49.jpg)
Internet Days 2 ottobre 2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
![Page 50: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/50.jpg)
Internet Days 2 ottobre 2013
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
![Page 51: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/51.jpg)
Internet Days 2 ottobre 2013
ANALYTICS
• Utenti attivi
• Coinvolgimento
• Impatto sull’attività
• Real-time update
• Numero installazioni
• Acquisti in-app
![Page 52: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/52.jpg)
Internet Days 2 ottobre 2013
Native or responsive?
![Page 53: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/53.jpg)
Internet Days 2 ottobre 2013
MOBILE FRAGMENTATION
Apple
• 4 device sizes
• 2 OS supportati
Android
• 4000+ device sizes
• 6 OS supportati
![Page 54: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/54.jpg)
Internet Days 2 ottobre 2013
- 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.»
![Page 55: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/55.jpg)
Internet Days 2 ottobre 2013
Responsive Design
![Page 56: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/56.jpg)
Internet Days 2 ottobre 2013
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.
![Page 57: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/57.jpg)
Internet Days 2 ottobre 2013
L’esperienza di Facebook e Linkedin con le responsive app
![Page 58: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/58.jpg)
Internet Days 2 ottobre 2013
The future of mobile is just now
![Page 59: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/59.jpg)
Internet Days 2 ottobre 2013
AUGMENTED REALITY
![Page 60: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/60.jpg)
Internet Days 2 ottobre 2013
NEAR FIELD COMMUNICATION
![Page 62: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/62.jpg)
Internet Days 2 ottobre 2013
FINGERPRINT TOUCH ID
![Page 64: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/64.jpg)
Il Mobile evolve rapidamente ed è parte della nostra vita quotidiana
Il mondo Mobile è radicalmente diverso da quello Desktop
Di cosa tenere conto quando si progetta per il Mobile
Come progettare bene un’esperienza Mobile
Quando realizzare un’app nativa e quando un sito responsivo
Cosa ci riserva il futuro del Mobile
Internet Days 2 ottobre 2013
Cosa portare a casa?
![Page 67: Mobile User Experience](https://reader033.vdocumenti.com/reader033/viewer/2022061118/54691e15af7959b6258b5430/html5/thumbnails/67.jpg)
Internet Days 2 ottobre 2013
www.digitalnatives.it