Il documento esplora l'importanza della user experience (UX) nella progettazione di prodotti e servizi digitali, sottolineando che un'approccio strategico è fondamentale per migliorare le vendite e la soddisfazione del cliente. Propone un metodo di design centrato sul cliente, che prevede la ricerca degli utenti, la definizione delle personas e la creazione di mappe dell'esperienza. Viene enfatizzato il ruolo del coordinamento tra diverse discipline aziendali per garantire un'esperienza d'uso soddisfacente e integrata.

1. USER
EXPERIENCE
PER PRODOTTI E
SERVIZI DIGITALI

2. COPYRIGHT GAIA SRL 2013
ELISABETTA
SCHIATTI
3
HEAD OF EXPERIENCE
DESIGN IN GAIA
Progetto interfacce
digitali e esperienze da
oltre 10 anni.
Adesso aiuto i clienti a
superare i silos e
realizzare servizi di
valore per i loro utenti.

3. COPYRIGHT GAIA SRL 2013
LA STORIA INIZIA
CON...
4
CLIENT BRIEF
il suo é un detergente di qualità, specialistico per la pulizia della casa,
costoso.
In Italia è in vendita da qualche anno, ma il mercato non sta reagendo
come aspettato. Le vendite non vanno così bene.
Il Cliente ci chiede di trovare un’idea che possa sfruttare al meglio il
mondo digital e che possa avere effetti positivi, direttamente o
indirettamente, sulle vendite.

4. COPYRIGHT GAIA SRL 2013
QUALE
ESPERIENZA?
a chi ci
rivolgiamo?
che esigenze
hanno le persone
interessate?
quali sono le
conversazioni in
atto?
quali sono i
motivi di
scelta?
com’è il confronto
con i competitor?
come coesiste
con il brand?
come si
immerge
nella realtà
delle
persone?
qual è la
percezione?
quali altri punti di
contatto esistono
già?
5

5. COPYRIGHT GAIA SRL 2013
L'esperienza è il vissuto personale che si fonda sugli stimoli prodotti da un fenomeno. È tipicamente ottenuta tramite il
coinvolgimento (l'esposizione, l’utilizzo, l'osservazione).
Wikipedia
ESPERIENZA
6

6. COPYRIGHT GAIA SRL 2013
7
Quotidianamente noi
VIVIAMO ESPERIENZE CON I BRAND,
CON I PRODOTTI E SERVIZI DIGITALI

7. COPYRIGHT GAIA SRL 2013
VIVIAMO
ESPERIENZE
D’USO
OGNI GIORNO
8

8. “ COPYRIGHT GAIA SRL 2013
L’ESPERIENZA D’USO
L’esperienza d’uso - User experience (UX) -
è la qualità dell’esperienza fatta da una
persona nell’interagire con un determinato
artefatto.
Questo può variare da un singolo oggetto,
un giocattolo, una tazza, un sito web, a un
sistema integrato di esperienze come un
museo o un aeroporto.
User Experience Network
http://www.uxnet.org
9

9. “ COPYRIGHT GAIA SRL 2013
USER EXPERIENCE
•TO MEET THE EXACT NEEDS OF THE CUSTOMER
•SIMPLICITY AND ELEGANCE THAT PRODUCE
PRODUCTS THAT ARE A JOY TO OWN, A JOY TO USE
•BE A SEAMLESS MERGING OF THE SERVICES OF
MULTIPLE DISCIPLINES
Nielsen Norman Group
http://www.nngroup.com/about/userexperience.html
10

10. UXHAPPENS
THEIMPORTANCEOF
USEREXPERIENCE
www.experiencedynamics.com

11. COPYRIGHT GAIA SRL 2013
ANEDDOTO
?
$
12

12. COPYRIGHT GAIA SRL 2013
LA UX VA
PROGETTATA
L’ESPERIENZA D’USO AVVIENE SEMPRE
13

13. COPYRIGHT GAIA SRL 2013
LA UX VA PROGETTATA
È necessario impostare e coordinare le azioni per determinare una
buona esperienza: la strategia UX.
Il successo di una strategia UX è direttamente proporzionale
all’abilità di un’azienda di coordinare business development,
comunicazione e marketing, prodotto, contenuti, produzione, IT,
vendite e customer care.
14
Una strategia UX di successo è il risultato
del lavoro COORDINATO di tutta
l’azienda, orientato al SERVIZIO
e alla PERSONA.

14. COPYRIGHT GAIA SRL 2013
PROGETTARE LA UX
SIGNIFICA…
Offrire prodotti e servizi che facilitino l’esperienza d’utilizzo sotto molteplici aspetti, in
modo da attribuire valore all’esperienza stessa e a chi ce l’ha fornita.
Desiderabile
Crea una connessione emozionale profonda
Piacevole
È percepito positivamente
Soddisfa un bisogno importante
Lo comprendo e lo posso usare
Mi piace e me lo godo
Non posso
vivere senza
Usabile
Funziona in maniera comprensibile
Utile
Risponde ad una specifica esigenza
15

15. COPYRIGHT GAIA SRL 2013
PROGETTARE LA UX
SIGNIFICA…
16
Non
funziona!!
OK, fatto
Lo adorooooo
U S A B I L I T Y PLEASURE

16. COPYRIGHT GAIA SRL 2013
17
...E UX NON È UI
L’esperienza non è (solo) l’interfaccia.
Una infografica di cereali per il confronto tra
user experience e user interface.
By @ED_LEA, www.usabilitycounts.com
PRODUCT
UX
UI
SERVER
DATACENTER

17. COPYRIGHT GAIA SRL 2013
Esperienze grandiose – musica
LA MAGIA MUSICALE DI SHAZAM
18

18. COPYRIGHT GAIA SRL 2013
Esperienze grandiose – intrattenimento
ITUNES ECOSYSTEM
19

19. COPYRIGHT GAIA SRL 2013
Esperienze grandiose – correre
NIKE+
20

20. Esperienze grandiose – leggere
FLIPBOARD SU IPAD
21COPYRIGHT GAIA SRL 2013

21. COPYRIGHT GAIA SRL 2013
Esperienze grandiose – mobile shopping
TESCO HOMEPLUS
22

22. COPYRIGHT GAIA SRL 2013
LA UX DI SUCCESSO
23
curare l’esperienzacomplessiva, superandola dicotomia digitale/offline
offrire prodotti e
servizi semplici
e naturali
assicurarsi che i prodotti ei servizi si inseriscano
nell’esperienza quotidiana
aumentandone il valore
far si che prodotti e
servizi si integrino
nella vita reale
I fattori che contraddistinguono una buona progettazione

23. LA PRIMA IMPRESSIONE CONTA
Ux di successo – consigli pratici
24COPYRIGHT GAIA SRL 2013

24. COPYRIGHT GAIA SRL 2013
LA PRIMA IMPRESSIONE CONTA
Ux di successo – consigli pratici
25

25. Ux di successo – consigli pratici
SERVIZIO ATTENTO
26COPYRIGHT GAIA SRL 2013

26. Ux di successo – consigli pratici
PERSONALIZZAZIONE
27COPYRIGHT GAIA SRL 2013

27. COPYRIGHT GAIA SRL 2013
Ux di successo – consigli pratici
ATTENZIONE AI DETTAGLI
28

28. Ux di successo – consigli pratici
FEEDBACK
29COPYRIGHT GAIA SRL 2013

29. Ux di successo – consigli pratici
FUN
30COPYRIGHT GAIA SRL 2013

30. COPYRIGHT GAIA SRL 2013
FARE UX È
31
•CREARE ESPERIENZE
•COINVOLGERE GLI UTENTI
•SEMPLIFICARE LE INTERFACCE
•USARE LA TECNOLOGIA COME FATTORE
ABILITANTE
•RENDERE NATURALE
•COMUNICARE E INFLUENZARE

31. COPYRIGHT GAIA SRL 2013
COME CREARE
L’ESPERIENZA D’USO?
PROGETTANDO PER LE PERSONE
32

32. COPYRIGHT GAIA SRL 2013
LA PERSONA AL CENTRO
Lo User Centered Design è una metodologia progettuale che mette la persona al
centro del progetto, coinvolgendolo e indagandone le motivazioni, gli interessi, gli
obiettivi e le esigenze.
33
Basato su 3 principi:
• reale focalizzazione sulle persone,
coinvolgimento continuo degli utenti in
tutte le fasi (analisi e ricerca, ideazione,
prototipazione, testing, monitoraggio)
• processo iterativo del design, cicli
successivi di prototipi-test-refinement
• team multidisciplinari

33. COPYRIGHT GAIA SRL 2013
IL
PROCESSO
I 5 PASSAGGI CHIAVE PER LO UX DESIGN
34

34. Studiare gli utenti e il business
COMPRENDERE
35COPYRIGHT GAIA SRL 2013

35. COPYRIGHT GAIA SRL 2013
Esplorare e generare soluzioni progettuali adeguate
SCOPRIRE E IDEARE
36

36. COPYRIGHT GAIA SRL 2013
Definire con l’utente il dettaglio progettuale del prodotto o servizio
PROGETTARE
37

37. COPYRIGHT GAIA SRL 2013
Trasformare il progetto in una soluzione reale
REALIZZARE
38

38. Monitorare la qualità dell’esperienza e migliorarla costantemente
EVOLVERE
39COPYRIGHT GAIA SRL 2013

39. COPYRIGHT GAIA SRL 2013
IN POCHE
MOSSE
I PUNTI CRUCIALI DEL PROCESSO
40

40. COPYRIGHT GAIA SRL 2013
1.
FARE RICERCA
41

41. COPYRIGHT GAIA SRL 2013
COMPRENDERE
LE PERSONE
QUALI SONO GLI OBIETTIVI E LE ESIGENZE DEL
BUSINESS?
QUALI SONO I REALI BISOGNI DEGLI UTENTI?
QUALI SONO LE LORO MOTIVAZIONI?
Attività:
Analisi dei business requirements e degli user needs
42

42. COPYRIGHT GAIA SRL 2013
COMPRENDERE
GLI STRUMENTI
QUALI SONO GLI ATTUALI STRUMENTI A
DISPOSIZIONE?
COME VENGONO UTILIZZATI?
Attività:
Valutazioni esperte e analisi dell’as-is
43

43. COPYRIGHT GAIA SRL 2013
COMPRENDERE
IL PANORAMA COMPETITIVO
QUALI SONO LE STRATEGIE ED I SERVIZI DI ALTRI
SOGGETTI?
COSA SI PUO’ IMPARARE DALLE ESPERIENZE
POSITIVE?
Attività:
Benchmark e analisi letteratura
44

44. COPYRIGHT GAIA SRL 2013
COME?
FACENDO USER RESEARCH E
SINTETIZZANDO GLI INSIGHT
45
La ricerca serve per
individuare le necessità
esplicite e inconsapevoli
delle persone, per creare
empatia verso le loro vite
e comprendere le
motivazioni e le attività nei
vari contesti.
Infografica by Jonathan Lupo “A start guide to UX Design”

45. COPYRIGHT GAIA SRL 2013
LA SINTESI
I dati collezionati con i vari strumenti di
ricerca devono essere elaborati,
organizzati, raggruppati e sintetizzati.
La ricerca è un lavoro di gruppo!
• Scrivere tutti gli insight su post-it
• Raggruppare per affinità
• Identificare pattern
46
Infografica by Jonathan Lupo “A start guide to UX Design”

46. COPYRIGHT GAIA SRL 2013
Le Personas sono archetipi dell’utente, costruite a partire dai dati
raccolti durante la ricerca
PERSONAS
47

47. COPYRIGHT GAIA SRL 2013
Illustra i bisogni, le azioni intraprese e gli stati emozionali
dell’utente o della personas
CUSTOMER JOURNEY
48

48. COPYRIGHT GAIA SRL 2013
È il modello che rappresenta l’esperienza completa, nel tempo e
cross canale
EXPERINCE MAP
49

49. COPYRIGHT GAIA SRL 2013
PERSONAS
50

50. COPYRIGHT GAIA SRL 2013
QUALI INFO
Le personas ci dicono:
• chi sono gli utenti
• quali sono le attività che vorrebbero
fare
• le motivazioni (perchè userebbero/
comprerebbero il nostro prodotto)
• come il nostro servizio/prodotto si
colloca nelle loro vite quotidiane
51
Le personas contengono:• IMMAGINE
• NOME
• CITAZIONE
• INFORMAZIONI DI BACKGROUND• ATTRIBUTI
• ATTIVITÀ
• ESIGENZE E DESIDERI
• OBIETTIVI (GOAL)

51. COPYRIGHT GAIA SRL 2013
LE PERSONAS
creano il focus di progetto, graziealla comprensione deglu utenticondivisa da tutti i team
FOCUS
aiutano ad identificare priorità e
funzioni irrilevanti
PRIORITÀ
COMMON GROUND
sono comprensibili da tutti efunzionano come strumento diriferimento dalla strategia allosviluppo
È
IMPEGNATIVO
CREARE LE PERSONAS
MA SERVONO
DAVVERO?
non sono la media degli utenti
52

52. COPYRIGHT GAIA SRL 2013
PERSONAS
53

53. Experience Map for Rail Europe | August 2011
STAGES
DOING
FEELING
Research & Planning Shopping Booking Post-Booking, Pre-Travel Travel Post Travel
People choose rail travel because it is
convenient, easy, and flexible.
Rail booking is only one part of people’s larger
travel process.
People build their travel plans over time. People value service that is respectful, effective
and personable.
EXPERIENCE
Rail Europe Experience Map
Kayak,
compare
airfare
Google
searches
Research
hotels
Talk with
friends
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Paper tickets
arrive in mail
• I’m excited to go to Europe!
• Will I be able to see everything I can?
• What if I can’t afford this?
• I don’t want to make the wrong choice.
• It’s hard to trust Trip Advisor. Everyone is
so negative.
• Keeping track of all the different products
is confusing.
• Am I sure this is the trip I want to take?
• Website experience is easy and friendly!
• Frustrated to not know sooner about which
tickets are eTickets and which are paper tickets.
Not sure my tickets will arrive in time.
• Stressed that I’m about to leave the country
and Rail Europe won’t answer the phone.
• Frustrated that Rail Europe won’t ship tickets
to Europe.
• Happy to receive my tickets in the mail!
• I am feeling vulnerable to be in an unknown place in
the middle of the night.
• Stressed that the train won’t arrive on time for my
connection.
• Meeting people who want to show us around is fun,
serendipitous, and special.
• Excited to share my vacation story with
my friends.
• A bit annoyed to be dealing with ticket refund
issues when I just got home.
View
maps
Arrange
travel
Blogs &
Travel sites
Plan with
interactive map
Review fares
Select pass(es)
Enter trips Confirm
itinerary
Delivery
options
Payment
options
Review &
confirm
Map itinerary
(finding pass)
Destination
pages
May call if
difficulties
occur
E-ticket Print
at Station
Web
raileurope.com
Wait for paper tickets to arriveResearch destinations, routes and products
Live chat for
questions
Activities, unexpected changes
Change
plans
Check ticket
status
Print e-tickets
at home
web/
apps
Look up
timetables
Plan/
confirm
activities
Web
Share
photos
Share
experience
(reviews)
Request
refunds
Follow-up on refunds for booking changes
Share experience
Buy additional
tickets
Look up
time tables
Stakeholder interviews
Cognitive walkthroughs
Customer Experience Survey
Existing Rail Europe Documentation
Opportunities
Guiding Principles
Customer Journey
Information
sources
RAIL EUROPE
THINKING
• What is the easiest way to get around Europe?
• Where do I want to go?
• How much time should I/we spend in each
place for site seeing and activities?
• I want to get the best price, but I’m willing to pay a
little more for first class.
• How much will my whole trip cost me? What are my
trade-offs?
• Are there other activities I can add to my plan?
• Do I have all the tickets, passes and reservations
I need in this booking so I don’t pay more
shipping?
• Rail Europe is not answering the phone. How
else can I get my question answered?
• Do I have everything I need?
• Rail Europe website was easy and friendly, but
when an issue came up, I couldn’t get help.
• What will I do if my tickets don’t arrive in time?
• I just figured we could grab a train but there are
not more trains. What can we do now?
• Am I on the right train? If not, what next?
• I want to make more travel plans. How do I
do that?
• Trying to return ticket I was not able to use. Not
sure if I’ll get a refund or not.
• People are going to love these photos!
• Next time, we will explore routes and availability
more carefully.
Ongoing,
non-linear
Linear
process
Non-linear, but
time based
Communicate a clear value
proposition.
STAGE: Initial visit
Connect planning, shopping and
booking on the web.
STAGES: Planning, Shopping, Booking
Arm customers with information
for making decisions.
STAGES: Shopping, Booking
Improve the paper ticket
experience.
STAGES: Post-Booking, Travel, Post-Travel
Make your customers into better,
more savvy travelers.
STAGES: Global
Proactively help people deal
with change.
STAGES: Post-Booking, Traveling
Support people in creating their
own solutions.
STAGES: Global
Visualize the trip for planning
and booking.
STAGES: Planning, Shopping
Enable people to plan over time.
STAGES: Planning, Shopping
Engage in social media with
explicit purposes.
STAGES: Global
Communicate status clearly at
all times.
STAGES: Post-Booking, Post Travel
Accommodate planning and
booking in Europe too.
STAGE: Traveling
Aggregate shipping with a
reasonable timeline.
STAGE: Booking
Help people get the help they
need.
STAGES: Global
GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Relevance of Rail Europe
Enjoyability
Helpfulness of Rail Europe
Mail tickets
for refund
Get stamp
for refund
COPYRIGHT GAIA SRL 2013
MAPPE E PERSONAS
La mappe possono rappresentare l’esperienza come modello generale oppure
essere collegate alle personas, per distinguere i differenti journeys.
54

54. COPYRIGHT GAIA SRL 2013
2.
ESPLORARE
SOLUZIONI
55

55. COPYRIGHT GAIA SRL 2013
È una prima rappresentazione veloce dell’idea
SKETCH
56

56. COPYRIGHT GAIA SRL 2013
57
CARATTERISTICHE DELLO
SKETCH
Creare sketch è un
modo per:
pensare
comunicare
persuadere
Gli sketch sono:
versatili
espressivi
indicativi

57. Il paper prototyping per comunicare le idee e condurre i primi test
TEST EARLY, TEST OFTEN!
58COPYRIGHT GAIA SRL 2013

58. COPYRIGHT GAIA SRL 2013
L’esperienza raccontata tramite una sequenza di punti chiave
SCENARI E STORYBOARD
59

59. COPYRIGHT GAIA SRL 2013
60
LE FORME
TESTUALE STORYBOARD
1 2 3
VIDEO-
SCENARIO
http://www.youtube.com/watch?v=9c6W4CCU9M4

60. COPYRIGHT GAIA SRL 2013
61
LA STORIA CHE RACCONTA
La struttura di uno storyboard è sempre costituita da
situazioni, azioni e contesto che illustrano:
PROBLEMA
1
3
4SOLUZIONE
2 BENEFIT
3

61. COPYRIGHT GAIA SRL 2013
62
COSA POSSIAMO
RAPPRESENTARE
gestures
esperienze
soluzioni
ambienti
interazioni
device generici
situazioni d’uso

62. COPYRIGHT GAIA SRL 2013
63
ESEMPI STORYBOARD

63. COPYRIGHT GAIA SRL 2013
64
ESEMPI STORYBOARD

64. COPYRIGHT GAIA SRL 2013
65
ESEMPI STORYBOARD

65. COPYRIGHT GAIA SRL 2013
66
ESEMPI STORYBOARD

66. COPYRIGHT GAIA SRL 2013
3.
PROGETTARE E
TESTARE
67

67. COPYRIGHT GAIA SRL 2013
PROGETTARE
IL DETTAGLIO
PROGETTARE CONTENUTI, INTERAZIONE E VISUAL DI
QUALITA’ E COERENTI CON LA USER EXPERIENCE
IDENTIFICATA
Attività:
Information Architecture, Interaction Design, Visual Design, Content Design
68

68. COPYRIGHT GAIA SRL 2013
PROGETTARE
VERIFICARE LE SOLUZIONI
COINVOLGERE GLI UTENTI PER ACCERTARSI CHE
LA SOLUZIONE IDENTIFICATA SIA DI REALE VALORE
PER CHI LA USERÀ
Attività:
Prototyping e User test
69

69. COPYRIGHT GAIA SRL 2013
Illustra la struttura di pagina e i comportamenti degli elementi
WIREFRAME
70

70. COPYRIGHT GAIA SRL 2013
I WIREFRAME
Possono essere low-fi o ad alta definizione
Contengono dettagli e annotazioni sul comportamento
degli oggetti e sulle interazioni
Dovrebbero essere sempre elaborati tenendo a mente i
reali contenuti che la pagina ospiterà
NON presentano la grafica
71

71. COPYRIGHT GAIA SRL 2013
WIREFRAME: ESEMPI
72

72. COPYRIGHT GAIA SRL 2013
WIREFRAME: ESEMPI
73

73. Subito.it
Ricerca
Elementi principali
1. Intestazione
1.1 Nome e cognome dell'utente loggato.
2. Attività
2.1 Per questo elemento fare riferimento alla relativa documentazione.
3. Allarmi comportamentali
3.1 Titolo area
3.2 Periodo di riferimento
3.3 Indicatori di allarmi comportamentali e relativa numerosità. Il numero e la tipologia di indicatori è dinamico e potrà variare nel tempo. Ne vengono qui rappresentati alcuni a titolo
esemplificativo:
- numero clienti con profittabilità in discesa
- numero clienti con disdetta addebito stipendio
- numero clienti che hanno ricevuto impagati
- numero clienti con bonifici ricorrenti verso altra banca
- numero clienti che hanno effettuato reclamo
4. Andamenti
Questa area ha lo scopo principale di offrire una rapida overview sull'andamento delle unità della rete, consentendone un rapito confronto.
4.1 Il titolo è dinamico e parte dal livello più alto visibile all'utente. Ad esempio un capo distretto vede gli andamenti delle succursali, un capo territorio vede gli andamenti dei distretti, gli
uffici direzionali vedranno gli andamenti dei territori. Selezionando un elemento del grafico si apre un pannello di dettaglio in cui lo stesso grafico viene mostrato per il livello inferiore
(se si seleziona un territorio, il pannello di dettaglio mostra lo stesso grafico per i distretti del territorio selezionato).
4.2 Filtro della tipologia di indicatore da visualizzare. Il numero e la tipologia di indicatori è dinamico e potrà variare nel tempo.
4.3 Riferimento temporale dei dati. In base alla tipologia di indicatore potrà proporre diverse tipologie di archi temporali.
4.4 Etichetta sintetica dell'elemento. A rollover compare la descrizione completa e il dato.
4.5 Indicatore del livello medio. Questo indicatore potrebbe variare in base alla tipologia di indicatore selezionato ed indicare il livello medio, il livello di tolleranza, l'obiettivo per il periodo
di riferimento, etc...
5. Dati andamentali
5.1 Titolo
5.2 Filtro/i. Il numero e la tipologia di filtri disponibili dipende dalle abilitazioni a disposizione dell'utente loggato. Il numero e la tipologia di indicatori può essere dinamico e variare nel
tempo. Al momento se ne prevede un numero che può variare da zero a cinque (nel caso di un unico portafoglio disponibile, questi verrà indicato tra parentesi di fianco al titolo e
nessun filtro sarà visualizzato):
- Portafoglio
- Segmento
- Succursale
- Distretto
- Territorio
Esempi:
Nel caso l'utente ricopra più ruoli, avendo in carico più portafogli, è visibile il filtro "Portafoglio", in cui è possibile selezionare il portafoglio desiderato. Alla selezione, i grafici
sottostanti si aggiornano, visualizzando i dati relativi al portafoglio selezionato .
Nel caso in cui l'utente abbia un portafoglio trasversale su più succursali, sono visibili sia il filtro "Succursale" che "Segmento", consentendogli quindi di poter vedere i dati relativi ad
un dato portafoglio, sia a complessivo che a livello di singola succursale.
Nota
Quando si effettua la selezione di un valore relativo ad un filtro, i valori degli altri filtri possono essere aggiornati di conseguenza, visualizzando esclusivamente i valori disponibili. Ad
esempio selezionando un dato segmento, i portafogli disponibili verranno aggiornati, così come le succursali nel caso di selezione di un distretto.
Alla selezione, i grafici sottostanti si aggiornano, visualizzando i dati relativi al portafoglio selezionato .
5.3 Grafici:Il numero e la tipologia di grafici è dinamico e potrà variare nel tempo. Ne vengono qui rappresentati alcuni a titolo esemplificativo:
- Volumi
- Volumi impieghi
- Volumi raccolta
- Clienti:
- variazione 8 cifre clienti persi; variazione 8 cifre assoluto; variazione clienti obiettivo;
- Economici:
- valore marg. d'interm del portafoglio con andamento
- ricavi da servizi netti
- Indicatori:
- cross selling totale
- Rischio:
- % sconfini rate scadute
Negli esempi riportati, per ogni indicatore è possibile selezionare il riferimento temporale. Alcuni potrebbero avere come periodo di riferimento il mese, altri il trimestre. Nel caso di
alcuni indicatori potrebbe essere possibile visualizzare i dati per archi temporali diversi, come ad esempio: ieri, ultimi 7gg, ultimi 30gg. Questo può essere il caso di indicatori come
conti aperti/chiusi, clienti persi/nuovi.
1.1
2.1
3.1 3.2
3.3
5.1
5.2
5.3
1.01
1.02
1.03
1.05
1.04
4.1 4.2 4.3
4.5
4.4
COPYRIGHT GAIA SRL 2013
WIREFRAME: ESEMPI
74
Diretta Tv / Rai 2
Ballarò 0 social
<utente>
16.00 0 19.00
esci
il tuo commento
username
testo del commento testo del
commento testo del commento
testo
7m
username
testo del commento testo del
commento testo del commento
testo
7m
username
testo del commento testo del
commento testo del commento
testo
8m
username
testo del commento testo del
commento testo del commento
testo
9m
username
testo del commento testo del
commento testo del commento
testo
10m
extra
cambia canale
Rai 1
Rai 2
Rai 1
Rai 1
Rai 1
Rai 1
Rai 1
Rai 1
Rai 1
titolo del contenuto
sync 2
altri correlati
titolo suggerito 1
brevissima descrizione del
contenuto
titolo suggerito 2
brevissima descrizione del
contenuto
titolo suggerito 3
brevissima descrizione del
contenuto
titolo del contenuto
sync 1
testo domanda del
sondaggio
f
SONDAGGIO
<img dei risultati>
Gradimento in tempo reale
HOT
Si parla di
keyword, keyword, keyword, keyword, keyword, keyword, keyword,
keyword, keyword, keyword, keyword, keyword, keyword, keyword,
keyword, keyword, keyword, keyword,
Vota
6
1
tag cloud semantica
1
3
Bottone per fare il refresh del feed. Non so
se il refresh deve andare qui o se sta nella
app bar in basso
3
5
5
l'immagine è una live tile dei risultati.
Al click/tap si va nella pagina del sondaggio
per votare
6
il colore del box dipende dal livello del
gradimento in tempo reale.
Parte da freddo=blu e arriva a
caldissimo=rosso
Scala a 5
2
2
scrittura del commento. Al tap su icona (o
invio da tastiera) il post va nel feed dei
commenti.
4
4
Feed dei commenti. Per ora include sia post
interni MyRai sia esterni (da FB e Twitter).
Se dovessero eliminare i post esterni, qui
sarebbero elencati solo i feed da MyRai.
Per ora ciascun post è visualizzato con:
- img thumb dell'utente
- username utente
- numero di minuti passati dal post di quel
commento
- testo del commento
- simbolo che identifica la provenienza
esterna (FB o Twitter)
Il feed è scrollabile (infinite scrolling) fino ai
commenti di inizio programma. Il
caricamento avviene a blocchi.

74. COPYRIGHT GAIA SRL 2013
Simula il prodotto finale e permette di verificare la bontà della
soluzione ideata
PROTOTIPO
75

75. COPYRIGHT GAIA SRL 2013
PROGETTAZIONE IN
SEQUENZA
76
sketch
wireframe
prototipo
Aiuto Cuoco (Marzo 2013)
Part-time per orari serali nel week end.
Zona Bovisa, Milano.
Path Job
Modifica
Home
Località
corrente
Aggiorna
Modifica località (CON OPZIONE DISEGNA RAGGIO)
visualizzazione cerco/offro
+filtro temporale
Profilo
Personale
Inserisci
annuncio
Segnala
offerta
Cerco Lavoro
Annunci di lavoro
Apprendista Elettricista (Aprile 2013)
Cercasi Apprendista Elettricista.
Via Tortona, Milano.
Cameriere (Marzo 2013)
Cameriere con esperienza.
Orario serale. Milano.
Cuoco (Marzo 2013)
Salsiere e rosticciere. Non richiesta esperienza
prolungata. P.zza del Carmine, Milano.
Aiuto Cuoco (Marzo 2013)
Part-time per orari serali nel week end.
Zona Bovisa, Milano.
Trova l'annuncio
o
Segnala annuncio
Inserisci profilo
Offro Lavoro
Inserisci
Annuncio
Cerca il
candidato
Scegli il candidato
Visualizza
Profilo Completo
Gaia
Cameriere
Visualizza
Profilo Completo
Gaia
Cameriere
Visualizza
Profilo Completo
Gaia
Cameriere

76. COPYRIGHT GAIA SRL 2013
...INCLUSI I CONTENUTI
77

77. COPYRIGHT GAIA SRL 2013
FRANK LLOYD WRIGHT ONCE SAID
“YOU CAN FIX IT ON THE BOARD
WITH AN ERASER,
OR
ON THE CONSTRUCTION SITE
WITH A SLEDGE HAMMER.”
PROTOTYPING IS THE ERASER.
78
Fonte: “Prototyping, a practitioners guide” di T. Warfel

78. COPYRIGHT GAIA SRL 2013
Verificare le ipotesi di design con il coinvolgimento degli utenti
USER TEST
79

79. COPYRIGHT GAIA SRL 2013
GLI USER TEST
Consistono nel testare un prototipo in una sessione
individuale con l’utente, dove dovrà portare a termine
una serie di task prefissati.
I test possono essere condotti:
•live in laboratorio o contestuali (user test)
•in modalità remota (remote test)
•in modalità non moderata (unmoderated usability test)
80

80. COPYRIGHT GAIA SRL 2013
81
PERCHÈ IL TEST?
• Per verificare la qualità dell’interazione tra l’utente e il
prodotto
• Per capire se ci sono problemi nell’esperienza d’uso di
un prodotto prima che arrivi sul mercato
• Per comprendere come creare prodotti che siano
vicini alle esigenze degli utenti e ai loro modelli
mentali

81. COPYRIGHT GAIA SRL 2013
82
GLI UTENTI
Gli utenti che testeranno il prototipo devono essere
rappresentativi della popolazione che userà/acquisterà
il servizio o prodotto.
Prima del test deve essere preparato il panel, con le
caratteristiche del campione da testare. É più facile
trovare le giuste persone affidandosi a società di
recruiting.
GUERRILLA USER TESTING
è meglio testare con utenti GENERICI (amici,
colleghi, parenti, studenti) che non testare
affatto!

82. COPYRIGHT GAIA SRL 2013
I PRINCIPI
GENERALI
GLI STRUMENTI PER LA PROGETTAZIONE
83

83. COPYRIGHT GAIA SRL 2013
84
LA BUONA PROGETTAZIONE
l’esperienza è la stessa in tutti i punti
del prodotto
CONSISTENZA
l’utente è sicuro che privacy eintegrità saranno garantite per tuttele informazioni, i task e le attivitàeseguite
SICUREZZA
il prodotto è semplice da usare efacile da comprendere
CHIAREZZA
l’esperienza e i compiti sono svolticon rapidità (in linea con leaspettative sulla tecnologia)
VELOCITÀ
gli utenti si sentono invogliatiall’utilizzo e le CTA li invitanoall’azione
COINVOLGIMENTO
il prodotto funziona nella manieraattesa dall’utente
INTUITIVITÀ
l’utente può raggiungere il propriogoal con il numero minimo dipassaggi
EFFICIENZA
dei contenuti
RILEVANZA

84. COPYRIGHT GAIA SRL 2013
85
I PRINCIPI GENERALI
• Modello concettuale
• Visibilità/Manipolazione diretta
• Mapping
• Affordances e vincoli
• Feedback
• Coerenza e standard
• Presentazione appropriata
• Errori

85. COPYRIGHT GAIA SRL 2013
IL MODELLO CONCETTUALE
FORNIRE UN BUON MODELLO CONCETTUALE
Fare in modo che l’immagine del sistema fornisca le informazioni essenziali
per capire la struttura ed il funzionamento.
Esistono alcuni accorgimenti che aiutano nella costruzione del corretto
modello mentale dell’artefatto:
• sfruttare i vincoli naturali e artificiali
• sfruttare gli inviti d’uso (le affordance)
• sfruttare il mapping naturale
• migliorare la visibilità delle attività possibili
• aiutare la comprensione e la valutazione delle azioni affettuate
86

86. COPYRIGHT GAIA SRL 2013
87
I PRINCIPI PER I CONTENUTI
facilmente identificabile
FINDABLE
l’utente riesce a percepire un valore,migliora la soddisfazione e eccellenel soddisfare le aspettative anchetra i vari canali
VALUABLE (rilevanza)
per disabilità, per varietà di canali edevice
ACCESSIBILITÀ
inaspettato, straordinario, superiorealle aspettative
DESIDERABILITÀ
produce i risultati desiderati oaspettati
UTILITÀ
facile da memorizzare, dasintetizzare
LEARNABLE
personalizzato, flessibile
FLUIDITÀ
facilmente comprensibile
CHIAREZZA
è affidabile e appropriato
CREDIBILITÀ

87. COPYRIGHT GAIA SRL 2013
IL CONTESTO
E IL DEVICE
GLI STRUMENTI PER LA PROGETTAZIONE
88

88. Attività brevi e a raffica
MICROTASKING
89COPYRIGHT GAIA SRL 2013

89. Scoprire cosa c’è intorno
LOCAL
90COPYRIGHT GAIA SRL 2013

90. Come strumento per abbattere la noia
INTRATTENIMENTO
91COPYRIGHT GAIA SRL 2013

91. Come strumento per abbattere la noia
INTRATTENIMENTO
92COPYRIGHT GAIA SRL 2013

92. Effettuare attività complesse
PRIMO ACCESSO
93COPYRIGHT GAIA SRL 2013

93. COPYRIGHT GAIA SRL 2013
94
PRINCIPI AGGIUNTIVI
progettare per il touch (eschermi piccoli)
semplificare la
navigazione
progettare per unaconnettività
intermittente
definire le priorità deicontenuti
minimizzare gli inputdegli utenti
offrire un’integrazionecoerente con gli altricanali

94. COPYRIGHT GAIA SRL 2013
I PATTERN
GLI STRUMENTI PER LA PROGETTAZIONE
95

95. COPYRIGHT GAIA SRL 2013
I PATTERN
I pattern sono soluzioni a sfide progettuali comuni,
come la navigazione, la visualizzazione dei dati o il
feedback all’utente.
Ad oggi esistono numerose gallery che forniscono
ispirazione per la progettazione di dettaglio, sia per il
desktop sia dedicate esclusivamente al mondo mobile.
96

96. COPYRIGHT GAIA SRL 2013
UI PATTERN GALLERY
UI PATTERNS
http://ui-patterns.com/
PATTERN TAP
http://patterntap.com/
97

97. COPYRIGHT GAIA SRL 2013
MOBILE PATTERN GALLERY
98
MOBILE UI PATTERNS
http://www.mobile-patterns.com/
INSPIRED UI
http://inspired-ui.com/
PTTRNS
http://pttrns.com/
LOVELYUI
http://www.lovelyui.com/
ANDROID PTTRNS
http://androidpttrns.com/
UI PARADE
http://www.uiparade.com/
WINDOWS PHONE PATTERNS
windowsphonepatterns.net/

98. COPYRIGHT GAIA SRL 2013
LE LINEE
GUIDA
GLI STRUMENTI PER LA PROGETTAZIONE
99

99. COPYRIGHT GAIA SRL 2013
GUIDELINES UFFICIALI
I costruttori mettono a disposizione la documentazione ufficiale relativa ai
propri OS e alla creazione di applicazioni sui loro sistemi.
La documentazione si rivolge sia agli sviluppatori sia a chi intende ideare
nuove applicazioni.
Al loro interno si trovano i principi guida da seguire, i pattern e le regole
generali per mantenere una user experience coerente.
100
IOS ANDROID WINDOWS 8
IOS HUMAN INTERFACE GUIDELINES
http://developer.apple.com/library/ios/
#documentation/UserExperience/
Conceptual/MobileHIG/Introduction/
Introduction.html
ANDROID DESIGN GUIDELINES
http://developer.android.com/
design/get-started/principles.html
WINDOWS 8 DESIGN GUIDELINES
http://msdn.microsoft.com/library/
windows/apps/hh779072

100. COPYRIGHT GAIA SRL 2013
LA STORIA
FINISCE CON...
101

101. 102
By Whitney Hess “10 most common misconceptions about user experience design”, 2009
By Whitney Hess “10 most common misconceptions about user experience design”, 2009

102. CONTATTI. RIFERIMENTI PER IL PROGETTO
Marco Giglio mail: marco.giglio@gaia.is.it
Daniele Restelli mail: daniele.restelli@gaia.is.it
COPYRIGHT GAIA SRL 2013
:-)
GRAZIE
103