Ux in un decimo di secondo v1.0

La User Experience in un decimo di secondo.
Come/Quando/Perché.
Gabriele Parpaiola
@gparpaiola
gabriele.parpaiola@pallino.it 
www.pallino.it
video: Joshua Davis
UX
/10
v1.1

foto: Gabriele Parpaiola
@gparpaiola
gabriele.parpaiola@pallino.it
www.pallino.it
rugby
basso
twitter
email
agenzia
hobby
strumento
La User Experience in un decimo di secondo. Come/Quando/Perché.

Gabriele Parpaiola - @gparpaiola - gabriele.parpaiola@pallino.it - www.pallino.it
SMAU Milano 2017
2

Di cosa parliamo oggi
- UX: Perché
- UX: Capiamoci
- UX Design
- UX: 5 personaggi in cerca d’autore
- UX/UI: il Linguaggio
- Concludendo… (?)
- Dalla teoria alla pratica
foto: Serge Kutuzov
1° esempio
deﬁnizioni
2° esempio
il processo
3° esempio
iniziamo
sintesi e applicazione

SMAU Milano 2017
3

foto: FancyCrave

SMAU Milano 2017
4
Mantra
UX
/10

6

SMAU Milano 2017
Windows 95 Dial-Up Dialog Box

- Quando l’informazione è economica, l’attenzione diventa costosa
When information is cheap,
attention becomes expensive.“
”James Gleick
6

SMAU Milano 2017
http://deathtobullshit.com
Death to bullshit

- Ci basta 1/10 di secondo per giudicare qualcuno e creare una prima impressione.
It takes just one-tenth of a second
for us to judge someone
and make a first impression.
“
”Willis, J.; Todorov, A.
7

SMAU Milano 2017

- Qualche volta c’è bisogno di una spiegazione, ma è meglio se non è necessaria.
Sometimes you need an explanation,
but it’s better if it’s not necessary“
”Massimo Vignelli
8

SMAU Milano 2017


SMAU Milano 2017
Tu non sei il tuo target


SMAU Milano 2017
Luke Wroblewski - Google - Source ComScore 2017 U.S.Mobile App Report


SMAU Milano 2017
10
Primo Esempio
foto: Moveast
UX
/10
- UX: Perché

11

SMAU Milano 2017

7

SMAU Milano 2017
12
Design User Experience*
*NON È VERO!

foto: FancyCrave

SMAU Milano 2017
13
Deﬁnizioni…
UX
/10
- UX: Capiamoci

UX (Esperienza d’uso):
“le percezioni e le reazioni di un utente che derivano
dall'uso o dall'aspettativa d'uso di un prodotto,
sistema o servizio”.
“
”
15

SMAU Milano 2017
https://it.wikipedia.org/wiki/User_Experience
Deﬁnizioni: Wiki-style


SMAU Milano 2017
16

Design:
Progettazione di un oggetto che si propone di
sintetizzare funzionalità ed estetica.
“
”
14

SMAU Milano 2017
http://dizionari.corriere.it/dizionario_italiano/D/design.shtml
Equivoco…
- s. ingl. inv.; in it. s.m. inv., pr. adatt.

20

SMAU Milano 2017
Deﬁnizioni: Design Thinking
Uncertainty / Patterns / Insight Clarity / Focus
Research Concept Design
The Design Squiggle - Damien Newman


SMAU Milano 2017
22
Secondo Esempio
foto: Streetwill
UX
/10
- UX Design

Bancomat
“ ”
23

SMAU Milano 2017
Problem solving
…Problem solving
PERIMETRO:
Un utente
Location: Variabile
Obiettivo: Soldi

24

SMAU Milano 2017
Product Design
Interaction Design
Graphic Design
Service Design
…
Ergonomia
SW/Intranet
HW
Sicurezza
…

Bancomat
“ ”
25

SMAU Milano 2017
Problem solving
…Problem solving
Utente
Inserisco la tessera Bancomat
Digito il codice (gestione dell’errore)
Scelgo “Prelievo”
Scelgo l’importo desiderato
Non voglio lo scontrino
Escono i soldi
Soldi …e la tessera???


SMAU Milano 2017
26
Il Processo
UX
/10
foto: Unsplash
- UX: 5 personaggi in cerca d’autore

27

SMAU Milano 2017
Modello tradizionale
Individuare
il problema,
il bisogno
Ricerca Flowcharting UI Design
Feedback
Produzione
Feedback
Consegna

28

SMAU Milano 2017
Modello UX Based
Individuare
il problema,
il bisogno
e il target
Ricerca Flowcharting UI Design Produzione
Feedback Feedback
Consegna
(beta!)
Feedback
FeedbackFeedback FeedbackFeedback

29

SMAU Milano 2017
Modello Lean UX
PROTOTIPO
USER TESTING
FEEDBACK
IMPROVEMENT
PROGETTO
CICLO
UX DESIGN


SMAU Milano 2017
30
Prototipo
UX
/10
foto: Startup Stock Photos

Quick & Dirty
“ ”
31

SMAU Milano 2017
Il Processo - Prototipo
…ma non troppo


SMAU Milano 2017
32
User Testing
UX
/10
foto: Seemi Peltroniemi

Chiedilo agli
utenti
“ ”
33

SMAU Milano 2017
Il Processo - User Testing
Non è un lavoro per designer. Però…
Partiamo dagli Analytics!


SMAU Milano 2017
34
Feedback
UX
/10

Ci siamo sbagliati?
“ ”
35

SMAU Milano 2017
Il Processo - Feedback
Molto probabile…


SMAU Milano 2017
37
Improvement
UX
/10

38

SMAU Milano 2017
Il Processo - Improvement

39

SMAU Milano 2017
Modello Lean UX
Unicorni (Sito perfetto)
Numero di cicli di improvement
Qualità
1
2
3
4
Inizio del progetto

Progettare è meglio
che curare
“ ”
40

SMAU Milano 2017
Il processo
Partiamo dal punto più alto possibile.


SMAU Milano 2017
È un lavoro di squadra.
LO SVILUPPATORE FRONTEND
Traduce il visual in strutture navigabili
dedicate all’interazione
L’ACCOUNT / IL CLIENTE
Definiscono il punto di partenza e
l’obbiettivo di arrivo del progetto
UX DESIGNER
Analizza e valuta il target, i flussi,
la gerarchia delle informazioni…
IL DESIGNER
Costruisce il prototipo e affina man mano
il linguaggio visivo
WEB STRATEGIST / SEO / …
Propone gli strumenti da utilizzare per garantire
un percorso solido all’utente
IL COPY
Cura il linguaggio scritto, funzionalmente
alla navigazione
LO SVILUPPATORE BACKEND
Garantisce la qualità della fruizione in termini di
precisione delle risposte e velocità.
Chi deve pensare
alla UX?


SMAU Milano 2017
È un lavoro di squadra.
UX
Simplicity
Release
Candidate
Consistency
Market
Communication
Marketing
Surface
Design
Styleguide
Information
Design
Usability
Engeneering
Information
Design
Interface
Prototyping
Visual Design
Development
Business
Analysis
Functionality
Look & FeelBusiness
Case
Frontend
Process
Performance
Business
Plan
Backend
Process
Offer
“How to Navigate the Ocean of UX Job Titles”
http://www.uxbeginner.com/how-to-navigate-the-ocean-of-ux-job-titles/


SMAU Milano 2017
42
Terzo Esempio
UX
/10
foto: Unsplash
- UX/UI: il Linguaggio

Esempio
43

SMAU Milano 2017

Esempio
44

SMAU Milano 2017
North America
United States (Fulﬁllment Center Codes)[29]
Goodyear, Arizona (PHX5)
Phoenix, Arizona (PHX3, PHX7)
Eastvale, California (SNA6, SNA9)
San Bernardino, California (SNA7, SNA8, ONT2, ONT5)
Patterson, California[29] (OAK3)
Tracy, California (OAK4)
Stockton, California[29] (XUSD)
Newark, California[29] (OAK5)
Moreno Valley, California[29] (ONT6/ONT8)
Redlands, California[29] (ONT9)
Windsor Locks, Connecticut (BDL1)
Middletown, Delaware[30] (PHL7)
New Castle, Delaware (PHL1)
Davenport, Florida[29] (MCO5)
Ruskin, Florida (TPA1) *************
Lakeland, Florida (TPA2)
Doral, Florida[29] (Miami) (MIA5)
East Point, Georgia[29] (ATL6)
Jeffersonville, Indiana (SDF8)
Plainﬁeld, Indiana (IND2, IND3, IND5)
Whitestown, Indiana (IND1, XUSE)
Indianapolis, Indiana[29] (IND4)
Chicago, Illinois[29] (MDW2)
Edwardsville, Illinois (STL4, STL6, STL7)
Lenexa, Kansas[29] (MCI5)
Edgerton,_Kansas (MKC4)[31]
Campbellsville, Kentucky (SDF1)
Hebron, Kentucky (CVG1, CVG2, CVG3, CVG5, CVG7)
Lexington, Kentucky (LEX1, LEX2)
Louisville, Kentucky (SDF2)
Shepherdsville, Kentucky[29] (SDF4, SDF6, SDF7, SDF9)
Baltimore, Maryland[32][33] (BWI2, BWI5)
Stoughton, Massachusetts[29] (BOS5)
Shakopee, Minnesota[29] (MSP5)
Fernley, Nevada[29] (scheduled to close) (RN01)
North Las Vegas, Nevada (LAS2)
Reno, Nevada[29] (RN02)
Nashua, New Hampshire (BOS1)
Avenel, New Jersey (EWR5, EWR7)
Carteret, New Jersey (EWR9)
Robbinsville Township, New Jersey[34] (EWR4)
Swedesboro, New Jersey[29] (ACY5)
Charlotte, North Carolina (CLT2)
Concord, North Carolina[29] (CLT5)
Durham, North Carolina (RDU5)
Carlisle, Pennsylvania (MDT1, PHL4, PHL6, PHL9, XUSC)
Hazleton, Pennsylvania (AVP1)
Gouldsboro, Pennsylvania (AVP2/3)
Lewisberry, Pennsylvania (PHL5)
Breinigsville, Pennsylvania[29] (ABE2, ABE3)
Harrisburg, Pennsylvania[29] (ABE5)
Pittsburgh, Pennsylvania (PIT1)
West Columbia, South Carolina (CAE1)
Spartanburg, South Carolina (GSP1)
Chattanooga, Tennessee (CHA1)
Charleston, Tennessee (CHA2)
Lebanon, Tennessee (BNA1, BNA2)
Murfreesboro, Tennessee (BNA3)
Nashville, Tennessee (BNA5)
Coppell, Texas (DFW6)
Fort Worth, Texas[29] (DFW7)
Humble, Texas (HOU1)
San Marcos, Texas (SAT2)[35]
Schertz, Texas (SAT1)
Chester, Virginia (RIC2, RIC3)
Petersburg, Virginia (RIC1)
Bellevue, Washington (SEA8)
DuPont, Washington (BFI3)
Sumner, Washington.[36][37] (BFI1)
Kent, Washington[29] (BFI4, BFI5)
Kenosha, Wisconsin[38] (MKE1, MKE5)
Canada
Mississauga, Ontario (YYZ1)
Milton, Ontario (YYZ2)
Brampton, Ontario (YYZ3)
Annacis Island a part of Delta, British Columbia[39] (YVR2)
New Westminster, British Columbia (YVR3)
Mexico
Cuautitlán Izcalli, State of Mexico[29] (MEX1)
Europe
United Kingdom, as of 2014, 8 in operation
England
Marston Gate, Ridgmont
Rugeley, Staffordshire[28]
Peterborough
Doncaster
Hemel Hempstead
Reading
Scotland
Gourock (Inverclyde)
Dunfermline (Fife) (EDI4)
Wales
Crymlyn Burrows, Swansea[40][41][42]
France
Boigny-sur-Bionne (2000)
Saran (2007)
Montélimar (2010)
Sevrey (2012)
Lauwin-Planque (2013)
Germany
Bad Hersfeld (1996 and 2010) (Hessen)
Leipzig (2006) (Saxony)
Werne (2010) (North Rhine-Westphalia)
Rheinberg (2011) (North Rhine-Westphalia)
Graben (2011) (Bavaria)
Koblenz (2012) (Rhineland-Palatinate)
Pforzheim (2012) (Baden-Württemberg)
Brieselang (2013) (Brandenburg)
Poland
Poznan (2014) (POZ1)
Wroclaw (2014 and 2015) (WRO1, WRO2, WRO3, WRO4)
Italy
Castel San Giovanni (2011 and 2013) (Emilia-Romagna)[43]
Milan (2015) (Lombardy) (MXP5)
Avigliana (2016) (Piedmont) (under construction)
Passo Corese (2017) (Lazio) (planned)
Slovakia:
Bratislava (2011)[44]
Spain
San Fernando de Henares (Madrid)
Asia
Japan
Ichikawa
Yachiyo
Chiba
Sakai
Daito
Osaka
Kawagoe
Saitama
China
Guangzhou
Suzhou
Beijing
Chengdu
Tianjin
Shanghai
Haerbin
Shenyang
Jinan
Nanning
Xi'an
Xiamen
India
Mumbai
Bangalore (2014)
Hyderabad
Chennai (MAA4) (MAA5)
Ahmedabad
Jaipur
Gurgaon
Pune (2015)
Delhi
Kolkata

45

SMAU Milano 2017
Esempio - Amazon
.IT .COM

.IT
.COM
46

SMAU Milano 2017
Esempio - Amazon: Header (non loggato)

.COM
Esempio - Amazon: Menu utente (non loggato)
47

SMAU Milano 2017
.IT
MIO
TUO

Esempio - Amazon: Menu utente (non loggato)
48

SMAU Milano 2017
https://medium.com/@jsaito/is-this-my-interface-or-yours-b09a7a795256#.o1h1f8rd4


SMAU Milano 2017
51
…Iniziamo
UX
/10
foto: socialmag
- Concludendo …(?)

Numeri. Grandezze misurabili.
52

SMAU Milano 2017
Dobbiamo rifare il sito?
“ ”
Si/No/Forse…
Disclaimer: Sono stato costretto a mettere un gatto (a caso, trovato su google).

Numeri. Grandezze misurabili. <<< UTENTI
53

SMAU Milano 2017
foto: Zoommy

Numeri. Grandezze misurabili.
54

SMAU Milano 2017
Analytics(Google,Adobe, …)
Heatmaps
Clickmaps
Analisi dei percorsi
http://blog.canvasﬂip.com/index.php/2016/07/18/amazon-vs-walmart-whose-search-ux-is-more-usable/
Performance conversioni…

Numeri: Cosa guardare
55

SMAU Milano 2017
Deduzioni SENSATEDATI | NUMERI

Numeri: Cosa guardare
56

SMAU Milano 2017
Dati imputabili
direttamente al sito
Dati NON imputabili
direttamente al sito
Tempo medio (per pagina!)
Flusso di comportamento
Percorsi di conversione
Pagine per sessione
Pagina di uscita
Pagina precedente
Ricerche interne
Velocità del sito
Bounce Rate*
Pagine più viste*
Visits
Unique visits
Pageview*
Deduzioni:
Interesse degli utenti
Gerarchia di navigazione
Navigazione
Aderenza al progetto
Performance di raggiungimento delle informazioni
Attitudine del target
Proﬁlazione del target*

Flussi di navigazione
57

SMAU Milano 2017

Tanto o poco? - Tempo di permanenza in una pagina
58

SMAU Milano 2017

Tanto o poco?
59

SMAU Milano 2017
Conversioni
http://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/?new=1

Chi concorre alla UX

SMAU Milano 2017
I Form!
https://uxdesign.cc/design-better-forms-96fadca0f49c
Sempliﬁcare!
Mobile ﬁrst (!!!)
Usare un ordine di lettura verticale 
(NO MULTI-COLONNA!)
Hint di compilazione VISIBILI
Gestione degli errori precisa e chiara
Evitare le label interne ai campi…

Le animazioni sono “SOLUZIONI”. Prima troviamo i “PROBLEMI”.
61

SMAU Milano 2017


SMAU Milano 2017
62
Dalla teoria alla pratica:
Sintesi e applicazione
UX
/10
foto: socialmag

L’utente deve essere in controllo. Si orienta.
UX/UI: Come creiamo l’esperienza perfetta? (…unicorni)
63

SMAU Milano 2017
Usabilità
https://www.nngroup.com
Gerarchia


SMAU Milano 2017

UX/UI: Neuroscienza cognitiva for dummies
La User Experience in un decimo di secondo. Good web-design for agencies.

Elaborazione delle
informazioni
MemoriaPercezione
Fattori di disturbo:
ATTENZIONE
STATO EMOTIVO
MOTIVAZIONE
…

UX/UI: Visione

https://uxplanet.org/designing-for-human-attention-ac0abe3d657d
Fovea e visione 
/fò·ve·a/
•1,5mm di larghezza
•direttamente connessa al nervo ottico
•occupa l’1% dell’occhio ma ne assorbe il 50% delle risorse
Visione periferica molto
limitata: ci pensa il cervello


Il nostro cervello riceve 11.000.000 di bit al secondo, ma siamo in
grado di elaborarne circa 60/s.
Ci concentriamo su un
argomento alla volta“
”
Percepiamo più di quanto capiamo

L’utente deve essere gratiﬁcato (felice?)L’utente deve essere in controllo. Si orienta.
65

SMAU Milano 2017
Usabilità
https://www.nngroup.com
Gerarchia Emozione

Minimo comun denominatore
66

SMAU Milano 2017
Ordine
Non vuol dire pixel-perfect ma Priorità. Gerarchia. Mobile ﬁrst.

A cosa serve questa pagina?
C’è una Call to Action principale? Quale?
Lista dei contenuti in ordine di importanza.
LOGO + CLAIM
CTA
Titolo 1
Non usate testi di esempio:
lavorate sempre con i dati
reali.Veramente però!
Titolo 2
Titolo 3
Titolo 4
Titolo 5

SMAU Milano 2017
Mobile ﬁrst: Salva la vita…

68

SMAU Milano 2017
Ordine
Riconoscibilità
Buon design: Quello è il menu - Quello è un bottone - Quel coso si trascina …
CONTRASTO! non colore.

- Qualche volta c’è bisogno di una spiegazione, ma è meglio se non è necessaria.
“
”Massimo Vignelli

SMAU Milano 2017
Sometimes you need an explanation,
but it’s better if it’s not necessary

70

SMAU Milano 2017
Ordine
Riconoscibilità
Personalizzazione
Segmentazione del target ﬁno ad arrivare all’offerta personalizzata, direttamente in mano (nella
casella email, davanti agli occhi sul sito) al possibile cliente.

71

SMAU Milano 2017
Ordine
Riconoscibilità
Typo
emozione, posizionamento, percezione di qualità, usabilità, LEGGIBILITÀ, …
Personalizzazione
Segmentazione del target ﬁno ad arrivare all’offerta personalizzata, direttamente in mano (nella
casella email, davanti agli occhi sul sito) al possibile cliente.

https://www.daltonmaag.com
Bookerly
Leggibilità migliorata del 2%
by Bruno Maag

SMAU Milano 2017
foto: freestock


SMAU Milano 2017
80-100 Caratteri per riga.

- Ci basta 1/10 di secondo per giudicare qualcuno e creare una prima impressione.
It takes just one-tenth of a second
for us to judge someone
and make a first impression.
“
”Willis, J.; Todorov, A.
74

SMAU Milano 2017

?La User Experience in un decimo di secondo. Come/Quando/Perché.

SMAU Milano 2017
Domande?
foto: mali maeder

grazie
Gabriele Parpaiola
@gparpaiola
gabriele.parpaiola@pallino.it 
www.pallino.it
Font library: Avenir Next Condensed
foundry: Linotype
Adobe Garamond Pro
foundry: Adobe
Bookerly
foundry: Dalton Maag
Video cover: the End of August
author: Joshua Davis
joshuadavis.com
vimeo.com/joshuadavis

Ux in un decimo di secondo v1.0

Recommended

Recommended

More Related Content

Similar to Ux in un decimo di secondo v1.0

Similar to Ux in un decimo di secondo v1.0 (20)

Ux in un decimo di secondo v1.0