2015 popular Information visualization Process + method

Because at present in the big Data class product, the interface always needs to use the design language to explain some very fictitious, the abstract concept, therefore will inevitably study the information visualization. Before seeing a lot of peers in this respect of the summary and sharing, but found that the content is similar, almost all from abroad some related books and materials. So here I want to talk about the experience of this project, their own information visualization of some superficial understanding, I hope that can be a reference, to affect more colleagues to share valuable content.

My understanding of information visualization

Since the beginning of contact, understanding of nature is very superficial. Perhaps there will be more advanced insights in the future. At present, I think: information visualization is to use graphics to correctly express complex information and logical relations, which can be:

Attract readers through the unique beauty and fun of the pictures

Make content easier to understand through optimal presentation

Shorten the distance between readers and products, enhance the brand awareness

The picture forgot where it was, and it left a deep impression on me. This example makes the rainfall information at a glance through simple graphical changes. Information visualization is a great learning, which requires designers to have a good sense of interaction and a certain ability of graphic design.

Working with visual partners to produce results

Work One: Security Products home Display

Creative inspiration: see these product names from the requirements documents have the Imperial Vanguard, the gossip array, the Imperial City River ... At that time it was very interesting, the mind immediately surfaced an ancient city of the picture, surrounded by soldiers, gossip, there are imperial river and so on. After expressing the idea with the visual designer, everyone clicked that the plan was eventually produced. The center of the tower in the beginning is red, a bit too eye-catching, in order to avoid distracting and reflect the feeling of data protection, it changed to this translucent, very data virtual feeling.

Work Two: Product structure chart

Creative inspiration: Through the competition analysis found that the domestic and foreign counterparts in this area are very hard, so we should also strive to use a picture to describe the product structure and relationship clearly. The next article will talk about the specific design process.

Work three: Use process diagram

Creative inspiration: The product manager gives this picture is very rigorous, but for users to understand it is more difficult, so first use the wireframe to simplify it as a one-way flow chart, but this is not beautiful and intuitive. Ingenuity of visual designers through the beautification of the graphic, ingenious solution to this problem.

Original diagram:

Modify in (partial):

After improvement:

Work four: Schematic description of the project

Similar to the previous works, it is also the first to comb information logic, in a more understandable way to performance, and then through visual designer beautification.

Original diagram:

Improved chart:

There are many other works that are not shown here. After the completion of these works, what have I accumulated experience and experiences?

The design standard of information visualization

To do one thing well, you must first know what the standard is. In the process of perfecting our information visualization work with my friends, we have undergone countless changes, putting together these failed works, we can probably figure out what the cause of failure is, and what is the good standard.

These are the four criteria that I have summed up, and I'll come to one by one to explain:

This I will not say more, the Earth people can understand.

Information maps to the United States, but the United States is not the most important, the most important thing is more intuitive and clear message. For example: The following diagram is my two version of the design of the information map, the content is the same, but the form, which better understand?

Obviously, the right image looks more intuitive and clearer. Because of the same content, the right figure is in a symmetrical form, and half the effort is understood. Therefore, when we design the information map, we must not try to find the best way to make the information more concise and understandable.

"Correct" is the most basic requirement of the information graph. The information map is more beautiful and understandable, but if the reader doesn't understand it correctly, the graph has no value.

For example, the following diagram describes the relationship of a product's neutron module. Seeing this graph, I thought that these modules followed a sequential dependency from 1 to 5, but that's not actually the case. This means that the graphic conveys information incorrectly.

The following "consistent" is relatively easy to ignore, but it is also a very important point. When you have multiple pages of your product that involve information visualization, it is confusing for the reader to think "consistent".

Since we guarantee that the content of the picture is true and correct, we must consider the logic of the facts. Film and television plays in the total of "wear help" lens relish, because it does not conform to the true perception of people, which appears to be "false."

Why is the "dressing" phenomenon difficult to avoid?

Because of time, weather and other reasons did not take a complete

The director suddenly has a new idea, on the original basis to make up some content

Re-trim or reorganize content

Look, is it very similar to the design process?

The workload is too great for the designer to finish the day

There was a sudden insertion of other work in the middle

There's a new idea behind it.

Too much modification, partial omission or forgetting to update

Therefore, the design of "wear help" phenomenon is unavoidable. For example, in one of the images, the "security product" is a small lock icon, and in another picture, "Security product" becomes a "Security Center" and the shape becomes a shield. This makes the user wonder: Are these two the same thing?

We are in the design process, a large part of the focus on the inspection and modification of "wear help", do not think that this is a trivial matter, the details of the success or failure! Highly consistent graphics, both understandable, and enhance the brand image, and enhance the design efficiency. The logical visual language setting is an indispensable but easy to be ignored in information visualization, which should arouse the attention of designers.

　　The design process of information visualization

Through a variety of painful attempts in the project, combined with information visualization standards, I finally summed up such a more general process:

　　Step 1: Make sure the table is correct

As already mentioned in the previous article: "Right" is the basic requirement of the information graph, so it is important to make sure that the content of the information map is correct in the first place. Depending on the complexity of the problem, there are generally two ways:

The first approach:

For products that are more complex and difficult to understand, can let the product manager according to own understanding to draw a diagram, the designer communicates with the product manager, confirms the mutual understanding is consistent; If the product manager's drawing does not correctly express the content, then the designer will be able to refine on the basis of their understanding, then the two sides confirm again, To ensure that the graphics correctly convey the meaning of the expression.

For example, the above picture ("Royal Room" sub product data Engine), product manager at random to draw a sketch to me to see, I did not understand, let the product manager said his ideas, found that with my own understanding of the difference is very far; and then I went to the product manager to refine a sketch, show him, He pointed out some of the things I did not understand, and I modified them until the two sides reached an agreement.

The second approach:

If the designer has a general understanding of the product, you can also draw sketches yourself. Then the product Manager checks to see if the product logic is correctly expressed, and if there is a problem, the designer will revise it according to the opinion, until the two sides reach an agreement.

For example, the above figure ("Royal Dining Room" Total product structure), is that I and according to their own understanding of the "Imperial Room" product structure, product Manager did not raise objections, so smoothly into the second link.

　　Step 2: Optimize presentation form

It's not enough to be right, it's understandable. We need to find the best form of information graph in this step, so that readers at a glance, reduce the difficulty of understanding.

"Taobao technology this decade," there is a saying good "good architectural map full of beauty." Taobao engineer has spent 10 years to prove this matter. In fact, not only is the technical framework, good flow charts, structural drawings, information maps are full of beauty. According to my experience, they are often symmetrical, full and harmonious, is it a coincidence? I don't know, nature is so magical. If the information you are drawing is bloated, cluttered, and unattractive, it may not be because the facts are messy, but your expression is problematic.

So how to optimize the expression of the information graph? If this is a logically complex structure diagram, you can do this:

For example, the following figure (the "Royal Room" sub product data Engine), I began to draw this. Although the logic is not wrong, but the arrows are crossed, it looks very concise and difficult to understand. So how to improve it?

First, find the largest complete event from the diagram, the orange part of the picture.

Interestingly, when the picture is about to be completed, it is a pity that there is an extension of a place that causes the graph to be completely symmetrical. Finally, I asked PD to find out that the spur line was caused by an understanding error and should have been removed.

The sketch drawing process at that time:

The first figure is the same as the second one, but is it easier to understand it? The third figure is based on the second diagram and adds some detail information. When we consider the optimal presentation form, we can make it easier to spot the problem without considering the details and considering only the underlying frame structure.

　　Step 3: Explore the visual style

In the exploration of visual style should pay attention to catch big put small, first set to the main module of style, and then do extension. For example, I am doing in the Royal dining Room products, is to first set down the visual style of product structure, and then extended to the child product information map. If the first design of the child product information map style, it is difficult to extend to the overall structure of the map, will play a less effective effect.

First look for some competing goods and materials, divergent thinking, but also to determine the feeling of their own want.

I want the feeling is: the sense of technology, flat, the form of novelty and fun ...

Next, it entered the most painful "explore, modify" The infinite cycle of visual designers.

First edition (Cartoon):

The first time a visual designer tries a cartoon version. This version is very beautiful, but the description of the product is too little, not comprehensive. Cartoon style is not very suitable for the performance of such a large Ali data official products, and the style is not easy to expand.

Second edition (realism):

Drawing on the first lesson, visual designers try a realistic version for the second time. Although this time can be detailed to express the product content, but not intuitive and at a glance, reading up uninteresting.

Third edition (breakthrough):

Drawing on the lessons of the previous two, designers began to look for more interesting and more scientific forms of expression. But this version is generally easy to read, especially the left side of the style is very difficult to expand. But the picture on the left gives a feeling of the High-tech, avantgarde feeling of big data, which is very close to what I want to feel.

Fourth edition (improved):

Although the previous editions have not been adopted, but the direction is more and more clear. We decided to make improvements on the top left, removing some trivial visual elements, highlighting the subject and making it easier to read. But after the change I think the overall effect is not good, appears very thin, and easy to read is still bad. So you need to change your mind and try again.

Fifth edition (Final draft):

Combined with the previous experience and lessons, visual designers carefully listened to everyone's feelings and suggestions, coherent the idea, this time. Although this version is not particularly stunning feeling, but the comprehensive score is high: whether it is beautiful, or easy to read, correctness, expansion of the better. So it finally finalized the version.

　　Step 4: Perfect details

When you explore visual styles, you don't need to be very fine, but you can be more efficient by not thinking about the details and thinking about the main frame. After the visual style is determined, you can add and refine the details as needed.

　　Step 5: Style extension

I said in a previous article: "Consistent" visual settings to help users understand, but also better enhance the brand image. So after the main style is determined, we need to extend it to other pages that are needed. So how do you extend it? You need to make a simple visual style setting, just like the interface specification.

For example, in the product structure diagram, four sub products used in different colors, then we in other pages or related graphics content, we also use these four colors to represent the four products. The definition of depth is to take into account the area, visual level of the different to adjust flexibly, so that the overall harmony of the interface. This not only keeps the overall style of consistency, but also gives each product unique personality, enhance the information recognition degree.

　　Writing at the end: summary of Experience

Because this is my first time to compare the system of contact information visualization related content, so make mistakes is unavoidable, I write down these lessons, hoping to let other beginners to avoid my mistakes:

When designing a set of graphics, or related graphics, we should pay attention to the overall consideration, grasp the big and small. I was no system to consider, the child product diagram is determined, let the visual designer hurriedly do, the results found and the main map is difficult to support the unification, wasted a lot of time, but also increased the workload of visual designers.

The information visualization is not only lets the visual designer draw several pictures so simple, the planning link is essential. I began to think that information visualization is a visual designer thing, it has nothing to do with the interaction designers, and then slowly found that the hope is all pinned on the visual designer is impractical. Information visualization to do a good job requires a thorough understanding of the product, but also the need for a strong interactive skills, more need for passion and responsibility. Requires product managers, interaction designers and visual designers to work closely together, rather than push each other off, leaving the pressure to visual designers.

Good information graphs are full of beauty, they are often symmetrical and harmonious, and the graph of the smallest event is finished first, then the supplement is gradually added. I began to ignore this point, that the information accurately expressed clearly, and then let the visual designer slightly beautify the line, did not want to explore the best form of graphics, until one day saw a operation in the PPT of the product Toucay exclaimed: The original can be so! So do information visualization never-ending, always have the space to play.

Pay attention to detail matching, consistency. As an interactive designer, I naturally pay attention, but I find that other people may not care. For example, the structure of two sub products, there may be a graph with edges, a picture has no side, or the same position of the title, color or style is not the same, the same nature of the label shadow angle and direction are different ... These questions are simply endless. Maybe these are trivial things, but the brand is no small matter, details determine success or failure, I firmly believe that.