Объединив научные исследования по психологии цвета с некоторыми принципами дизайна, вы сможете создать для своего сайта отличную кнопку призыва к действию, а также значительно повысить конверсию. Кнопка призыва к действию содержит 4 важных инструмента, которые помогут достичь этой цели: расположение, форма (и размер), текст и цвет.
В этой статье я расскажу о цветовом аспекте.
Что же представляют собой кнопки призыва к действию?
Представьте, что ваш сайт — это цепочка действий, которые необходимо осуществить пользователям для того, чтобы найти то, что они ищут. Чтобы облегчить им жизнь, необходимо сделать эту цепочку настолько простой (то есть удобной в пользовании), насколько это возможно, и вести их к желаемой странице без какого-либо вмешательства.
Так как некоторые из этих действий важнее других, они должны выделяться среди остальной части интерфейса. Вам необходимо привлечь внимание пользователей и попытаться убедить их начать действовать (призыв к действию). Призыв к действию осуществляется при помощи визуального маркера, а именно кнопки призыва к действию. Вот несколько примеров возможных действий: покупка продукта, подписка на рассылку, создание нового аккаунта, подача заявки, скачивание последней версии программного обеспечения…
Но почему же цвета настолько важны?
Психология цвета в создании сайтов
Каждый цвет вызывает у людей разные чувства или настроения, и, следовательно, разную реакцию. Врачи и медсестры носят белое, что является знаком стерильности. Спортзалы обычно выкрашены в синий цвет, поскольку, как показали исследования, в синих залах тяжелоатлеты способны поднять больший вес.
Как видите, цвета являются очень мощным инструментом для стимулирования или, наоборот, блокировки определённых чувств. Таким образом вы можете в некоторой степени вести пользователей через ваш интерфейс, позволяя им при помощи правильных цветов и цветовых комбинаций принимать те решения, которые вы хотите, чтобы они приняли. Однако не торопитесь прямо сейчас создавать цветовые схемы, так как есть ещё несколько нюансов, о которых вам необходимо знать.
Несмотря на то, что восприятие цветов является субъективным, некоторые цветовые эффекты имеют универсальное значение. К примеру: голубой является холодным цветом, а красный — тёплым.
Во-вторых, восприятие цветов основано на особенностях культуры. Возьмём в качестве примера чёрный цвет (который с научной точки зрения цветом не является). Несмотря на то, что чёрный цвет во многих культурах ассоциируется со смертью и трауром, в Древнем Египте он считался символом жизни и перерождения.
Сьюзан Уэйншенк , доктор философских наук в области психологии и автор книги «Интуитивный веб-дизайн: Что заставляет людей переходить по ссылкам (Голоса, которые имеют значение)», написала интересную статью по этой теме. Не забудьте взглянуть на цветовой круг Маккэндлесса, который вы можете загрузить внизу ее страницы.
На сайте Kissmetrics представлена отличная инфографика о том, как цвета влияют на продажи.
Немного теории цвета
Чуть позже я объясню вам почему при разработке важных кнопок лучше использовать хороший контраст. Упоминая контрастные цвета я имею в виду дополнительные цвета. Дополнительные цвета — это цвета, которые расположены на цветовом круге друг против друга (см. картинку ниже). Дополнительные цвета кажутся ярче, когда находятся рядом друг с другом.
Разработчики сайта The Resumator создали для регистрации красивую красную кнопку призыва к действию, которая расположена на голубом фоне. В то же время, для менее важных действий были созданы идентичные кнопки, но уже голубого цвета.
Другим примером использования дополнительных цветов является одежда, которую надевают врачи во время работы в операционной. Обычно она зелёного или голубого цвета. Эти два цвета позволяют докторам лучше воспринимать объекты красного цвета, такие как кровь и внутренние органы пациента, а так же замечать малейшие нюансы человеческого тела. Красный и зелёный — это дополнительные цвета.
Так какой же мне выбрать цвет для моей кнопки?
Как было сказано в начале данной статьи, кнопка призыва к действию состоит из 4 элементов: расположение, форма (и размер), текст и цвет. Если эти 4 аспекта хорошо соотносятся друг с другом, вы получаете отличную кнопку призыва к действию.
Учитывая данный факт, необходимо также помнить о нескольких основных принципах дизайна. Если вы хотите, чтобы элемент дизайна выделялся, выберите для него цвет, который является дополнительным по отношению к цвету фона (вспомните пример с сайтом The Resumator, который я приводил выше).
Небольшая подсказка: для больших кнопок используйте менее броский цвет (относительно окружающих её элементов и фона), а для маленьких кнопок, наоборот, нужны цвета поярче. Но какой бы цвет вы ни выбрали, убедитесь, чтобы разработанная кнопка была заметна без вмешательства в основной дизайн.
Несмотря на то, что данная статья основана на научных исследованиях по психологии цвета и некоторых принципах дизайна, вы всегда должны сами тестировать свои кнопки призыва к действию, чтобы понять, что лучше подходит для вашего сайта. Проще всего это сделать с помощью а/б тестов или многовариантного тестирования, а можете последовать данным 5 советам о том, как сделать ваш сайт более удобным в использовании.
Один из многих примеров, которые вы можете найти в интернете, является исследование Maxymiser, которое ясно демонстрирует важность цвета кнопок призыва к действию. Они добились 11-процентного роста количества кликов на странице оформления заказа сайта Laura Ashley посредством тестирования различных вариаций цветов и текста. Вы можете сами ознакомиться с данным исследованием.
