Bringing together User Centered Design & Data Visualization

Slide 1

Slide 1 text

Bringing together User Centered Design & Data Visualization Irene Ros

Slide 2

Slide 2 text

Who I am Irene Ros irene@bocoup.com @ireneros | @bocoup http://bocoup.com/DataVis

Slide 3

Slide 3 text

Who Bocoup is Bocoup has helped organizations such as Google, Facebook, the Harvard Business Review, the Guardian, Disney, the World Economic Forum, the United Nations, and MassMutual build web applications. Bocoup has also developed software for public beneﬁt projects funded by the Knight Foundation, the Gates Foundations, and the Kauffman Foundation. Web Applications | Data Visualization | Web Connected Devices | Games Infrastructure and Deployment | Testing | Open Source | Training

Slide 4

Slide 4 text

Data Visualization http://bocoup.com/datavis Bocoup transforms raw data into compelling, visually engaging experiences using Open Web technologies. From research and data analysis to visualization design and development, we partner with organizations in academia and industry to build custom tools and visualizations that inspire and inform.

Slide 5

Slide 5 text

Data Visualization 01 Exploratory 02 Narrative 03 Informational

Slide 6

Slide 6 text

01 Exploratory 02 Narrative 03 Informational http://syntagmatic.github.io/parallel-coordinates/

Slide 7

Slide 7 text

01 Exploratory 02 Narrative 03 Informational http://syntagmatic.github.io/parallel-coordinates/

Slide 8

Slide 8 text

01 Exploratory 02 Narrative 03 Informational Let's Free Congress, Tony Chu, http://letsfreecongress.org/

Slide 9

Slide 9 text

01 Exploratory 02 Narrative 03 Informational Let's Free Congress, Tony Chu, http://letsfreecongress.org/

Slide 10

Slide 10 text

01 Exploratory 02 Narrative 03 Informational

Slide 11

Slide 11 text

01 Exploratory 02 Narrative 03 Informational

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

01 Exploratory Tasks

Slide 14

Slide 14 text

01 Exploratory Tasks 02 Narrative Story

Slide 15

Slide 15 text

01 Exploratory Tasks 02 Narrative Story 03 Informational Goals

Slide 16

Slide 16 text

01 Exploratory Tasks 02 Narrative Story 03 Informational Goals

Slide 17

Slide 17 text

Research Design Execute User-Centered Design

Slide 18

Slide 18 text

Research Design Execute User-Centered Design

Slide 19

Slide 19 text

Research Design Execute User-Centered Design

Slide 20

Slide 20 text

Research Design Execute User-Centered Design

Slide 21

Slide 21 text

Research Design Execute User-Centered Design ... ... ...

Slide 22

Slide 22 text

Goals Aesthetics Data

Slide 23

Slide 23 text

Goals Aesthetics Data Sweet Spot

Slide 24

Slide 24 text

Why does balance matter?

Slide 25

Slide 25 text

Goals Aesthetics Data

Slide 26

Slide 26 text

Goals Aesthetics Data - Information Overload

Slide 27

Slide 27 text

Goals Aesthetics Data - Information Overload - Information Scarcity

Slide 28

Slide 28 text

Goals Aesthetics Data - Information Overload - Information Scarcity - Information Irrelevance

Slide 29

Slide 29 text

Aesthetics Data Goals

Slide 30

Slide 30 text

Aesthetics Data - Inaccurate Information Goals

Slide 31

Slide 31 text

Aesthetics Data - Inaccurate Information Goals

Slide 32

Slide 32 text

Aesthetics Data - Inaccurate Information Goals - Inaccurate Representation

Slide 33

Slide 33 text

Aesthetics Data Goals

Slide 34

Slide 34 text

Aesthetics Data - Lack of Discovery Goals

Slide 35

Slide 35 text

Aesthetics Data - Lack of Discovery - Fossilizing Processes Goals

Slide 36

Slide 36 text

The answer is a process that combines: Data Visualization Techniques with User-Centered Design

Slide 37

Slide 37 text

Case Study 1

Slide 38

Slide 38 text

Case Study 1 Person icon created by Hysen Drogue from the Noun Project

Slide 39

Slide 39 text

Case Study 1 + + + Clinics Person icon created by Hysen Drogue from the Noun Project

Slide 40

Slide 40 text

Case Study 1 + + + Clinics Patients Person icon created by Hysen Drogue from the Noun Project

Slide 41

Slide 41 text

Case Study 1 + + + Clinics Patients Surveys Person icon created by Hysen Drogue from the Noun Project

Slide 42

Slide 42 text

Case Study 1 + + + Clinics Patients Surveys Patient Tracking Person icon created by Hysen Drogue from the Noun Project

Slide 43

Slide 43 text

Case Study 1 Research Design Execute User Interviews UCD Data Vis Both

Slide 44

Slide 44 text

User Interviews Short (~1h) conversations with anticipated users of the system Tips from 18F

Slide 45

Slide 45 text

User Interviews Short (~1h) conversations with anticipated users of the system Understand Users' needs & goals Capture their expectations Get Feedback Why? Tips from 18F

Slide 46

Slide 46 text

User Interviews Short (~1h) conversations with anticipated users of the system Understand Users' needs & goals Capture their expectations Get Feedback Why? How? Have Questions Ready Take ALL the notes, capture memorable quotes separately from annotations Be Respectful Tips from 18F

Slide 47

Slide 47 text

Case Study 1 Research Design Execute User Interviews User Personas UCD Data Vis Both

Slide 48

Slide 48 text

User Personas User archetypes based on conversations with real people. Perfecting your Personas

Slide 49

Slide 49 text

User Personas User archetypes based on conversations with real people. To combine interviews per role/type Anonymize input Create shared understanding on the team Why? Perfecting your Personas

Slide 50

Slide 50 text

User Personas User archetypes based on conversations with real people. To combine interviews per role/type Anonymize input Create shared understanding on the team Why? How? Look for patterns Pair recurring goals, behaviors, and pain points with archetypes Keep it Simple Perfecting your Personas

Slide 51

Slide 51 text

Rosalinda Smith Clinic Manager, Age 43, has 2 children and a dog Loves the newest technology Prefers not to use technology About Rosalinda Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in quam \nibh sollicitudi n, sed dictum nibh mattis. Her Workﬂow Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in quam \nibh sollicitudi n, sed dictum nibh mattis. Painpoints Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in quam \nibh sollicitudi n, sed dictum nibh mattis.

Slide 52

Slide 52 text

Case Study 1 Research Design Execute User Interviews User Personas Data Exploration UCD Data Vis Both

Slide 53

Slide 53 text

Data Exploration Understanding the data structure, content and purpose. Looking for signiﬁcant insights.

Slide 54

Slide 54 text

Data Exploration Understanding the data structure, content and purpose. Looking for signiﬁcant insights. To understand what can and can't be done with the data we have To look for interesting patterns or insights Ensure data quality Why?

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Tools Programming R Python JavaScript Google Spreadsheets Excel Seaborn Aggregate Visualize Investigate relationships Look for "bad" data Look for missing data ... Activities:

Slide 57

Slide 57 text

Research Design Execute User Interviews User Personas Data Exploration Case Study 1 Visualization prototypes UCD Data Vis Both

Slide 58

Slide 58 text

Visualization Prototypes Quick interactive visualizations

Slide 59

Slide 59 text

Why? Find right representation Verify data with assumptions Get user buy-in Visualization Prototypes Quick interactive visualizations

Slide 60

Slide 60 text

How? Quick Code User Testing Many Different Ideas Why? Find right representation Verify data with assumptions Get user buy-in Visualization Prototypes Quick interactive visualizations

Slide 61

Slide 61 text

Research Design Execute User Interviews User Personas Data Exploration Case Study 1 Visualization prototypes Journey Maps Wireframes Style Guides Pattern Library Reusable Visualization Components Final Product UCD Data Vis Both

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Case Study 2

Slide 65

Slide 65 text

stereotropes.bocoup.com

Slide 66

Slide 66 text

stereotropes.bocoup.com

Slide 67

Slide 67 text

Case Study 2 Research Design Execute Data Exploration UCD Data Vis Both

Slide 68

Slide 68 text

Case Study 2 Data Exploration

Slide 69

Slide 69 text

Case Study 2 Data Exploration

Slide 70

Slide 70 text

scrape ... Case Study 2 Data Exploration

Slide 71

Slide 71 text

scrape ... trope/film descriptions gender affiliation associations (films, other tropes) assemble Case Study 2 Data Exploration

Slide 72

Slide 72 text

Case Study 2

Slide 73

Slide 73 text

Adjectives Natural Language Processing (Part of speech tagging) trope/ﬁlm descriptions Case Study 2

Slide 74

Slide 74 text

Adjectives Natural Language Processing (Part of speech tagging) trope/ﬁlm descriptions This set-up is plausible if the damsel in distress is a beloved character, but can be very jarring if the audience fails to see what's so valuable about the damsel and why the rest of the cast should drop everything to go to her rescue. Some damsels are so annoying that the audience wouldn't mind seeing them dead; others end up in trouble in a way that just screams Character Derailment. This is particularly dangerous for the resident Action Girl who will seem suddenly weak and helpless if her stint as a damsel isn't properly justiﬁed — if the moment is bad enough, she can be demoted to Faux Action Girl. On the other hand, anyone can have a bad day; perhaps she just had a moment of Badass in Distress after being thrown a Distress Ball. Case Study 2

Slide 75

Slide 75 text

Case Study 2

Slide 76

Slide 76 text

associations (ﬁlms, other tropes) Network Graph Co-occurrence Case Study 2

Slide 77

Slide 77 text

associations (ﬁlms, other tropes) Network Graph Co-occurrence This set-up is plausible if the damsel in distress is a beloved character, but can be very jarring if the audience fails to see what's so valuable about the damsel and why the rest of the cast should drop everything to go to her rescue. Some damsels are so annoying that the audience wouldn't mind seeing them dead; others end up in trouble in a way that just screams Character Derailment. This is particularly dangerous for the resident Action Girl who will seem suddenly weak and helpless if her stint as a damsel isn't properly justiﬁed — if the moment is bad enough, she can be demoted to Faux Action Girl. On the other hand, anyone can have a bad day; perhaps she just had a moment of Badass in Distress after being thrown a Distress Ball. Case Study 2

Slide 78

Slide 78 text

Case Study 2

Slide 79

Slide 79 text

gender afﬁliation Log Likelihood Similarity Case Study 2

Slide 80

Slide 80 text

gender afﬁliation Log Likelihood Similarity Case Study 2 More strongly < associated with Less strongly associated with >

Slide 81

Slide 81 text

Adjectives Natural Language Processing (Part of speech tagging) trope/film descriptions associations (films, other tropes) Network Graph Co-occurrence gender affiliation Log Likelihood Similarity Case Study 2

Slide 82

Slide 82 text

Case Study 2 Research Design Execute Data Exploration Visualization Prototypes UCD Data Vis Both

Slide 83

Slide 83 text

Case Study 2

Slide 84

Slide 84 text

Exploratory Visualizations [12] Stereotropes Design Case Study 2

Slide 85

Slide 85 text

Exploratory Visualizations [12] Stereotropes Design Case Study 2

Slide 86

Slide 86 text

Sketching & Prototyping Case Study 2

Slide 87

Slide 87 text

Case Study 2 Research Design Execute Data Exploration Visualization Prototypes User Testing Wireframes Repeatable Data Analysis Pipeline Visual language Final Product UCD Data Vis Both

Slide 88

Slide 88 text

Closing Thoughts

Slide 89

Slide 89 text

Closing Thoughts • There isn't one "process"

Slide 90

Slide 90 text

Closing Thoughts • There isn't one "process" • There are a lot of activities to choose from - as little or as much as is needed to make forward progress - https://pages.18f.gov/guides/

Slide 91

Slide 91 text

Slide 92

Slide 92 text

Closing Thoughts • There isn't one "process" • There are a lot of activities to choose from - as little or as much as is needed to make forward progress - https://pages.18f.gov/guides/ • Having motivation behind any design choice is really important • Knowing your data is really important

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Thanks! Irene Ros irene@bocoup.com @ireneros | @bocoup http://bocoup.com/DataVis