|
|
|
|
![]()
Miss Content
V.I.P. |
Зарегистрирован: 05.03.2010
Сообщений: 7881
|
Обратиться по нику
|
| Miss Content |
Ответить с цитатой | | |
|
Каждый из нас что-то слышал о психологии цвета. Этой теме посвящено множество статей, исследований и инфографик, которые освещают этот вопрос с разных углов. Никто не спорит, что цвет оказывает колоссальное влияние на наш выбор и процесс принятие решений. Сегодня я предлагаю сосредоточится на том, какое воздействие оказывает цвет и контраст на посетителей сайта при совершении действий.
Изменение цвета со спокойного зеленого на ярко красный несомненно привлечет внимание, но не всегда сможет улучшить ситуацию. Если нет подходящего фона, который акцентирует на нем внимание, то этот элемент «потеряется». В этом случае основную роль играет контраст. Ниже представлены образцы как удачного сочетания цветов, так и не совсем подходящие.
Цвет 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/ |
|
|
|
|
|
Место для Вашей рекламы! |
![]()
Ализандр
V.I.P. |
Зарегистрирован: 06.04.2010
Сообщений: 4647
|
Обратиться по нику
|
| Ализандр |
Ответить с цитатой | | |
|
| А я смотрю, сейчас в моде минимализм. На всех примерах очень мало текста. |
|
|
|
|
|
|
![]()
Miss Content
V.I.P. |
Зарегистрирован: 05.03.2010
Сообщений: 7881
|
Обратиться по нику
|
| Miss Content |
Ответить с цитатой | | |
|
| Ализандр писал(а): |
|
А я смотрю, сейчас в моде минимализм. На всех примерах очень мало текста.
|
Скорее всего это связано с "мобильным" трендом. На маленьком экране много информации не поместится. |
|
|
|
|
|
Место для Вашей рекламы! |
![]()
Лик
V.I.P. |
Зарегистрирован: 03.07.2010
Сообщений: 4501
|
Обратиться по нику
|
|
|
|
|
|
|
Партнеры
|
