$30 off During Our Annual Pro Sale. View Details »

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)

Irene Ros

March 31, 2016
Tweet

More Decks by Irene Ros

Other Decks in Technology

Transcript

  1. Bringing together
    User Centered Design &
    Data Visualization
    Irene Ros

    View Slide

  2. Who I am
    Irene Ros
    [email protected]
    @ireneros | @bocoup
    http://bocoup.com/DataVis

    View Slide

  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

    View Slide

  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.

    View Slide

  5. Data Visualization
    01
    Exploratory
    02
    Narrative
    03
    Informational

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 01
    Exploratory
    02
    Narrative
    03
    Informational

    View Slide

  11. 01
    Exploratory
    02
    Narrative
    03
    Informational

    View Slide

  12. View Slide

  13. 01
    Exploratory
    Tasks

    View Slide

  14. 01
    Exploratory
    Tasks
    02
    Narrative
    Story

    View Slide

  15. 01
    Exploratory
    Tasks
    02
    Narrative
    Story
    03
    Informational
    Goals

    View Slide

  16. 01
    Exploratory
    Tasks
    02
    Narrative
    Story
    03
    Informational
    Goals

    View Slide

  17. Research Design Execute
    User-Centered Design

    View Slide

  18. Research Design Execute
    User-Centered Design

    View Slide

  19. Research Design Execute
    User-Centered Design

    View Slide

  20. Research Design Execute
    User-Centered Design

    View Slide

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

    View Slide

  22. Goals
    Aesthetics Data

    View Slide

  23. Goals
    Aesthetics Data
    Sweet Spot

    View Slide

  24. Why does balance matter?

    View Slide

  25. Goals
    Aesthetics Data

    View Slide

  26. Goals
    Aesthetics Data
    - Information Overload

    View Slide

  27. Goals
    Aesthetics Data
    - Information Overload
    - Information Scarcity

    View Slide

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

    View Slide

  29. Aesthetics Data
    Goals

    View Slide

  30. Aesthetics Data
    - Inaccurate Information
    Goals

    View Slide

  31. Aesthetics Data
    - Inaccurate Information
    Goals

    View Slide

  32. Aesthetics Data
    - Inaccurate Information
    Goals
    - Inaccurate Representation

    View Slide

  33. Aesthetics Data
    Goals

    View Slide

  34. Aesthetics Data
    - Lack of Discovery
    Goals

    View Slide

  35. Aesthetics Data
    - Lack of Discovery
    - Fossilizing Processes
    Goals

    View Slide

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

    View Slide

  37. Case Study 1

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

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

    View Slide

  53. Data Exploration
    Understanding the data structure, content and purpose. Looking for significant insights.

    View Slide

  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?

    View Slide

  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

    View Slide

  56. Tools Programming
    R
    Python
    JavaScript

    Google Spreadsheets
    Excel

    Seaborn
    Aggregate
    Visualize
    Investigate relationships
    Look for "bad" data
    Look for missing data
    ...
    Activities:

    View Slide

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

    View Slide

  58. Visualization Prototypes
    Quick interactive visualizations

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  62. View Slide

  63. View Slide

  64. Case Study 2

    View Slide

  65. stereotropes.bocoup.com

    View Slide

  66. stereotropes.bocoup.com

    View Slide

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

    View Slide

  68. Case Study 2
    Data Exploration

    View Slide

  69. Case Study 2
    Data Exploration

    View Slide

  70. scrape
    ...
    Case Study 2
    Data Exploration

    View Slide

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

    View Slide

  72. Case Study 2

    View Slide

  73. Adjectives
    Natural Language Processing
    (Part of speech tagging)
    trope/film
    descriptions
    Case Study 2

    View Slide

  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

    View Slide

  75. Case Study 2

    View Slide

  76. associations
    (films, other tropes)
    Network Graph
    Co-occurrence
    Case Study 2

    View Slide

  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

    View Slide

  78. Case Study 2

    View Slide

  79. gender
    affiliation
    Log Likelihood
    Similarity
    Case Study 2

    View Slide

  80. gender
    affiliation
    Log Likelihood
    Similarity
    Case Study 2
    More strongly
    < associated with
    Less strongly
    associated with >

    View Slide

  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

    View Slide

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

    View Slide

  83. Case Study 2

    View Slide

  84. Exploratory Visualizations
    [12] Stereotropes Design
    Case Study 2

    View Slide

  85. Exploratory Visualizations
    [12] Stereotropes Design
    Case Study 2

    View Slide

  86. Sketching & Prototyping
    Case Study 2

    View Slide

  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

    View Slide

  88. Closing Thoughts

    View Slide

  89. Closing Thoughts
    • There isn't one "process"

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  95. Thanks!
    Irene Ros
    [email protected]
    @ireneros | @bocoup
    http://bocoup.com/DataVis

    View Slide