Tearing the B-end Seal, Visualization Construction in the Digital Age

why do you say it's tearing the B-end seal? Most students who haven't touched terminal B think that terminal B is just a simple list and graph. Just piece together open source components. What can I design?

In fact, this idea is completely wrong. If you get in touch with it, you will find that the B terminal needs to master too much product knowledge, thinking logic, normative awareness and so on.

and in recent years, the word "B-end" has appeared more and more frequently, because in the past few years, everyone was fighting for the C-end market, and the competition for pure C-end traffic has come to an end. On the contrary, B-end products have brought new opportunities, and at the same time, they have been paid more and more attention. Compared with previous B-end designers, they now need to master more and more skills. You can check some recruitment websites. Now the position of B-side visualization is very hot. Compared with C-side, the talent gap is even bigger, and B-side will be even more hot in the next few years. If you have the opportunity to contact B-side, don't miss the opportunity. It takes our team an average of two months to recruit a suitable designer.

Having said that, let's start today's topic!

First of all, some designers here may not be exposed to the design of data visualization, so the first question comes. What is visualization? Think about it. Give everyone three seconds ~

Enhance users' efficiency in processing data through visual expression.

Next, I will explain how to build visualization from three aspects:

Inspiration needs generate, and it needs to accumulate

Design from zero to one

Design metrics

First, inspiration needs generate, and it needs to accumulate

1.1? In the digital age, 99% of the problems are old problems

In the digital age, there is still information asymmetry, especially in key technologies and design, but if you look hard, you will find that your new problems are old problems of others a long time ago. So be a conscientious person.

But the problem comes again. Sometimes I really don't know how and where to find it. This is a very common question. Because visualization is smaller than the mature fields such as illustration and plane, the search for inspiration and materials is a headache for novice designers, and the lack of familiarity with keywords leads many designers to stay in the keyword visualization, and finally they feel that they are all seen pictures and have no new ideas.

1.2? Be clear about your goals and know what you are looking for

There is too much information on the Internet, and it will only waste time to look for inspiration aimlessly. One day, this picture looks good, the other day, it looks good. A few hours passed before you knew it.

1.3? Establish a keyword thesaurus

After determining the target, it is necessary to refine the keywords. How to establish a keyword thesaurus?

The keyword thesaurus consists of three parts: terminal, design type and business type.

terminals: big screen, mobile terminal, web and so on.

design type: each subdivided data visualization category has some proper nouns, such as the recently popular on-board HMI system, whose type keyword is HMI. Through these keywords, you will find more accurate results. Design type keywords such as: AR/VR, HUD, HMI, FUI, etc., you need to know the relevant types of keywords in your company and record them. As well as those related to you, write them down and supplement your own vocabulary.

business types: smart city, biomedical, monitoring and deployment, etc.

if you search these three categories individually or in combination, you will see more visualization products. After the keyword thesaurus is established, you can search on the commonly used websites, and the best ones are behance and Pinterest.

1.4 ? Besides the commonly used design websites, where else can I see them?

Enterprise official website: Many companies that do data visualization will show some cases that can reflect their business characteristics and strength in official website, and these cases are the best data visualization design works of these enterprises. Therefore, whenever there are cases in official website, the case list is basically the most typical and best design, so it is also an interesting and effective method and way to find inspiration from these cases.

1.5? Only when you see what others can't see can the design be different.

To sum up: only when you see what others can't see can the design be different. If you see the same thing as others, how can you do better than others?

1.6? Interest push

People who often brush short video/news websites should know that the system will arrange the following content push for you according to your likes, collections, browsing and other data, so as to ensure more accurate content push for you. The same is true for designing websites. behance and other websites are also full of thousands of people. It will read your preferences according to your likes and collections, and then push more accurate works. So suppose you are in the direction of B-side data visualization, you will often search and praise related works, and then the chances of related content appearing on your home page will increase.

1.7? Regularly clean up and update the last point of iteration

, which is also a common problem of many designers. You can learn it by collecting it.

The inspiration library requires refinement rather than abundance. Every once in a while, when I come back to look through my previous collections, I will find that some works are already disdainful, because in the process of collecting inspiration, our aesthetics will naturally improve. When more and more samples of works are input, we will have more dimensions to evaluate the works. Those works that I thought were good before will now have defects and dissatisfaction, which is a very positive result and growth. Delete those works that you feel dissatisfied with and add works that are more in line with your current aesthetics to the inspiration library.

Only by gradually improving your foundation can you go higher.

second, from zero to one? Design-driven

After the first part, we started to build products.

I am responsible for about 1 projects from zero to one, large and small. I think the designer's right to speak is the highest in the whole product cycle, which can be design-driven. Since design can have enough voice, you have to plan the future design direction.

at the initial stage of the product, there are often several controversial issues. Let's talk about them.

2.1 ? Design first or research first?

This is a multiple-choice question that must be made for a new project. Before you speak again, think about it. If it were you, how would you choose?

in my opinion, design comes first. (Of course, the design first is based on the fact that you have at least a simple understanding of the industry of this project, then design first and then conduct user research). Why? Because if the user researches first, the user will only feed back what he wants most at the moment, which may mislead you. For example, we often give an example: before the car came out, people just wanted a faster horse.

what we need to solve is not what users want now, but what users really need behind the pain points. In this creative project of -1, the designer is often the person who knows the product best at the moment. If you hand over the decision-making power to some people who don't know the product, you can only lose your way in the end, and the pot is still the design. So at the beginning, designers should hold the decision-making power in their hands and master the course.

2.2 ? Design first or specification first?

This question seems relatively unified now, but some students still have doubts, so I'll take it out and talk to you again.

First of all, my opinion is that design comes first. Those who set the specifications before design are basically YY themselves, and the rework rate is extremely high. When you are making a specific design, you will know that the previous specifications are in vain. Generally, the specification will be exported after the completion of the project or after the completion of the main style and main pages, which can not only reduce the change of the specification, but also ensure the continuation of the specification for later functions, killing two birds with one stone.

Of course, design specifications are not necessary for all projects. They are designed to reduce work rather than increase it. If it is a one-off project, there is no need to spend extra energy to output specifications and waste resources ~

2.3? Which is more important, completion or perfection?

Now we are all in an era of race against time. The task is endless, and there is no time to finish it. What caused this situation is nothing more than a problem: time is not enough. The usual practice is to finish first and then iterate. After making the product for a long time, you will find that completion is more important than perfection. If it is not perfect, you can iterate again. If it is not completed, you may miss a window, thus losing the possibility of perfection ~

After talking about these three issues, we should also have some precautions when designing, so as to truly achieve design drive.

2.4? Make complexity clear, simple and beautiful

For designers, our task is to make complex problems clear, simple and beautiful, so we should become a "bridge-builder" for communication between enterprises and customers. Through the design method, the intangible and complex technology is displayed in a tangible and visual way, so that customers can feel the function of the product more intuitively and clearly and understand its value in the business scene.

2.5? Change the perspective and establish * * *

From the customer's perspective, focus on the core issues that customers are concerned about, organize the content in an orderly way through scenarios, and quickly establish * * * with customers, effectively reducing the difficulty of content understanding.

2.6? The product architecture can be less complicated

Simplify and fool the complicated business/function, reduce the learning cost to the greatest extent, and never let users operate the products that can help users. You have to let users know what your product does and what functions it has within 1 minute, and you will succeed.

2.7? Boldly hide redundant content

The amount of content in the B-end project is huge. In the face of complicated information, we should refine the core content of each scene to avoid redundant information hindering the effective communication of the content. Speech language should not only be simple and easy to understand, but also strictly control the length of words to ensure that the content can be quickly scanned and understood.

2.8 ? Respect users' habits

Don't try to change users' inertia thinking. You should remember that inertia thinking is greater than design thinking, and his reading habits and operating habits are not easy to change. Don't try to change them for the sake of personalization. In most cases, the result will not be so ideal unless you are extremely sure.

2.9? Choose the right chart

This is often mentioned, so I will simply remind you here. For example, when comparing data, the histogram can clearly express the results that users want, but you have to put a cool radar chart. His essential purpose has not been achieved. What's the use of being beautiful?

Each chart is suitable for which scenes, such as antv, hicharts, etc., so I won't go into them one by one. I have written an article on how to make rational use of charts before, so you can have a look if you are interested.

third, design measurement

we need to verify and measure the quality of product design. How can we verify the good or bad visualization?

Beauty and ugliness are subjective, and there is no absolute beauty or ugliness. There will always be people who like a product and people who don't like it, but we should cater to the aesthetics of most people.

So we need a methodology to verify the quality of products. Now all major manufacturers are making their own methodology for product verification. Ali has done a good job here in China. Let me give you some commonly used measurement models.

Alibaba Cloud: UES

Ant Financial Service: PTECH and Ease of Use

1688: Five-dimensional Model

Youku: DES

UES is the best in China at present, and the UES model was officially explained to the public at Ali Design Week in May. Let me briefly talk about Alibaba Cloud's UES. There are so many measurement models, regardless of their different methods and dimensions, but their purpose is the same: to measure design results through models.

usability: easy to operate, easy to learn and easy to see? ...

consistency: overall style, common framework, common scenarios and components ...

task efficiency: task completion rate, task completion time, function utilization rate ...

performance: first screen rendering time, API request response time, page request response time? ...

satisfaction: product satisfaction ...

UES is divided into five modules, which need to be verified in the whole product life cycle.

I'll stop here about UES. If you start talking about UES model, you won't be able to finish it for half a day. If you are interested, you can go to the relevant materials of UES model officially released by Alibaba Cloud to make an in-depth study to see if it is suitable for your own products.

The above is a model for measuring products. Next, for our B-end designers, we should also have some indicators to measure whether we are qualified or not.

3.1? Design efficiency

In the era of involution, all major manufacturers are talking about human efficiency. After all, time is the most precious, so now they are trying their best to improve human efficiency. Moreover, compared with the C-end, the B-end can have more automated tools.

Take my company as an example. When I first went, there were basically no automation tools. Every designer was busy every day, and no one was idle. But I found that there are a lot of repetitive physical labor that can be completed without much thinking, but it takes nearly one-third of the time. So I'm thinking about how to improve human efficiency and replace some manual labor with some tools, so that I can release design assets and do more important things.

At that time, we made the first automatic tool: design system. Now, everyone should be familiar with this word, but we started to do it earlier, and there are no perfect design systems for our reference, so we are one of the first teams to explore the design system. After the design system is completed, it can save 1/3 of the design time, and the standardization of the team is more unified.

in the following words, we also made some other automation tools, such as combining some plug-ins to automate the release of icon and components, and getting through with R&D students, and having corresponding automatic reminding tools, which also saved the communication cost with R&D.

at work, one step less in the process is success. Take your time, and the Long March will come out step by step.

3.2? Growth design

The word growth comes from the book Growth Hacker. As the name implies, the word is designed to promote product growth. The word

is often used in C-terminal, because there are many verifiable methods in C-terminal, and the results are quick, so some common cases of growth design are all about C-terminal, and