Download - Smau Napoli 2016 - Codemotion
NAPOLI 15 - 16 DICEMBRE 2016
User experience (UX) per digital app
Forgot password
LOGIN
Password
*********
Username
Remind me
Mario Rossi
Mario RossiToday, 8:15 pm
Aenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris.
Today, 10:35 pm
Aenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris, non condimentum nisi fermentum. Aliquam fringilla vehicula ligula ut eleifend. Nulla placerat, lorem ut tincidunt bibendum, nisi tortor aliquet velit, non malesuada dui libero convallis nisl. Cras dapibus, enim et imperdiet auctor, lorem est pretium urna, eu venenatis sapien est sagittis risus. Vivamus efficitur, nisi vel consectetur viverra.
Mario
Mario RossiYesterday, 3:48 pm
Aenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris, non condimentum nisi fermentum. Aliquam fringilla vehicula ligula ut eleifend. Nulla placerat, lorem ut tincidunt bibendum, nisi tortor aliquet velit, non malesuada dui libero convallis nisl. Cras dapibus, enim et imperdiet auctor, lorem est pretium urna, eu venenatis sapien est sagittis risus. Vivamus efficitur, nisi vel consectetur viverra.
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossilorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
Conversations
DELETE
13
25
34
2
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Mauro Del GaudioDigital Designer
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
www.comtaste.com
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Community centered
CODEMOTIONCodemotion è un hub di innovazione, un punto di riferimento per l’ecostistema IT con focus principale su developer, aziende e tech community.
La diffusione della cultura tecnologica è il nostro scopo principale, poiché pensiamo che al giorno d’oggi programmare sia importante come leggere e scrivere.
I VALORI DI CODEMOTION: Technology
pioneersDevelopers
first
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
NETWORK INTERNAZIONALE = 40.000 DEVELOPER
PASSATO & FUTURO8 CONFERENZE
7 PAESI
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
CODEMOTION TRAINING
Selezioniamo i principali trend del settore IT e i guru più conosciuti dal nostro network, per realizzare percorsi didattici e creare skill di cui il mercato IT ha realmente bisogno.
I nostri servizi in ambito formazione:
> CORSI E BOOTCAMP corsi di formazione per professionisti con calendario rinnovato periodicamente
> CORSI AD HOC E SU RICHIESTA organizzati sulla base di esigenze e particolati need ed erogati presso la sede dell’azienda
> ONLINE TRAINING annulla gli spostamenti dei team distribuiti senza rinunciare alla qualità del contenuto didattico
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
+500PROFESSIONISTI FORMATI
30+CORSI A CATALOGO
+100AZIENDE SUPPORTATE
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
CONTATTI
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Digital App?
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
La maggior parte delle aziende moderne utilizza nel quotidiano strumenti come applicazioni mobile, applicazioni web, software e siti web per la compravendita di prodotti e servizi, per la
promozione e per tutte le attività utili al miglioramento del proprio business.
12.00 - 13.30La prova del cuoco
13.00 - 13.30Tg2 Giorno
13.10 - 14.00Il tempo e la storia
12.55 - 14.00La signora in giallo
13.00 - 13.40Tg5 - Meteo.it
13.00 - 13.40Sport Mediaset
12.00 - 13.30La prova del cuoco
13.00 - 13.30Tg2 Giorno
13.10 - 14.00Il tempo e la storia
12.55 - 14.00La signora in giallo
13.00 - 13.40Tg5 - Meteo.it
13.00 - 13.40Sport Mediaset
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Cosa si intende per UX?
Per esperienza d’uso, anche conosciuta come UX (User Experience), si intende ciò che una persona prova quando utilizza un prodotto, un sistema o un servizio. L'esperienza d'uso concerne gli aspetti esperienziali, affettivi, l'attribuzione di senso e di valore collegati al
possesso di un prodotto e all'interazione con esso, ma include anche le percezioni personali su aspetti quali l'utilità, la semplicità d'utilizzo e l'efficienza del sistema.
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Cosa si intende per UI?
L'interfaccia utente, anche conosciuta come UI (User Interface), è ciò che si frappone tra una macchina e un utente, consentendo l'interazione tra i due. In generale può riferirsi a macchina di qualsiasi natura, tuttavia l'accezione più
nota è in ambito informatico.
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Come possiamo rendere le nostre digital app semplici e intuitive?
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Progettandole secondo metodi e flussi di lavoro che non trascurano la qualità della user experience (UX).
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
User Centred Design
User Centered Design (UCD) è un metodo per progettare e costruire applicazioni tenendo conto del punto di vista e delle esigenze dell’utente come requisito principale.
Il processo UCD è riconosciuto in maniera ufficiale: ISO 13407
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Le fasi del processo:
• Specificare il contesto d’uso
• Specificare i requisiti
• Creare delle soluzioni progettuali
• Valutare il design
Le fasi di questo processo possono ripetersi più volte in maniera ciclica.
A
B
C
D
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Attività e strumenti delle fasiIl processo è composto da fasi che vengono affrontate con attività e strumenti
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Ricerca e Analisi
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
• Incontri con gli stakeholder (portatori di interessi) per discutere delle aspettative e dei vincoli
• Analisi dei competitor e di eventuali versioni precedenti del prodotto
• Interviste e workshop con potenziali utenti
• Creazione delle Personas
• Creazione degli scenari d’uso
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Le personas sono personaggi ipotetici creati in base alla combinazione di dati e ipotesi, e rappresentano i potenziali utenti.
Cosa sono le personas?
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
• Analizzare i dati statistici che ci vengono forniti, oppure utilizzare gli strumenti a disposizione (es.: Google Analytics, Insight di Facebook, etc…)
• Individuare il target
• Immedesimarsi nel target
• Descrivere le caratteristiche delle personas in maniera schematica (scheda profilo)
Come si creano le personas?
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Cosa sono gli scenari d’uso?
Il racconto, in linguaggio comune, di un possibile utilizzo del sistema. E’ molto utile associare uno scenario d’uso ad una personas.
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Progettazione
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Brainstorming, riunioni, discussioni, confronti …
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
E’ la struttura organizzativa logica e semantica delle informazioni, dei contenuti, dei processi e delle funzionalità di un sistema o ambiente informativo.
Il cuore di un qualsiasi progetto di interaction design. In questa fase si scelgono i sistemi di organizzazione e di navigazione dei tutte le parti di un’app.
Creazione di modelli di navigazione: Architettura dell’informazione
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
I wireframe sono vere e proprie bozze strutturali di un sito, applicativo web o software. I wireframe sono estremamente utili in quanto permettono di individuare subito le dinamiche del progetto in termini di usabilità e utilizzo pratico, i punti critici e quelli che richiedono uno
sviluppo più accurato o miglioramenti.
Wireframe
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Messaging
A new way to be connected
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossilorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
Conversations
DELETE
13
25
34
2
Search ...Mar
Mario Rossi
Mario Rossi
Mario Rossilorem ipsum dolor malesuada dui libero …
Mario Rossi
Mario Rossi
Mario Rossilorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
lorem ipsum dolor malesuada dui libero …
25
34
2
Mario Rossi
Mario Rossilorem ipsum dolor malesuada dui libero con …
lorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Mario Rossilorem ipsum dolor malesuada dui libero con …
Messaging
Mario Rossilorem ipsum dolor malesuada dui libero con …
13
25
34
2Brian Smith
Conversations
Contacts
Settings
Logout
Settings
Brian Smith
*********
*********Confirmation password
New password
Username
Name
Delete | Edit
Forgot password
LOGIN
Password
*********
Username
Remind me
Mario Rossi
Mario RossiToday, 8:15 pmAenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris.
Today, 10:35 pmAenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris, non condimentum nisi fermentum. Aliquam fringilla vehicula ligula ut eleifend. Nulla placerat, lorem ut tincidunt bibendum, nisi tortor aliquet velit, non malesuada dui libero convallis nisl. Cras dapibus, enim et imperdiet auctor, lorem est pretium urna, eu venenatis sapien est sagittis risus. Vivamus efficitur, nisi vel consectetur viverra.
Mario
Mario RossiYesterday, 3:48 pmAenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris, non condimentum nisi fermentum. Aliquam fringilla vehicula ligula ut eleifend. Nulla placerat, lorem ut tincidunt bibendum, nisi tortor aliquet velit, non malesuada dui libero convallis nisl. Cras dapibus, enim et imperdiet auctor, lorem est pretium urna, eu venenatis sapien est sagittis risus. Vivamus efficitur, nisi vel consectetur viverra.
Bob Rossi
B
Ash Rossi
Aaron Rossi
Antonio Rossi
A
Mario Rossi
Mario Rossi
Mario Rossi
Mario Rossi DELETE
Contacts
MeYour message ...
return123 space
Q W
A
Z X C V B N M
S D F G H J K L
E R T Y U I O P
New Message
3 / 10
Lorem Ipsum
Mario Rossi
MeAenean auctor vehicula est, a rutrum est varius quis. Nunc dapibus nunc in risus dapibus pretium. Phasellus imperdiet feugiat mauris, non condimentum nisi
return123 space
Q W
A
Z X C V B N M
S D F G H J K L
E R T Y U I O P
Replay
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Come si scelgono gli elementi di UI da inserire nei wireframe?
La scelta è condizionata dalla natura del dato/contenuto da riportare in un determinato punto dell’app, in base ad una valutazione semantica ed ovviamente in base all’esperienza d’uso
che si vuol dare all’utente.
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Cosa si intende per UI design pattern?
Soluzioni progettuali generali a problemi ricorrenti
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
List Menu
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Immagini prese da http://pttrns.com/
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Immagini prese da http://pttrns.com/
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Springboard
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Immagini prese da http://pttrns.com/
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Immagini prese da http://pttrns.com/
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Visual
Search by title
TITLE
2015/10/20 2015/11/18
DATE
Search by registration number
NUMBER
last year sales
FULL TEXT
Search by description
DESCRIPTION
Search by ambito
AMBITO
Search
RESET APPLY
Activity Flow
Timothy Adams
Olga Brock
20 MINUTES AGO
Has sent a request for Clients Review
Lewis Lynch
15 MINUTES AGO
Has done his task on Products List
3 MINUTES AGO
Has done his task on Clients Review
Timothy Adams
Olga Brock
3 HOURES AGO
Has sent a request for Products List
Grace Bush
2 HOURES AGO
Has done his task on Business Plan
30 MINUTES AGO
Has done his task on Business Plan
Keith Elliot
50 MINUTES AGO
Has done his task on Clients Review
I wireframe prodotti vanno declinati secondo il look&feel scelto per l’app.
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
• Rispettare pattern ed elementi proposti nei wireframe
• Declinare ogni schermata proposta nei wireframe
• Declinare esempi di stati e comportamenti
• Creare un documento di style guide
Alcuni consigli utili per la fase di visual design:
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Prototyping(bassa/alta fedeltà)
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Visual mockup
Creazione di documenti che descrivono, con note e collegamenti, il flusso e i comportamenti.
(l’utente immagina)
B
C
A
D
E
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Prototipo HTML/CSS/JS
Creazione di mockup statici che simulano il flusso e i comportamenti
(l’utente interagisce)
Martina Stevenson
Jeorge Morrison
Agnes Matthews
Francis Gordon
25 MINUTES AGO
2 HOURES AGO
3 HOURES AGO
Martina, Agnes and others 13 users 1 DAY AGO
Gregory Blair
Gregory: Lorem ipsum dolor sit amet, consectetur …
You: Lorem ipsum dolor sit amet, consectetur …
Agens: Lorem ipsum dolor sit amet, consectetur …
Jeorge: Lorem ipsum dolor sit amet, consectetur …
Martina: Lorem ipsum dolor sit amet, consectetur …
Martina: Lorem ipsum dolor sit amet, consectetur …
You: Lorem ipsum dolor sit amet, consectetur …
Marion: Lorem ipsum dolor sit amet, consectetur …
2 DAYS AGO
Francis, Martina and others 3 users 3 DAYS AGO
Jeorge, Agnes and others 2 users
Agnes: Lorem ipsum dolor sit amet, consectetur …
5 HOURES AGO
Hilda Vaughn 5 DAYS AGO
Marion Cain 1 WEEK AGO
2 MINUTES AGO
1 MINUTE AGO
Francis, Marion and others 18 users
Francis: Lorem ipsum dolor sit amet, consectetur.
Francis: Lorem ipsum dolor sit amet, consectetur.
Agnes Matthews
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
YESTERDAY
TODAY
Jorge Morrison
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
You
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Agnes Matthews
Agnes has removed her message
Upload an images: this_morning.png
Jorge Morrison
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Jorge Morrison
! Jeorge Morrison, Agnes Matthews and others 2 users"
○
Malika, leave here your message …
$♥&
Martina, Agnes and 13 others users 1 WEEK AGO
Malika Daniel
' Jeorge Morrison, Agnes Matthews and others 2 users
Agnes Matthews
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
YESTERDAY
TODAY
Malika, leave here your message …
Jorge Morrison
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
You
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Agnes Matthews
Agnes has removed her message
Upload an images: this_morning.png
Jorge Morrison
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Jorge Morrison
(
You
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Agnes Matthews
Agnes has removed her message
Martina Stevenson
Jeorge Morrison
Agnes Matthews
Francis Gordon
25 MINUTES AGO
2 HOURES AGO
3 HOURES AGO
Martina, Agnes and others 13 1 DAY AGO
You: Lorem ipsum dolor sit amet, consectetur …
Agens: Lorem ipsum dolor sit amet, consectetur …
Jeorge: Lorem ipsum dolor sit amet, consectetur …
Martina: Lorem ipsum dolor sit amet, consectetur …
Martina: Lorem ipsum dolor sit amet, consectetur …
Gregory Blair
Gregory: Lorem ipsum dolor sit amet, consectetur …
2 DAYS AGO
Francis, Martina and others 3 3 DAYS AGO
Jeorge, Agnes and others 2
Agnes: Lorem ipsum dolor sit amet, consectetur …
5 HOURES AGO
2 MINUTES AGO
1 MINUTE AGO
Francis, Marion and others 18
Francis: Lorem ipsum dolor sit amet, consectetur.
Francis: Lorem ipsum dolor sit amet, consectetur.
! "&Malika
)
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
Validazione
User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016
• Test con utenti
• Analisi euristiche e ispettive
• Simulazioni cognitive
• Sviluppo definitivo dell’app
• Rilascio dell’app
• Meccanismi di segnalazione di problemi
• Analisi delle statistiche
• Ulteriori test di usabilità per controllare gli obiettivi
Grazie!
NAPOLI 15 - 16 DICEMBRE 2016