I continue to publish interesting, and in my opinion, useful news from the big and vast world SEO. Today we’ll talk about website design colors... Yes, yes, exactly about color schemes. Well, let's begin. Website design color influences the click-through rate of advertising, believe psychologists from the University of Oxford in the USA.

Behavioral: the influence of site color on the click-through rate of advertising on portals

American scientists have calculated that an average user spends approximately 2 minutes on one Internet portal. Of these, the last 4-7 seconds are decisive for us - SEO specialists, although this also applies to designers. It is during this period of time that the user either leaves the website or clicks on the advertisement offered to him. The choice depends on website and ad block colors. The “badest” (undesirable and unclickable) option website design- this is to design the site in gray or red tones. Traffic will approach zero (click-through rate), as will the effectiveness of advertising posted on an Internet resource. Comfort and tranquility are experienced by users who are on sites where the dominant color is white. They click on banners well; contextual advertising attracts them only if the headlines are unexpectedly (very) bright and high-contrast, and the text and URL are of maximum size. Almost the same thing happens with green designs.

Blue portal design is for trust, and yellow is best for context

Websites with a blue design and layout inspire trust (social networks “VKontakte” and “Facebook” immediately come to mind). Interestingly, advertising here works if it is located on a white background, and the headings are set in a color 2 shades darker (and again this suits our favorite “VKontakte” and Facebook). Most winning website design color, according to British psychologists, yellow. The ratio of visits to clicks here is 1 to 2.5, since many Internet users view 2-3 advertisements at once. But banners on all yellow sites are ineffective. Another good color for the design of portals where people click on advertising blocks and banners is a non-contrasting brown. Here the result for banner advertising is 1 click per 3 visits, for contextual advertising it is approximately 1 to 2.

PS. Let's summarize. The first thing that confuses us is that, of course, the audience that was tested is not Russian-speaking; we have a different mentality. All the same, residents of the CIS are not residents of America or Europe. Russian websites have always been distinguished by rainbow colors and shades in design, in contrast to the restrained European and American Internet resources (a striking example is the Apple website). Secondly, in connection with this, our advertisements are “clicked” (my own observation) because they are bright and contrasting. You can disagree about yellow sites and portals - they do not inspire confidence among domestic network users (I won’t even say right away about the big yellow portal - not one comes to mind), except perhaps among small children (although this is my opinion)! In general, you will probably need to do a small test, which I will talk about in the “experiments” section.

There is no need to try to guess the color design of advertisements that visitors are more likely to click on. You need to experiment with displaying advertisements in different colors. And based on its results, we will find out the preferences of your site visitors. However, outside the windows is the 21st century. Therefore, we will write a small script that will do everything for us.

What colors to choose for advertisements

In my experiment, I settled on three primary colors: blue, red and green. I took each of them with different degrees of brightness. And I added one more color to them - the color of the links on my site. Thus, seven colors will participate in my experiment.

Ad color rotation script

As a basis, I take the script for displaying advertisements from YAN (Yandex Advertising Network), which was given to me by Profit-Partner. Let's add automatic color change to it. For each color we will create a unique label. So that in the future, using these sections, you can analyze which color of advertisements on your site is more attractive to visitors.

Let's put the script into action and start collecting data. The statistics will show the slices created by our script.

How to properly conduct an experiment on choosing the color design of ads

The experiment must be carried out around the clock for at least a week. To take into account all time dependencies and features of weekends and workdays. It is important that each color scheme is shown at least 1000 times.

Conclusions from the experiment, which color is better

If you choose from three main colors, then there is no clear leader on my site. A difference of several percent may be due to error. But the general trend coincides with the recommendations of Profit-Partner COP specialists - the more clickable color is red.

If we look at all seven colors in detail, the following group is preferred by visitors: dark red (#990000), light green (#00CC00) and dark blue (#000099).

I advise you not to look at my statistics, but to conduct your own experiment on selecting the color design of ads in the Yandex advertising network.
If you have several sites, then for each site you need to conduct your own experiment.
If you change the design, then run the experiment again.
If you have several ad units like I do, then for each ad unit you also need to conduct your own experiment. You will be surprised, but on my site, user preferences differ in ad units in the middle and at the end of the article.
The experiment must be carried out around the clock for at least 7 days.

Working with color is the most important skill of any web designer. Proper use of it can bring success to the site, and even a small mistake in creating a range can cause a lot of trouble in the future. In this article, we will look at 10 mistakes that designers make when working with color on a website, and tell you how to avoid them.

Reluctance to implement psychological techniques

There are many studies that describe user reactions and emotions to the color scheme of websites. This is, of course, a field for debate - color preferences are determined by national culture, personal experience, and other reasons, but it is impossible not to take into account the mood conveyed by color. And when creating websites, it’s just as worth applying what we know about color perception.

For example, orange is a great color that motivates shopping. Perfectly conveys calls to action, suitable for online stores.

Green symbolizes trust, and what could be more important than trust when it comes to food?

1. Blind imitation

The classic mistake of the customer is the projection of their own ideas about the design. Is your favorite forum done in warm "caramel" colors, the main texts are dark brown, and the background of the messages is pale yellow? This does not mean that a site dedicated to air conditioners should inherit this range. Air conditioners should create a feeling of freshness - it’s not for nothing that most sites of this kind are designed in blue and white tones.

Even if you really like a certain site, think twice before ordering “exactly the same, but about my products.”

2. Lackluster call-to-action

If you have a powerful call to action on your website, it should be noticeable to the user - the user's eye should be hooked on it. A pale and undistinguished call-to-action, even if it is perfectly formulated, simply will not work. The opposite situation is not so good, when the CTA literally screams “PRESS ME.” The call to action should be harmonious and stand out through the choice of contrasting colors and designs.

3. Excessive color palette of the site

Most often, two or three colors are enough to design a website. There are, of course, very successful design solutions with a large number of colors, but these are exceptions. It happens that two colors look great, but when you add a third it turns out to be a mess.

We recommend using at least a color wheel when choosing a color palette. When selecting colors with its help, you need to remember that neighboring colors and those located opposite them go well with each other.


We also recommend using specialized sites. Here you can create your own range or use one of the ready-made ones.

In the first example, 3 colors are used to design the text, in the second, only two. It is the second option that looks better and the text on it is easier to read.

4. Different colors for similar elements

If your landing page has three checkout buttons, they should all be the same color. After the user sees the first one, he will perceive the others the same way. If buttons of different colors have the same functions, this can cause some confusion.

Here is an example of two buttons with the same purpose on the same website. Bad decision.

5. Same colors for different types of elements

The opposite situation is when you use your “favorite” color wherever you think it should be done beautifully. Action buttons and non-clickable elements should not be similar in color; this violates the logic of using the site. By making a clickable button of a certain color and style, you create a pattern of behavior, and if such an element turns out to be inactive, it will disrupt the user's usual behavior.

6. Lack of contrast

In pursuit of unusual and bright colors, designers often miss an important point: the color of the text and the background color should be of sufficient contrast to make the text easy to read. This principle is clearly demonstrated in the examples below.

7. Non-standard link color

The user should be able to distinguish a link from text without moving the mouse. Of course, color here is not the only designer’s tool, but perhaps the most effective. Three rules:

• Links should be visible without hovering over them.


• The link should change color when hovered over.


• Visited links must be marked in a different color; this is especially critical if we are talking about an information site with many publications.

In the example, the designer chose an extremely unfortunate color for the design of links for navigating the portfolio.

8. Faded minimalism is not for impulse sales.

Today it is very fashionable to create landing pages, usually aimed at impulse sales. Such pages influence a person’s emotions, awakening in him a momentary desire to buy a product. Another fashionable trend in website creation is minimalism; it is usually characterized by one or two colors, often strict.

These two fashion trends are most often incompatible. You cannot sell based on emotions if your site does not create these very emotions when viewed.

Calm tones and strict minimalism are appropriate when the purchase is rational. Yes, minimalism can be not boring, colorful and even very emotional, but now many designers are inclined to gray tones and “air”, which does not really go well with selling landing pages.

But this does not mean that an emotional landing page that sells should shine with all the colors of the rainbow.

9. Inappropriate black

Marketers have long accustomed consumers in the tangible world to the fact that black packaging almost always means high cost and a premium level of product quality. Here is an example of an elite brand of dumplings and expensive cereals:

Our habits, like the methods of marketers, migrate from supermarkets to the Internet. For example, the website of a jewelry company, made in black, looks elegant and expensive:


You should not use a lot of black on your website as a background if you provide services in the low price segment or sell inexpensive goods. The impressions of visitors on your site will not match your selling proposition.

10. Color restrictions for the designer

This rule does not directly apply to website design and selection of color palette. We are talking about setting tasks for the designer when developing a website. If you do not already have an established corporate identity or a recognizable logo (although in this case the rule is partially applicable), you should not set strict boundaries and restrictions on the colors used to the designer.

Your vision can be as beautiful as you like, but let the designer offer his own. If, after several attempts, the designer still cannot show you something you like, only then should you give him strict limits in the selection of colors.

Another exception: if you are sure that your color design option is well thought out and you can justify this choice to yourself. As a rule, customers do not take into account what the designer takes into account - text readability, sufficient brightness of buttons and the optimal number of colors.

conclusions

The color scheme creates the user's first impression of the site. It is very important that it be positive. But you can’t just focus people’s attention on color; use it to convey information. If you are not sure about the right choice, use heat map data or a simple technique of blurring a ready-made interface solution. The essence of the technique is very simple: you need to blur the entire page using graphic programs and see which elements and blocks attract attention in the first place. The first, second and third block that attracts attention should be the most important elements in terms of the user scenario.

For example, we blurred the first screen of Aviasales.ru - blocks of elements 1, 2 and 3 attract attention. After reading the title, i.e. Forming the correct expectations in the user, he (remember the rules of contrast) will look at the necessary elements for selecting parameters and call-to-action.


And look how clearly the main action on the website ostrovok.ru stands out against the blurred background.


If your interfaces pass such tests with flying colors, then further improvements to the site should be carried out based on an understanding of user psychology, i.e. analyzing feedback from real users. Using questions like: “Where did you look first: which 3 elements of the site, and in what order? Where do you want to click first and why?” in AskUsers you can understand not only how users’ attention is distributed, but also why users look at certain elements. This information will help identify a number of problems in the current interface and find the best options for solving them.

Remember that form is subordinate to content. Color design serves as a tool to focus the user’s attention on information that is important for the user and the site owner.

Which button color has the highest conversion rate is an old philosophical question that many people know the answer to. “Red” - novice marketers will answer. “Contrasting” - experienced marketers will answer. We tested 21,666 users on this topic. And we came to some pretty interesting conclusions.

At the beginning of the article, you need to add intrigue and exciting facts to attract attention. Based on this advice, I can say that in practice we received an increase in conversion of up to 65% by simply changing the color of the button. In this article we will talk about the results and how to do it.

How much can you increase conversions with color?

I won’t tell you that we invented a magic conversion management pill. In cases of increasing conversions, I have come to one simple conclusion. There are no 100% statements that will always work for everyone. Magic pills too. We previously wrote about how in some cases the word “Free” lowers conversions. What can we say about other “one hundred percent” truths.

So, how much can you increase your conversion rate just by changing the button colors?

We received up to a 65% increase in conversion. 65% was the maximum test result. The average was 11%. But even this increase in conversion is a very good result. Considering that this can be achieved by changing the color of the button.

Red is the color of winners

Many expert tests say that a red button has the highest conversion rate. Why? We know that each color has its own associations and evokes certain emotions. The color red implies stop, danger and passion. And in most cases (it is believed) it leads to better results in Internet marketing.

Below is the algorithm for creating A/B tests:

1. Create a widget in the constructor. Takes 5 minutes.
2. Copy it and make changes for the test. Takes 1 minute.
3. Create an A/B test and select these widgets. Takes 1 minute.

1. Creating a widget in the constructor

To create a widget, you must be registered in the constructor.

The creation process consists of 3 steps:

1. Select the widget template you will use.
2. Edit the widget: - write the desired text - change the color and upload an image, if necessary
3. Select display settings: - when to show the widget (by time, when leaving, when scrolling the page, etc.) - on what devices (computer, mobile, tablet) - what to do after the conversion (say thank you, redirect via a link or simply close the widget)

You can watch this video on creating a widget. Each stage is discussed in detail here. Text instructions for creating a widget can be found here.

I would like to note that there are much more customization options in the designer. For example, display when viewing a certain number of pages, by day of the week, by referral source, frequency of display, and much more. But first I advise you to use the basic settings, and then experiment with additional ones.

2. Copy the widget and make changes for the test

After you create a widget, you need to make a copy of it. To make changes to the new widget and run an A/B test. To do this, you click on the “Copy” icon in the created widget.

It is automatically enabled on the site. Now we need to turn it off, since it is not edited. To do this, change the status.

Now go to its settings by clicking the “Add to Editor” icon.

Here change the desired element you want to test. For example, let's change the color of the button. This is done in one click. You just need to choose a different button color.

Click on “Button Color” and select the one you want.

After that, save the widget. In step 4, you don’t have to change anything to keep the settings of the previous widget. To do this, simply click the “Save” button.

Now you have created 2 widgets with different button colors. You can move on to creating an A/B test. For convenience, all that remains is to change the name in the second widget.

3. Create an A/B test

To create a test, you need to go to the “A/B tests” menu. And click on the “Create test” button.

Here you need:

Select a site - write the name of the test

Select test type

Regarding the type of test. KEPLER LEADS has 2 different types of A/B tests: Classic and Individual. The difference is in displaying widgets to returning visitors. If you want to show a new widget option to a returning visitor, select Classic Test. If you want the returning user not to be shown another widget option (the first one shown is remembered and only this one is always triggered, depending on the display settings), then select Individual.

After selecting the test type, click the “Add” button. The last step remains - select widgets for the test. To do this, click on the “Widgets” cell and select them.

After selecting widgets, check if they are all active. If there are inactive widgets, you can enable them right here.

All! The test has been created. You can see all the results in the test statistics. To do this, click on the “View” icon to the right of the test name. Recommends running tests on total traffic from 1000 impressions (this can be seen in the “Views” column). After this, decide to run the next test.

Conclusion

Your work doesn't end there. Now we need to track the results, and after reaching significant data (we recommend 1000 or more visitors) test other hypotheses. These could be headlines, call-to-action texts, value propositions, images, etc. We will write about other A/B tests in the following articles. Share your results in the comments.

Using HTML, you can set the colors of all links on a page, as well as change the colors for individual links.

Set the color of all links on the page

Link colors are set as tag attributes . Attributes are optional and if they are not specified, default values ​​are used.

link - Defines the color of links on a web page (default color is blue, #0000FF).

vlink - color of already visited links. The default color is purple, #800080.

In HTML, colors are usually specified in hexadecimal numbers, in the form #rrggbb, where r, g and b represent the red, green and blue components, respectively. Each color is given a hexadecimal value from 00 to FF, which corresponds to a range of 0 to 255 in decimal. These values ​​are then combined into a single number, preceded by a # symbol (example 1).

Example 1: Setting link colors

Site content

The color does not have to be specified in hexadecimal format; keywords can also be used. In this example, the background color of the web page is set to black and the link color is set to red.

It is more convenient to use CSS to change the color of links. To set the color for all links on a web page, the following pseudo-classes are applied and added to the A selector.

visited — Style for the visited link.

active — Style for the active link. The link becomes active when you click on it.

Example 2 shows how to change the color of links on a web page using styles. To do this, we’ll use the color style property; it sets the color of specific text, in this case, links.

Example 2. Color of links specified via styles

Site content

Setting the color of individual links on a page

The above method of setting colors works for all links on a web page. However, sometimes it becomes necessary to use different colors at the same time. Light colors, for example, for dark areas of a web page, and dark colors, respectively, for light areas. You can also use styles for this.

To change the link color, use the style="color: #rrggbb" attribute in the tag , where #rrggbb is the color in hexadecimal. You can also use color names or specify the color in the format: rgb (132, 33, 65) . The decimal values ​​for red, green and blue are shown in parentheses (example 3).

Site content

Internet Marketing

Usability

This example shows three different ways to set colors using styles.