Designing Data-Driven Interfaces

Author: Erik Klimczak

“Dashboard”, “Big Data”, “Data visualization”, “Analytics” — there’s been an explosion of people and companies looking to do interesting things with their data. I’ve been lucky to work on dozens of data-heavy interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product.

Many people have already tackled this topic, so I’m going try and stick to the parts of our process that have the most impact.

1. Different users, different data

Whenever you’re designing complex systems there will inevitably be multiple users or personas to design for. Executives, managers, and analysts are common personas that each have their own workflows and data needs.

Defining good personas and generating insights is an art within itself, and it’s not something I’m going to detail here. If you’re curious about how to do this, check out this helpful post from Cooper.

The important thing to remember about personas is to identify them upfront and organize your information architecture tasks and wireframes around them.

Below is a deliverable we used for a healthcare reporting application we worked on last year. The system has distinct users each requiring their own data workflows. Once we established the key personas we included them alongside our deliverables with each review session.

Presenting artwork to a room of clients can be a difficult task. Whether you’re explaining wireframes and flow diagrams or debating visual treatments, it’s hard to keep everyone tracking to your vision.

Organizing your artwork by personas will help you (and your clients) stay on point during these discussions.

2. Shape the Page

One technique I’ve picked up over the years is the concept of shaping the page. The core idea is really simple:

Show the user what they need to see first, then structure the remainder of the page based on the user story or hierarchy of information.

The concept of shaping the page is a core principle of writing prose (and many other forms of communication), and something I became intimate with after writing a book. Over the years I’ve spent a lot of time with the book “Style: The Basics of Clarity and Grace”. Aside from being an excellent reference for writing, it describes the concept eloquently:

When you start with distractions, your audience has a hard time seeing not just what each element is about, but the focus of the entire passage.

This is a useful principle to keep in mind when designing UX. Below are two common approaches we use to shape the page.

Many of the dashboards and data viz projects I see popup on behance and dribbble are beautifully designed (visually) but are often overwhelmingly underwhelming. They are either A) a myriad of graph widgets arranged in a pinterest-style layout with no hierarchy or B) over-designed visualizations that aren’t appropriate for the data.

In the image above (on the left), the reporting dashboard takes a Mission Control approach to presenting the information…which is pretty overwhelming. To avoid this, we try to approach these types of interfaces by curating the information more like you’re reading a magazine article.

Not to say there isn’t a time and place for a mission control UI…I personally would love to design something like that. But for most situations seeing everything all the time is unnecessary.

The key thing to consider — avoid creating a smattering of visualizations. Shape the information on the page so the user is presented with key information first, then follow it up with supporting content.

3. Choose the *right* visualizations

There are many (too many) designs floating around that misuse charts in favor of aesthetics.

The worst part is — these “bad habits” seem to be multiplying. Everywhere I look, I see area charts that should be pie graphs or line charts that should be bar graphs. So let’s try to stop this together… Here’s a few tips for doing your data justice:

Start with the Data

It’s not sexy — raw tabular rows of data. However, it’s the best place to start. It will help you start thinking about what variables are available in the data and how the various data entities are related.

Aside from staring blankly at rows of data and hoping ideas eventually slip into your subconscious, you can be a little more proactive by checking out these great resources to help uncover interesting connections:

• Charted — a tool developed by Medium that automatically visualizes data.
• Designing Better charts with Google Sheets, Illustrator, and Sketch
• Tableau — This tool is one of the best out there, but very expensive.

There is no silver bullet for this part of the process. Don’t be afraid to dive into the data and try making basic charts by mixing and matching different variables. It takes time, but it’s worth it. Some of the best ideas I’ve come up with started with tinkering around with raw data files.

Working with Discrete vs. Continuous Data

It took me a while to realize this, some graphs do a better job of articulating your data than others. It’s easy to pick charts that look good in your composition and hope your data works out. I’ve been guilty of doing this myself many times (I love me a good scatter plot).

Depending on the type of data you’re working with some types of visualizations work better than others. One way to choose the appropriate chart is to evaluate the type of data you have. There are two main types of data:

Discrete Data — distinct values you can count. For example, a number of goals scored or Facebook likes.

Continuous Data — Any value in a range. For example, rainfall for a season or a person’s height/weight.

In short, line graphs work best for continuous data and bar graphs work best for discrete data.

One resource that really solidified this for me is “The Wall Street Journal: Guide to information Graphics” by Dona Wong. I wish I would have had this book with me years ago. Its an invaluable reference for choosing appropriate graphs and the dos & don’ts for presenting information.

Read full article: medium.com/truth-labs/designing-data-driven-interfaces-a75d62997631