Data-driven interface design

[[139590]]

Dashboards, big data, data visualization, data analytics—more and more people and businesses are starting to do interesting things with their data. In my career, I’ve had the privilege of designing a lot of data-heavy interfaces, and I want to share some ideas on how to create these special and meaningful products.

Many people have discussed this topic, and I will focus on the most influential part of the creative process.

1. Different users, different data

Whenever you design a complex system, you inevitably have to design for many users and roles. CEOs, managers, and analysts are common roles, each with their own workflows and data needs.

Defining roles and generating different perspectives is an art in itself. I won't explain it in detail here. If you are interested, please see this useful article by Cooper.

The important thing about personas is to identify them up front and organize your information structure and wireframes around them.

Below is the final product of a health reporting app we worked on last year. This system has different user groups, each of whom needs different data management. After creating the key roles, we put them aside during each review.

Notice those characters on the board. Our clients are receptive to this approach.

Presenting work in front of a room full of clients can be hard. Whether you’re explaining wireframes, flowcharts, or having a discussion about visual design, it can be hard to keep everyone on track with your point of view.

Organizing your work by persona will prevent you (and the client) from going off-topic during these discussions.

2. Create a page mockup

One technique I've used for years is to create a page mockup. The key is simple:

First present users with what they need, and then structure the rest of the information on the page according to user stories or information hierarchies.

The concept of creating a page model is a core principle of writing prose (and many other forms of communication) that I know all too well after writing a book. Over the years, I have spent a lot of time on this book, Style: The Essential Elements of Clarity and Elegance. In addition to being a great writing reference, it also clearly states this idea:

If distractions are created right from the start, it will be hard for users to tell what each element is and to focus on the overall process.

This is a principle to keep in mind when doing user experience design. Below are two common ways to make page mockups.

Create some kind of structure for your artboard. Ask yourself - what story are you trying to tell with this information?

I see a lot of dashboards and data infographics on Behance and Dribbble that are beautifully designed (visually), but usually dazzling and forgettable. They are either arranged in a waterfall flow with a lack of hierarchy, or visually over-designed and not suitable for the data.

The left picture shows a dazzling data pictorial. The right picture shows an example where the decorations distract attention from the data.

In the image above (left), the dashboard uses a console-style approach to presenting information… which can be quite overwhelming. To avoid this, we try to approach this type of interface in a way that organizes information so that people feel like they are reading a magazine article.

That's not to say that a console-style interface doesn't have its place... I personally prefer it that way. But in most cases, it's not necessary to see all the information all the time.

The most important point - avoid creating graphics that are half-baked . Model the information on the page, presenting the key information to the user first, and then the supporting content.

#p#

3. Choose the right graphics

There are many (too many) designs that misuse charts when it comes to aesthetics.

The worst part is — these “bad habits” seem to be multiplying. Everywhere you look, you’ll see area charts that should be pie charts, and line graphs that should be bar graphs. Let’s put a stop to these designs… Here are some tips to help you treat your data the right way:

It all starts with data

A table of raw, unprocessed data is not attractive at all. But it is the best starting point. It helps you start thinking about what variables are available in the data and how they are related.

The monotonic nature of raw data will help you think about the relationships between various variables in the system.

Instead of starting with a blank data set and waiting for inspiration to pop into your consciousness, you can be more proactive and use these great resources to help you uncover interesting connections:

• Charted — An automatic data visualization tool developed by Medium.

• Design better diagrams with Google Sheets, Illustrator, and Sketch.

• Tableau – This tool is great, but pretty expensive.

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

Handling discrete and continuous data

It took me a long time to realize that some charts are better at expressing your data than others. It’s easy to fall into this trap in your creative work, choose a nice-looking chart, and hope it works. I do this a lot (I’m a big fan of scatter plots) and am guilty of it.

Some graphs are better than others, depending on the type of data you are dealing with. One way to choose the right graph is to evaluate the data you have. There are two main types of data:

Discrete data - values ​​that can be clearly counted. For example, goals scored or Facebook likes.

Histograms are best suited for displaying discrete data.

Continuous data - any range of values. For example, the amount of rainfall in a season, or the height and weight of a person.

Line graphs are best suited for representing continuous data

Simply put, line graphs are best suited for displaying continuous data, while bar graphs are best suited for displaying discrete data.

Dona Wong's resource, The Wall Street Journal: A Guide to Infographics, helped me distill this down to its core. I wish I had this book years ago. It's an invaluable reference for choosing the right graphics and illustrating the rules of thumb for presenting information.

http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281

#p#

4. Basic or customized graphics

Finally, as a designer of these massive data systems, you have to repeatedly ask yourself, "Should I choose an unconventional approach to customize the design? Or should I use the time-tested charts to present information?"

I recently stumbled across this article from 37 Signals - Just 3 Charts Are Enough. The author strongly expresses the view that the "effectiveness" of a graphic trumps its visual features. I strongly agree with this view. However, I think his view represents an extremely pragmatic perspective. I believe that customized graphics can often improve the usability of data while being unique and attractive.

Basic Bar Chart Example

To me, there are "one size fits all" charts, and there are "one size fits all" charts. Tables, line graphs, and bar charts are great and can accommodate a variety of data types, but they are also very generic (one size fits all). As a professional designer, I want my work to look and feel unique and useful.

For example, the New York Times does a great job of adding color to their articles through customized interactive graphics. You can see more of their work here. Let’s look at some of the best examples of customized graphics:

This example adjusts the line chart to provide a "glimpse" at the underlying data that supports the chart.

http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0

In this 3D chart, the change in perspective is very visually impactful and allows users to better understand the relationship between data.

http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0

This example from Selfiecity.net does a great job of using real content to create a infographic.

http://selfiecity.net/

***, from a project we did for CNN. We used color coding to show party preference, and 3D projections to visually represent demographic information.

[[139595]]

http://truthlabs.com/work/cnn

As a first rule, we need to try various custom graphics based on data and technical requirements. But we also need to have a backup plan in case the design doesn't work or the client prefers a more conservative approach.

#p#

5. So what?

Why do we put all this data on the page? The answer is: so people can use it — to make decisions, research, predict the future, whatever. The point is, users don’t come to immerse themselves in the pretty colors you chose, they come to work.

My advice is this - once you have laid out the page and everything is ready, ask yourself "So what?" Look at each chart, component, table and think carefully about what people can get out of it. Often you will conclude, "It's not important," which means it's time to reduce or rethink it.

This has happened to me several times - I've created complex, beautiful dashboards with a series of stylish charts, pie graphs, and maps with thousands of data points, but have always been challenged by clients with questions like "I just want to know if this works... where is what I need?" and "I only need 3 things... X, Y, and Z. Where can I find them?"

Alas, that’s when you realize you’ve gotten lost in the weeds and lost sight of the point.

I would try to use words to express exactly what people want.

A text summary may be more effective than a chart or graph for important information.

The images above are from two of our recent projects. Both use text to present the information the user needs, without relying on diagrams that require interpretation.

This approach resonates with our customers, especially on important messages, but as I mentioned before, there are always roles to consider, so use it where appropriate.

Like all forms of design, it requires a balance.

Strive to make your data distinctive, but avoid over-engineering and unnecessary distractions.

Choose the right graphic for your data, but don’t forget to structure your page hierarchically.

Polish every little detail, no matter how tedious and frustrating it may be… and don’t forget to ask yourself, “So what?”

Original link

Author information: Erik K

I design digital products that make peoples lives easier. Co-Founder/Creative Director at Truth Labs in Chicago.