Цвет или контраст: что в большей мере повышает конверсию сайтов

Это всего лишь еще одна статья на тему "туда не ходи, сюда ходи". Многое из того, что вы в ней найдёте, вы уже слышали не раз, но всё же когда дело касается использования цвета - всегда лучше принимать во внимание как можно больше точек зрения. Работа с цветом - это довольно деликатный процесс, требующий учёта множества факторов: от особенностей вашей целевой аудитории, до сферы бизнеса клиента и его пожеланий. Тем не менее, существуют некоторые универсальные принципы, которым вы просто обязаны следовать. В этой статье мы не будем говорить вам "используйте цвет в дизайне", но мы утверждаем, что вы должны использовать контраст и докажем это вам на нескольких несложных примерах.

Часто можно услышать, что если вы будете использовать один цвет вместо другого, то это якобы способно очень сильно повлиять на конверсии. Нет, мы конечно же не советуем вам оформлять ваши CTA невзрачным выбивающимся из дизайна цветом. На самом деле исследований, доказывающих что цвет А лучше цвета Б - десятки. Вот хотябы пример того, как Hubspot проводили A/B-тестирование своих CTA:

http://blog.usabilitytools.com/wp-content/uploads/2015/06/3.png

Результатом этого исследования стало то, что конверсия красной кнопки оказалась на 21% больше зелёной. Так держать, красный (прям как в рекламе M&M's). Но это ни в коем случае не значит, что мы все сейчас должны открыть наши PSD и CSS, и поменять всё на красный цвет. Почему? Обратите внимание на цветовую схему сайта - она выполнена в зелёных цветах. Задний фон, кнопки и все иконки используют зелёный цвет как основу. Именно поэтому зеленая кнопка с CTA сливается со своим окружением и не 
оказывает должного эффекта на посетителя.

Обратную ситуацию мы наблюдаем с кнопкой красного цвета. Благодаря тому, что фон и остальные элементы остались в зелёном цвете, красная кнопка становится контрастной по отношениию ко всему остальному и начинает привлекать больше внимания. На ум приходит сцена из фильма "Матрица" когда Нео обращает внимание на блондинку в красном, идущую в толпе одинаково серых прохожих - вот это самый простой и запоминающийся пример контраста и улучшения эффективности CTA, который удалось вспомнить :)

Если брать простые примеры, то посмотрите на вот этот интернет-магазин строительных материалов, где можно купить входные двери: http://domtexnik.com.ua/category/vhodnye - сайт выполнен в черных и оранжемых тонах. Однако большинство CTA кнопок выкрашены в общую цветовую гамму и совершенно не контрастируют с внешним дизайном, что и является ошибкой.

Забудьте о избитых до ужаса утверждениях о том, будто синий цвет - успокаивает, красный - заставляет почувствовать голод и тому подобных. Эти утверждения работают очень ситуационно, ведь восприятие цвета зависит от довольно большого количества факторов.

Версия для печатиВерсия для печати