Designing Interactions / Experiences: Lecture #04

1,614 views
1,486 views

Published on

This is the 4rd (fourth) lecture of the "Designing Interactions / Experiences" module I’m teaching at Köln International School of Design of the Cologne University of Applied Sciences, which I’m honored to give by invitation of Professor Philipp Heidkamp. In this presentation we discuss how to use different data visualization techniques to facilitate decision making

Published in: Design, Education, Technology

Designing Interactions / Experiences: Lecture #04

  1. 1. { Designing Interactions: Information Design & Interpretation } Youareat: Introduction » Welcome Designing Interactions: Welcome! My name is Itamar Medeiros http://www.designative.info/ http://www.linkedin.com/in/designative/ medeiros.itamar@gmail.com @designative
  2. 2. { Designing Interactions: Information Design & Interpretation } Youareat: Introduction » Learning Objectives and Outline Designing Interactions: Information Design & Interpretation Learning Outcomes §  You will learn how to use data visualization techniques to facilitate decision making Class Outline §  Visualizing Data / Processes §  Diagrams (Swimlane / System Boundaries) §  Story Telling (Storyboarding / Customer Journey Maps / Personas & Scenarios) §  Matrices (UXI, Insight Matrix)
  3. 3. Introduction: Collect / Create / Relate / Donate Collect Learn from previous experiences ! Relate Consult with peers and mentors " # $ Create Explore, compose, and evaluate possible solutions Donate Disseminating results Shneiderman, B. (February 1999), Creating Creativity for Everyone: User Interfaces for Supporting Innovation, ACM Transactions on Computer-Human Interaction 7, 1 (March 2000), 114-138. { Designing Interactions: Information Design & Interpretation } Youareat: Introduction » Collect / Create / Relate / Donate
  4. 4. { Designing Interactions: Introduction } Youareat: Collect » Course Outline Course Outline Design Thinking (1/3 of the course) §  Week 01: Introduction §  Week 02: Discovery “Mode” §  Week 03: Interpretation “Mode” §  Week 04: Reflection in Action
  5. 5. { Designing Interactions: Introduction } Youareat: Collect » Course Outline Information Design (1/3 of the course) §  Week 05: Visualizing Data / Processes §  Week 06: Diagrams (Affinity / Swimlane / System Boundaries) and Models (Mental / Work / Artifact) §  Week 07: Story Telling (Storyboarding / Customer Journey Maps / Personas & Scenarios) §  Week 08: Reflection in Action Course Outline
  6. 6. { Designing Interactions: Introduction } Youareat: Collect » Course Outline User Experience Design (1/3 of the course) §  Week 09: Turning Insights into Action §  Week 10: Concept Design, Wireframing, Prototyping §  Week 11: User Validation §  Week 12: Reflection in Action Course Outline
  7. 7. “Design Thinking” “Information Design” “Interaction Design”
  8. 8. “Information Design”
  9. 9. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Definitions Information design is the defining, planning, and shaping of the contents of a message and the environments in which it is presented, with the intention to satisfy the information needs of the intended recipients. Information Design: Definitions Information Design Institute (2014), “What is Information Design?” in in What is Information Design, retrieved January 9, 2014 from http://designative.info/about/what-is-information-design/
  10. 10. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Facilitating Decision Making Through various types of relationship, interaction diagrams and other visualization techniques, one can communicate with different stakeholders to help: §  Unpack the results of […] User Research; Information Design: Facilitating Decision Making Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from http://designative.info/works/design-management/data-visualization/
  11. 11. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Facilitating Decision Making Through various types of relationship, interaction diagrams and other visualization techniques, one can communicate with different stakeholders to help: §  Visualize large sets of data to help prioritization of requirements; Information Design: Facilitating Decision Making Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from http://designative.info/works/design-management/data-visualization/
  12. 12. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Facilitating Decision Making Through various types of relationship, interaction diagrams and other visualization techniques, one can communicate with different stakeholders to help: §  Support buy-in from Software Architects and Tech leads; Information Design: Facilitating Decision Making Medeiros, I. (2007), Data Visualization, retrieved on January 9th, 2014 from http://designative.info/works/design-management/data-visualization/
  13. 13. IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
  14. 14. IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
  15. 15. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Facilitating Decision Making There are lots of different ways of prioritizing features, And just like any other type of method, the best way depends on lots of different variables—such as how early in the product development lifecycle a product is, how mature a market is, or how well-known the targeted personas are […] Information Design: Facilitating Decision Making Medeiros, I. (2013), “What are the best ways to prioritize a product and feature list?” in UXmatters, retrieved on January 9th, 2014 from http://www.uxmatters.com/mt/archives/2013/12/the-best-ways-to-prioritize-products-and- features.php
  16. 16. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Information Design » Infographics Information graphics or infographics are graphic visual representations of information, data or knowledge intended to present complex information quickly and clearly. They can improve cognition by utilizing graphics to enhance the human visual system’s ability to see patterns and trends […] Information Design: Infographics Wikipedia (2014), “Infographic”, retrieved on January 9th, 2014 from http://en.wikipedia.org/wiki/Infographic
  17. 17. PBS (2013), The Art of Data Visualization, retrieved June 5th , 2014 from http://video.pbs.org/video/2365039781/
  18. 18. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Facilitating Decision Making » Visualization Techniques What follows is a series of examples of how various types of relationship, interaction diagrams and other data visualization techniques – in no particular order – that can help communicate with different stakeholders and facilitate decision making. Facilitating Decision Making: Visualization Techniques
  19. 19. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Swimlane Diagrams A swim lane (or swimlane) is a visual element used in process flow diagrams, or flowcharts, that visually distinguishes responsibilities for sub-processes of a business process. Visualization Techniques: Swimlane Diagrams Wikipedia (2014), Swimlane Diagrams, retrieved January 9, 2014 from http://en.wikipedia.org/wiki/Swim_lane
  20. 20. Medeiros, I. (2007-2013), Swimlane Diagrams in Data Visualization, retrieved November 27th, 2013 from http://designative.info/works/design-management/data-visualization/
  21. 21. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » System Boundaries Diagrams A System Boundary (or Use Case) diagram is notation used to define conceptual boundaries of a system Visualization Techniques: System Boundaries Diagrams Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.
  22. 22. Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.
  23. 23. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Storyboards The storyboard is a tool derived from the cinematographic tradition; it is the representation of use cases through a series of drawings or pictures, put together in a narrative sequence. Visualization Techniques: Storyboards Tassi, R., (2009), “Storyboards” in Service Design Tools, retrieved January 9, 2014 from http://www.servicedesigntools.org/tools/13
  24. 24. Design for Service (2009), Thinkpublic Comic, retrieved January 9, 2014 from http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic/
  25. 25. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Customer Journey Maps The customer journey map is an oriented graph that describes the journey of a user by representing the different touchpoints that characterize his interaction with the service. Visualization Techniques: Customer Journey Maps Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014 from http://www.servicedesigntools.org/tools/8
  26. 26. Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014 from http://www.servicedesigntools.org/tools/8
  27. 27. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Swimlane Diagrams Personas are fictional characters created to represent the different user types within a targeted demographic, attitude and/or behavior set that might use a site, brand or product in a similar way. Visualization Techniques: Personas & Scenarios Cooper A., (2007), About Face 3: The Essentials of Interaction Design, p. 97, Wiley; 3rd edition (May 7, 2007)
  28. 28. Xavier Llusá Architect Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  29. 29. Xavier Llusá Background > 48 years-old, married, male > Received a BA at Escuela Superior de Arquitetura de Barcelona and a masters in architecture at Universidad de Bilbao > Owns a 20-person architecture studio in Manhattan > Intermediate Internet user, has fast connection to PC at work and average cable connection on an IMac at home Costumer Needs > Planning tools > Proactive communication > Monitor progress of projects > Validation of decisions Scenario Xavier just finished the design of a new upscale resort hotel to be constructed in Dubai, and he wants to be able to manage the construction of it remotely. Xavier wants to keep the client informed and happy about the progress of construction and keep the contractor on track to budgets/ schedules Since the project needs the clients approval for each stage, Xavier has to confirm by each milestone of the project for a position to proceed Needs > Planning tools > Proactive communication > Monitor progress of projects > validation of decision > Proactive communication Features > Create New Project > Select files > Add person to project > Assign role to project > Customize reports > add milestone > request approval confirmation Behavior Xavier login to his Architecture PROJECT TRAACKING account and creates a new online project. He selects which files will be associated with the project from file browser. Xavier then adds 2 (two) people to the project: Stephanie Powers and Malba Tahir. He assigns the role of CLIENT to Stephanie and the role of CONTRACTOR to Malba. Xavier, then, limits Stephanie’s reports to BUDGET/SCHEDULE and sets Malba’s reports to BUDGET/SCHEDULE/ SPECIFICATIONS Xavier sets the milestones of the project over the PROJECT TIMELINE: Malba will only get a permission to proceed to the next step after Stephanie’s approval of the previous one. Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  30. 30. Stephanie Powers Client Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  31. 31. Stephanie Powers Background > 57 years-old, divorced, female > Received a MBA from Wharton School of the University of Pennsylvania > Chief Executive Officer of a major Hotel Chain with its headquarters in San Francisco > Advanced Internet user, has fast connection to PC at work and always online on a smartphone Costumer Needs > Timely updates > Fast navigation > Detailed, but to the point > Customizable Scenario Stephanie coordinates the construction of several projects and has just approved another with Xavier, for which she wishes she can get periodical updates on the progress of construction. Stephanie wants to share the status of progress of construction with different senior officers of the corporation, especially Finance (which will audit the budget/schedule of the process) and Marketing (who will take care of advertising the new resort once it’s finished) Stephanie wishes she can approve the milestones as soon as they are finished, to speed up construction Needs > Timely > Detailed, but to the point > customizable > Fast navigation Features > project list > progress alerts > Add person to project > Customize reports > mobile alerts > approval confirmation Behavior Stephanie logs in to her AUTOCAD SHARED DESKTOP account and select the DUBAI PROJECT from the project list She chooses to receive WEEKLY UPDATES about the project status. Stephanie adds the two officer to the project Stephanie customizes the report views according to the needs of the managers: Finance officer will have VIEW ONLY access to the BUDGET/SCHEDULE and Marketing officer will have VIEW ONLY access to CONSTRUCTION PICTURES Stephanie changes the APPROVAL settings, so that she can receive messages on her mobile once each milestone is complete, and chooses also to be able to confirm approval. Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  32. 32. Malba Tahir Contractor Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  33. 33. Background > 49 years-old, widow, male > Received BS in Civil Engineering from University of Cairo > Manages several construction teams (structural, heating, electrical, plumbing, air conditioning) in Dubai area > Novice Internet user, has fast connection to PC at work and just started using digital cameras Costumer Needs > easy to learn, easy to use > Proactive communication > Monitor progress of projects > Save money Scenario Malba won the bid to construct a new hotel for Stephanie in Dubai, and now he must keep the budget/schedule on track, to keep the contract. Malba must keep Stephanie and Xavier informed of status of progress of construction Malba wants to keep his costs low, yet keep the quality of construction within the specifications, so he must constantly check for prices/quality of materials Needs > Monitor progress of projects > proactive communication > easy to learn, easy to use > Save money Features > project list > update cost > update schedule > timeline > select milestone > upload picture > select specification > compare price Behavior Malba logs in to his Architecture Shared Desktop account and select the DUBAI PROJECT from the project list Once he confers with his teams, he inputs the data about progress and costs, to recalculate BUDGET/ SCHEDULE. After seeing the budget and schedule recalculated automatically by the system, he checks the new updated PROJECT TIMELINE to find the milestones of the construction. Since the excavation for the foundation is almost finished, He selects the milestone FOUNDATION and uploads a recent picture of the site. He checks the project’s SPECIFICATION; he selects PLUMBING to see the contracted cost, then ask the system to compared the costs with a DATABASE of suppliers Malba Tahir Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
  34. 34. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Use Case Documents Use case is a list of steps, typically defining interactions between a role and a system, to achieve a goal. The actor can be a human or an external system. Visualization Techniques: Use Case Documents Wiegers, K.E., 2006. Use Case Documents in More About Software Requirements: Thorny Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.
  35. 35. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Swimlane Diagrams Use Case Documents are very useful for: §  Visualizing the impact of implementation of any give use case to the different personas; §  Helping in the decision making process by providing a better sense of priorities; §  Communicating workflows without being distracted by discussions about look-and-feel; Visualization Techniques: Use Case Documents Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from http://designative.info/works/user-experience/use-case-documents/
  36. 36. Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/use-case-documents/
  37. 37. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » UXI Matrix The  UX  Integra-on  (UXI)  Matrix  is  a  simple,  flexible,   tool  that  extends  the  concept  of  the  product   backlog  to  include  UX  factors  normally  not  tracked   by  agile  teams.   Visualization Techniques: UXI Matrix Innes, J., (2012), Integrating UX into the Product Backlog, in Boxes and Arrows, retrieved January 9th, 2014 from http://boxesandarrows.com/integrating-ux-into-the-product-backlog/
  38. 38. Medeiros, I., (2014), Use Cases List in Product Definition and Requirements Prioritization, retrieved January 9, 2014 from http://www.designative.info/portfolio/design-management/product-definition-requirements- prioritization/
  39. 39. { Designing Interactions: Information Design & Interpretation } Youareat: Collect » Visualization Techniques » Insights Clustering Matrix This  method  allows  us  to  take  a  list  of  insights   generated  from  research  on  people  and  context  and   see  how  they  are  grouped  together  based  on  their   rela-ons Visualization Techniques: Insight Clustering Matrix Kumar, V., (2012), Insight Clustering Matrix in 101 Design Methods: A Structured Approach for Driving Innovation in Your Organization. p 171. Wiley; 1 edition (October 9, 2012)
  40. 40. Medeiros, I., (2014), Insight Matrix in Data Visualization, retrieved January 9, 2014 from http://www.designative.info/portfolio/design-management/data-visualization/
  41. 41. Based on the amount and kind of data you’ve collected during the user research, what kind of the visualization techniques mentioned previously is most appropriate as a next step of your project? Information Design: Visualization Techniques { Designing Interactions: Information Design & Interpretation } Youareat: Relate » Information Design » Visualization Techniques
  42. 42. Choose 1 (one) of the visualization techniques mentioned above, and process the data you’ve produced during the Contextual Inquiry interviews. { Designing Interactions: Information Design & Interpretation } Youareat: Create » Information Design » Exercise Information Design: Exercise
  43. 43. Go to our KISD Space for this course and share the artifact resulted from the visualization technique you chose. Itamar Medeiros http://designative.info/ http://twitter.com/designative itamar.medeiros@designative.info { Designing Interactions: Information Design & Interpretation } Youareat: Donate » Disseminating Results Donate: Disseminating Results

×