Learning data visualization as a UX designer
Try and remember the first graph you ever created. Was it a bar graph, or maybe a pie chart? Was it drawn on graph paper with pencil, or generated by PowerPoint?
If you’re like me, you were not taught “data visualization” as a separate discipline in school. It was woven in and out of our education through math and science classes, and it certainly was never covered as a part of art or design.
I recently completed a Data Visualization with Tableau Specialization through Coursera. I wanted to share a few light bulb moments I had while taking the course from a distinctly design perspective.
💡User research tells you what data the user needs, visualization principles tell you how to get it to them
“I’m an accountant…just give me a number!” said one of our accountants during a user test.
She was responding to a bar graph that intended to communicate how much of our product she had purchased versus how much she had used during the previous year.
After taking the data visualization course, I realized that it was not necessarily the presence of a graph that upset the accountant, who is a “numbers person” by trade. It was the incorrect way the graph leveraged both information hierarchy and pre-attentive attributes that was causing confusion.
Let me break that down.
The data visualization principles for information hierarchy offered by Ben Shneiderman, otherwise known as the “Shneiderman mantra”, are as follows:
- Overview
- Zoom and Filter
- Details on Demand
The bar above graph showed the amount purchased, but only once she “demanded” the details by hovering over the bar. A contextually labeled bar graph would’ve provided a sufficient overview, but instead, the data label was treated as a minor detail.
Knowing what users are looking for will allow you to determine the appropriate information hierarchy for your data visual. In the case of the accountant, she wanted to know how much she had purchased and how much she had left to use at the overview level.
Secondly, while length is a pre-attentive attribute because we can process what it is communicating subconsciously (i.e. the longer the bar, the greater the amount), it is being misused in the scenario of a part-to-whole relationship.
In a part-to-whole relationship where what is “used” is a part of the whole (i.e., what is “purchased”), length can be better leveraged as a horizontal bar graph. Furthermore, the color green (rather than blue and purple) can be used to communicate that the greater the usage is, the better the progress toward using everything you purchased.
So while our accountant above “just wanted the number”, a number plus a good visual would be able to provide that clarity quicker, just as text plus an icon is best practice for labels in user experience design.
Minimalism should never come at the expense of clear communication. Getting to know your user through research will distinguish your overview from your details.
💡You’ve heard “know you users”, now you must also “know your data”
As in software development, Subject Matter Experts (SMEs) are invaluable, and help prevent you from inadvertently misrepresenting the truth through your design.
How do I know this? Simple — when working on my capstone project in the data visualization course, I didn’t have a SME to rely on.
For our final project, we were tasked with applying everything we had learned in the course: getting the data, cleaning the data, analyzing the data, and presenting the data to our intended audience, all in accordance with our design plan.
Gulp. I decided to leverage one of the publicly available government datasets out there, and settled on the Consumer Financial Protection Bureau’s (CFPB) Consumer Complaint Database (I know, thousands of complaints against financial institutions, so fun!).
But here’s the thing, I knew nothing about the data. Where did it come from? How was it collected? Had the data collection methods changed over time? Who are these people reporting the data? Fortunately, the CFPB had pretty good documentation of their data, replete with API documentation, release notes, and field notes.
(Side note: In data, design, development, and basically everything, documentation is king.)
Now all of this may sound non-design-y, but a big part of our job as designers is to be effectual and ethical storytellers. British economist Ronald Coase once said, “If you torture the data long enough, it will confess.” Similarly, if we cram our data into an aesthetically pleasing visual design at the expense of objective data representation, we neglect our responsibility as ethical storytellers.
If you’re delving into data visualization for the first time, find yourself a data SME, or at the very least some well-documented data on a subject you’re familiar with. That will allow you to focus on what you do best — storytelling through design.
💡Storytelling is the best way UX designers can help shape the presentation of data
While the experience of learning to clean and analyze data was super insightful for me during this course, I don’t expect to be doing this in my day job anytime soon.
Just as learning the basics of HTML and CSS helps designers to better communicate with developers, learning about data collection and analysis will allow designers to better communicate with data and business analysts to create more effective visuals.
According to communication expert Nancy Duarte, author of Datastory: Explain Data and Inspire Action Through Story, every good story contains a “who”, a “what” and a “how” in service to a big idea.
As user experience designers, we are already experts in the “who” — we do contextual inquiries, user tests, journey maps, and persona documents, all to better empathize with and understand our customers’ needs and pain points. If we sense that access to data would resolve our users’ need or pain point (the “what”), then it is up to us as designers to determine how to bring that to life through visualization (the “how”).
It doesn’t take much more than some well-documented data, and a visualization tool (that could be Tableau, or even Excel if you’re brave) to start getting your feet wet in storytelling through data. If you have the skills to design effective experiences, data visualization is just one more avenue to apply them.
💡At the end of the day, data visualization is still user experience design
Don’t get me wrong, data visualization does require learning a few new tools and best practices and it requires you to understand a new medium (data instead of code). But your design training in empathy and visual communication will serve you just as well in data visualization.
User experience design is not about creating pretty pictures, and neither is data visualization. To paraphrase Ben Shneiderman, it’s about allowing our users to both make and leverage insights that affect their day to day lives.
If you’re looking for a place to get started, and you don’t have a user problem that requires data visualization, start by helping out your company. I guarantee you they have data to present, whether that be to VCs, clients, executives, or any number of stakeholders. Are you presenting user research anytime soon? Start there. The best thing to do is look for opportunities to practice, and soon enough, they’ll be there.
Looking for data? Data.gov has hundreds of thousands of datasets to choose from.
Looking for inspiration? Check out Tableu Public’s viz of the day.
Looking for inspiration for what not to do? Check out WTF Visualizations.
***
If you want to check out my capstone data visualization project, you can do so here.
