Post on 17-Nov-2014
description
Internet Days 2 ottobre 2013
Mobile User ExperiencePROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ
Roberto Falcone - Niccolò Passolunghi
Milano, 2 ottobre 2013
Internet Days 2 ottobre 2013
Chi siamo
Roberto FalconeUser Experience Designer
@robertofalcone
Niccolò PassolunghiMobile Developer
@nicopasso
Internet Days 2 ottobre 2013
UX DESIGN SVILUPPO
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
Internet Days 2 ottobre 2013
Conversation#Mobile UX
#Internet Days
Internet Days 2 ottobre 2013
Why care about Mobile?
Internet Days 2 ottobre 2013
1.2miliardi
SMARTPHONE E TABLET ATTUALMENTE IN
CIRCOLAZIONE NEL MONDO
Internet Days 2 ottobre 2013
62
*Nielsen 2013
milioni
DISPOSITIVI MOBILE IN ITALIA, SUPERIORE AL NUMERO
TOTALE DI ABITANTI
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
Internet Days 2 ottobre 2013
1.8milioni
NUMERO TOTALE DELLE APPLICAZIONI IN USO
PRESENTI NEGLI STORE APPLE E ANDROID
Internet Days 2 ottobre 2013
80%
*Google Our Mobile Planet, 2012
dei possessori di smartphone
NON ESCE DI CASA SENZA IL PROPRIO DEVICE
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
Internet Days 2 ottobre 2013
Mobile vs Desktop
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
Internet Days 2 ottobre 2013
AMBIENTE
• Impredicibile
• Variabile
Internet Days 2 ottobre 2013
FRUIZIONE
• Ambiente multi-tasking
• Operazione mono-tasking
Internet Days 2 ottobre 2013
Desktop: “Content is king”
Internet Days 2 ottobre 2013
Mobile: “Content is king”
Internet Days 2 ottobre 2013
Mobile: “Content is king”
Internet Days 2 ottobre 2013
Mobile: “Context is king”
Internet Days 2 ottobre 2013
Il contesto dell’interazione mobile
Savio, N. Braiterman, J. Design Sketch: The Context of Mobile Interaction
Internet Days 2 ottobre 2013
INTERAZIONE
• Manipolazione diretta
• Gesture
Internet Days 2 ottobre 2013
SCHERMO
• Dimensione ridotta• User Interface estesa• Compressione delle
informazioni
Internet Days 2 ottobre 2013
“Mobilize, don’t miniaturize”
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.
Internet Days 2 ottobre 2013
SENSORI
Lo smartphone possiede sensori integrati che possono determinare posizione, movimento, accelerazione, orientamento, prossimità, condizioni climatiche, ecc.
Internet Days 2 ottobre 2013
«A SPIME is an historical entity with an accessible, precise trajectory through space and time.»
- Bruce Sterling
Internet Days 2 ottobre 2013
Mobile Design Principles
Internet Days 2 ottobre 2013
1. SPAZIALITÀ
• Campi di input ridotti
• Scrolling verticale ridotto
• Scrolling orizzontale da evitare
Internet Days 2 ottobre 2013
2. FEEDBACK
• Wizard e procedure guidate
• Modalità di feedback differenti
• Segnalazione appropriata degli errori
Internet Days 2 ottobre 2013
3. STANDARD DESIGN
• Pattern consolidati
• Metafore evocative e chiare
Internet Days 2 ottobre 2013
4. CONTENUTO
• Grandezza del font appropriata
• Navigazione tramite contenuto
Internet Days 2 ottobre 2013
5. EMOZIONALITÀ
• Engagement
• Gamification
Internet Days 2 ottobre 2013
6. SEMPLICITÀ
• Funzionalità necessarie
• Navigazione discreta
• Informazioni compattate
• Progressive Disclosure
Internet Days 2 ottobre 2013
«Complicare è facile,
semplificare è diicile».- Bruno Munari
Internet Days 2 ottobre 2013
Mobile User Experience Design
Internet Days 2 ottobre 2013
Idea
Livelli di un’esperienza utente mobile
Obiettivi ContestoAnalisi
Layout Visual InterazioneDesign
Porting Coding Test PrototypeSviluppo
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$
Internet Days 2 ottobre 2013
User Centered Design
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
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
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.
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.
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
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
Internet Days 2 ottobre 2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
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
Internet Days 2 ottobre 2013
ANALYTICS
• Utenti attivi
• Coinvolgimento
• Impatto sull’attività
• Real-time update
• Numero installazioni
• Acquisti in-app
Internet Days 2 ottobre 2013
Native or responsive?
Internet Days 2 ottobre 2013
MOBILE FRAGMENTATION
Apple
• 4 device sizes
• 2 OS supportati
Android
• 4000+ device sizes
• 6 OS supportati
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.»
Internet Days 2 ottobre 2013
Responsive Design
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.
Internet Days 2 ottobre 2013
L’esperienza di Facebook e Linkedin con le responsive app
Internet Days 2 ottobre 2013
The future of mobile is just now
Internet Days 2 ottobre 2013
AUGMENTED REALITY
Internet Days 2 ottobre 2013
NEAR FIELD COMMUNICATION
Internet Days 2 ottobre 2013
FINGERPRINT TOUCH ID
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?
Internet Days 2 ottobre 2013
www.digitalnatives.it