Bringing together User Centered Design & Data Visualization

From Hadoop+Strata San Jose, 2016:

Description:
These days, there are many ways to visualize data, from representations of complex analyses to quick and simple charts and graphs produced in tools like Excel. Often, data visualization is meant only for analytical or narrative purposes, in which case traditional process models generally work. However, more and more, consumers expect to interact with the data, not just consume it. Interactive data visualization is becoming more prevalent on the Web—from communicating meaningful data to consumers or clients to creating exploratory interfaces that must be powerful enough—but not too complex—to engage people through data-driven content.

User-centered design (UCD) offers useful strategies for creating and implementing these more complex interactive data visualizations. Irene Ros explains how to apply UCD methodologies to data visualization—creating more meaningful data visualizations by designing systems and interfaces from a user’s perspective.

Topics include:

Relevant methods and exercises from UCD
Examples of how these methods can be applied to different types of visualization tools and where in the process they should come in
How the existing processes behind creating data visualizations can enhance the UCD process (such as using preliminary analysis to inform user studies)

Transcript

1. Bringing together User Centered Design & Data Visualization Irene Ros
2. Who I am Irene Ros irene@bocoup.com @ireneros | @bocoup http://bocoup.com/DataVis
3. 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 benefit 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
4. 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.
5. Data Visualization 01 Exploratory 02 Narrative 03 Informational
6. 01 Exploratory 02 Narrative 03 Informational http://syntagmatic.github.io/parallel-coordinates/
7. 01 Exploratory 02 Narrative 03 Informational http://syntagmatic.github.io/parallel-coordinates/
8. 01 Exploratory 02 Narrative 03 Informational Let's Free Congress, Tony Chu, http://letsfreecongress.org/
9. 01 Exploratory 02 Narrative 03 Informational Let's Free Congress, Tony Chu, http://letsfreecongress.org/
10. 01 Exploratory 02 Narrative 03 Informational
11. 01 Exploratory 02 Narrative 03 Informational
13. 01 Exploratory Tasks
14. 01 Exploratory Tasks 02 Narrative Story
15. 01 Exploratory Tasks 02 Narrative Story 03 Informational Goals
16. 01 Exploratory Tasks 02 Narrative Story 03 Informational Goals
17. Research Design Execute User-Centered Design
18. Research Design Execute User-Centered Design
19. Research Design Execute User-Centered Design
20. Research Design Execute User-Centered Design
21. Research Design Execute User-Centered Design ... ... ...
22. Goals Aesthetics Data
23. Goals Aesthetics Data Sweet Spot
24. Why does balance matter?
25. Goals Aesthetics Data
26. Goals Aesthetics Data - Information Overload
27. Goals Aesthetics Data - Information Overload - Information Scarcity
28. Goals Aesthetics Data - Information Overload - Information Scarcity - Information Irrelevance
29. Aesthetics Data Goals
30. Aesthetics Data - Inaccurate Information Goals
31. Aesthetics Data - Inaccurate Information Goals
32. Aesthetics Data - Inaccurate Information Goals - Inaccurate Representation
33. Aesthetics Data Goals
34. Aesthetics Data - Lack of Discovery Goals
35. Aesthetics Data - Lack of Discovery - Fossilizing Processes Goals
36. The answer is a process that combines: Data Visualization Techniques with User-Centered Design
37. Case Study 1
38. Case Study 1 Person icon created by Hysen Drogue from the Noun Project
39. Case Study 1 + + + Clinics Person icon created by Hysen Drogue from the Noun Project
40. Case Study 1 + + + Clinics Patients Person icon created by Hysen Drogue from the Noun Project
41. Case Study 1 + + + Clinics Patients Surveys Person icon created by Hysen Drogue from the Noun Project
42. Case Study 1 + + + Clinics Patients Surveys Patient Tracking Person icon created by Hysen Drogue from the Noun Project
43. Case Study 1 Research Design Execute User Interviews UCD Data Vis Both
44. User Interviews Short (~1h) conversations with anticipated users of the system Tips from 18F
45. User Interviews Short (~1h) conversations with anticipated users of the system Understand Users' needs & goals Capture their expectations Get Feedback Why? Tips from 18F
46. 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
47. Case Study 1 Research Design Execute User Interviews User Personas UCD Data Vis Both
48. User Personas User archetypes based on conversations with real people. Perfecting your Personas
49. 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
50. 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
51. 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 Workflow 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.
52. Case Study 1 Research Design Execute User Interviews User Personas Data Exploration UCD Data Vis Both
53. Data Exploration Understanding the data structure, content and purpose. Looking for significant insights.
54. Data Exploration Understanding the data structure, content and purpose. Looking for significant 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?
55. Data Exploration Understanding the data structure, content and purpose. Looking for significant 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? How? Look at it Analyze it computationally Discuss it and any findings with your stakeholders
56. Tools Programming R Python JavaScript <your favorite language here> Google Spreadsheets Excel <your BI tool here> Seaborn Aggregate Visualize Investigate relationships Look for "bad" data Look for missing data ... Activities:
57. Research Design Execute User Interviews User Personas Data Exploration Case Study 1 Visualization prototypes UCD Data Vis Both
58. Visualization Prototypes Quick interactive visualizations
59. Why? Find right representation Verify data with assumptions Get user buy-in Visualization Prototypes Quick interactive visualizations
60. 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
61. 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
64. Case Study 2
65. stereotropes.bocoup.com
66. stereotropes.bocoup.com
67. Case Study 2 Research Design Execute Data Exploration UCD Data Vis Both
68. Case Study 2 Data Exploration
69. Case Study 2 Data Exploration
70. scrape ... Case Study 2 Data Exploration
71. scrape ... trope/film descriptions gender affiliation associations (films, other tropes) assemble Case Study 2 Data Exploration
72. Case Study 2
73. Adjectives Natural Language Processing (Part of speech tagging) trope/film descriptions Case Study 2
74. Adjectives Natural Language Processing (Part of speech tagging) trope/film 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 justified — 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
75. Case Study 2
76. associations (films, other tropes) Network Graph Co-occurrence Case Study 2
77. associations (films, 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 justified — 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
78. Case Study 2
79. gender affiliation Log Likelihood Similarity Case Study 2
80. gender affiliation Log Likelihood Similarity Case Study 2 More strongly < associated with Less strongly associated with >
81. 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
82. Case Study 2 Research Design Execute Data Exploration Visualization Prototypes UCD Data Vis Both
83. Case Study 2
84. Exploratory Visualizations [12] Stereotropes Design Case Study 2
85. Exploratory Visualizations [12] Stereotropes Design Case Study 2
86. Sketching & Prototyping Case Study 2
87. 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
88. Closing Thoughts
89. Closing Thoughts • There isn't one "process"
90. 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/
91. 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
92. 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
93. 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 • Designing for the people who need your tool is really important
94. 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 • Designing for the people who need your tool is really important • It all comes down to communication
95. Thanks! Irene Ros irene@bocoup.com @ireneros | @bocoup http://bocoup.com/DataVis