45

Designing Interactions / Experiences: Lecture #04

Embed Size (px)

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

Page 1: Designing Interactions / Experiences: Lecture #04
Page 2: Designing Interactions / Experiences: Lecture #04

{ 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/ [email protected] @designative

Page 3: Designing Interactions / Experiences: Lecture #04

{ 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)

Page 4: Designing Interactions / Experiences: Lecture #04

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

Page 5: Designing Interactions / Experiences: Lecture #04

{ 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

Page 6: Designing Interactions / Experiences: Lecture #04

{ 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

Page 7: Designing Interactions / Experiences: Lecture #04

{ 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

Page 8: Designing Interactions / Experiences: Lecture #04
Page 9: Designing Interactions / Experiences: Lecture #04

“Design Thinking” “Information Design” “Interaction Design”

Page 10: Designing Interactions / Experiences: Lecture #04

“Information Design”

Page 11: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 12: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 13: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 14: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 15: Designing Interactions / Experiences: Lecture #04

IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/

Page 16: Designing Interactions / Experiences: Lecture #04

IDEO (2011), Design Thinking Process in Design Thinking Toolkit for Educators, retrieved September 1st , 2011 from http://www.designthinkingforeducators.com/

Page 17: Designing Interactions / Experiences: Lecture #04

{ 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

Page 18: Designing Interactions / Experiences: Lecture #04

{ 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

Page 19: Designing Interactions / Experiences: Lecture #04

PBS (2013), The Art of Data Visualization, retrieved June 5th , 2014 from http://video.pbs.org/video/2365039781/

Page 20: Designing Interactions / Experiences: Lecture #04

{ 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

Page 21: Designing Interactions / Experiences: Lecture #04

{ 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

Page 22: Designing Interactions / Experiences: Lecture #04

Medeiros, I. (2007-2013), Swimlane Diagrams in Data Visualization, retrieved November 27th, 2013 from

http://designative.info/works/design-management/data-visualization/

Page 23: Designing Interactions / Experiences: Lecture #04

{ 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.

Page 24: Designing Interactions / Experiences: Lecture #04

Wiegers, K.E., 2006. System Boundary Diagram in More About Software Requirements: Thorny Issues and Practical Advice . p 138-140. Redmond: Microsoft Press.

Page 25: Designing Interactions / Experiences: Lecture #04

{ 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

Page 26: Designing Interactions / Experiences: Lecture #04

Design for Service (2009), Thinkpublic Comic, retrieved January 9, 2014 from http://designforservice.wordpress.com/2009/01/20/thinkpublic-comic/

Page 27: Designing Interactions / Experiences: Lecture #04

{ 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

Page 28: Designing Interactions / Experiences: Lecture #04

Tassi, R., (2009), “Customer Journey Maps” in Service Design Tools, retrieved January 9, 2014 from http://www.servicedesigntools.org/tools/8

Page 29: Designing Interactions / Experiences: Lecture #04

{ 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)

Page 30: Designing Interactions / Experiences: Lecture #04

Xavier Llusá Architect

Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/

Page 31: Designing Interactions / Experiences: Lecture #04

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/

Page 32: Designing Interactions / Experiences: Lecture #04

Stephanie Powers Client

Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/

Page 33: Designing Interactions / Experiences: Lecture #04

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/

Page 34: Designing Interactions / Experiences: Lecture #04

Malba Tahir Contractor

Medeiros, I., (2014), Personas & Scenarios, retrieved January 9, 2014 from http://designative.info/portfolio/design-management/personas-scenarios/

Page 35: Designing Interactions / Experiences: Lecture #04

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/

Page 36: Designing Interactions / Experiences: Lecture #04

{ 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.

Page 37: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 38: Designing Interactions / Experiences: Lecture #04

Medeiros, I., (2014), Use Case Documents, retrieved January 9, 2014 from http://www.designative.info/portfolio/user-experience/use-case-documents/

Page 39: Designing Interactions / Experiences: Lecture #04

{ 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/

Page 40: Designing Interactions / Experiences: Lecture #04

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/

Page 41: Designing Interactions / Experiences: Lecture #04

{ 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)

Page 42: Designing Interactions / Experiences: Lecture #04

Medeiros, I., (2014), Insight Matrix in Data Visualization, retrieved January 9, 2014 from http://www.designative.info/portfolio/design-management/data-visualization/

Page 43: Designing Interactions / Experiences: Lecture #04

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

Page 44: Designing Interactions / Experiences: Lecture #04

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

Page 45: Designing Interactions / Experiences: Lecture #04

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 [email protected]

{ Designing Interactions: Information Design & Interpretation }

You are at: Donate » Disseminating Results

Donate: Disseminating Results