X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Цвет vs контраст: что приносит больше конверсий
MissContent
MissContent
Topic Starter сообщение 21.8.2015, 14:25; Ответить: MissContent
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 883
Регистрация: 22.7.2013
Поблагодарили: 899 раз
Репутация:   93  


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

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

Цвет 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/col...re-conversions/


--------------------
Реальный конверт с реальной Фарма ПП!
Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org


Поблагодарили: (6)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Caterpillar
Caterpillar
сообщение 21.8.2015, 18:21; Ответить: Caterpillar
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 314
Регистрация: 11.7.2014
Из: Харьков
Поблагодарили: 95 раз
Репутация:   10  


Две кнопки, кстати, это тоже прием повышения эффективности лидогенерации - иллюзия выбора и подогрев интереса.
А кнопочка прозрачная с контуром называется кнопка-призрак (ghost button) :bye2:


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
AnnaDem
AnnaDem
сообщение 8.9.2015, 16:22; Ответить: AnnaDem
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 66
Регистрация: 2.9.2015
Поблагодарили: 2 раза
Репутация:   0  


как по мне главное чтобы цвета на сайте были не агрессивные, тогда они будут более приятные для глаза


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Astralis
Astralis
сообщение 12.10.2015, 15:18; Ответить: Astralis
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 378
Регистрация: 21.11.2013
Поблагодарили: 50 раз
Репутация:   5  


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
parazit
parazit
сообщение 31.12.2015, 18:49; Ответить: parazit
Сообщение #5


Частый гость
**

Группа: User
Сообщений: 90
Регистрация: 14.10.2013
Из: РФ
Поблагодарили: 25 раз
Репутация:   5  


Цитата(MissContent @ 21.8.2015, 14:25) *
Squad Digital
особенно понравился этот удачный пример,одна красная кнопка на черном фоне явно не оставляет выбора у посетителя)))
MissContent, спасибо за интересный обзор,особенно понравился ход с черной и оранжевой кнопкой в этом примере
Цитата(MissContent @ 21.8.2015, 14:25) *
Martin Wren


да интересно было-бы почитать подобный обзор для ИМ,может кто сылочкой поделится...


Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Sergey_Nizhegoro...
Sergey_Nizhegoro...
сообщение 2.2.2016, 3:14; Ответить: Sergey_Nizhegorodtsev
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 380
Регистрация: 11.12.2015
Из: Нижний Новгород
Поблагодарили: 145 раз
Репутация:   10  


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


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wanessa
wanessa
сообщение 10.2.2016, 8:21; Ответить: wanessa
Сообщение #7


Завсегдатай
*****

Группа: Active User
Сообщений: 808
Регистрация: 18.4.2011
Поблагодарили: 107 раз
Репутация:   7  


Интересная статья, да и по фото сразу понимаешь какая кнопка менее эффективна. Ну фиолетовый фон - это что то...
Я бы сразу же закрыла такую страницу, глаза можно поломать:).


--------------------
Ищете хостинг? Beget.ru - месяц бесплатного тестирования, бесплатный перенос сайта!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Что лучше, фриланс, удаленка, или работа в офисе солидной компании?
97 Levizar 7946 Сегодня, 13:51
автор: Smspva
Открытая тема (нет новых ответов) [Бесплатный тест] Airsocks. Инновационные мобильные 4G / LTE прокси. Забудь все что было раньше!
27 airsocks11 6288 Сегодня, 3:22
автор: airsocks11
Открытая тема (нет новых ответов) Пошив одежды - что не так с сайтом ?
22 bridge8 1461 Вчера, 17:24
автор: bridge8
Открытая тема (нет новых ответов) Что делать если боты и поисковики грузят сервер?
Превышение нагрузки на сервер.
8 nahalturu 2303 13.12.2017, 17:12
автор: vds4you
Открытая тема (нет новых ответов) Adsense: много кликов, мало денег. Что делать?
Очень дешёвые клики по объявлениям
16 zeleboba 2449 13.12.2017, 17:00
автор: vds4you


 



RSS Текстовая версия Сейчас: 15.12.2017, 14:28
Дизайн