Successfully reported this slideshow.

iLook ZUI, congresso SIE 2010

1,890 views

Published on

We present a Zooming User Interface which embodies some focus+context features. The design process is also discussed. The presentation is related to a paper selected for Italian Ergonomics Society Congress, Rome 26-29 October 2010.

Published in: Design, Business, Technology
  • Be the first to comment

iLook ZUI, congresso SIE 2010

  1. 1. iLook: una Zooming User Interface per gestire gli elettrodomestici in modalità touch e realtà aumentata. Andrea Alessandrini* , Maurizio Caporali*°, Marco Carnesecchi*, Monica Milani**, Antonio Rizzo*° * ** °
  2. 2. Il brief di Design
  3. 3. Il brief di Design “Sviluppare servizi che diano all'utente finale un inequivocabile valore aggiunto ed arricchiscano l’esperienza d’uso degli elettrodomestici in quattro differenti ambiti”
  4. 4. Il brief di Design Community e Networking “Sviluppare servizi che diano all'utente finale un inequivocabile valore aggiunto ed arricchiscano l’esperienza d’uso degli elettrodomestici in quattro differenti ambiti”
  5. 5. Il brief di Design Community e Controllo Networking Remoto “Sviluppare servizi che diano all'utente finale un inequivocabile valore aggiunto ed arricchiscano l’esperienza d’uso degli elettrodomestici in quattro differenti ambiti”
  6. 6. Il brief di Design Community e Controllo Networking Remoto “Sviluppare servizi che diano all'utente finale un inequivocabile valore aggiunto ed arricchiscano l’esperienza d’uso degli elettrodomestici in quattro differenti ambiti” Economia ed Ecologia
  7. 7. Il brief di Design Community e Controllo Networking Remoto “Sviluppare servizi che diano all'utente finale un inequivocabile valore aggiunto ed arricchiscano l’esperienza d’uso degli elettrodomestici in quattro differenti ambiti” Economia ed Assistenza e Ecologia Manutenzione
  8. 8. Participatory design Process • Future Workshops • Concept Generation and evaluation • UI Design Mock-up • Augmented Reality Mock-up
  9. 9. Future Workshops
  10. 10. Future Workshops Stakeholders
  11. 11. Future Workshops Product Stakeholders Engineers Marketing UI Designers
  12. 12. Future Workshops Product Stakeholders Engineers Marketing UI Designers Utenti
  13. 13. Future Workshops Product Stakeholders Engineers Marketing UI Designers Utenti esperti Professional Utenti consumers Utenti finali
  14. 14. Future Workshops Product Stakeholders Engineers Marketing UI Designers ne rs e sig n D ac tio Int er Utenti esperti Professional Utenti consumers Utenti finali
  15. 15. Concept generation: Metodologie di lavoro
  16. 16. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7]
  17. 17. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7] •Scenario based innovations
  18. 18. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7] •Scenario based innovations •Focus sull’attività non sul prodotto
  19. 19. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7] •Scenario based innovations •Focus sull’attività non sul prodotto •Compiti per casa: Portare i concept nel proprio vissuto quotidiano.
  20. 20. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7] •Scenario based innovations •Focus sull’attività non sul prodotto •Compiti per casa: Portare i concept nel proprio vissuto quotidiano. •Cultural probes [4]
  21. 21. Concept generation: Metodologie di lavoro •Prima sessione: Mix di background e ruoli [7] •Scenario based innovations •Focus sull’attività non sul prodotto •Compiti per casa: Portare i concept nel proprio vissuto quotidiano. •Cultural probes [4] •Seconda sessione valutazione situata
  22. 22. Storyboard: Eldo Jones
  23. 23. Storyboard: L’orchestra energetica
  24. 24. Punti chiave
  25. 25. Punti chiave • Oltre 30 storyboard che coprivano uno o due ambiti, da aggregare
  26. 26. Punti chiave • Oltre 30 storyboard che coprivano uno o due ambiti, da aggregare • Distribuzione asimmetrica tra i quattro ambiti. (Risparmio vs community)
  27. 27. Punti chiave • Oltre 30 storyboard che coprivano uno o due ambiti, da aggregare • Distribuzione asimmetrica tra i quattro ambiti. (Risparmio vs community) • Un’unica UI vs tanti tasks differenti
  28. 28. Punti chiave • Oltre 30 storyboard che coprivano uno o due ambiti, da aggregare • Distribuzione asimmetrica tra i quattro ambiti. (Risparmio vs community) • Un’unica UI vs tanti tasks differenti • Progressive disclosure più che controllo centralizzato
  29. 29. Punti chiave • Oltre 30 storyboard che coprivano uno o due ambiti, da aggregare • Distribuzione asimmetrica tra i quattro ambiti. (Risparmio vs community) • Un’unica UI vs tanti tasks differenti • Progressive disclosure più che controllo centralizzato • Come organizzare le funzionalità descritte dagli utenti?
  30. 30. iLook e lo spazio fisico
  31. 31. iLook e lo spazio fisico • a) INSIDE: componenti strutturali, accessori, funzionalità e prestazioni del singolo elettrodomestico;
  32. 32. iLook e lo spazio fisico • a) INSIDE: componenti strutturali, accessori, funzionalità e prestazioni del singolo elettrodomestico; • b) ELDO: consumi energetici, diagnostica remota ed efficienza del singolo elettrodomestico;
  33. 33. iLook e lo spazio fisico • a) INSIDE: componenti strutturali, accessori, funzionalità e prestazioni del singolo elettrodomestico; • b) ELDO: consumi energetici, diagnostica remota ed efficienza del singolo elettrodomestico; • c) HOME: consumi energetici della casa, timeline d’uso degli elettrodomestici;
  34. 34. iLook e lo spazio fisico • a) INSIDE: componenti strutturali, accessori, funzionalità e prestazioni del singolo elettrodomestico; • b) ELDO: consumi energetici, diagnostica remota ed efficienza del singolo elettrodomestico; • c) HOME: consumi energetici della casa, timeline d’uso degli elettrodomestici; • d) INDESIT: richieste di assistenza, ordini di pezzi di ricambio, e offerte commerciali;
  35. 35. iLook e lo spazio fisico • a) INSIDE: componenti strutturali, accessori, funzionalità e prestazioni del singolo elettrodomestico; • b) ELDO: consumi energetici, diagnostica remota ed efficienza del singolo elettrodomestico; • c) HOME: consumi energetici della casa, timeline d’uso degli elettrodomestici; • d) INDESIT: richieste di assistenza, ordini di pezzi di ricambio, e offerte commerciali; • e) WORLD: consigli da una community in rete su come cucinare, giocare, risparmiare, cooperare, curare, lavare con il proprio elettrodomestico.
  36. 36. Quale UI per i 5 livelli?
  37. 37. Quale UI per i 5 livelli? • Una sfida di Design & Usabilità: dare all’utente le chiavi del sitema, rendere immediato il passaggio da un’attività ad un’altra
  38. 38. Quale UI per i 5 livelli? • Una sfida di Design & Usabilità: dare all’utente le chiavi del sitema, rendere immediato il passaggio da un’attività ad un’altra • Una sfida di Sensemaking: Faciliatare il processo iterativo e complesso di information retrieval, organizzazione dei dati and ridefinizione del task [5]
  39. 39. Quale UI per i 5 livelli? • Una sfida di Design & Usabilità: dare all’utente le chiavi del sitema, rendere immediato il passaggio da un’attività ad un’altra • Una sfida di Sensemaking: Faciliatare il processo iterativo e complesso di information retrieval, organizzazione dei dati and ridefinizione del task [5] • Una sfida di infovis : un sistema che permetta all’utente di riconoscere pattern ed anomalie nelle informazioni. [3], [8]
  40. 40. Zooming, Focus+Context, Coordinated and Multiple Views
  41. 41. Zooming
  42. 42. Zooming •Separazione temporale tra le informazioni visualizzate agli utenti.
  43. 43. Zooming •Separazione temporale tra le informazioni visualizzate agli utenti. •Viste singole orientano focus attenzionale su un’unica attività. Utile per Information retrieval, meno per analisi comparative su più attività.
  44. 44. Zooming •Separazione temporale tra le informazioni visualizzate agli utenti. •Viste singole orientano focus attenzionale su un’unica attività. Utile per Information retrieval, meno per analisi comparative su più attività. •Necessità nella UI di evidenziare zone critiche [1], controlli UI in modo da evitare navigazione in regioni vuote [3]
  45. 45. Focus + Context •Il focus dell’utente passa in modo sistematico dai per i dettagli in evidenza al contesto di navigazione del sistema. •Come rendere lo spazio di visualizzazione proporzionale all’attenzione del’utente? •Design secondo principi di filtering, aggregazione selettiva, distorsione [1],
  46. 46. Coordinated and Multiple Views •Seguono il prinicipio che Interazione con i dati e differenti visualizzazioni degli stessi dati permettano maggiore comprensione. [6] •Favoriscono usabilità dell’UI quando occorre rappresentare diversi set di attributi nei dati perché permettono di esplorare correlazioni e pattern.
  47. 47. iLook Inspection •Navigazione aumentata dello spazio fisico per guardare “sotto il cofano dell’ “elettrodomestico” •Obiettivo: ridurre il carico cognitivo dell’utente attraverso visualizzazioni dello stato corrente del sistema, facilitare monitoraggio dei consumi e dell’usura degli elettrodomestici. •Geolocalizzazione: utilità non solo commerciale, ma per controllo remoto ed assistenza
  48. 48. ILook ZUI
  49. 49. Evaluation •Contextual Inquiry: valutazione situata con utenti su un mockup del sistema in ambienti quotidiani, non in laboratorio [3] •Uso domestico: visualizzazione su tablet (tramite tag AR) dei consumi e delle info sui programmi di lavaggio. • Uso in punto vendita: visualizzazione su smartphone con gps della distanza degli elettrodomestici. Avvicinandosi è possibile vedere tramite AR il display acceso e capire come funziona l’impostazione dei vari programmi. •Obiettivi: testare il sistema nel contesto quotidiano degli utenti.
  50. 50. Conclusioni: Interfaccia Zooming e focus+context •Necessità nella UI di cues per la navigazione e di interazioni contenuto specifiche •E’ necessario permettere un trade/off tra presentazione dell’informazione parallela e sequenziale •Offrire vari pattern d’interazione che assistano e creino affordance per scoprire le potenzialità dei servizi •Necessaria valutazione situata: il processo di costruzione dei modelli degli utenti è più utile dei risultanti modelli stessi. [2]
  51. 51. References [1] Benelli, G., Caporali, M., Rizzo, A., & Rubegni, E. Design concepts for learning spatial relationships. Proceedings of the 19th annual international conference on Computer documentation; 21-24 Oct. 200. [2] Blanford, A., Attfield, S., Interacting with Information. Morgan & Claypool Publishers London, 2010. [3] Cockburn A., Karlson A., and Bederson B. B. “A review of overview+detail, zooming, and focus +context interfaces” in: ACM Computing Surveys, 41, 2008, pp. 1-31. [4] Gaver W., Dunne T. & Pacenti E. “Design: Cultural probes” in: Interactions, volume 6 issue 1, 1999, pp. 21-29. [5] D.M. Russell , G. Furnas , M. Stefik , S. K. Card, P. Pirolli, Sensemaking, CHI '08 extended abstracts on Human factors in computing systems, April 05-10, 2008, Florence, Italy [6] Roberts, J. State of the art: Coordinated and multiple views in exploratory visualization. In Coordinated and Multiple Views in Exploratory Visualization, ETH, Switzerland, IEEE Press, 2007, pp. 61–71. [7] Schuler, D. & Namioka, A. Participatory design: Principles and practices, Hillsdale, NJ: Erlbaum, 1993. [8] Ware, C. Information Visualization:Perception for Design. Morgan Kaufmann Publishers, 2004
  52. 52. Grazie per l’attenzione. Ringraziamo anche Giulio Toccafondi, Giovanni Marangi, Matteo Del Balio, Andrea Camposarcone, Jessica Massini, Sarvo Penza, gli studenti del workshop di prototipazione rapida dell’Università di Siena, Marco Cammarata, Romina Catani, Roberto Tarabù e tutto il gruppo di lavoro di Indesit del progetto BUI - Beyond User Interface

×