Color in life is fantastic plenty of space. They force us to make decisions — from “this Apple is still too early” to “this Ferrari is perfect the color of my lipstick”. For 85% of people of color is a defining factor in the purchase. As for the web, colors were and are extremely subjective question.
It is always a hot topic for debate. What is the “buy” button better sell your product — orange, like Amazon, or blue, like eBay. For some reason on some seminars on digital (especially small) still continue to argue that orange, and more. A conversion is the target of a user action.
The simplest example — click on the button “add to cart”. We carry out a simple divan analysis. You need to ensure that the user pressed that button. Offhand it turns out five points.
Button color, the contrast with neighbouring elements, volume, shadow, reflections and other “thingies” — its all about the last paragraph. As far as he is decisive. On one of our projects specifically, we conducted an experiment — run A/B test the two types of order forms. The second gave 10% more conversions.
Immediately you notice that the only difference is only the volume buttons. In the first embodiment, the clean flat (flat design), and second, the buttons are volume. However, this does not mean that the urgent need to alter the flat button on your website. This example only proves that in this case, the volume buttons pressed more often. Question — why.
We gradually came to the following important point which will tell you why real conversion design — this is not about the repainting of the buttons in orange, green, red or any other color. The design of the new interface — its always two large reservoir. Visual design and UI design.
The purpose of both is to control the attention of the user to help him navigate the interface, and simultaneously push to the target action. Skill visual designer to correctly work with color and form affect how the interface will convert. But this is not a game of color and adherence to the code of principles. Primary colors (red, yellow, blue) are mixed to produce a secondary.
Secondary and primary produce the following tertiary hue. And so on almost indefinitely. If color is added to white or black, get it lighter or darker tone. When developing the visual design color wheel is used to select the most appropriate to each other colors — or they are spaced from each other on opposite sides of the circle, or are close.
In the first case, a contrasting combination that is appropriate for the selections. The second — harmonic smooth transition from one shade to another, which is used when you do not have visual accents. Often we see exactly complementary scheme — it is used to push the user to the target action, for example, on the home page Ozon.ru.
To manage attention, you need to be able to place a graphic and compositional accents. The most successful scheme for conversions — one in which there is an apparent accent color. They usually stand out elements with which the user needs to interact. Basekit, the company wanted to increase sales and did a redesign of the page with the rates.
Decision style remains the same, with added color of the dice, focuses on value and CTA-buttons were unified — the replacement came the same colored green. The result — increase of conversion rate by 25%. To achieve a balanced solution that will best manage the user attention, it is recommended to combine the color in the ratio of 60/30/10.
An example from everyday life — mens suit. The jacket and trousers dominate, complements the shirt and tie is becoming an accent. According to this rule, in the visual design 60% is background, 30% — headers and menus, 10% of the items that you want to attract the most attention. Calls to action, buttons and links.
To a perfect match to bring not worth it. The main idea should be the main colors and color accents. You can check your layout to balance the shades, for example, using the Image Color Extract. The results of our experiment (in the right column are only the main colors of the page).
Text with different size (font size) has different requirements for contrast with the background. Larger text can be softer without sacrificing perception. Conversely, the small text needs to be more contrast — so that the readability was good. Advised to adhere to the W3C minimum contrast ratios.
Contrast is not only a combination of complementary colors (those colors that are opposite each other on circle). First contrast is the emphasis. It helps to highlight the most important elements and to bring them to the attention of the user. The index contrast of text and background can be easily calculated, for example, using the service Contrast Ratio.
Received score is less than needed — increase the contrast. There is another principle, which often appeal customers sites — the emotional component colors. That is why we so rarely encounter sites, with accents of colour on which placed brown — hes just no one likes.
People have formed stereotypes related to colors. This also need to be considered. By the way, fashion to dress baby boys in blue and girls in pink only came after the First world war. Prior to that, the color of the stereotype “blue for him, pink for her” simply did not exist.
A survey of the American designer Joe Chaloka showed qualities that people most often associate different colors. Men and women perceive colors differently. Universal blue color, it is preferred 57% of men and 35% women. Brown is the rejection of men, and orange — women.
In both cases, the least attractive color was called “cheap”. With age in both men and women increases the aversion to yellow and orange. Both sexes prefer cool shades on the websites — 56% of men and 76% of women. Some even tried to associate the colors of the logos of famous brands with the emotions that they convey.
However, this is a controversial classification, which is not very clear how the automotive premium brand Range Rover translates the emotion of “peace, growth, health”. Human attitude to certain colors — a thing very subjective, it depends on the context. Famous experiment marketing platform Hubspot. Its representatives made a button on the website, first green and then red.
The result. Red won with a margin of 21%. But we should not interpret this case as “the red buttons provide more conversions”.Take a look at the page and all will become clear. High conversion gave not a specific color, and its contrast with the rest.
Visit green prevails. Logo, icons, colors on the right image. While red shades are almost there — except for a couple small details on the icons. That is why red and not the green button has become more efficient — it is better to manages the users attention in a particular case.
Color is only one of the tools in designing interfaces. It is impossible to consider them out of context. Server Density has completely redesigned the page rates to solve two problems. In this case, a more traditional feed interface (instead of “creative”) played into the hands of the brand.
After you update the design of users are 25% less likely to click on the free trial and began more often to buy the paid tariffs. As a result, total income of the company increased by 114%. Also an interesting example refuting a popular misconception that the number of options reduces the conversion. Service mailing GetResponse conducted an experiment.
Posted on the main page just two CTA-buttons — “buy” and “try for free”. It was expected that sales would be reduced, but they remained at the same level. The number of registrations increased by 158%. This can be explained by choice of the user — often a potential client interested in the service, but does not want to risk immediately.
Therefore, alternative options side-by-side, a beneficial effect on the conversion. Sometimes the conversion suffers from the unnecessary elements — just remove them, and the effectiveness of the site will grow. Did the company SuperOffice. On the page “to Schedule the free version” there is only fields for entering personal data — so the best control of users attention has led to an increase of conversion rate by 197%.
The perception of color as such should be taken into account when designing the UI, however this item should not pay too much attention. The orange buttons do not sell better or worse. It all depends on the context in which they are used.
To ensure that the design was a conversion, you need to manage the audiences attention — it has developed principles that we talked. The main task is to shift the focus to the desired UI element, whether it is a order form, buy button or something. For example, here the user draws attention to the bright colored icons, not the main service ticket order form.
To finally find out whether it is better to start to sell a button with a different color, size or location, is always to reserve a portion of the budget for A/B tests.