This article is published by NetEase Cloud .
Author: Wei Xinyi (This article is only for internal sharing in Zhihu. If you need to reprint, please obtain the author's consent and authorization.)
The concept of big data is not unfamiliar to many people these days. Successful data analysis can not only reflect the operating conditions of enterprises, but also help enterprises optimize their business methods. However, the use of data analysis products will cost a certain amount of learning, and the target customer group is not as wide as that of toc users, so the design methods and design viewpoints are limited in universality. This article mainly organizes some methods and superficial thoughts on the migration of data products from the web to the mobile, hoping to provide some reference ideas for designers of similar products.
In some workplaces, such a scenario may be found:
The boss dumped a report to the visual designer, and asked him to convert it into a beautiful data display diagram to facilitate the report. Looking at this pile of numbers, the designer made a difficult problem. You asked me to perform artistic processing and analysis of three or five data. There is no problem with expression, how to deal with this pile of data?
In fact, that's because the boss confuses the concepts of "information visualization" and "data visualization", which are very close in real-world applications and can sometimes be used interchangeably.
Information visualization [Infographic (Information Graphic)] pays more attention to artistic effects. It is specific, independent, and needs to be manually customized. No visualization program can generate specific pictures based on any data and annotate them with explanatory text.
2013 The Information is Beautiful Awards Interactive Bronze Award in Interactive Category US Gun Deaths Periscopic
The concept of data visualization is different. It has wider applicability. The same type of chart will not change its presentation form due to different data. Users build reports through the application of data visualization. Most of the production staff belong to the strategic planning department or business department, such as data analysts, operation staff, etc.
E-chart histogram
"NetEase Youshu" is a self-service business intelligence analysis product launched by NetEase, which provides users with flexible data visualization report making functions. and finally solve the problem. In order to meet the usage scenarios that users can browse flexibly anytime, anywhere, the product migrates the web terminal to the mobile terminal.
For interaction designers, when they first get the demand, they must not immediately start sorting out functional modules and try to layout the large-screen content on the small screen according to the previous design process.
First you should realize:
- The to b tool product itself has the characteristics of high operation difficulty and complex logic. The operation on the web side alone is not easy for many people to get started, but the screen space on the web side is large and the display content is large. Compared with the web terminal, the mobile terminal needs to select key and important content to display.
- The use time of mobile phones is relatively fragmented, and it does not occupy a large part of people's daily life, so it is not suitable for dealing with complex problems. Simplifying complex operations is also one of the design priorities.
- The performance of mobile phones is stronger than that of browsers in data caching, so the content that needs to be loaded from the network should be minimized, and the controls that can be extracted to native should not be loaded from the web side.
To sum up: the following points are the problems that need to be solved in this design process:
- How to summarize chart information in limited space
- How to refactor key functional modules on the web side on the mobile side
- How to redefine the mobile-friendly interaction
1. Identify target users and usage scenarios
I once heard a BI product salesman say a sentence: to C products need to persuade users, and to B products need to persuade the user's boss. Compared with the user first of to c products, to b products pay more attention to commercial interests. If the direct beneficiary of the " easy to use " of the product is the data analyst, then " good-looking " is the reason why the company boss pays the bill. The "good-looking" here not only refers to the beauty of the interface, but also refers to whether the content of the chart can be clearly reflected Valuable information, whether it can detect internal hidden problems, and whether it can provide a reference for the company's later development.
The web terminal can carry more functions and provide more professional analysis and operability, while the mobile terminal is lightweight, flexible and convenient, and is not limited by time and space. For decision-makers, it is very rare to spend a long time in front of the computer in order to make a chart. Most decision-makers should discuss and analyze a completed report in the conference room, or at any time outside the company. Monitor the changes of key indicators anywhere, and make corresponding command and response measures. Therefore, the focus on the web side is "editing", while the focus on the mobile side should be on "reading".
2. Extraction of key modules
After clarifying the core requirement of "reading" on the mobile side, designers can make choices about the functions that need to be migrated on the web side. First, let's take a look at the usage process and main functional modules of the web side:
A data analysis product generally consists of the following modules: data source, data model, report, dashboard
The data source is used to build a data model. The imported data is configured to form a data model, and then reports are drawn through the data fields in the data model, and the drawn reports are assembled into a dashboard, and the whole process is over. It may seem complicated, but it is actually very similar to the cooking process. The data source is the ingredients, the data model corresponds to the processed ingredients, and the editing report is equivalent to the cooking ingredients. The final dashboard is the food that is cooked and served on the table. resemblance.
As can be seen from the above, the main requirement of the mobile terminal is to read , so the migration module we should focus on is the dashboard on the web side .
Web Dashboard
After identifying the modules that need to be migrated, you need to make a layout for the modules
As shown in the figure: The chart area is mainly used to display reports, occupying the largest area, and users can understand their business situation through this interface. The file list area is used to summarize and organize various file levels, and play the role of planning and navigation. A more popular term for filter is filter, which is one of the most frequently used operations, which is convenient for users to filter out the information they need most according to different dimensions. The frequency of use of the exploration function is also relatively high, but it has a certain learning cost for users, and the priority is relatively low. There are also some common functions to help users improve efficiency in the process of browsing reports; such as browsing data, refreshing, and so on. According to the module layout on the web side, we can try to combine the user's operating habits, arrange the general framework on the mobile side, and then continue to refine and improve the design based on the framework.
3. Operation Gesture Definition
- Organize all gestures on web and mobile
One of the characteristics of tool products is frequent operations. During the migration process, we should focus on the interaction mode that conforms to the mobile terminal. It is recommended to follow the following process:
- Sort out all the operation gestures and corresponding functions on the web side
- Determine which part of the operation can be directly extended
- Redefine non-extendable interactions
As shown in the table: Some web-side operation gestures can be directly extended on the mobile side, such as clicking, double-clicking, and dragging, but some web-side operation gestures cannot be extended on the mobile side, and the corresponding gestures need to be redesigned. The specific operation is finally determined according to the specific business.
From the perspective of data analysts, chart classification generally classifies charts according to their expressive meaning, such as charts suitable for analyzing trends, charts suitable for analyzing proportions, etc.; but from the perspective of interaction designers, we also It will be classified according to the interaction mode and operation area, which can help us design different interaction gestures according to different categories.
Chart with axes:
Contains the most mainstream chart types such as bar charts, line charts, etc.; covers the most types of charts, the most operable content, and the most universal interaction
Chart without axes:
Each chart has its own personalized operation, and the generality is relatively narrow
Table diagram:
Fewer operations, the highest similarity with web-side operations, and most gestures can be extended
- Define operation gestures by chart classification
A problem that is often encountered when the axis chart is displayed on the mobile terminal: data items are very difficult to select, because the space on the web side is large enough, we can easily select and view specific data, while the screen on the mobile terminal is very small, and many times the light The dense data cannot be selected by fingers, and the operation on the web side cannot be extended here. To solve this problem, the concept of selectors can be introduced.
slider selector
The slider selector is suitable for charts that can position data items through a coordinate system in one direction
For example: ordinary bar chart, ordinary line chart, ordinary area chart, etc.; the entire operation space is concentrated at the bottom of the screen, which also ensures that no matter how small or thin data items can be selected.
cross selector
The cross selector is suitable for charts where the data item cannot be positioned through a coordinate system in one direction
For example: scatter chart, stacked column chart, multi-line chart, multi-area chart, etc., drag the finger to select the data item in the center of the cross, and the operation area covers the entire screen.
Triangle selector
Charts without axes are generally more special, and their universality is not as wide as that of charts with axes, but there are certain rules to follow; the triangle selector is suitable for pie charts, Nightingale charts, etc.
pointer selector
Pointer selector for donut charts, Nightingale donut charts, and more
legend
In addition to the operations in the chart, users often also need to view the respective names of data items of different colors through the legend, which is generally displayed above the chart. The web-side screen is large enough to be read at a glance, and almost no additional operations are required; On the other hand, even ignoring the word length of each name, it is difficult to see all the legends. In this case, we have to allow the user to drag horizontally in this area, and if necessary, we can do some operation guidance.
Explore panel
The exploration function panel includes some common operations, such as sorting, hiding data items, etc., which are activated by right-clicking on the web side; but there is no right-clicking operation on the mobile terminal. At this time, you can replace the right-click with the long-click, which can also trigger panel.
tooltip
Tooltip is also very common in web-side chart operations. When the user hovers over a data item, the tooltip will list detailed information about the data item; but there are some problems on the mobile side. First, there is no hover on the mobile side. operation; secondly, some data items have a lot of detailed information, and it is very likely that a large floating layer will cover most of the charts. When you drag the slider to browse the data information, this floating layer will follow your Sliding has always been there, affecting the aesthetics. Therefore, we display the information in the tooltip at the top of the screen to ensure that the floating layer will not block the chart. If the top cannot be displayed, allow horizontal dragging to browse the complete details.
table diagram
The presentation of the table graph is very similar on both ends, and there are not many operations. The display on the mobile terminal needs to pay attention to the difference between the aspect ratio and the web terminal. Some rules can be formulated to ensure that the operation is convenient and all the data can be fully browsed.
Finally, send a comparison chart of the completed migration. If you want to see more chart content, you are welcome to search for " NetEase Youshu " to experience our products.
Conclusion:
The above content is some of my explorations in the process of work, some sorting and refining of data charts in the mobile terminal application, the data is not boring, each basic chart has its own characteristics, master these characteristics, make different applications for different industries Business charts that help people understand data and make decisions are the value of data visualization. The audience of to b products is narrow, and the focus of content is very different from to c products, but some of the design methods and design processes are common, and I hope to bring you some lessons. The above cases and opinions Inevitably one-sided, looking forward to more guidance and exchanges.
NetEase has a number: an enterprise-level big data visualization analysis platform. The self-service agile analysis platform for business personnel uses PPT mode for report production, which is easier to learn and use, and has powerful exploration and analysis functions, which really help users gain insight into data and discover value. Click here for a free trial .
Learn about NetEase Cloud:
NetEase Cloud Official Website: https://www.163yun.com/
New User Gift Package: https://www.163yun.com/gift
NetEase Cloud Community: https://sq.163yun.com/