Why and how to use data visualization? Types and methods of information perception

2.1. Advantages of a visual form of presenting information

Verbal language and verbal categories contain extremely primitive means for constructing space, interpreting it, or doing something with it. This goal is served by the language of images and the system of perceptual actions with the help of which a person builds an image. surrounding reality and navigates it. This system is called perception. Perception is defined as complete image, reflecting the unity of the structure and properties of the object. The objects of visual perception are objects, processes and phenomena of the surrounding world, which can be divided and described in the categories of space, movement, shape, texture, color, brightness, etc. When perceiving objects, the image more or less fully reflects the object or situation in which there is a person.

Images created on the basis of visual perception have greater associative power than words. Perhaps that is why they are perfectly stored in memory. Even after viewing several thousand paintings once, observers are able to correctly identify about 90% of them. The visual image is very plastic. This property is manifested in the fact that in terms of the image a rapid transition from a generalized assessment of the situation to detailed analysis its elements. Various types of movements of objects reflected in the image, their shifts, rotations, as well as enlargement, reduction, perspective distortion and normalization are possible. This unique manipulative ability of the visual system allows you to imagine the situation in both direct and reverse perspective. Manipulation of images and their completion are the most important means of productive perception and visual thinking.

Many studies indicate that the visual system has mechanisms that ensure the birth of a new image. Thanks to them, a person is able to see the world not only as it really exists, but also as it can (or should) be. This means that visual images are a necessary condition, and even moreover, an instrument of mental activity. They are connected more directly, in comparison with symbols and speech, with the objective reality surrounding a person. An image is not only and not so much contemplation as it is a reconstruction of reality. It, this reality, can be recreated in the form (or close to it) in which the object really exists. But destruction of an object or situation and the reconstruction of its new version or variants are also possible. On the basis of this image, changed in comparison with reality, a person again turns to objective reality and rebuilds it in his own practical activities. It is impossible to prepare a creatively thinking specialist without developing his imaginative representation, imagination and thinking. The universal apparatus of projection schematism provides a tangible benefit in this matter. One of the most important projection modeling tools used to form spatial representations is geometric interpretation. The objects of interpretation are graphic models in the form of a combination of drawings, diagrams, text, diagrams, etc. Graphic models involve displaying information in the form of a set of means of graphically representing information: lines, symbols, mnemonic signs, used in accordance with the rules for constructing graphic models. When perceiving information in this form, access to a higher-dimensional operational space is necessary than when perceiving text. The degree of accuracy when comparing an information object with its model depends on the completeness of information about the projection apparatus that took place during the modeling. Figure 2.1 shows one of the possible classifications of graphical models. Pictographic model– a graphic model compiled using conventional graphic images (pictograms) indicating objects, actions or events. Ideographic model– a graphic model compiled using ideograms – conventional written signs denoting concepts.

The issue of the effectiveness of information transfer and assimilation is one of the main ones throughout last decades. The main means of communication in the world at the beginning of the 21st century is visualization (a visual form of transmission) of information. Largest quantity information (approximately 80–90%) a person perceives visually. “The dominant importance of the visual system for humans is explained by the fact that it is the most powerful source information about outside world, has the greatest rangefinding and stereoscopic sensory functions."

Efficiency, the advantage of the graphic method of transmitting information, compared to motor or sound (Figure 2.2), is that visual perception the information transmitted by a person and the creation of a mental image by him occurs so quickly that a person perceives this process as “instantaneous”. This explains the effect of simultaneity, or simultaneity, based on the property of human perception of information: the mental images created when perceiving information and the transmitted graphic models are very similar in form.

This article was written by a representative of DevExpress and published on a blog on HabraHabr.

Medical researchers have found that if the instructions for a medicine contain only text, a person absorbs only 70% of the information from it. If you add pictures to the instructions, the person will already understand 95%.

It is obvious that humans are predisposed to process visual information. Besides being great for processing by our brains, data visualization has several benefits:

  • Focus on different aspects of data


Using graphs, you can easily draw the reader's attention to the red indicators.

  • Analysis large set data with a complex structure
  • Reducing a person’s information overload and maintaining their attention
  • Unambiguity and clarity of output data
  • Highlighting connections and relationships contained in information


Important data can be easily seen on the graph.

Aesthetic appeal


Aesthetically attractive graphs make data presentation impressive and memorable.

Edward Tufte, author of some of the best books on visualization, describes it as a tool for displaying data; encouraging the viewer to think about the essence, not the methodology; avoiding distorting what the data has to say; displaying many numbers in a small space; showing a large set of data as a coherent and unified whole; encouraging the viewer to compare pieces of data; serving fairly clear purposes: description, research, ordering or decoration ().

How to use data visualization correctly?

The success of visualization directly depends on the correctness of its application, namely on the choice of the type of graph, its correct use and design.


60% of the success of visualization depends on the choice of the type of graph, 30% on its correct use and 10% on its correct design.

Correct graph type

A graph allows you to express the idea conveyed by the data most fully and accurately, so it is very important to choose the appropriate type of diagram. The choice can be made using the following algorithm:

Visualization goals- this is the implementation of the main idea of ​​​​information, this is what the selected data needs to be shown for, what effect needs to be achieved - identifying relationships in the information, showing the distribution of data, composition or comparison of data.


The first row shows graphs with the purpose of showing the relationships in the data and the distribution of the data, and the second row has the purpose of showing the composition and comparison of the data.

Relationships in data- this is how they depend on each other, the connection between them. Using relationships, you can identify the presence or absence of dependencies between variables. If the main idea of ​​the information contains the phrases “refers to”, “decreases/increases at”, then you should strive to show exactly the relationships in the data.
The distribution of data is how it is arranged relative to something, how many objects fall into certain sequential areas of numerical values. The main idea will contain the phrases “in the range from x to y”, “concentration”, “frequency”, “distribution”.

Data Composition- combining data for the purpose of analysis big picture in general, comparisons of components that make up a percentage of a certain whole. Key phrases for composition are “made up x%”, “share”, “percentage of the whole”.

Data comparison - combining data in order to compare certain indicators, identifying how objects relate to each other. It is also a comparison of components that change over time. Key phrases for ideas when comparing are “more than/less than,” “equal to,” “changes,” “increases/decreases.”

After defining the purpose of the visualization, you need to determine the data type. They can be very heterogeneous in type and structure, but in the most simple case distinguishes between continuous numerical and temporal data, discrete data, geographic and logical data. Continuous numerical data contains information about the dependence of one numerical value on another, for example, graphs of functions such as y=2x. Continuous time contains data about events that occur over a period of time, like a graph of temperature measured every day. Discrete data may contain dependencies of categorical quantities, for example, a graph of the number of sales of goods in different stores. Geographic data contains various information related to location, geology and other geographical indicators, shining example- this is normal geographic map. Logical data shows the logical arrangement of components relative to each other, e.g. family tree families.


Graphs of continuous numerical and temporal data, discrete data, geographic and logical data.

Depending on the goal and data, you can choose the most suitable schedule for them. It is best to avoid variety for the sake of variety and choose according to the principle “the simpler the better.” Use specific types of charts only for specific data; in other cases, the most common charts are well suited:

  • linear
  • with areas
  • columns and histograms (bar)
  • pie chart (pie, donut)
  • polar chart (radar)
  • scatter plot (scatter, bubble)
  • maps
  • trees (tree, mental map, tree map)
  • time diagrams (time line, gantt, waterfall).

Line charts, area graphs and histograms can contain several values ​​in one argument for one category, which can be either absolute (then the prefix stacked is added to these types of graphs) or relative (full stacked).


Graph with stacked values ​​and with full stacked

When choosing a suitable graph, you can be guided by the following table, compiled on the basis of this diagram and:


Proper Use of a Graph

It is important not only to choose the right chart type, but also to use it correctly:

  • There is no need to load the chart with a lot of information. Optimal quantity different types data, categories - this is no more than 4-5, otherwise it would be more expedient to divide such a diagram into several pieces.


Such a graph can be compared to spaghetti and is better divided into several diagrams.

Select the correct scale and scale for the graph. For histograms and area plots, it is preferable to start the value scale from zero. Try not to use inverted scales - this very often misleads the viewer regarding the data.


An incorrect scale negatively affects the perception of data. In the first case, the scale is selected incorrectly; in the second, the scale is inverted.

  • For pie charts and graphs that show a percentage of a total share, the sum of the values ​​should always add up to 100%.
  • For better perception of data, it is better to organize the information on the axis - either by value, or alphabetically, or by logical meaning.

Correct design of the schedule

Nothing is more pleasing to the eye than well-designed graphs, and nothing spoils charts more than the presence of graphical “garbage.” Basic principles of design:

  • use palettes of similar, not bright colors, and try to limit yourself to a set of six pieces
  • auxiliary and secondary lines should be simple and not conspicuous


Auxiliary lines on a graph should not distract attention from the main idea of ​​the data.

  • where possible, use only horizontal axes labels;
  • For area graphs, it is preferable to use a color with transparency;
  • Use a different color for each category on the graph.

conclusions

Visualization- a powerful tool for conveying thoughts and ideas to the end consumer, an assistant for the perception and analysis of data. But like all tools, it must be used in its own time and place. Otherwise, information may be perceived slowly or even incorrectly.


The graphs show the same data, the main visualization errors are shown on the left, and they are corrected on the right.

When used skillfully, data visualization can make material impressive, interesting, and memorable.

The quality of visual design significantly affects both the psychophysiological state of the user and the efficiency of his work in general. As a result, even a software product that is quite powerful in its capabilities may not be functional enough if the visual representation of its interface does not meet the relevant requirements.

When designing visual elements of an application interface, it is advisable to rely on certain principles of composition, the main ones of which are the following:

    hierarchical organization of displayed information;

    visual highlighting of the most important elements;

    balanced screen structure;

    visual unification of logically interconnected elements;

    ensuring readability and logical consistency of displayed information;

    the use of unified approaches to visualizing displayed information not only within the application, but also the working environment as a whole (the principle of integration).

Hierarchical organization of information. The principle of hierarchical organization of information means placing information based on its meaning relative to other visual elements of the application. The result of this ordering affects the implementation of all other principles of visual presentation of information. From the point of view of the user's work, the hierarchical organization of information determines the availability of certain data and the sequence of execution of the task being solved.

Visual highlighting of the most important elements. When implementing the principle of attracting the user’s attention, two tasks must be solved: firstly, the choice at each step of the work of some basic ideas, most important to complete this step; secondly, the appropriate presentation and placement of the elements implementing this idea.

Due to psychophysiological characteristics, people pay attention primarily to the upper left corner of the viewed area or to that the part of it that is visually different from the others. Based on this, it makes sense to place the most important information(or node element) either in the upper left corner of the screen or in a window equipped with special attributes.

Balanced screen structure. The principle of balanced screen structure is one of the most important principles of visual design. It assumes, on the one hand, the rational use of screen space, and on the other, such a placement of information in which only that part of it that is really necessary to complete the next step of the user’s task is presented on the screen at any given time.

Visual unification of logically interconnected elements. The visual integration of logically interrelated elements helps the user understand how exactly the information and controls presented on the screen relate to the task step being performed and each other. With friend. For example, if a dialog box has a button that affects the contents of a list, it makes sense to place them side by side.

Readability and logical consistency of the displayed information. Any information (not just text) must be expressed in a compact and at the same time accessible form; in addition, the user must be able to understand how it relates to previous and subsequent steps in the task.

Integration. If the application interface is visually consistent with the system interface and the interface of other applications, it is much easier to provide the user with a consistent and predictable work environment.

Color is one of the most important visual attributes of the interface. Because color has the ability to attract the eye, it should be used to identify those interface elements that the user needs to pay attention to. Color also has an associative aspect; in many cases, objects of the same color are perceived by people as related. Colors can also have certain emotional or psychological effects; It’s not for nothing that, for example, colors are divided into “cold” and “warm”.

Please note that some color combinations, such as blue characters on a red background, are unpleasant to the eye. About also the influence of color on mood and performance.

Fonts help organize information and create a certain mood. By changing the size and density of the font, you can indicate to the user the degree of importance of this or that information and the order in which it should be read.

On standard monitors, fonts are typically less legible than on a printed page. Avoid using italic (Italic) and serif fonts as they are difficult to read, especially on low monitor resolutions.

The number of fonts and styles used must be limited. Whenever possible, use the standard system font for common interface elements. This ensures visual consistency between the interface of your application and the interface of the production environment.

"Multidimensionality" of the screen When depicting many interface elements, it is useful to use perspective, highlighting, and shading to create a three-dimensional effect. This helps to increase the functionality of the interface and the visibility of feedback when the user works with computer analogues of the real world.

When creating lighting/shading effects, the default is to assume that the hypothetical light source is in the top left corner of the screen.

When developing your own visual elements, you should be careful: do not overdo the use of “volumetric” images, since the image of each “three-dimensional” object takes up much more space on the screen than its “flat” counterpart. Use 3D effects only to depict interactive elements. In this case, enter only those details that are really necessary for the user to identify the image.

Size and mutual arrangement visual elements are very important for creating a visually consistent and predictable environment. Visual structure is also important in terms of conveying the purpose of the elements displayed in the window. In general, when choosing a layout option, you should follow the same rules that are used when laying out a printed page.

Grouping. Grouping involves compact placement of interconnected elements. To implement grouping, either a special element can be used - a grouping block, or simply placing elements at an appropriate distance from each other.

Although you can use color to visually group objects, this approach is not successful because it can lead to undesirable effects when the user changes the color scheme.

Try to position the controls in the toolbar so that there is a gap from the edge of the panel to the edge of the window that is at least equal to the width of the window frame. In some cases, such as when toolbar buttons are used like a set of radio buttons, they may be arranged contiguously (without space).

It is advisable to group the main control buttons of the secondary window in the upper right corner of the window or arrange it in the form of a ruler along the bottom edge of the window. If there is a predefined button in the window, then it should usually appear first.

OK and Cancel should be located nearby. A button should “close” the group Reference(if supported by the application). If the button OK not used in this window, but there are other control buttons; then it is best to install a button Cancel at the end of the set of control buttons, but before the button Reference. If a button applies only to a specific area of ​​the window, include it in that area.

If buttons (or other controls) are placed on a tab, their scope is assumed to apply only to that tab; Accordingly, buttons that are not part of any of the window tabs belong to the window as a whole.

Alignment. Alignment is another additional way to visually display related information (or controls). As a rule, there are three ways to align information:

    vertical (along the left or right edge of the aligned elements);

    horizontal (along the top line or along the top edge of the element);

    adjacent alignment (when elements meet at the edges).

If information is located vertically, it is advisable to align its elements to the left edge of the corresponding area. This usually makes it easier for the user to quickly view information. However, if numerical data is displayed in the form of a column, the values ​​​​of which can change, it is better to align it to the right.

Visualization of performed operations is one of the ways to provide the user with feedback about the application. A well-thought-out visualization method not only helps the user better understand the essence of the operation being performed, but also ensures a timely and correct response from the user in the event of erroneous or unsuccessful actions. This is especially important for applications used in control, decision-making and other real-time systems.

Visualization of selection operations. Visual feedback during selection operations should allow the user to clearly identify the selected object from the rest.

The image of the selected object must change directly during the selection operation. The same applies to the selected area. In this case, the selection state should be displayed only for the active area or hierarchy level (for example, for the active window or subwindow). This will help the user determine which of the available selections the action being performed belongs to.

For many object types, a system highlight color can be used to indicate selection state.

Visualization of forwarding operations. Transfer operations include operations of moving, copying and linking objects, as well as their derivatives. When performing transfer operations, the visualization tool is to move the image of the transferred object simultaneously with moving the pointer. In this case, the moving image of the object must be visually different from its image in the original position: either a translucent or contour image of the object is used as it.

Animation. Animation in many cases can be a very effective means of conveying visual information(for example, to illustrate the functioning of a device or the performance of an operation). Sometimes its use can simply enliven the application interface and make the user's communication with it more pleasant.

One of the most important requirements for using animation is that it should not affect the interactivity of the interface. Don't make the user wait for the cartoon to finish. If the animation is not part of the running process, allow the user to either interrupt it or continue working in parallel.

Avoid unnecessary use of animation. If animation is used only for decorative effect, it can distract or even irritate the user.

Have you ever thought about how we see things? How to grab them from all the visual diversity environment using sensory stimuli? And how do we interpret what we see?

Visual processing is the ability to make sense of images, allowing humans (and even animals) to process and interpret the meaning of the information we receive through our vision.

Visual perception plays an important role in Everyday life, helping with learning and communicating with others. At first glance it seems as if perception occurs easily. In fact, behind the supposed ease lies a complex process. Understanding how we interpret what we see helps us design visual information.

A balanced infographic involves the proper use of visual representation (for example, charts, graphs, icons, images), an appropriate choice of colors and fonts, a suitable layout and site map, etc. And we must not forget about the data, its sources and topics, which is no less important. But today we will not talk about them. We will focus on the visual side of information design.

Psychologist Richard Gregory (1970) was convinced that visual perception depends on downstream processing.

Top-down processing, or conceptually driven process, occurs when we form ideas about big picture from small parts. We make assumptions about what we see based on expectations, beliefs, prior knowledge, and previous experiences. In other words, we are making an educated guess.

Gregory's theory is supported by numerous evidence and experiments. One of the most famous examples— hollow mask effect:

When the mask is turned to the hollow side, you see a normal face

Gregory used Charlie Chaplin's rotating mask to explain how we perceive the hollow surface of a mask as bulges based on our beliefs about the world. According to our previous knowledge of facial structure, the nose should protrude. As a result, we subconsciously reconstruct the hollow face and see a normal one.

How do we perceive visual information according to Gregory's theory?

1. Almost 90% of information received through the eyes does not reach the brain. Thus, the brain uses previous experience or existing knowledge to construct reality.

2. The visual information that we perceive is combined with previously stored information about the world that we have acquired through experience.

3. Based on various examples Top-down processing theory suggests that pattern recognition is based on contextual information.

Information Design Tip #1, based on Gregory's Visual Inference Theory: Enhance the data with an appropriate theme and design; use a meaningful headline to set key expectations; Support your visuals with expressive text.

2. Sanoka and Sulman's experiment on color relationships

According to numerous psychological studies, combinations of homogeneous colors are more harmonious and pleasant. While contrasting colors are usually associated with chaos and aggression.

In 2011, Thomas Sanocki and Noah Sulman conducted an experiment to study how color combinations affect short-term memory - our ability to remember what we just saw.

Four different experiments were carried out using harmonious and disharmonious color palettes. In each trial, participants were shown two palettes: first one, then a second, which had to be compared with the first. The palettes were shown at a certain time interval and several times in random combinations. The subjects had to determine whether the palettes were the same or different. Also, the experiment participants had to evaluate the harmony of the palette - a pleasant/unpleasant combination of colors.

Below are 4 examples of palettes that were shown to participants in the experiment:

How do colors affect our visual perception according to Sanocki and Sulman's theory?

  1. People remember better those palettes in which the colors are combined with each other.
  2. People remember palettes that contain a combination of only three or fewer colors better than those that contain four or more colors.
  3. The contrast of adjacent colors affects how well a person remembers a color scheme. In other words, this means that the color difference between context and background can enhance our ability to focus on the context.
  4. We can remember quite a large number of color combinations at the same time.

Thus, the results of the experiment indicate that people are better able to absorb and remember more information when perceiving images with a contrasting but harmonious color scheme, preferably with a combination of three or fewer colors.

Information design tip #2, based on Sanoka and Sulman's experiment: Use as few different colors as possible in complex content; increase the contrast between the visual information and the background; choose themes with a harmonious combination of shades; use disharmonious color combinations wisely.

Binocular rivalry occurs when we see two different images in the same location. One of them dominates, and the second is suppressed. Dominance alternates at certain intervals. So, instead of seeing a combination of two pictures at the same time, we perceive them in turn, as two images competing for dominance.

In a 1998 experiment, Frank Tong, Ken Nakayama, J. Thomas Vaughan, and Nancy Kanwisher concluded that if you look at two different images at the same time, the effect of binocular rivalry occurs.

Four trained people took part in the experiment. As stimuli, they were shown images of a face and a house through glasses with red and green filters. During the perception process, there was an irregular alternation of signals from the two eyes. The subjects' stimulus-specific responses were monitored using functional magnetic resonance imaging (MRI).

How do we perceive visual information according to Tong's experiment?

  1. According to MRI data, all subjects showed active binocular rivalry when they were shown dissimilar pictures.
  2. In our visual system, the binocular rivalry effect occurs during visual processing. In other words, during the short period of time when the eyes are looking at two dissimilar images located close to each other, we are not able to determine what we are actually seeing.

David Carmel, Michael Arcaro, Sabine Kastner and Uri Hasson conducted a separate experiment and found that binocular rivalry can be manipulated using stimulus parameters such as color, brightness, contrast , shape, size, spatial frequency or speed.

Manipulating contrast in the example below causes the left eye to perceive a dominant image, while the right eye perceives a suppressed image:

How does contrast affect our visual perception according to the experiment?

  1. Manipulating contrast causes the stronger stimulus to be dominant for a greater amount of time.
  2. We will see a fusion of the dominant image and part of the suppressed one until the effect of binocular rivalry arises.

Information Design Tip #3 Based on the Binocular Rivalry Effect: n Don’t overload the content; use themed icons; highlight key points.

4. The influence of typography and aesthetics on the reading process

Did you know that typography can influence a person's mood and ability to make decisions?

Typography is the design and use of typefaces as a means of visual communication. Nowadays, typography has moved from the field of book printing into the digital sphere. Summarizing all possible definitions of the term, we can say that the purpose of typography is to improve the visual perception of text.

In an experiment, Kevin Larson (Microsoft) and Rosalind Picard (MIT) found out how typography affects a reader's mood and problem-solving ability.

They conducted two studies, each involving 20 people. Participants were divided into two equal groups and given 20 minutes to read an issue of The New Yorker magazine on a tablet. One group received text with bad typography, the other - with good typography (examples are given below):

During the experiment, participants were interrupted and asked how much time they thought had passed since the start of the experiment. According to psychological research (Weybrew, 1984): people who find their activities enjoyable and are engaged in positive mood, believe that they spent much less time reading.

After reading the texts, the experiment participants were asked to solve the candle problem. They had to attach the candle to the wall so that the wax would not drip, using pushpins.

How do we perceive good typography and its impact?

  1. Both groups of participants misestimated the time spent reading. This means that reading was a fun activity for them.
  2. Participants who were presented with text with good typography significantly underestimated their reading time compared to participants who were presented with text with poor typography. This means that they found the first text more interesting.
  3. None of the participants who read the text with poor typography were able to solve the candle problem. While less than half of the second group completed the task. Thus, good typography influenced the ability to solve problems.

Information design tip #4, based on Larsen and Picard's experiment on the influence of typography: Use readable fonts; separate text from images; do not overlay pictures or icons on the text; leave enough white space between paragraphs.

5. Perception of the essence of the scene according to Castellano and Henderson

Have you ever wondered what the expression “a picture says a thousand words” really means? Or why do we perceive images better than text?

This does not mean that the image tells us all the information we need. A person simply has the ability to grasp the main elements of a scene at one glance. When we fix our gaze on an object or objects, we form general idea and recognize the meaning of the scene.

What is scene perception? According to Nissan Research & Development researcher Ronald A. Rensink:

“Scene gist, or scene perception, is the visual perception of the environment as an observer at any given time. It includes not only the perception of individual objects, but also such parameters as their relative positions, as well as the idea that other types of objects are encountered."

Imagine that you see certain objects that represent two signs with symbols, and a diagram that symbolizes a fork and indicates two different paths. Most likely, the following scene appeared in front of you - you are in the middle of the jungle/forest/highway and there are two paths ahead that lead to two different destinations. Based on this scene, we know that a decision must be made and one path must be chosen.

In 2008, Monica S. Castelhano of the University of Massachusetts Amherst and John M. Henderson of the University of Edinburgh studied the effect of color on the ability to perceive the essence of a scene.

The experiment included three different trials. Students were shown several hundred photographs (natural or man-made objects) under different conditions for each test. Each image was shown in a specific sequence and time point. Participants were asked to respond “yes” or “no” when they saw details that matched the scene.

Normal and blurred photographs were presented with color and monochrome photographs, respectively.

To determine the role of colors in the perception of the essence of the scene for following examples photographs used abnormal colors:

How do we perceive visual information based on Castellano and Henderson's findings?

  1. The subjects grasped the essence of the scene and the target object within seconds. This means that people can quickly understand the meaning of a normal scene.
  2. The subjects were faster at matching color pictures than black and white ones. Thus, color helps us understand a picture better.
  3. In general, colors determine the structure of objects. How better color corresponds to how we usually perceive the world, the easier it is for us to understand the meaning of the image.

Information Design Tip #5 Based on Castellano and Henderson's Scene Perception Research: Use appropriate icons or pictures to represent data; place content in correct sequence; use familiar colors for important objects.

conclusions

Understanding how people perceive visual information helps improve infographics. Summarizing the conclusions of the experiments reviewed, we bring to your attention key tips for visual information design:

1. Layout and design

  • The theme and design should be consistent with the information.
  • Don't overcrowd your page's infographics.
  • Use themed icons.
  • Arrange content in proper sequence.
  • Use headings to set key expectations.

2. Video series

  • Visuals should accompany the text.
  • Show important numbers in graphs and charts.
  • Use the right pictures and icons to represent your data.
  • Reduce the number of colors for complex content.
  • Make the contrast higher between important visual information and the background.
  • Use harmonious theme colors.
  • Use disharmonious colors wisely.
  • Use regular colors for important objects.

4. Typography

  • Choose readable fonts.
  • Leave plenty of white space between the title and the text or image.
  • Do not overlay pictures or icons on text.
  • Provide sufficient spaces between characters.

Now that you know the ins and outs of creating beautiful and compelling infographics, it's up to you!