Statistical Information design practice【Flow Tech】

by Ding, on Oct 22, 2021 8:55:16 AM

In the interaction design of to-b products, we often encounter design work related to data statistics design, including personnel management, KPI, etc, to understand the operating status of the entire organization through data.

Let's analyze how to plan and design this type of information.


1.   The web is still the most suitable carrier for statistical information

2. Analyze and determine the information level

3. Appropriate chart type


1.  The web is still the most suitable carrier for statistical information

Although it has entered the era of mobile internet, the web still has its necessity.The portability of a mobile phone determines that its screen size cannot carry a page that carries a large amount of information. In this case, the mobile terminal is often used as an auxiliary terminal. The display of statistical information is one of the types of large information demand.

2. Analyze and determine the information level

First of all, we need to determine how many types of data are presented on the page and how large the amount of data is. But often for To B products with complex functions, the types and magnitudes of statistical data are very large, and clients need to obtain all the data. In order to make the page look as concise and focused as possible, the data needs to be divided into modules and hierarchical planning.

1 module

Dividing data information into modules is our most commonly used method. According to different types of information, it is displayed on different pages. Try to display different types of information under different tabs to reduce the amount of information carried on a single page.

dashboard (1)

2 hierarchical

For the data information displayed on the same page, we should also determine the level of display according to its attributes and importance. The data and information display forms that we use the most are tables, graphs, big numbers, etc. Among them, the information density carried by the "table" is the largest, followed by the "graph", while the form of large numbers can only display a one-dimensional index in a specific area, and the information density is the smallest. From this perspective, the data presentation form with low information density often means that the importance of the data itself is very high, and we will also place it in the most prominent position on the page, such as the top of the page.

info level

3. Appropriate chart type

Although the most important indicators should be presented in the form of low information density first, considering the properties of different indicators themselves, not all forms can match all data indicators, and specific issues need to be analyzed in detail. For example, an indicator such as "Sales" not only needs to display the value, but also needs to show the trend of change on a time axis, so it is difficult to meet the demand with only a "big number" format. If we want to use "graphs" to represent data, there are many data visualization graphs we can choose from.

* Need to understand the ratio, and several indicators are mutually exclusive.
 →Suitable for using pie charts or rings;

* Need to understand the ratio, but each indicator is not mutually exclusive.
 →Suitable for the use of histograms and bar graphs;

* Need to understand trends.
 →Suitable for use with curve chart

* When there are indicators of 2-3 dimensions.
 →You can try to use scatter charts and bubble charts to compare different objects;

* When there are indicators with more than 3 dimensions.
 →You can try to use the radar chart to compare different objects.

Kpi box

The above graphics are the most basic data graphics. In the field of data visualization, there are many different data graphics, which are worth looking for and using.


In many cases, we cannot refuse the needs of clients. The more they want, the harder it is for our products to be simple and easy to use. But in any case, you can't give up the user experience because of this.

Compared with the mobile terminal, although the visible area of the web terminal is larger, it is still necessary to avoid cluttered design and move closer to a simple and smooth direction to give users a better experience.

Who wrote the article...


FlowSolutions UI/UX designer
What you’re addicted recently「Outdoor exercise / Snowboarding」

◆ Flow Solutions  Company Profile

Flow Solutions started providing a data utilization platform in 2016, and has already provided data utilization to improve sales for more than 800 stores, including apparel and general merchandise stores as well as consumer electronics retailers.
We provide all kinds of solutions to solve retail issues, such as providing customer behavior data acquired from store visualization IoT systems, after-sales support for data utilization, and also providing notification services, which immediately lead to action from the data.

Please feel free to contact us for anything related to store analysis!



#Flow Solutions #To-B products  #Statistics  #Design #Usability
Topics:スタッフブログリテールDXretail technology店舗運営の課題解決へのヒントStatistical Data PlatformグラフィックUI/UXUI/UX