SlideShare uma empresa Scribd logo
1 de 67
Baixar para ler offline
InternetDays2ottobre2013
Mobile User Experience
PROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ
Roberto Falcone - Niccolò Passolunghi
Milano, 2 ottobre 2013
InternetDays2ottobre2013
Chisiamo
Roberto Falcone
User Experience Designer
@robertofalcone
Niccolò Passolunghi
Mobile Developer
@nicopasso
InternetDays2ottobre2013
UX DESIGN SVILUPPO
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
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 POPOLAZIONE
MONDIALE
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 PROPRIO DEVICE
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
InternetDays2ottobre2013
Mobile vs Desktop
InternetDays2ottobre2013
« If the mobile design only replicates
an existing high web site the result
will range from subptimal to
completely unusable».
- Morten Hjerde
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 Interaction
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 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.
InternetDays2ottobre2013
SENSORI
Lo smartphone possiede
sensori integrati che possono
determinare posizione,
movimento, accelerazione,
orientamento, prossimità,
condizioni climatiche, ecc.
InternetDays2ottobre2013
«A SPIME is an historical entity with
an accessible, precise trajectory
through space and time.»
- Bruce Sterling
InternetDays2ottobre2013
Mobile Design Principles
InternetDays2ottobre2013
1. SPAZIALITÀ
• Campi di input ridotti
• Scrolling verticale ridotto
• Scrolling orizzontale da
evitare
InternetDays2ottobre2013
2. FEEDBACK
• Wizard e procedure guidate
• Modalità di feedback differenti
• Segnalazione appropriata
degli errori
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
• Progressive Disclosure
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 InterazioneDesign 
Porting Coding Test PrototypeSviluppo 
InternetDays2ottobre2013
si risparmiano 10$ in visual design
Per ogni $ investito in progettazione
e 100$ in sviluppo.
Perché è importante una buona progettazione?
1$
10$
100$
InternetDays2ottobre2013
User Centered Design
InternetDays2ottobre2013
1 Personas/Scenario
2 Architettura dell’Informazione
3 Sketch/Wireframe
4 Visual Design
5 Prototipazione/Test Utente
Processo di User-centered Design
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
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.
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.
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
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
InternetDays2ottobre2013
VISUAL DESIGN
• Look & Feel
• Colori
• Tipografia
• Icone
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
InternetDays2ottobre2013
ANALYTICS
• Utenti attivi
• Coinvolgimento
• Impatto sull’attività
• Real-time update
• Numero installazioni
• Acquisti in-app
InternetDays2ottobre2013
Native or responsive?
InternetDays2ottobre2013
MOBILE
FRAGMENTATION
Apple
• 4 device sizes
• 2 OS supportati
Android
• 4000+ device sizes
• 6 OS supportati
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.»
InternetDays2ottobre2013
Responsive Design
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.
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
DicosatenerecontoquandosiprogettaperilMobile
Comeprogettarebeneun’esperienzaMobile
Quando realizzare un’appnativaequandoun sitoresponsivo
CosaciriservailfuturodelMobile
InternetDays2ottobre2013
Cosa portare a casa?
InternetDays2ottobre2013
Ditecilavostra
InternetDays2ottobre2013
Grazie!
InternetDays2ottobre2013
www.digitalnatives.it

Mais conteúdo relacionado

Destaque

Twitter Mogelijkheden Voor Bedrijven
Twitter Mogelijkheden Voor BedrijvenTwitter Mogelijkheden Voor Bedrijven
Twitter Mogelijkheden Voor BedrijvenWhat if Robert
 
Double Page Spread Analysis
Double Page Spread AnalysisDouble Page Spread Analysis
Double Page Spread Analysisguest25ad45
 
Consejos para crear títulos virales y creativos para tener récord en visitas
Consejos para crear títulos virales y creativos para tener récord en visitasConsejos para crear títulos virales y creativos para tener récord en visitas
Consejos para crear títulos virales y creativos para tener récord en visitasUniredpuma
 
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...What if Robert
 
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...Roberto Falcone
 
Twitter mogelijkheden voor bedrijven
Twitter mogelijkheden voor bedrijvenTwitter mogelijkheden voor bedrijven
Twitter mogelijkheden voor bedrijvenWhat if Robert
 
Cumbrian Floods V2
Cumbrian Floods V2Cumbrian Floods V2
Cumbrian Floods V2guestaa245a6
 

Destaque (14)

Butler Lives
Butler LivesButler Lives
Butler Lives
 
Pleno 20 Cmodul5
Pleno 20 Cmodul5Pleno 20 Cmodul5
Pleno 20 Cmodul5
 
Twitter Mogelijkheden Voor Bedrijven
Twitter Mogelijkheden Voor BedrijvenTwitter Mogelijkheden Voor Bedrijven
Twitter Mogelijkheden Voor Bedrijven
 
Double Page Spread Analysis
Double Page Spread AnalysisDouble Page Spread Analysis
Double Page Spread Analysis
 
TCO
TCOTCO
TCO
 
2009 Fair Presentation
2009 Fair Presentation2009 Fair Presentation
2009 Fair Presentation
 
Consejos para crear títulos virales y creativos para tener récord en visitas
Consejos para crear títulos virales y creativos para tener récord en visitasConsejos para crear títulos virales y creativos para tener récord en visitas
Consejos para crear títulos virales y creativos para tener récord en visitas
 
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...
Crowdsourced presentatie: Nieuwe manieren van waarde creatie - nieuwe marketi...
 
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...
Erostrato. Geolocalizzazione e Realtà aumentata nei luoghi della memoria: un ...
 
Storyboard
StoryboardStoryboard
Storyboard
 
Kel9b Blok8skenario3
Kel9b Blok8skenario3Kel9b Blok8skenario3
Kel9b Blok8skenario3
 
Proactive Brochure(20)
Proactive Brochure(20)Proactive Brochure(20)
Proactive Brochure(20)
 
Twitter mogelijkheden voor bedrijven
Twitter mogelijkheden voor bedrijvenTwitter mogelijkheden voor bedrijven
Twitter mogelijkheden voor bedrijven
 
Cumbrian Floods V2
Cumbrian Floods V2Cumbrian Floods V2
Cumbrian Floods V2
 

Semelhante a Mobile User Experience

Conversion Oriented Design
Conversion Oriented DesignConversion Oriented Design
Conversion Oriented DesignDigital Natives
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalyPaolo Dadda
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...DrupalDay
 
Designer vs. ingegneri - GDG devFest 2012 Firenze
Designer vs. ingegneri - GDG devFest 2012 FirenzeDesigner vs. ingegneri - GDG devFest 2012 Firenze
Designer vs. ingegneri - GDG devFest 2012 FirenzeMaurizio Caporali
 
iLook ZUI, congresso SIE 2010
iLook ZUI, congresso SIE 2010 iLook ZUI, congresso SIE 2010
iLook ZUI, congresso SIE 2010 marcocarnesecchi
 
HCIM08 - Mobile Applications
HCIM08 - Mobile ApplicationsHCIM08 - Mobile Applications
HCIM08 - Mobile ApplicationsStefano Sanna
 
Presentazione tesi
Presentazione tesiPresentazione tesi
Presentazione tesiAndrea Lanza
 
Android - Programmazione Avanzata
Android -  Programmazione AvanzataAndroid -  Programmazione Avanzata
Android - Programmazione AvanzataStefano Sanna
 
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utente
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utenteUX Engineering: il ruolo dello sviluppo nel design dell'esperienza utente
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utenteMarco Pesani
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webJservice
 
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDESMAU
 
2011-2014: cosa è cambiato sul Web per le aziende
2011-2014: cosa è cambiato sul Web per le aziende2011-2014: cosa è cambiato sul Web per le aziende
2011-2014: cosa è cambiato sul Web per le aziendeGabriele Romanato
 
Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Timothy Carniato
 
Marco Testoni e Roberto Serra - Mobile Loyalty
Marco Testoni e Roberto Serra - Mobile LoyaltyMarco Testoni e Roberto Serra - Mobile Loyalty
Marco Testoni e Roberto Serra - Mobile LoyaltyCultura Digitale
 
Alberto Muritano - Mobile Evolution - Digital for Business
Alberto Muritano - Mobile Evolution - Digital for BusinessAlberto Muritano - Mobile Evolution - Digital for Business
Alberto Muritano - Mobile Evolution - Digital for BusinessCultura Digitale
 
Presentazione Metha Group
Presentazione Metha GroupPresentazione Metha Group
Presentazione Metha GroupMetha Group srl
 

Semelhante a Mobile User Experience (20)

Conversion Oriented Design
Conversion Oriented DesignConversion Oriented Design
Conversion Oriented Design
 
pdfPresFeb2014
pdfPresFeb2014pdfPresFeb2014
pdfPresFeb2014
 
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA ItalySMAU Milano 2014 GAE 24/10/2014 - IWA Italy
SMAU Milano 2014 GAE 24/10/2014 - IWA Italy
 
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
Drupal Day 2012 - IL RESPONSIVE WEB DESIGN NON È SOLO UNA QUESTIONE DI LAYOUT...
 
Designer vs. ingegneri - GDG devFest 2012 Firenze
Designer vs. ingegneri - GDG devFest 2012 FirenzeDesigner vs. ingegneri - GDG devFest 2012 Firenze
Designer vs. ingegneri - GDG devFest 2012 Firenze
 
iLook ZUI, congresso SIE 2010
iLook ZUI, congresso SIE 2010 iLook ZUI, congresso SIE 2010
iLook ZUI, congresso SIE 2010
 
HCIM08 - Mobile Applications
HCIM08 - Mobile ApplicationsHCIM08 - Mobile Applications
HCIM08 - Mobile Applications
 
Presentazione tesi
Presentazione tesiPresentazione tesi
Presentazione tesi
 
Android - Programmazione Avanzata
Android -  Programmazione AvanzataAndroid -  Programmazione Avanzata
Android - Programmazione Avanzata
 
Responsivedesign
ResponsivedesignResponsivedesign
Responsivedesign
 
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utente
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utenteUX Engineering: il ruolo dello sviluppo nel design dell'esperienza utente
UX Engineering: il ruolo dello sviluppo nel design dell'esperienza utente
 
Responsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti webResponsive design: la rivoluzione del mobile applicata ai siti web
Responsive design: la rivoluzione del mobile applicata ai siti web
 
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE
2011 -2014: COSA È CAMBIATO SUL WEB PER LE AZIENDE
 
2011-2014: cosa è cambiato sul Web per le aziende
2011-2014: cosa è cambiato sul Web per le aziende2011-2014: cosa è cambiato sul Web per le aziende
2011-2014: cosa è cambiato sul Web per le aziende
 
Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012Agile Experience Design & Development - IAD 2012
Agile Experience Design & Development - IAD 2012
 
Ux scrum e gilde...
Ux scrum e gilde...Ux scrum e gilde...
Ux scrum e gilde...
 
Marco Testoni e Roberto Serra - Mobile Loyalty
Marco Testoni e Roberto Serra - Mobile LoyaltyMarco Testoni e Roberto Serra - Mobile Loyalty
Marco Testoni e Roberto Serra - Mobile Loyalty
 
Alberto Muritano - Mobile Evolution - Digital for Business
Alberto Muritano - Mobile Evolution - Digital for BusinessAlberto Muritano - Mobile Evolution - Digital for Business
Alberto Muritano - Mobile Evolution - Digital for Business
 
Post PC Devices
Post PC DevicesPost PC Devices
Post PC Devices
 
Presentazione Metha Group
Presentazione Metha GroupPresentazione Metha Group
Presentazione Metha Group
 

Mobile User Experience