Цвет vs контраст: что приносит больше конверсий. > ПОЛЕЗНЫЕ СТАТЬИ

Цвет vs контраст: что приносит больше конверсий.

# Чт Авг 20, 2015 11:55 amMiss Content Зарег.: 05.03.2010 ; Сообщ.: 7881

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

Изменение цвета со спокойного зеленого на ярко красный несомненно привлечет внимание, но не всегда сможет улучшить ситуацию. Если нет подходящего фона, который акцентирует на нем внимание, то этот элемент «потеряется». В этом случае основную роль играет контраст. Ниже представлены образцы как удачного сочетания цветов, так и не совсем подходящие.

Цвет vs контраст

ESPN Sports Programming

Начальная страница ESPN Sports Programming прекрасный пример того, как цвет может играть значительную роль в увеличении конверсии. Здесь целых 2 призыва к действию: какой бросается в глаза первым? Конечно, красный, который притягивает к себе внимание благодаря темному заднему фону.

Moovrs

Несмотря на то, что кнопка не красного цвета (который, как считается, продает лучше всего), благодаря четкому контрасту она акцентирует на себя внимание.

Metaverse Mod Squad

Еще один прекрасный образец дизайна, который отвечает всем правилам цветовой психологии. Здесь красный цвет привлекает внимание к самым важным элементам страницы: призыву к действию, иконке меню и кнопке «О нас». Хотя фон тоже вносит свою лепту в восприятие страницы, в центре внимания оказываются именно эти 3 элемента.

S-Trip

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

Squad Digital

Насыщенный красный цвет с малиновым оттенком превращает кнопку в центральный элемент. При этом не нужно преуменьшать роль темного, почти монохромного фона. Тщательно продуманное соотношение пустого пространства и лаконичного текста в центре не оставляет посетителю другого выбора как нажать на кнопку.

El Passion

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

Icons Responsive

На этом сайте достаточно информативно насыщенная домашняя страница. Там есть и анимация и описание и крупный логотип и навигационная панель. Несмотря на такое разнообразие 2 зеленые кнопки легко различимы и привлекают внимание.

Chatrify

Дизайнеры использовали здесь не только цвет, но и размер чтобы привлечь внимание к наиболее важному элементу. В результате, «Get started now for free» получает приоритет в глазах пользователей.

Teletrack Plus

Стартовая страница Teletrack Plus сразу создает деловой настрой и прямо изучает доверие и надежность. Несмотря на обилие текста, маленькая желтая кнопка в самом низу сразу бросается в глаза, благодаря умело созданному контрасту.

Mobirise

Опять 2 одинаковые кнопки. Но какая из них более заметная? Я думаю, все согласятся, что сочная оранжевая кнопка выглядит более кликабельной, чем ее элегантная и прозрачная соседка.

Если честно, найти примеры неудачного дизайна оказалось совсем не сложно, они попадаются на каждом шагу.

100 Thoughtful Acts

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

Lucerne Health

На заднем плане настолько красивая фотография, что от нее сложно оторвать взгляд. Голубой цвет кнопки поддерживает атмосферу спокойствия и безмятежности, из-за чего она практически сливается с фоном.

Convect Air

Еще один пример того, как призыв к действию теряется на заднем фоне. Отсутствие контраста и маленький размер сыграли с призывом к действию злую шутку.

Soundsnap

На Soundsnap две абсолютно идентичные кнопки, которые как следствие равнозначны для пользователя. Кроме того, они сливаются с фотографией на заднем фоне. Единственное что бросается в глаза — это яркая информационная панель в верхней части экрана.

Wiser Digital

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

Spire

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

The Green Guys

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

Martin Wren

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

Royal Albert Hall

На заднем фоне роскошная фотография, которая создает соответствующую атмосферу. Название сайта отчетливо видно благодаря удачно подобранному шрифту и его размеру, а вот поле для поиска и кнопка подтверждения теряются на их фоне.

Desperados

Нужное воздействие на посетителя здесь достигается благодаря сочетанию декоративного шрифта и графики. Чтобы привлечь внимание к кнопке, дизайнер использует дополнительные графические объекты.

Заключение.

Цвет играет огромную роль при создании сайта, но как показал опыт, контраст между призывом к действию и задним фоном не менее важен. Если вы хотите увеличить конверсию и улучшить взаимодействие с пользователями, вам нужно иметь это ввиду.

Оригинал статьи на английском языке: http://www.onextrapixel.com/2015/08/15/color-vs-contrast-which-one-brings-more-conversions/