Psychology in Web Design

I often find reasoning that design is the design of information. They talk about it as an element that exists separately from the text, which has its own rules and laws. Do not forget to mention its importance with common phrases.

Stop! But doesn’t the graphics, color, text, titles and the entire composition make up the informational content of the page? The main percentage of information received by a person is perceived by sight. According to statistics, 83% of the information is perceived visually. And 40% of it is remembered by a person (against 20% of what they heard!). And the image can carry in itself not nearly no less (and sometimes more) information than the text. But how to tie them together? How to make the design carry a theme page? This is a question of psychology.

No, let us leave alone Jung and Freud with their fundamental theories and turn to applied psychology. Any image causes a person's association. But the problem is that some subjects, plots or graphic elements cause the same associations for all people (more correctly, many of them), while others cause completely different associations. And, if you mistakenly build an associative array, then you can lead the user not at all where you wanted. Therefore, in order to build stable associations, moods or images, it is often necessary to supplement the composition with elements, strengthening the thematic line. Such elements can be anything: an image, a word (primary source of information) or a whole phrase, line, blur, collage. The main thing is not to strive for blind complication, but to create a stable associative series on a specific topic.

You, probably, have already noticed that on complex, detailed, sometimes incomprehensible at first glance images, you want to keep your eyes on - the viewer is interested in "solving the riddle" and solving the meaning brings satisfaction and positive emotions. Such "charades" remain in the memory for a long time. But not many of them really carry the theme or mood. Most look like a simple mosaic, a collection of unrelated graphic information. The creativity of the designer in individual works can be anything - it is his own business. The concept of “design for design” works here. Often turning into a desire to shock the viewer. But in the design of a specific order, designed for a large and different audience, it is important not to overdo it. The user, looking through the design, always seeks to conclude, looking for completeness in understanding the information presented. And making it, is experiencing aesthetic satisfaction. The task of the designer to help him in this. Build a solid, concrete associative series, revealing the topic. A simple example is when using inverted text. This is a simple barrier to his perception and the user is able to read this text, but solving this riddle brings subconscious pleasure and focuses attention on this word or phrase. Another thing is whether such an action is appropriate in a particular situation.

Now, about ways and tools. The first thing you want to focus on is the ways of carrying the user through the composition, building an associative array in the right direction. The perception of textual information (in most languages) occurs from left to right and from top to bottom. This rule helps a lot in cartoons (quite a simple example) when there is a plot text (for example, the question is the answer). For the viewer to understand the plot correctly, you need to get him to read the question first, and then the answer. The text of the question is placed on the top of the image, closer to the left corner, and the text of the answer is down the image or on the right of the question. This is the first principle, but there are other ways to focus on specific details. There is also a spatial concept of perception of information. What is closer (in the foreground) is perceived earlier, with something that is in the background. The background effect can be obtained quite a strong blur. The object, with normal sharpness, will look located in the foreground, and be perceived first. Large and fairly bright (contrasting) elements are also perceived before small, detailed. Any "selected" object in the composition becomes thematic or semantic center. Experts "Stroganovka" advised to use no more than 3 thematic centers with 5-7 controls (in the promotional materials even less). I will leave it without comment, but in some situations I allow myself to disagree.

Another way to focus attention on a specific detail is lighting. Any light source is guaranteed to attract attention. Even the shadow and darkening of some details implies the existence of a light source. And darkened parts are brightened. But, using the effect of lighting (introducing a light source), you can make a grave mistake. The human eye can easily distinguish the wrong (not natural) shadow overlay. Therefore, the concepts of light and shadow are given a great deal of attention in the artists' training program. Here is one example from my practice. Long discussions of the light scheme in the design of the layout, caused a natural desire for creativity in the client (quite a common situation). But his proposal shocked me. He proposed to make a graphic element of dark blue, and the shadow of it yellow! Beliefs that this is not correct, gave rise to the question: "But can this be drawn?" You can, of course, but I did not want to.

There is another danger. Never try to play with proportions and perspective in realistic images and collages without a specific goal. The laws of spatial geometry and natural proportions are the laws of nature. Ask people with higher artistic education how much time they have devoted to the study of perspectives and proportions. The human eye easily notices a lie in this area. And there is a danger that the user subconsciously, distracting from the topic, will focus on finding the source of visual discomfort in the image and draw completely different conclusions than you would like. Another situation when it is done consciously, focusing on it. Then, you need to try to remove other complex elements, avoiding conflicts.

Now, a little about the "eternal" - about color. You, most likely, have already read various materials on this topic more than once and have repeatedly seen articles on the psychological perception of colors. I advise you always skeptical approach to this issue. Let us leave indisputable the physical aspects of the combination and properties of colors, and dwell on psychology. Many conclusions are made on the basis of rather controversial statements. In the matter of perception of a particular color, psychologists approach individually to each person. The fact is that each person has a specific color associated with a particular image, thing or event in his life and is located in the subconscious of a person. And these associations can be different - both positive and negative. This does not apply to all colors in a row, but only to some of the main ones (differently for all). Still, the perception of color can be a thematic focus. For example, red. In the technical field, it symbolizes danger, and in the field of fashion, sensuality and courage. If you take the red color in nature, then most likely, it will give rise to associations with the sweetness of ripe berries. And in the social sphere, he will force to recall communism, but the residents of other countries may not have this. The result was quite a diverse picture of associations. And you can safely forget many unambiguous statements. Therefore, very carefully choose the colors for each particular situation and avoid the pressure of one solid color without thinking about the color theme. Perhaps the most important client, he will cause a completely negative association. Do not hesitate to interview your friends when building a composition, taking interest in their opinions and associations - this is a very useful practice.

Lines, arrows, directional gradient, rhythm cause steady guiding, indicating the impact. But, using them, avoid situations when you have to look at the composition "against the wool". This causes discomfort at the subconscious level and a subconscious desire to find its cause.

Font can also cause various associations. For example, the Gothic font is associated with the culture of Europe and it can not be used in the theme of other cultures or historical period. But this is a typography and there is a special literature for studying it (for example, the book “Typography” by Emil Ruder).

If you are a web designer, then you may have another problem - the process of loading the page. It will be a shame if the elements controlling the associative row are loaded in the wrong order. But this is not such a big problem. If you really need to show the whole image at once, then you can use the "loading layer", which covers the entire page until it has completely loaded, or remove this layer, at some stage of loading the page using a script. But do not forget to put down a way of its "manual" disconnection, for "impatient" users.

This article can be added endlessly, but I hope I could explain the importance of psychology in design. The workplace of the psychologist, in advertising agencies, has long existed. A designer simply must be a good psychologist. If you strive for professionalism, then try to read the relevant literature and find an opportunity to communicate with a psychologist. Do not disregard various statistical data and publications on research results. Feel free to ask for advice and often discuss your work with others.

I advise you to bring up the correct construction of the associative series in the plot. Always draw your own conclusions and be skeptical of the conclusions of others. And leave the books of D. Carnegie alone, they need to be studied in school.