B end workbench be designed? This article has fully analyzed the design process and methods of a B-end workbench from four aspects: demand analysis, information architecture, visual charts and visual design. Come and have a look.
Holding a Case When the torch illuminates the colorful black~
1. Requirement analysis
When designing a product, we must see the essence through the phenomenon.
Who are we for? What problems are solved? The results of the analysis will directly affect the quality of the plan. Here we recommend that you use the 5W1H analysis method. The 5W1H analysis method is also called the six-hex analysis method. It is a thinking method, or it can be said to be a scene creation analysis method.
5W1H analysis method includes the following aspects:
- Why: Why do it is the reason.
- What: What to do and what to do is the goal.
- Where: Where to do it, it is the place.
- When: When is it time.
- Who: Who will do it, it is the execution object.
- How: How to do it is the method.
Through the above analysis, we can (assumed) know that our users are technical personnel and grassroots managers; the purpose of this page is to allow users to keep abreast of the progress of various work at any time and quickly enter the work matters that need to be handled. According to the conclusion, it can be concluded that the workbench is a navigation page or a comprehensive management page. It is an important "facade" for users to perceive the value of the product. The user has certain experience and belongs to the advanced user. From a design perspective, the home workbench is the core scenario of the entire system specifications and visual style.
usage role: is mainly a technical staff and grassroots managers.
content primary and secondary (according to requirements):
- P0: Summary of various data indicators, my dynamic
- p1: Total trend, data ranking, operation summary
- p2: Distribution summary, to-do items
Design requirements: highlights, concise and clear.
2. Information architecture
1. Priority processing
The following picture is the prototype given by the product and is also a question that is often encountered in B-end interview questions. If you plan to beautify it directly according to the prototype given by the product, it will probably be difficult to be selected.
One of the purposes of demand analysis is to do information processing. Here we will mention a word called "screen effect". We all know that the purpose of B-end products is to "reduce costs and increase efficiency", and try to shorten the page with reasonable information layout.
For example: There are two top10 rankings in the prototype above. If a row display will be more crowded, it will not reflect the top10 rankings. Considering "easy" we will put two lines, but this takes up screen space. After communicating with the product, we integrate it together and use button group switching to view it. At the same time, rankings are also something that business personnel need to pay attention to, so we put them up. The top personal information content at
is relatively small, and there is no need to occupy a whole row. We move it to the right; because the first 3 indicators cannot be clicked, we integrate them into a card in order to distinguish them from the buttons that can be clicked at the back; after communicating with the product, it is not very important, move to the bottom, and move the operation summary module upwards. The information priority between
and modules here is basically processed. The following is to disassemble the individual module.
First of all, we need to observe which one is: important information, secondary information, and auxiliary information. We mentioned "efficiency" above, highlighting important information is to allow users to see clearly at a glance, and there is no need to look for or be interfered with by secondary information.
has only one title on the prototype of the last module, which really verifies a sentence: "A clever woman can't cook without rice", so she went to the product to communicate again. Why can a single model be clicked to view more? What kind of data does the user want to obtain in this place?
After some communication, I got some "rice", and the good-looking woman can finally work. In order to reflect "easy to discover", we added a details button to the later module.
2. Rasterization processing
In fact, the above picture is processed by me. The prototype of the product does not look like this, and the module size and spacing are given casually. If you do it according to the size of the prototype module given by the product, you will probably "swear" because you cannot convert it according to proportions and you will not be able to adapt.
This step is mainly to do rasterization processing, and we need to define the proportion and spacing of each module. B-end products usually use a 24 grid layout, that is, 24 columns + 23 sinks + 2 page margins.
There are two types of workbench pages I encountered, one is to have the left tree and the other is not. The corresponding rasterized values of these two are not the same. Calculated according to the currently commonly used size 1440*900: I use 1440=2*20+43*24+16*23 without the left tree.
If you are doing a tree on the left, you can refer to the data below.
3. Visual chart
The key point is here. I personally think this section is the core of the workbench and data analysis page, but many people ignore it and think it is just a few charts, and it can be done in a flash...
We mentioned above that the B-side test questions give the original data (tables), and the designer needs to find the appropriate visual graphics based on the data to display it.
If you are not familiar with visual charts, you don’t know when to use bar charts, line charts, and pie charts; you don’t know what shapes to use as time changes; you don’t know what shapes to use for data that reflect rankings. Then it will be difficult for you to output a well-founded work.
is too many chart types, so it is left in detail to the later article to discuss. This time, only the charts used in the prototype are analyzed.
1. Bar chart
Histogram is one of the commonly used data visualization graphics. It can be used to generate data statistics of variables over time, and can also be used to compare and ranking data categories.
As shown in the figure, the bar chart can show the geographical distribution of Zhihu article viewers, and can also reflect the situations of different time periods. Through the graph, you can quickly understand the provinces with the most and least distributed distributions.
(1) Advantages
Human eyes are more sensitive to length (height), which can intuitively reflect data differences.
(2) Defect
classification is too large and the display effect of the data will be reduced.
(3) Design points
Only by taking into account both the graphics vision and the experience can the designer be reflected. The ability of a designer is not only reflected in his techniques, but more in his thinking ability. Both graphic extensible design and innovative design require designers to think carefully, and only in this way can there be outstanding design results.
(4) Information level
(5) Visual display
Definition of the spacing of the column body can be designed using the 5-point principle, that is, the spacing between the columns is N, and the distance between the left and right sides and the column is 2/N. As shown in the figure. This is also a common technique in many interface designs. The principle is to be close to the golden ratio and is visually more comfortable. At the same time, while ensuring the overall coordination of interface elements, the width of the column is designed to N as much as possible, so that it is most visually coordinated.
In addition, before designing graphics, designers should know the real data, so that they can design graphics based on real data and restore the appearance after landing as much as possible. In the figure, there are big differences between the design of the graphics and the appearance after landing. The problem lies in the fact that the designer did not understand the real situation of the data before the design, and the front-end engineer fixed the X-axis value according to the design drawing.
(6) Similar chart
- Stacked histogram: Stacked histogram can show the changes in two or more data, as well as a comprehensive comparison between data.
- Grouping Histogram: Grouping Histograms can display different grouping data under each category on the same digital axis.
- Ordered Bar Chart: Like ordered bar charts, ordered bar charts can also present the ranking of data.
2. Line chart
Line chart is often used to represent the changing trend of data in a continuous period of time. The main function is to clearly reflect the trend of data changing over time.
is shown in the figure. The line chart can not only show the price trends in different months, but also clearly present the peaks and troughs of the data. A line chart can also be multiple lines to analyze the trend of multiple sets of data over time and the trend comparison between data.
(1) Advantages
intuitively reflects the data change trend.
(2) Defect
disordered category cannot display data characteristics.
(3) Design points
line chart can be used to show the trend changes of data. Through the fluctuations of the lines, people can explore the logic behind the data. However, if the line chart is not designed reasonably enough, it will visually create a wrong perception.
In the figure, the scale value of some line charts is unreasonable, such as the scale value of the middle line chart does not start from 0, resulting in the exaggerated appearance of the line; the scale value of the line chart on the right is too high and the trend changes are too smooth, which are all unobjectively expressing the data. The correct way to
should be that the scale value starts from 0, and as the data increases or decreases, the scale value also changes accordingly.
(4) Visual display
In line chart design, it is also necessary to pay attention to the thickness of the line to be moderate.
In the figure, one of the polylines is too thin, which will reduce the performance of data visualization; the other is too thick, which will lose the details of data fluctuations in the polyline. In the graphic design of the product, the grid line and the starting line are generally 1 pixel, and the fold line is generally 2 pixels. Such thickness will have better visual performance.
(5) Similar chart
ladder line chart: Lines form a series of steps between data points.
Area Chart: The only difference from the line chart is that there is color filling between its independent variable data and the axis, which can further highlight the trend changes of the data.
3. Pie chart
mentions the proportion of data. I believe you will think of pie chart first, which is mainly used to show the data distribution. Pie chart is the most intuitive figure that displays the proportion of the data, and the radian size indicates the proportion of the classification.
However, the pie chart has certain limitations. When the proportion value is close or the proportion classification is too large, it is not easy to visually distinguish the proportion of each category. In data visualization products, because pie charts are large areas of color blocks, they will be very visually prominent and can easily steal the limelight of important data, so you should consider it as appropriate when using it.
(1) Advantages
intuitively displays the proportion and distribution of each item in the overall population, and emphasizes the comparison between individuals and individuals.
(2) Defect
has too many classifications, and the smaller the fan shape, the chart cannot be displayed.
(3) Design points
Each graphic has its own design specifications. For example, when there are too many pie chart classifications, text is generally not placed on the graphic elements, because once a few relatively small proportional data appear, the words are easily overflowed and it is not easy to distinguish the pointed classification, as shown in the right figure in the figure. A good solution is to use leads to point out the classification data on the periphery of the graph, or add an example diagram to display it.
(4) Visual display
In addition, the classification of pie charts is best started at 12 o'clock, which is more in line with people's reading habits, that is, from top to bottom and from left to right, as shown in the figure. If the pie chart is displayed at will from different locations, there will be a lack of specifications, which will easily lead to confusion when multiple pie charts are displayed at the same time.
At the same time, if there is no sorting in the classification of the pie chart, such as January and February..., the proportion should be arranged in order from large to small, so that the ranking of the classification can be visually presented. At any time, if there is a "other" category, no matter how much it accounts for, it must be put last, because its data is usually the least concerned data.
(5) Similar chart
- nested circle pie chart: used for the proportion of an indicator in different dimensions.
- runway chart: While seeing the proportion, you can intuitively see the ranking of the indicators in the current dimension.
4. Table
The table looks simple, but it is not easy to design well. Usually the tables we see (in the product) are relatively simple tables.
has some complex table reports in the BI system, and it will be difficult to read if you use component information directly. We need to adjust the visual of the table to make information more efficient, which requires some design skills and principles.
(1) Design points
The first principle of table typesetting: text is aligned left and numbers are aligned right. The characters in the table need to be aligned left because our habit of reading text is from left to right.
. The project names in the figure (above) vary in length. Center alignment will visually make the entry point appear in a "Z" shape, affecting reading efficiency. Left alignment allows the linear structure to not jump visually, read smoothly and more aesthetically pleasing. The numbers in the
table need to be right-aligned because when we are facing a long number, we usually read from right to left. For example, the number ¥368,568,023.00 is usually the number size that is identifiable from the single digit to the last ten million digits. Some people can quickly judge the size of the number through the thousand mark, but in fact it is also a browsing order from right to left. Therefore, the right alignment of the numbers is most in line with people's reading method.
is in the figure (below), let us experience the reading efficiency of numbers being left-aligned, center-aligned, and right-aligned, as well as the comparative perception of each data volume.
text alignment and numbers right are aimed at names of different lengths and large-scale numbers. For numbers with the same number of text and smaller sizes, you can also try to align centers in a center. Symmetrical elements themselves have a beautiful feeling. As shown in the figure, by re-typed text and numbers in the table, I believe that reading efficiency will be greatly improved. Although
improves reading efficiency, this is far behind the excellent table design. The most obvious one is that the borders of the table are too prominent visually, so we will continue to adjust next.
(2) Weakened border
As shown in the figure (below), the content of the table can be visually highlighted by weakening the border. Table borders can make the information presentation more organized and improve readability, but cannot be higher than content information at the visual level.
(3) Remove the border and division line
Remove the border and division line of the table, and use white space to separate the content. No frame is better than frames. Enlarge white space can make the table more space-like. In this design, it is important to note that the intervals of elements should not be too small, otherwise it will appear crowded. Since some problems will be enlarged after removing the border, such as the title and content are not compared, it is necessary to enhance the comparison and have a level overall.
(4) emphasizes that the title
table in the figure enhances the title, which makes it look more layered. There are many ways to emphasize titles, not just bold fonts or enlarge font sizes. You can also add background to the title bar to form contrast.
(5) Highlight important information
If there is a distinction between important data and secondary data in a set of data, then it is necessary to focus on the design of important data, and the same is true for the design of tables. The figure shows the important data information to form a more prominent contrast with other elements by adding background colors. This design is a design method to make choices for users, which can easily allow users' vision to stay where they originally wanted to focus on.
(6) Table extension design
Since people often experience aesthetic fatigue with familiar things, innovation in design can easily give people a bright feeling.
The following figure below gives a horizontal line on the background to highlight the data in this column. This not only enhances information communication but also breaks the conventional table style (it is just a way of thinking).
(7) Table fonts using
Table numbers are the most likely to have problems with the use of digital fonts, because many digital fonts are not equidistant designs, such as the font spacing area occupied by the number "1" is less than "8". If you encounter a large set of numbers, it may mislead the viewer.
is shown in the figure below. Originally, 32,118,116,00 is greater than 28,558,363,00, but because different numbers occupy different widths, such a design is easy to mislead users visually. Therefore, the numbers in the table should be used in table fonts, because each number in table font occupies the same area, so there will be no problems in the case.
In fact, there are similar problems in the number fonts in many tables. The following figure shows the design after modifying the digital font, so that the data can be presented objectively. Commonly used fonts in the
table include Roboto, DIN, Microsoft Yahei, Siyuan bold, Song font, Apple font, etc.
4. Visual design
1. Color matching
- Reference 631 color matching method.
- should be used with meaningful colors carefully, such as: red, yellow, and green.
2. Icon
Commonly used icons are divided into two categories:
(1) Tool icon : Simplified abstract graphics containing certain product functional metaphors, replacing text bytes to save interface space, making it convenient for users to understand, and is often used in B-end products.
is shown in the picture. The icons from different products are different. Although the expression forms and styles are different, they are all to reflect the meaning of the text behind the icon.
(2) Decorative icon : The main purpose is to decorate the visual elements of the interface. The style is greater than the function. It is often used for product promotion, activities and other pages.
As shown in the figure, products related to cloud computing and big data have relatively complex semantics and are difficult to express through icons. Since you can't understand it, just abstract it.
is the most widely used tool icon in B-end products. Some people may think that the tool icon is too simple. It looks simple and it is not easy to do it well.
must first ensure "consistency", consistency of thickness, consistency of rounded corners, consistency of perspective, and consistency of size, and at the same time, the semantics must be expressed in figures.
3. The spacing
generally uses multiples of 8: 8, 16, 24, 32, 40, 48...
4. Font
- 2px, 14px, 16px, 20px, 24px, and the "fallback mechanism" can be used.
5. Final effect
Thank you for watching!
Author: Nightingale B-end UX Design; Official Account: Nightingale B-end UX Design
