Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bringing together User Centered Design & Data Visualization

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)

F99c66cc9f64454df105006286d47521?s=128

Irene Ros

March 31, 2016
Tweet

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

  12. None
  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
  62. None
  63. None
  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