SlideShare a Scribd company logo
Principi di Interaction Design
migliorare la UX di un Sistema Digitale
DITEDI - Tavagnacco (UD), Italy – 23/01/2018
CC BY-NC-SA 3.0 - http://creativecommons.org/licenses/by-nc-sa/3.0/
@MARASPIN
Halo Effect
4
USER EXPERIENCE
GOLDEN PATH
DIRTY WORKS
Cerchiamo "Milato", un luogo che non esiste su booking.com…
(video nella presentazione dal vivo)
Notiamo che:
- prima ancora di cominciare la ricerca, il sistema ci fa capire che la località che
andiamo a cercare non è presente tra le opzioni disponibili, e ci mostra alternative
plausibili
- se continuiamo con la nostra ricerca (scrivendo Milato anziché Milano), il
messaggio "d'errore" che ci si presenta davanti non presenta parole o espressioni
connotate negativamente, come: errore, impossibile, non esiste, etc. Neppure il
colore rosso (che mette l'utente in uno stato di agitazione) è impiegato. Il
messaggio è rassicurante e possibilista; suggerisce alternative, anziché enfatizzare
sulla condizione d'errore che si è venuta a creare. Questo cambio di prospettiva è
fondamentale, perché predispone l'utente a continuare l'esperienza sul sito,
anziché – frustrato – avere la tentazione di abbandonarlo
- Il colore rosso è invece utilizzato per indicare la scarsità (rif. Robert Cialdini -
Influence) delle risorse e porre l'utente in uno stato di ansia. L'intento è quello di
spingerlo a fare una prenotazione, prima possibile, su una delle strutture ancora
disponibili
NB booking.com potrebbe già essersi ulteriormente evoluto nel frattempo :-)
Il colore rosso è
utilizzato per stimolare
un senso di ansia e
"pericolo" nell'utente
Tentiamo di fare una ricarica sul sito vodafone.it
(video nella presentazione dal vivo)
Notiamo che:
- una volta selezionato il numero che intendiamo ricaricare, l'importo
della ricarica e il metodo di pagamento, se clicchiamo sul tasto
"Ricarica" non otteniamo nessun feedback
- dato che non abbiamo applicato la spunta sul tasto "Accetto le
condizioni del servizio" la nostra azione non ha gli effetti desiderati
Durante alcuni test utente ci siamo accorti che:
- non essendoci feedback, l'utente pensava che il proprio click non
fosse stato preso in considerazione dal sistema
- l'utente non notava il messaggio di errore (poiché troppo distante
dal punto sullo schermo verso cui dedicava la propria attenzione)
Messaggio troppo
lontano da dove
l'utente sta rivolgendo
la propria attenzione
LA FOVEA
Ricettori Visivi
14
Source: Visual Thinking for Design – Colin Ware
Parafovea: più del 50% delle
nostre capacità ricettive sono
racchiuse in meno del 5% del
nostro campo visuale
Campo visuale periferico:
riusciamo a notare a
malapena un oggetto grande
come una mela alla distanza
di un nostro braccio
STIMOLAZIONE DA MOVIMENTO
Ryanair usa le animazioni, il movimento, per portare la nostra attenzione su parti
periferiche delle schermate
(video nella presentazione dal vivo)
RICOSTRUIRE L'AMBIENTE
Gerarchie Visuali
19
Source: Designing with the mind in mind – J. Johnson
20
Self-organizing Tendency
Gestalt
21
Self-organizing Tendency
Principio di prossimità
22
Source: http://www.codeproject.com/Articles/450102/Design-and-the-Gestalt-Principle-of-Proximity
CRUDWARE
Il numero magico di Miller
http://www.onlinepsychologydegree.info/influential-psychological-experiments/
https://www.lingscars.com
PERCHÈ GLI STANDARD?
Sul sito di Virgin America erano stati rivisti – a fini estetici - controlli standard
(es. select box); problemi di usabilità! (video nella presentazione dal vivo)
38
Chi la (ri)conosce?
Legge di Fitts
39
40
A
W
Legge di Fitts
AFFORDANCE(S)
42
Fonte: Information Architecture Second Edition – Wodtke & Govella
43
Fonte: Information Architecture Second Edition – Wodtke & Govella
Tempi di risposta accettabili
• 140 millisecondi tra un'azione e il
relativo feedback
• 1 secondo prima che l'utente inizi a
chiedersi se tutto ok
• 700 millisecondi sono il tempo
minimo necessario affinché l'utente
sia in grado di compiere un'azione
dopo aver percepito uno stimolo
46
ASPETTATIVE
PRESTAZIONI
VS
TEMPI DI RISPOSTA
Cose utili da tenere a mente…
1. Considerare le caratteristiche e le
euristiche umane
2. Essere attenti nei confronti delle
emozioni (del pericolo soprattutto)
3. Chiedersi quali e quante informazioni
sono utili o necessarie su ogni schermata
4. Rispettare gli standard
5. Tenere in considerazione i tempi di
risposta attesi e/o necessari
Cose utili da tenere a mente…
1. Considerare le caratteristiche e le
euristiche umane
2. Essere attenti nei confronti delle
emozioni (del pericolo soprattutto)
3. Chiedersi quali e quante informazioni
sono utili o necessarie su ogni schermata
4. Rispettare gli standard
5. Tenere in considerazione i tempi di
risposta attesi e/o necessari
6. Stare attenti con più di 5 elementi
Grazie per l'attenzione
Steve Maraspin
@maraspin
Per approfondire…
52
Per approfondire…
53
Per approfondire…
54
ORGANIZZIAMO
CORSI & WORKSHOP
PER LE AZIENDE!
http://www.mvlabs.it/
Photo Credits
• http://www.flickr.com/photos/quinnanya/2904259360/
• http://www.flickr.com/photos/justinhee/5672674318/
• http://www.flickr.com/photos/katerha/5249701882/
• https://www.flickr.com/photos/flickrnyk/7438899878
• http://www.flickr.com/photos/63308489@N03/5758158093/
• http://www.flickr.com/photos/gforsythe/8422224296/
• http://www.flickr.com/photos/stefanvds/3107857585/
• http://www.flickr.com/photos/albertogp123/5843577306/
• http://www.flickr.com/photos/renawgraphy/4213430007/
• http://www.flickr.com/photos/dtanist/10619591933/
• https://www.flickr.com/photos/fragglerawker/2350554969
• http://www.flickr.com/photos/mbk/5528785022/
• https://www.flickr.com/photos/tambako/14278357096
• http://www.flickr.com/photos/attilaacs/3482373097/
• https://www.flickr.com/photos/edrost88/11282516873
• https://www.flickr.com/photos/goarmyphotos/8355744257
• https://www.flickr.com/photos/caseyflorig/15250979855
• http://www.flickr.com/photos/crdot/5507833060/
• https://www.flickr.com/photos/liju-james/4307814139
• http://www.flickr.com/photos/isabadell/8230261556/
• http://www.flickr.com/photos/iamthestig2/6748228667/
• http://www.flickr.com/photos/west_point/8075161774/
• http://www.flickr.com/photos/tomconger/5513241616/
• http://www.flickr.com/photos/downingstreet/3701196400/
• http://www.flickr.com/photos/greghickman/4306344519/
• http://www.flickr.com/photos/vthokiefans/3293089737/
• http://www.flickr.com/photos/maxbisschop/5584314953/
• http://www.flickr.com/photos/patrickmcknightlaw/8136892023/
• https://www.flickr.com/photos/brianscott/130226867
57
Steve Maraspin
@maraspin

More Related Content

Similar to Principi di Interaction Design

Slides decathlon +plus progetto ergonomia cognitiva
Slides decathlon +plus progetto ergonomia cognitivaSlides decathlon +plus progetto ergonomia cognitiva
Slides decathlon +plus progetto ergonomia cognitiva
Riccardo Carlessi
 
Le performance
Le performanceLe performance
Le performance
Simone Viani
 
Ux for nerds
Ux for nerdsUx for nerds
Ux for nerds
Federico Pizzutto
 
Come rilasciare App di Qualità
Come rilasciare App di QualitàCome rilasciare App di Qualità
Come rilasciare App di Qualità
Luca Manara
 
Software ...e tutto ciò che comporta
Software ...e tutto ciò che comportaSoftware ...e tutto ciò che comporta
Software ...e tutto ciò che comporta
Alberto Brandolini
 
Dichiarazione di accessibilità: come fare?
Dichiarazione di accessibilità: come fare?Dichiarazione di accessibilità: come fare?
Dichiarazione di accessibilità: come fare?
Jacopo Deyla
 
wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )Acrmnet s.r.l.
 
Dall'F-Factor alla gestione dei touchpoint
Dall'F-Factor alla gestione dei touchpointDall'F-Factor alla gestione dei touchpoint
Dall'F-Factor alla gestione dei touchpoint
Gazduna Project
 
Conversational Marketing: una strategia integrata per dialogare con il consum...
Conversational Marketing: una strategia integrata per dialogare con il consum...Conversational Marketing: una strategia integrata per dialogare con il consum...
Conversational Marketing: una strategia integrata per dialogare con il consum...
Reputation Manager
 
Per un economia dell'open source
Per un economia dell'open sourcePer un economia dell'open source
Per un economia dell'open source
Carlo Vaccari
 
lezione interaction design 11 marzo 2009
lezione interaction design 11 marzo 2009lezione interaction design 11 marzo 2009
lezione interaction design 11 marzo 2009
Marco Loregian
 
3. Progettare per l’utente
3. Progettare per l’utente3. Progettare per l’utente
3. Progettare per l’utente
Roberto Polillo
 
Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...
Luca Mascaro
 
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
Alessio Garbin
 
Lezione ID 2010 - 2 / 3
Lezione ID 2010 - 2 / 3Lezione ID 2010 - 2 / 3
Lezione ID 2010 - 2 / 3Marco Loregian
 
Seeweb - SMAU Padova 2017
Seeweb - SMAU Padova 2017Seeweb - SMAU Padova 2017
Seeweb - SMAU Padova 2017
SMAU
 
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
seeweb
 
come funzionano le casse automatiche dell'Ipercoop?
come funzionano le casse automatiche dell'Ipercoop?come funzionano le casse automatiche dell'Ipercoop?
come funzionano le casse automatiche dell'Ipercoop?
Lorena Priolo
 
Figure dal libro Facile da Usare
Figure dal libro Facile da UsareFigure dal libro Facile da Usare
Figure dal libro Facile da Usare
Roberto Polillo
 

Similar to Principi di Interaction Design (20)

Slides decathlon +plus progetto ergonomia cognitiva
Slides decathlon +plus progetto ergonomia cognitivaSlides decathlon +plus progetto ergonomia cognitiva
Slides decathlon +plus progetto ergonomia cognitiva
 
Le performance
Le performanceLe performance
Le performance
 
Ux for nerds
Ux for nerdsUx for nerds
Ux for nerds
 
Come rilasciare App di Qualità
Come rilasciare App di QualitàCome rilasciare App di Qualità
Come rilasciare App di Qualità
 
Software ...e tutto ciò che comporta
Software ...e tutto ciò che comportaSoftware ...e tutto ciò che comporta
Software ...e tutto ciò che comporta
 
Dichiarazione di accessibilità: come fare?
Dichiarazione di accessibilità: come fare?Dichiarazione di accessibilità: come fare?
Dichiarazione di accessibilità: come fare?
 
wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )wow factor apps and ux design techniques ( for i phone and ipad )
wow factor apps and ux design techniques ( for i phone and ipad )
 
Dall'F-Factor alla gestione dei touchpoint
Dall'F-Factor alla gestione dei touchpointDall'F-Factor alla gestione dei touchpoint
Dall'F-Factor alla gestione dei touchpoint
 
Conversational Marketing: una strategia integrata per dialogare con il consum...
Conversational Marketing: una strategia integrata per dialogare con il consum...Conversational Marketing: una strategia integrata per dialogare con il consum...
Conversational Marketing: una strategia integrata per dialogare con il consum...
 
Per un economia dell'open source
Per un economia dell'open sourcePer un economia dell'open source
Per un economia dell'open source
 
lezione interaction design 11 marzo 2009
lezione interaction design 11 marzo 2009lezione interaction design 11 marzo 2009
lezione interaction design 11 marzo 2009
 
3. Progettare per l’utente
3. Progettare per l’utente3. Progettare per l’utente
3. Progettare per l’utente
 
Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...Users on social networks: Cinque scoperte fatte durante le attività user cent...
Users on social networks: Cinque scoperte fatte durante le attività user cent...
 
Agile software lifecycle
Agile software lifecycleAgile software lifecycle
Agile software lifecycle
 
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
Lezioni Video Online. Parte 1/5. Statistiche, luoghi e modalità di consumo de...
 
Lezione ID 2010 - 2 / 3
Lezione ID 2010 - 2 / 3Lezione ID 2010 - 2 / 3
Lezione ID 2010 - 2 / 3
 
Seeweb - SMAU Padova 2017
Seeweb - SMAU Padova 2017Seeweb - SMAU Padova 2017
Seeweb - SMAU Padova 2017
 
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
Il mercato Cloud oggi: trend e occasioni di business, una grande opportunità ...
 
come funzionano le casse automatiche dell'Ipercoop?
come funzionano le casse automatiche dell'Ipercoop?come funzionano le casse automatiche dell'Ipercoop?
come funzionano le casse automatiche dell'Ipercoop?
 
Figure dal libro Facile da Usare
Figure dal libro Facile da UsareFigure dal libro Facile da Usare
Figure dal libro Facile da Usare
 

More from Steve Maraspin

Architetture a Microservizi (con Kubernetes)
Architetture a Microservizi (con Kubernetes)Architetture a Microservizi (con Kubernetes)
Architetture a Microservizi (con Kubernetes)
Steve Maraspin
 
How Agile changed Software Development
How Agile changed Software DevelopmentHow Agile changed Software Development
How Agile changed Software Development
Steve Maraspin
 
Customer Journey Mapping Workshop
Customer Journey Mapping WorkshopCustomer Journey Mapping Workshop
Customer Journey Mapping Workshop
Steve Maraspin
 
A (really) Quick Introduction to Event Storming
A (really) Quick Introduction to Event StormingA (really) Quick Introduction to Event Storming
A (really) Quick Introduction to Event Storming
Steve Maraspin
 
Meet a parallel, asynchronous PHP world
Meet a parallel, asynchronous PHP worldMeet a parallel, asynchronous PHP world
Meet a parallel, asynchronous PHP world
Steve Maraspin
 
Don't Make Me Think - There's no need (2014)
Don't Make Me Think - There's no need (2014)Don't Make Me Think - There's no need (2014)
Don't Make Me Think - There's no need (2014)
Steve Maraspin
 
The Metaphor Fallacy (in Digital Product Development)
The Metaphor Fallacy (in Digital Product Development)The Metaphor Fallacy (in Digital Product Development)
The Metaphor Fallacy (in Digital Product Development)
Steve Maraspin
 
La filosofia Lean nello sviluppo di prodotti digitali
La filosofia Lean nello sviluppo di prodotti digitaliLa filosofia Lean nello sviluppo di prodotti digitali
La filosofia Lean nello sviluppo di prodotti digitali
Steve Maraspin
 
Error Reporting in ZF2: form messages, custom error pages, logging
Error Reporting in ZF2: form messages, custom error pages, loggingError Reporting in ZF2: form messages, custom error pages, logging
Error Reporting in ZF2: form messages, custom error pages, logging
Steve Maraspin
 
Outcome not Output: A Story of Lean UX Adoption
Outcome not Output: A Story of Lean UX AdoptionOutcome not Output: A Story of Lean UX Adoption
Outcome not Output: A Story of Lean UX Adoption
Steve Maraspin
 
Don't Make me Think - There's no Need
Don't Make me Think - There's no NeedDon't Make me Think - There's no Need
Don't Make me Think - There's no Need
Steve Maraspin
 
ZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of itZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of it
Steve Maraspin
 
Fare con Zend Framework 2 ciò che facevo con ZF1
Fare con Zend Framework 2 ciò che facevo con ZF1Fare con Zend Framework 2 ciò che facevo con ZF1
Fare con Zend Framework 2 ciò che facevo con ZF1
Steve Maraspin
 
NoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
NoSQL Data Stores: Introduzione alle Basi di Dati Non RelazionaliNoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
NoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
Steve Maraspin
 
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDBPolyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
Steve Maraspin
 
NoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
NoSQL, No Worries: Vecchi Problemi, Nuove SoluzioniNoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
NoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
Steve Maraspin
 
Permettere al cliente di apprezzare l'approccio agile
Permettere al cliente di apprezzare l'approccio agilePermettere al cliente di apprezzare l'approccio agile
Permettere al cliente di apprezzare l'approccio agile
Steve Maraspin
 
Let customers appreciate the agile workflow
Let customers appreciate the agile workflowLet customers appreciate the agile workflow
Let customers appreciate the agile workflow
Steve Maraspin
 
Esempio di architettura distribuita basata su PHP, CouchDB e Mobile
Esempio di architettura distribuita basata su PHP, CouchDB e MobileEsempio di architettura distribuita basata su PHP, CouchDB e Mobile
Esempio di architettura distribuita basata su PHP, CouchDB e Mobile
Steve Maraspin
 
Striving towards better PHP code
Striving towards better PHP codeStriving towards better PHP code
Striving towards better PHP code
Steve Maraspin
 

More from Steve Maraspin (20)

Architetture a Microservizi (con Kubernetes)
Architetture a Microservizi (con Kubernetes)Architetture a Microservizi (con Kubernetes)
Architetture a Microservizi (con Kubernetes)
 
How Agile changed Software Development
How Agile changed Software DevelopmentHow Agile changed Software Development
How Agile changed Software Development
 
Customer Journey Mapping Workshop
Customer Journey Mapping WorkshopCustomer Journey Mapping Workshop
Customer Journey Mapping Workshop
 
A (really) Quick Introduction to Event Storming
A (really) Quick Introduction to Event StormingA (really) Quick Introduction to Event Storming
A (really) Quick Introduction to Event Storming
 
Meet a parallel, asynchronous PHP world
Meet a parallel, asynchronous PHP worldMeet a parallel, asynchronous PHP world
Meet a parallel, asynchronous PHP world
 
Don't Make Me Think - There's no need (2014)
Don't Make Me Think - There's no need (2014)Don't Make Me Think - There's no need (2014)
Don't Make Me Think - There's no need (2014)
 
The Metaphor Fallacy (in Digital Product Development)
The Metaphor Fallacy (in Digital Product Development)The Metaphor Fallacy (in Digital Product Development)
The Metaphor Fallacy (in Digital Product Development)
 
La filosofia Lean nello sviluppo di prodotti digitali
La filosofia Lean nello sviluppo di prodotti digitaliLa filosofia Lean nello sviluppo di prodotti digitali
La filosofia Lean nello sviluppo di prodotti digitali
 
Error Reporting in ZF2: form messages, custom error pages, logging
Error Reporting in ZF2: form messages, custom error pages, loggingError Reporting in ZF2: form messages, custom error pages, logging
Error Reporting in ZF2: form messages, custom error pages, logging
 
Outcome not Output: A Story of Lean UX Adoption
Outcome not Output: A Story of Lean UX AdoptionOutcome not Output: A Story of Lean UX Adoption
Outcome not Output: A Story of Lean UX Adoption
 
Don't Make me Think - There's no Need
Don't Make me Think - There's no NeedDon't Make me Think - There's no Need
Don't Make me Think - There's no Need
 
ZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of itZF2 Modular Architecture - Taking advantage of it
ZF2 Modular Architecture - Taking advantage of it
 
Fare con Zend Framework 2 ciò che facevo con ZF1
Fare con Zend Framework 2 ciò che facevo con ZF1Fare con Zend Framework 2 ciò che facevo con ZF1
Fare con Zend Framework 2 ciò che facevo con ZF1
 
NoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
NoSQL Data Stores: Introduzione alle Basi di Dati Non RelazionaliNoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
NoSQL Data Stores: Introduzione alle Basi di Dati Non Relazionali
 
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDBPolyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
Polyglot Persistance con PostgreSQL, CouchDB, MongoDB, Redis e OrientDB
 
NoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
NoSQL, No Worries: Vecchi Problemi, Nuove SoluzioniNoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
NoSQL, No Worries: Vecchi Problemi, Nuove Soluzioni
 
Permettere al cliente di apprezzare l'approccio agile
Permettere al cliente di apprezzare l'approccio agilePermettere al cliente di apprezzare l'approccio agile
Permettere al cliente di apprezzare l'approccio agile
 
Let customers appreciate the agile workflow
Let customers appreciate the agile workflowLet customers appreciate the agile workflow
Let customers appreciate the agile workflow
 
Esempio di architettura distribuita basata su PHP, CouchDB e Mobile
Esempio di architettura distribuita basata su PHP, CouchDB e MobileEsempio di architettura distribuita basata su PHP, CouchDB e Mobile
Esempio di architettura distribuita basata su PHP, CouchDB e Mobile
 
Striving towards better PHP code
Striving towards better PHP codeStriving towards better PHP code
Striving towards better PHP code
 

Principi di Interaction Design

  • 1. Principi di Interaction Design migliorare la UX di un Sistema Digitale DITEDI - Tavagnacco (UD), Italy – 23/01/2018 CC BY-NC-SA 3.0 - http://creativecommons.org/licenses/by-nc-sa/3.0/
  • 3.
  • 8.
  • 9. Cerchiamo "Milato", un luogo che non esiste su booking.com… (video nella presentazione dal vivo) Notiamo che: - prima ancora di cominciare la ricerca, il sistema ci fa capire che la località che andiamo a cercare non è presente tra le opzioni disponibili, e ci mostra alternative plausibili - se continuiamo con la nostra ricerca (scrivendo Milato anziché Milano), il messaggio "d'errore" che ci si presenta davanti non presenta parole o espressioni connotate negativamente, come: errore, impossibile, non esiste, etc. Neppure il colore rosso (che mette l'utente in uno stato di agitazione) è impiegato. Il messaggio è rassicurante e possibilista; suggerisce alternative, anziché enfatizzare sulla condizione d'errore che si è venuta a creare. Questo cambio di prospettiva è fondamentale, perché predispone l'utente a continuare l'esperienza sul sito, anziché – frustrato – avere la tentazione di abbandonarlo - Il colore rosso è invece utilizzato per indicare la scarsità (rif. Robert Cialdini - Influence) delle risorse e porre l'utente in uno stato di ansia. L'intento è quello di spingerlo a fare una prenotazione, prima possibile, su una delle strutture ancora disponibili NB booking.com potrebbe già essersi ulteriormente evoluto nel frattempo :-)
  • 10. Il colore rosso è utilizzato per stimolare un senso di ansia e "pericolo" nell'utente
  • 11. Tentiamo di fare una ricarica sul sito vodafone.it (video nella presentazione dal vivo) Notiamo che: - una volta selezionato il numero che intendiamo ricaricare, l'importo della ricarica e il metodo di pagamento, se clicchiamo sul tasto "Ricarica" non otteniamo nessun feedback - dato che non abbiamo applicato la spunta sul tasto "Accetto le condizioni del servizio" la nostra azione non ha gli effetti desiderati Durante alcuni test utente ci siamo accorti che: - non essendoci feedback, l'utente pensava che il proprio click non fosse stato preso in considerazione dal sistema - l'utente non notava il messaggio di errore (poiché troppo distante dal punto sullo schermo verso cui dedicava la propria attenzione)
  • 12. Messaggio troppo lontano da dove l'utente sta rivolgendo la propria attenzione
  • 14. Ricettori Visivi 14 Source: Visual Thinking for Design – Colin Ware Parafovea: più del 50% delle nostre capacità ricettive sono racchiuse in meno del 5% del nostro campo visuale Campo visuale periferico: riusciamo a notare a malapena un oggetto grande come una mela alla distanza di un nostro braccio
  • 16. Ryanair usa le animazioni, il movimento, per portare la nostra attenzione su parti periferiche delle schermate (video nella presentazione dal vivo)
  • 17.
  • 19. Gerarchie Visuali 19 Source: Designing with the mind in mind – J. Johnson
  • 22. Principio di prossimità 22 Source: http://www.codeproject.com/Articles/450102/Design-and-the-Gestalt-Principle-of-Proximity
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 30.
  • 31.
  • 32.
  • 33. Il numero magico di Miller http://www.onlinepsychologydegree.info/influential-psychological-experiments/
  • 34.
  • 37. Sul sito di Virgin America erano stati rivisti – a fini estetici - controlli standard (es. select box); problemi di usabilità! (video nella presentazione dal vivo)
  • 42. 42 Fonte: Information Architecture Second Edition – Wodtke & Govella
  • 43. 43 Fonte: Information Architecture Second Edition – Wodtke & Govella
  • 44.
  • 45.
  • 46. Tempi di risposta accettabili • 140 millisecondi tra un'azione e il relativo feedback • 1 secondo prima che l'utente inizi a chiedersi se tutto ok • 700 millisecondi sono il tempo minimo necessario affinché l'utente sia in grado di compiere un'azione dopo aver percepito uno stimolo 46
  • 49. Cose utili da tenere a mente… 1. Considerare le caratteristiche e le euristiche umane 2. Essere attenti nei confronti delle emozioni (del pericolo soprattutto) 3. Chiedersi quali e quante informazioni sono utili o necessarie su ogni schermata 4. Rispettare gli standard 5. Tenere in considerazione i tempi di risposta attesi e/o necessari
  • 50. Cose utili da tenere a mente… 1. Considerare le caratteristiche e le euristiche umane 2. Essere attenti nei confronti delle emozioni (del pericolo soprattutto) 3. Chiedersi quali e quante informazioni sono utili o necessarie su ogni schermata 4. Rispettare gli standard 5. Tenere in considerazione i tempi di risposta attesi e/o necessari 6. Stare attenti con più di 5 elementi
  • 51. Grazie per l'attenzione Steve Maraspin @maraspin
  • 57. Photo Credits • http://www.flickr.com/photos/quinnanya/2904259360/ • http://www.flickr.com/photos/justinhee/5672674318/ • http://www.flickr.com/photos/katerha/5249701882/ • https://www.flickr.com/photos/flickrnyk/7438899878 • http://www.flickr.com/photos/63308489@N03/5758158093/ • http://www.flickr.com/photos/gforsythe/8422224296/ • http://www.flickr.com/photos/stefanvds/3107857585/ • http://www.flickr.com/photos/albertogp123/5843577306/ • http://www.flickr.com/photos/renawgraphy/4213430007/ • http://www.flickr.com/photos/dtanist/10619591933/ • https://www.flickr.com/photos/fragglerawker/2350554969 • http://www.flickr.com/photos/mbk/5528785022/ • https://www.flickr.com/photos/tambako/14278357096 • http://www.flickr.com/photos/attilaacs/3482373097/ • https://www.flickr.com/photos/edrost88/11282516873 • https://www.flickr.com/photos/goarmyphotos/8355744257 • https://www.flickr.com/photos/caseyflorig/15250979855 • http://www.flickr.com/photos/crdot/5507833060/ • https://www.flickr.com/photos/liju-james/4307814139 • http://www.flickr.com/photos/isabadell/8230261556/ • http://www.flickr.com/photos/iamthestig2/6748228667/ • http://www.flickr.com/photos/west_point/8075161774/ • http://www.flickr.com/photos/tomconger/5513241616/ • http://www.flickr.com/photos/downingstreet/3701196400/ • http://www.flickr.com/photos/greghickman/4306344519/ • http://www.flickr.com/photos/vthokiefans/3293089737/ • http://www.flickr.com/photos/maxbisschop/5584314953/ • http://www.flickr.com/photos/patrickmcknightlaw/8136892023/ • https://www.flickr.com/photos/brianscott/130226867 57