Есть ли цвета, повышающие конверсию?

цвет и конверсия
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Цвет - один из важнейших факторов, влияющих на эмоциональное состояние пользователя. Рассказываем, каких цветов стоит избегать, какие использовать, идеальная формула баланса цвета на сайте»

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

Так ли это? Разбираемся, какую роль играет цвет в восприятии сайта пользователем.

В этом выпуске:

  • Как цвет влияет на пользователя
  • Цветовая формула идеального сайта
  • Значения цветов и примеры реализации на сайта

 

цвет и конверсия

Как цвет влияет на пользователя

Цвет не влияет на конверсию, он управляет эмоциями и вниманием пользователя.

В интернете пользователям недоступны большинство характеристик товара. Мы не можем оценить запах, текстуру, «ощутить» качество товара. Все оценивается визуально. Цвет влияет на эмоциональное состояние человека, вызывает определенные ассоциации.

  • 93% пользователей принимают решение о покупке по внешнему виду продукта.
  • 85% пользователей выбирают определенный товар по цвету.
  • Около 70% покупателей откажутся от покупки, если товар не того цвета.
  • Цвет повышает узнаваемость бренда на 80%.

цвет и конверсия

Решение о дальнейшем взаимодействии с сайтом пользователь принимает в считанные секунды. Представьте, что у вас есть всего 8 секунд, чтобы произвести впечатление на посетителя. За это время важно не только привлечь внимание, но и вызвать доверие.

Поэтому важно понимать, какой цвет на подсознательном уровне побудит пользователя идти дальше, а который — остановит.

Восприятие цвета неоднозначно

То, как пользователь интерпретирует цвет, зависит от различных факторов.

Специфика предложения

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

веселый детский сайт

ИЛИ 

 

угрюмый дизайн детского сайта

Сравним два сайта детских товаров. Отличия очевидны. Яркое цветовое решение первого сайта задает позитивный настрой, стимулирует интерес. Второй сайт детских товаров, выполненный в сдержанных цветах, проигрывает в сравнении с первым.

Специфика сайта

Лендинг-пейдж, блог и банковский портал предполагают абсолютно разные сценарии взаимодействия. При выборе цвета стоит учитывать, сколько времени предположительно пользователь проведет на сайте. Чем более тесное взаимодействие пользователя и сайта предполагается, тем спокойнее должны быть цвета.

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

дизайн сайта цвет конверсия

Кто ваша целевая аудитория

Женщины эмоциональнее, лучше реагируют на яркие, энергичные цвета: розовый, желтый, зеленый, голубой.

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

цвет конверсия и целевая аудитория

Ассоциации с цветом

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

  • Красный — остановись.
  • Желтый — приготовься/обрати внимание.
  • Зеленый — иди.

Вот, как это работает на практике:

Все пропало!

 

красный цвет в дизайне

 

Обратите внимание! Надо улучшить.

 

желтый цвет в дизайне

 

Все ОК! Поехали дальше!

 

Зеленый цвет в дизайне

Из личного опыта:

Являюсь постоянным клиентом двух банков. Хотя в первом банке условия выгоднее, преимущественно пользуюсь услугами второго. Вот почему:

 

красный цвет в дизайне

 

Агрессивный красный повышает уровень тревожности.

 

зеленый цвет в дизайне

 

Светлый серый с зелеными акцентами создает спокойную «атмосферу» для работы со счетами.

Цветовая формула идеального сайта

Выглядит формула так:

цвет и баланс формула

  • 60% — основной цвет, наименее насыщенный
  • 30% — вторичный цвет
  • 10% — цвет акцентов, призванных привлечь внимание пользователей (в том числе Call to Action элементов).

цвет СТА цитата

Вывод цвет и конверсия

Почему цветовые акценты важны, если не влияют на конверсию?

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

Значения цветов и примеры реализации на сайтах

Исследование Kissmetrics показало, какие цвета лучше использовать для побуждения пользователей к определенным действиям:

Желтый

Оптимистичный, жизнерадостный цвет молодости, рекомендуется использовать для привлечения внимания, как это делает Adme.ru:

желтый цвет в дизайне

Красный

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

Стереотипное восприятие красного цвета — опасность или ошибка.

Наиболее опасный цвет в веб-дизайне, повышает уровень тревожности. Vodafone использует красный для акцентов:

красный цвет в дизайне

Синий

Цвет уверенности, создает ощущение доверия и защищенности, цвет делового стиля, оптимально подходит для сайтов, на которых пользователи оставляют персональные данные, проводят много времени:

синий цвет в дизайне

Зеленый

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

Оранжевый

Активный, мотивирующий, убеждающий, цвет, используемый для кнопок СТА.

Amazon выделяет главную информацию оранжевыми акцентами:

оранжевый цвет в дизайне

Розовый

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

Victoria’s Secret правильно использует розовый для акцентов, направляя вниманием посетителей:

розовый цвет в дизайне

Черный

Сильный и галантный, рекомендуется для позиционирования товаров luxury-сегмента:

черный цвет в дизайне

Белый

Цвет справедливости и равенства, рекомендован для бизнес-сайтов. А еще белое пространство позволяет сайту и пользователю «дышать». Пустое пространство облегчает восприятие, а так, даже самое сложное на подсознательном уровне воспринимается проще. Как у Apple:

белый цвет в дизайне

Итог:

анализ сайтаЦвет не влияет на конверсию прямо.

Нет оттенка, который поднимет конверсию до 100%.

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

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

анализ сайтаЦветовые схемы сайтов учитываются алгоритмом GetGoodRank при оценке юзабилити сайтов.



Добавить комментарий

Войти с помощью: 

Статьи по теме

оптимизация рассылок
Статьи
Оптимизация рассылки: 15 советов по созданию влюбляющих писем
Юзабилити определяет успех взаимодействия пользователя с сайтом и продуктом. Однако ког...
конверсия мобильных страниц
Статьи
Конверсия мобильных страниц — исследование Google
Google совместно с аналитической компанией SOASTA выяснили, что заставляет мобильных по...