Qualche riflessione e consiglio per migliorare l'esperienza utente di un sistema digitale.

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/

2. @MARASPIN

4. Halo Effect
4

5. USER EXPERIENCE

6. GOLDEN PATH

7. DIRTY WORKS

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

13. LA FOVEA

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

15. STIMOLAZIONE DA MOVIMENTO

16. Ryanair usa le animazioni, il movimento, per portare la nostra attenzione su parti
periferiche delle schermate
(video nella presentazione dal vivo)

18. RICOSTRUIRE L'AMBIENTE

19. Gerarchie Visuali
19
Source: Designing with the mind in mind – J. Johnson

20. 20
Self-organizing Tendency

21. Gestalt
21
Self-organizing Tendency

22. Principio di prossimità
22
Source: http://www.codeproject.com/Articles/450102/Design-and-the-Gestalt-Principle-of-Proximity

29. CRUDWARE

33. Il numero magico di Miller
http://www.onlinepsychologydegree.info/influential-psychological-experiments/

35. https://www.lingscars.com

36. PERCHÈ GLI STANDARD?

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)

38. 38
Chi la (ri)conosce?

39. Legge di Fitts
39

40. 40
A
W
Legge di Fitts

41. AFFORDANCE(S)

42. 42
Fonte: Information Architecture Second Edition – Wodtke & Govella

43. 43
Fonte: Information Architecture Second Edition – Wodtke & Govella

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

47. ASPETTATIVE

48. PRESTAZIONI
VS
TEMPI DI RISPOSTA

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

52. Per approfondire…
52

53. Per approfondire…
53

54. Per approfondire…
54

55. ORGANIZZIAMO
CORSI & WORKSHOP
PER LE AZIENDE!

56. http://www.mvlabs.it/

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

58. Steve Maraspin
@maraspin