Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 58

Principi di Interaction Design

2

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Principi di Interaction Design

  1. 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. 2. @MARASPIN
  3. 3. Halo Effect 4
  4. 4. USER EXPERIENCE
  5. 5. GOLDEN PATH
  6. 6. DIRTY WORKS
  7. 7. 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 :-)
  8. 8. Il colore rosso è utilizzato per stimolare un senso di ansia e "pericolo" nell'utente
  9. 9. 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)
  10. 10. Messaggio troppo lontano da dove l'utente sta rivolgendo la propria attenzione
  11. 11. LA FOVEA
  12. 12. 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
  13. 13. STIMOLAZIONE DA MOVIMENTO
  14. 14. Ryanair usa le animazioni, il movimento, per portare la nostra attenzione su parti periferiche delle schermate (video nella presentazione dal vivo)
  15. 15. RICOSTRUIRE L'AMBIENTE
  16. 16. Gerarchie Visuali 19 Source: Designing with the mind in mind – J. Johnson
  17. 17. 20 Self-organizing Tendency
  18. 18. Gestalt 21 Self-organizing Tendency
  19. 19. Principio di prossimità 22 Source: http://www.codeproject.com/Articles/450102/Design-and-the-Gestalt-Principle-of-Proximity
  20. 20. CRUDWARE
  21. 21. Il numero magico di Miller http://www.onlinepsychologydegree.info/influential-psychological-experiments/
  22. 22. https://www.lingscars.com
  23. 23. PERCHÈ GLI STANDARD?
  24. 24. Sul sito di Virgin America erano stati rivisti – a fini estetici - controlli standard (es. select box); problemi di usabilità! (video nella presentazione dal vivo)
  25. 25. 38 Chi la (ri)conosce?
  26. 26. Legge di Fitts 39
  27. 27. 40 A W Legge di Fitts
  28. 28. AFFORDANCE(S)
  29. 29. 42 Fonte: Information Architecture Second Edition – Wodtke & Govella
  30. 30. 43 Fonte: Information Architecture Second Edition – Wodtke & Govella
  31. 31. 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
  32. 32. ASPETTATIVE
  33. 33. PRESTAZIONI VS TEMPI DI RISPOSTA
  34. 34. 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
  35. 35. 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
  36. 36. Grazie per l'attenzione Steve Maraspin @maraspin
  37. 37. Per approfondire… 52
  38. 38. Per approfondire… 53
  39. 39. Per approfondire… 54
  40. 40. ORGANIZZIAMO CORSI & WORKSHOP PER LE AZIENDE!
  41. 41. http://www.mvlabs.it/
  42. 42. 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
  43. 43. Steve Maraspin @maraspin

×