View
112
Download
0
Category
Preview:
DESCRIPTION
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
Citation preview
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
{ Designing Interactions: Information Design & Interpretation }
You are at: 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)
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 }
You are at: Introduction » Collect / Create / Relate / Donate
{ Designing Interactions: Introduction }
You are at: 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
{ Designing Interactions: Introduction }
You are at: 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
{ Designing Interactions: Introduction }
You are at: 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
“Design Thinking” “Information Design” “Interaction Design”
“Information Design”
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
PBS (2013), The Art of Data Visualization, retrieved June 5th , 2014 from http://video.pbs.org/video/2365039781/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
Medeiros, I. (2007-2013), Swimlane Diagrams in Data Visualization, retrieved November 27th, 2013 from
http://designative.info/works/design-management/data-visualization/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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.
Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
Design for Service (2009), Thinkpublic Comic, retrieved January 9, 2014 from http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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
Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014 from http://www.servicedesigntools.org/tools/8
{ Designing Interactions: Information Design & Interpretation }
You are at: 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)
Xavier Llusá Architect
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
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/
Stephanie Powers Client
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
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/
Malba Tahir Contractor
Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/
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/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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.
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/use-case-documents/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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/
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/
{ Designing Interactions: Information Design & Interpretation }
You are at: 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)
Medeiros, I., (2014), Insight Matrix in Data Visualization, retrieved January 9, 2014 from http://www.designative.info/portfolio/design-management/data-visualization/
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 }
You are at: Relate » Information Design » Visualization Techniques
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 }
You are at: Create » Information Design » Exercise
Information Design: Exercise
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 }
You are at: Donate » Disseminating Results
Donate: Disseminating Results
Recommended