Smau Napoli 2016 - Codemotion

NAPOLI 15 - 16 DICEMBRE 2016

User experience (UX) per digital app

Forgot password

LOGIN

Password

*********

[email protected]

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 …









Conversations

DELETE

13

25

34

2

User experience (UX) per digital appNAPOLI 15 - 16 DICEMBRE 2016

Mauro Del GaudioDigital Designer


[email protected]

www.comtaste.com

mailto:[email protected]?subject=

mailto:www.comtaste.com?subject=


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


NETWORK INTERNAZIONALE = 40.000 DEVELOPER

PASSATO & FUTURO8 CONFERENZE

7 PAESI


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


+500PROFESSIONISTI FORMATI

30+CORSI A CATALOGO

+100AZIENDE SUPPORTATE


CONTATTI

[email protected]

mailto:[email protected]?subject=


Digital App?


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


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.


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.


Come possiamo rendere le nostre digital app semplici e intuitive?


Progettandole secondo metodi e flussi di lavoro che non trascurano la qualità della user experience (UX).


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


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


Attività e strumenti delle fasiIl processo è composto da fasi che vengono affrontate con attività e strumenti


Ricerca e Analisi


• 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


Le personas sono personaggi ipotetici creati in base alla combinazione di dati e ipotesi, e rappresentano i potenziali utenti.

Cosa sono le personas?


• 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?


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.


Progettazione


Brainstorming, riunioni, discussioni, confronti …


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


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


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











Conversations

DELETE

13

25

34

2

Search ...Mar

Mario Rossi

Mario Rossi


Mario Rossi

Mario Rossi






25

34

2

Mario Rossi

Mario Rossilorem ipsum dolor malesuada dui libero con …

lorem ipsum dolor malesuada dui libero con …








Messaging


13

25

34

2Brian Smith

Conversations

Contacts

Settings

Logout

Settings

Brian Smith

[email protected]

*********

*********Confirmation password

New password

Username

Name

Delete | Edit

Forgot password

LOGIN

Password

*********

[email protected]

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


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.


Cosa si intende per UI design pattern?

Soluzioni progettuali generali a problemi ricorrenti


List Menu


Immagini prese da http://pttrns.com/


Springboard


Immagini prese da http://pttrns.com/


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.


• 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:


Prototyping(bassa/alta fedeltà)


Visual mockup

Creazione di documenti che descrivono, con note e collegamenti, il flusso e i comportamenti.

(l’utente immagina)

B

C

A

D

E


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 …



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.


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


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


Agnes Matthews


Upload an images: this_morning.png

Jorge Morrison


Jorge Morrison

(

You


Agnes Matthews


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


Agens: Lorem ipsum dolor sit amet, consectetur …

Jeorge: 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



! "&Malika

)


Validazione


• 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

Smau Napoli 2016 - Codemotion

Technology

Transcript of Smau Napoli 2016 - Codemotion