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 (please reference: ShouldIUseaPieChart.com) 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.