Mobile User Experience

Internet Days 2 ottobre 2013

Mobile User ExperiencePROGETTARE ESPERIENZE INDIMENTICABILI PER UTENTI IN MOBILITÀ

Roberto Falcone - Niccolò Passolunghi

Milano, 2 ottobre 2013


Chi siamo

Roberto FalconeUser Experience Designer

@robertofalcone

Niccolò PassolunghiMobile Developer

@nicopasso

http://www.yourcompany.com



UX DESIGN SVILUPPO




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




Conversation#Mobile UX

#Internet Days




Why care about Mobile?




1.2miliardi

SMARTPHONE E TABLET ATTUALMENTE IN

CIRCOLAZIONE NEL MONDO




62

*Nielsen 2013

milioni

DISPOSITIVI MOBILE IN ITALIA, SUPERIORE AL NUMERO

TOTALE DI ABITANTI




1:2

*CISCO, 2012

STIMA PREVISTA PER IL 2018 DEL RAPPORTO TRA IL

NUMERO DI DISPOSITIVI MOBILE E LA POPOLAZIONE

MONDIALE




1.8milioni

NUMERO TOTALE DELLE APPLICAZIONI IN USO

PRESENTI NEGLI STORE APPLE E ANDROID




80%

*Google Our Mobile Planet, 2012

dei possessori di smartphone

NON ESCE DI CASA SENZA IL PROPRIO DEVICE




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




Mobile vs Desktop




« If the mobile design only replicates an existing high web site the result will range from subptimal to completely unusable».

- Morten Hjerde




AMBIENTE

• Impredicibile

• Variabile




FRUIZIONE

• Ambiente multi-tasking

• Operazione mono-tasking




Desktop: “Content is king”




Mobile: “Content is king”




Mobile: “Context is king”




Il contesto dell’interazione mobile

Savio, N. Braiterman, J. Design Sketch: The Context of Mobile Interaction




INTERAZIONE

• Manipolazione diretta

• Gesture




SCHERMO

• Dimensione ridotta• User Interface estesa• Compressione delle

informazioni




“Mobilize, don’t miniaturize”




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.




SENSORI

Lo smartphone possiede sensori integrati che possono determinare posizione, movimento, accelerazione, orientamento, prossimità, condizioni climatiche, ecc.




«A SPIME is an historical entity with an accessible, precise trajectory through space and time.»

- Bruce Sterling




Mobile Design Principles




1. SPAZIALITÀ

• Campi di input ridotti

• Scrolling verticale ridotto

• Scrolling orizzontale da evitare




2. FEEDBACK

• Wizard e procedure guidate

• Modalità di feedback differenti

• Segnalazione appropriata degli errori




3. STANDARD DESIGN

• Pattern consolidati

• Metafore evocative e chiare




4. CONTENUTO

• Grandezza del font appropriata

• Navigazione tramite contenuto




5. EMOZIONALITÀ

• Engagement

• Gamification




6. SEMPLICITÀ

• Funzionalità necessarie

• Navigazione discreta

• Informazioni compattate

• Progressive Disclosure




«Complicare è facile,

semplificare è diicile».- Bruno Munari




Mobile User Experience Design




Idea

Livelli di un’esperienza utente mobile

Obiettivi ContestoAnalisi

Layout Visual InterazioneDesign

Porting Coding Test PrototypeSviluppo




si risparmiano 10$ in visual design

Per ogni $ investito in progettazione

e 100$ in sviluppo.

Perché è importante una buona progettazione?

1$

10$

100$




User Centered Design




1 Personas/Scenario

2 Architettura dell’Informazione

3 Sketch/Wireframe

4 Visual Design

5 Prototipazione/Test Utente

Processo di User-centered Design




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




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.




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.




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




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




VISUAL DESIGN

• Look & Feel

• Colori

• Tipografia

• Icone




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




ANALYTICS

• Utenti attivi

• Coinvolgimento

• Impatto sull’attività

• Real-time update

• Numero installazioni

• Acquisti in-app




Native or responsive?




MOBILE FRAGMENTATION

Apple

• 4 device sizes

• 2 OS supportati

Android

• 4000+ device sizes

• 6 OS supportati




- 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.»




Responsive Design




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.




L’esperienza di Facebook e Linkedin con le responsive app




The future of mobile is just now




AUGMENTED REALITY




NEAR FIELD COMMUNICATION




GOOGLE GLASS




FINGERPRINT TOUCH ID




Conclusioni



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


Cosa portare a casa?




Diteci la vostra




Grazie!




www.digitalnatives.it



http://www.digitalnatives.it

http://www.digitalnatives.it

Mobile User Experience

Technology

Transcript of Mobile User Experience