In the past few years, many companies have carried out digital transformation and have also popularized "data visualization" within the company. However, in actual work, visualization is often done in multi-person collaboration. How do we develop a visualization standard to ensure that What about people and cross-platform design?
Here Smartbi presents you a classic case of a listed company with an annual output value of over 6 billion yuan
We often hear about visual recognition systems (VIS). Is there a special design system for visualization? This week, we tried to translate an article "What are Data Visualization Style Guidelines" written by Amy Cesal, the winner of three Kantar Information Beauty Awards. Let's take a look at how she views the data visualization design system!
1. What is a data visualization design system?
In 2019, Google (Google) and London City Intelligence (London City Intelligence) have successively incorporated data visualization guidelines into the design specification system. Data visualization has played an increasingly important role in corporate decision-making and brand value promotion.
↑ London City Intelligence (London City Intelligence) Design Guide
In 2014, Amy Cesal designed the first data visualization design guide for the Sunlight Foundation. In 2017, the Consumer Financial Protection Bureau (CFPB) also proposed similar design requirements. I am very happy to see more and more organizations devoting resources to standardize data visualization.
↑ US Consumer Financial Protection Bureau (CFPB) Visual Design Guidelines
What is the data visualization design guide? What are their commonalities and characteristics? How to be inspired to build your own data visualization design guide?
When an enterprise or organization conducts data visualization, it needs to use data visualization design guidelines to standardize the information representation. It usually includes what it is (what are the types of diagrams?), why (such as why use this color?), and how to do it (such as what tools are used to design?). If some design tools are involved, such as Excel, R, D3.js or Tableau, the visualization guide will also provide a template to demonstrate how to apply.
↑ London City Intelligence (London City Intelligence) Design Guide
Generally, data visualization guidelines are part of the design specification system, and different types of organizations have different information, audiences, and needs. I have integrated the collected cases by type, and highlighted the characteristics of each case as much as possible.
2. Visual guide for profit organizations
- Google Material Design Language (Google Material Design)
Google has also provided a series of "good (do)" and "bad (don't)" examples in data visualization, and made corresponding explanations. For example, avoid using different colors for variables of the same category:
↑ Google Material Design Language (Google Material Design)
There is also a section in the guide devoted to the layout of Dashboards. Introduced various unique typesetting layouts to help enterprises carry out standardized design of dashboards.
↑ Google Material Design Language (Google Material Design)
- IBM
IBM has a dedicated chapter to guide designers to think about the purpose and possible audience of data visualization. What is the starting point of visualization? Is it for readers' needs or based on a certain database? Similar questions help designers to think deeply, instead of just staying at the visual level.
↑ IBM Design Language Specification
IBM also summarized the common chart types and their scope of application in an easy-to-understand manner. For example, in the stacked histogram in the figure below, IBM describes the applicable scope of the chart in a designer's tone-"I want to use this model because I want to: display time changes/comparison/relevance/display subdivision data".
↑ IBM Design Language Specification
3. Visual guide for government agencies
- US Financial Consumer Protection Bureau (CFPB)
The CFPB design guide points out how to make charts according to specific legal regulations and government requirements, especially the "U.S. 508 Accessibility Act," which all government agencies in the United States need to follow.
For example, because CFPB often needs to make predictions based on historical data, the guide points out that forecast data must be emphasized, otherwise it will make people misunderstand that they are real data. For example, if it is a histogram, you can use a lighter color or a dotted line to frame the forecast data; if it is a line graph, you can use a dotted line to represent the forecast data, and indicate in the legend which ones are real and which ones are predicted.
↑ US Financial Consumer Protection Bureau (CFPB) Design Code Manual
- London City Intelligence (London City Intelligence)
Which colors can be used together and which cannot be used in data visualization? why? The guide has thoroughly studied the considerations of visual color selection, provided a series of color matching in order of priority, and pointed out the use of each color from dark to light. In addition, the specifications for the use of this series of colors in light and dark backgrounds are also given.
↑ London City Intelligence (London City Intelligence) Design Guide