Four ways to get you through. Data Visualization interface Design

Dashboards, big data, data visualization, data analysis-more and more people and businesses are starting to use their data to do something interesting. In my career, I have been privileged to participate in a large number of data-oriented interface design, and I would like to share some ideas about how to create this particular and meaningful product.

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

　　One, the user is different, the data is different

Designing a complex system at any time will inevitably have to be designed for many users and roles. Presidents, managers, and analysts are several common roles, each with its own workflow and the need for data.

It is an art in itself to define a good character and produce different perspectives. I will not explain it in detail here. If you are interested in this, please see Cooper's useful article.

The important thing about roles is to predetermine and organize information structures and wireframes around them.

Here is the final product of a health report application we made last year. The system has different user groups, each of which requires different data management. Once we've created the key roles, we'll put them next to each review.

Notice the characters on the artboard. All of our customers accept this approach.

It is difficult to show a piece of work in front of a full house client. Whether it's explaining wireframes, flowcharts, or talking about visual design, it's hard to keep everyone in line with your point of view.

Organizing your work by character will prevent you (and your customers) from being sidetracked in these discussions.

　　Second, make the page model

One technique I've used for years is to make a page model. The core point is simple:

The user presents what they need first, and then the rest of the page is structured according to the user story or information level.

The concept of making a page model is the core principle of writing prose (and many other forms of communication), and I know it after writing a book. Over the years, I spent a lot of time in the book style: The basics of clarity and elegance. In addition to being an excellent reference for writing, it clearly illustrates this view:

If it's distracting at first, users are not only hard to tell what each element is, it's hard to focus on the whole process.

This is a guideline to keep in mind when designing a user experience. Here are two common ways to make a page model.

Create a structure for the artboard. Ask yourself-what kind of stories are you going to tell by this information?

I've seen a lot of dashboard and data pictorial items on Behance and dribbble that are beautifully designed, but are usually dazzling and forgettable. They are either a variety of chart components arranged in the form of a lack of hierarchical waterfall flow, or are visually overly designed and unsuitable for this data.

The picture on the left shows the dazzling data illustrated. The illustration on the right is a distraction from the decorations and no data is noticed.

In the above figure (left), the data Panel uses the console to render the information ... Quite a sense of oppression. To avoid this, we try to deal with these interfaces in a way that organizes information, making people feel like they're reading magazine articles.

It is not that the control of the desktop interface is not in the arena ... I personally would like to design that. But in most cases, it is not necessary to see all the information at all times.

The key point-avoid creating a smattering of graphics. Building a model for page information, first presenting the key information to the user and then supporting the content.

　　Third, choose the right graphics

In aesthetics, there are many (too many) designs that misuse charts.

Worst of all--these "bad habits" seem to multiply. The area of the pie chart should be everywhere, and the graph should be a histogram. Let's stop these designs together ... Here are some tips to help you treat your data correctly:

　　Starting with data

Raw data tables that are not processed are not attractive at all. But it's the best starting point. It helps you start thinking about which variables are available in your data, and how these variables are related.

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

In addition to starting from the blank data, wait for inspiration to suddenly enter your consciousness. You can also be more positive, by following these great resources to help you uncover interesting associations:

An automatic data visualization tool developed by Charted--medium.

Design better charts through Google Sheets, illustrator and sketch.

tableau--This tool is the best, but quite expensive.

There is no panacea for this part of the process. Don't be afraid to delve into the data, try to mix and match different variables and create basic charts. It takes time, but it's worth it. Some of the fantastic ideas I've come up with are from the patchwork of raw data files.

　　Process discrete and continuous data

It took me a long time to realize this, and some charts are more expressive of your data than others. It's easy to get caught up in this situation, choose a good-looking chart and expect it to work. I often do this (I like the scatter plot) and feel guilty about it.

Some graphics are better than others, depending on the type of data you are working on. One way to choose the right chart is to evaluate the data in your hands. There are two main types of data:

Discrete data--numeric values can be clearly counted. For example, the number of goals or Facebook point of praise.

Histogram is best suited to performance discrete data

Continuous data-any range value. Like a season's rainfall, or a person's height and weight.

Graphs are best suited to show continuous data

Simply put, graphs are best suited for continuous data, and columnar graphs are best suited for discrete data representation.

A resource for Dona Wong The Wall Street Journal: A Guide to information maps helped me to put the essence of it. I wish I had this book a few years ago. This is a priceless reference book to help you choose the right chart to illustrate the code of Conduct for information presentation.

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

　　Four, basic or customized graphics

Finally, as designers of these massive data systems, you have to ask yourself, "Should I choose unconventional ways to customize the design or use time-tested charts to present the information?"

Recently I accidentally read this article from signals--as long as 3 kinds of charts are enough. The author strongly expresses the view that the "validity" of a graph outweighs its visual characteristics. I very much agree with this view in this article. However, I think his point of view represents an extremely pragmatic perspective. I believe that custom graphics can often improve the usability of the data, while unique is fascinating.

Examples of basic columnar graphs

For me, there's a "one size Pass" chart and a "fit for the best size" chart. tables, graphs, and bars are good enough to hold various types of data, but they are also very common (one size passes). As a professional designer, I want my work to look and feel unique and useful.

The New York Times, for example, did a good job of making their articles colourful by customizing interactive graphics. Can see more of their work here. Let's look at some of the perfect custom chart cases:

The case adjusts the graph to give people a "glimpse" of the basic data that underpins the chart.

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

In this 3D chart, the perspective change is visually compelling and allows users to better understand the correlation between data.

Http://www.nytimes.com/interactive's example is well done and uses real content to create a chart.

http://selfiecity.net/

And finally, from a project we did for CNN. We use color coding to show party preference, while the stereoscopic projection shows demographic information visually.

Http://truthlabs.com/work/cnn

As a primary guideline-data and technology required, we need to try out a variety of customized graphics. But we still have alternative plans to prevent the design from working, or customers prefer a relatively conservative approach.

　　Five, so what?

Why do we put all this data on the page? The answer is: so that people can use it--make decisions, research, predict the future, anything. The point is that users aren't immersed in the beautiful colors you've chosen, they're here to work.

My advice--after you've arranged your pages, ask yourself, "What's Up?" Look at each chart, component, table, and think about what people can get from it. Usually you come to the conclusion that "none of this matters" means to reduce or rethink.

It happened to me a couple of times-I created a sophisticated dashboard that included a series of stylish charts, pie charts, and a map of thousands of data points. But it's always been questioned by clients. "I just want to know if it works ... Where is the thing I want? " And "I just want 3 things ... X, y, and Z. Where can I see them? "

Well, that's when you realize you're lost in the weeds and you lose focus.

I would have a way of trying to use words to express exactly what people want.

On important information, the text summary may be more efficient than the chart.

The figure above is from our last two projects. Both represent the information the user needs through text and do not rely on charts that require explanations.

This approach resonates with our customers, especially on important information. But as I mentioned before, I always have to consider all kinds of roles, so I need to use them in the right place.

Like all other forms of design, it also needs a balance.

Try to make your data different, but avoid excessive design and unnecessary distractions.

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

No matter how monotonous, frustrating, and polished every little detail ... And don't forget to ask yourself, "So what?"