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



 

Здравствуйте, гость (

| Вход | Регистрация )

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


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

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

Цвет 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/


--------------------
Место для Вашей рекламы!!!


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


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


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


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


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


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


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


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


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


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Во что сегодня инвестировать?
Делимся своими приносящими прибыль вариантами
69 traveliver 4447 25.3.2024, 6:48
автор: Skyworker
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВо что Вы играете?
399 Vmir 67502 23.3.2024, 12:51
автор: Alexand3r
Открытая тема (нет новых ответов) Где больше пробив на кликандер или попандер или попап трафике?
1 Boymaster 612 20.3.2024, 9:50
автор: Skyworker
Открытая тема (нет новых ответов) Google adwords показывает дробное количество конверсий
0 Megaspryt 709 16.3.2024, 23:19
автор: Megaspryt
Открытая тема (нет новых ответов) "Извините, что ожидание затянулось, но не думайте, пожалуйста, что мы про вас забыли. Мы заводим задачи по всем обращениям и контролируем работу над ними самым тщательным образом."
Вопрос
0 kuz999 1188 5.2.2024, 14:06
автор: kuz999


 



RSS Текстовая версия Сейчас: 28.3.2024, 18:43
Дизайн