Contact Us
Home » Blog » How colors, shapes and space affect user perception
Author: OPRK Marketing

How colors, shapes and space affect user perception

Surely you yourself at least once in your life have come across a website that you want to leave for some unknown reason. It seems to have style and there are no obvious flaws, but it is inconvenient to use, and it is unpleasant to stay there for a long time.

The thing is that good web design is not only attractive images or trendy animation. Design should help the user navigate the structure of the site, facilitate the passage of various scenarios and evoke certain emotions. We suggest learning more about the influence of color and shapes on user experience, basic rules and mistakes.

Psychology of color in web design

Color causes an immediate emotional reaction, which occurs faster than the mind has time to comprehend the information. We may not be aware of what exactly influenced the first impression of the site, but at the same time experience positive or negative emotions from the very first seconds. The thing is that each color evokes certain associations in us and affects the overall perception. Let’s look at a few basic colors and see how it works with examples.

Red

This color is often associated with energy, passion, luxury, danger, and action. In web design, it is used to emphasize important elements, such as call-to-action (CTA) buttons or error warnings (for example, when a user makes a mistake with the number of digits in a phone number).

Red is actively used in the following areas: cosmetics, cars, restaurant business, lingerie brands, and adult products.

Blue

Often associated with trust, stability, and professionalism. Often used by IT companies, banks and other financial organizations, clinics, and educational institutions.

Green

Associated with ecology, nature, health, and freshness, it is often chosen by companies offering healthy food, organic cosmetics manufacturers, and other organizations that want to emphasize the naturalness, usefulness, and eco-friendliness of their products.

Yellow

This color evokes associations with the sun, joy, and optimism. It is often used by companies offering children’s products, advertising agencies, educational institutions, online stores. It is interesting that if blue in education is more often used by universities and advanced training courses, then yellow is chosen by schools, kindergartens and development centers. This is because the emphasis here is on the joys of childhood, while universities talk more about reliability, stability and prospects.

Which colors should be on a website?

Orange

In essence, this is a combination of the passion of red and the optimism of yellow. A very dynamic color, the color of movement, activity, is also often associated with friendliness.

Orange is successfully used for the entertainment industry, fitness centers and various startups. Works well for action buttons.

Black

Black can evoke a wide variety of associations, it all depends on what colors you combine it with. Predominant black in combination with a minimalist website design can evoke associations with the premium segment. It is actively used in the IT sector, by various clothing brands, for advertising high-end cars.

White

White can also evoke different associations, depending on the combination with other colors, it helps to add “air”, better organize visual space and improve readability. It is quite difficult to overdo it with white. On the contrary, it helps to make the design more minimalistic and easier to perceive.

Visual Hierarchy in Design

By visual hierarchy we mean a competent arrangement of elements that is not only pleasing to the eye, but also helps the user easily find the necessary sections and perform target actions (from requesting a call back to searching for and purchasing a specific product).

Google Product Director Luke Wroblewski, in his article “Communicating Through Visual Hierarchy,” formulated the task of the visual hierarchy of any page as follows: it should help the visitor quickly find answers to three questions – what is it, why do I need it, and how can I use it? If this information is not read from the first seconds, you are already losing visitors.

To ensure that design and content help you, and do not scare away potential customers, there are several techniques for creating a visual hierarchy

Element size

The easiest way to highlight the most significant elements is to make them larger.

Typographic structure

Building hierarchy using typography. The first level is headings, where it is better to place the most important information, the second level is subheadings, where additional information will go, and the third level is a block of text, where you reveal all the details. Keep in mind that if you forget to add an advantage to the heading or subheading, the reader may not get to it in the text.

Composition

When a person opens a page of a website or a magazine, he unconsciously begins to move along one of two schemes of information analysis. This should be taken into account when designing a website – this way you will be able to understand where exactly and in what order to place certain elements.

Scheme F:

The user’s gaze begins to move at the top of the page, creating a horizontal stripe at the top.

Then the eyes go down a little lower and again move from left to right, creating a second horizontal stripe, shorter than the first.

The eye then moves down the left edge of the page, creating a vertical trace that forms an F shape. 

This pattern often works when reading large blocks of text, and it shows that the first lines of text and the first words in a line attract the most attention. Thus, when designing web pages with a lot of text, designers can place the most important information in these “hot” zones.

Three golden rules always help:

  • Users rarely read every word in the text.
  • The first two paragraphs are the most important and readable, they determine whether the visitor will continue reading.
  • Start paragraphs, headings, and list items with keywords that can provide succinct and accurate information on the topic.

Z-pattern:

  1. The user starts from the upper left corner (just like when reading a text).
  2. The eyes move along the top edge of the page from left to right.
  3. After reaching the upper right corner, the gaze moves down to the opposite corner of the page, creating a diagonal line down and to the left.
  4. In the lower left corner, the gaze moves horizontally to the right again. 

Arrange the composition on the landing page taking this pattern into account. Start with the logo, city indication (if it is important for your business), menu, contact information. The central field is usually reserved for the image, which should not only be visually attractive, but also thematic. Ideally, if the illustration evokes certain emotions that help sales. The lower right corner is great for a call to action.

Colors mix

Space and indents

Using white space in design is your tool for reducing the cognitive load of visitors and focusing attention on certain elements.

As for indents, let’s highlight one of the main rules that gives a general understanding of the issue: indents inside a group of objects should be smaller than indents outside. In this way, you help the visitor not to get confused in semantic blocks.

Color and contrast

We have already talked about the fact that the color palette and user emotions are directly related. The right color will help to highlight the important, focus attention on the action button, and thematically group elements. But remember that there should not be too many colors, otherwise, instead of placed accents and help in navigation, you will get a frightening motley.

Forms and their perception

Forms also carry a certain psychological load. Right angles and hard lines are perceived as strong and stable, while round shapes and smooth lines are associated with movement, softness, and friendliness.

Practical application

Of course, we have only covered the main points in the psychology of design. In order to masterfully use all the techniques and skillfully manage the user’s perception, it is necessary to study the issue more thoroughly using thematic literature or training courses. But even if you are not interested in design, this information will help you avoid mistakes on a future site, analyze colors and shapes on an existing site, or better understand the work of specialists.

Latest Blogs

Let's start work

OR