Как цвета и контраст на сайте влияют на продажи

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

Примерно лет 5 назад, русскоязычный сегмент интернета буквально накрыла волна редизайна. Все, кто в момент создания своего интернет-офиса хотел сайт любого цвета, главное чтобы он был красным, начали массово перекрашиваться в синий. И да, это привело к увеличению конверсии.

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

Пользователю эта вещь нужна, или он думает, что может быть нужна (целевой трафик)

Его устраивает цена продукта
Предоставленная о товаре информация объективная и исчерпывающая
Сайт интуитивно-понятен и на нём просто ориентироваться
На сайте присутствуют психологические мотиваторы, что отображается в правильном визуальном дизайне

Если вы хотели получить чёткий ответ на вопрос, в какой цвет покрасить сайт, чтобы автоматически выросли продажи — перекрашивайте из красного в синий. Этот приём уже сработал для многих, скорее всего окажется эффективным и для вас. В этой статье мы копнули глубже и собрали советы наших веб-разработчиков, которые ежедневно создают сайты попадающие в ТОП-выдачи. В том числе и ТОП-0.

Немного о психологии цвета и что с ней не так

Владелец или маркетолог любой компании, прописывая ТЗ для создания сайта и дойдя до пункта о предпочтительных цветах, непременно начинает гуглить. И гуглит он психологию цвета. Оттуда он узнаёт, что красный — цвет страсти, чёрный — печали, а зелёный — умиротворения. Вот и сделайте себе спальню в зелёных тонах, если они вас расслабляют. Психология цветов не имеет ничего общего с цветовосприятием в интернете. Здесь ассоциации совершенно другие. Опрос проведённый американским дизайнером показал, что люди приписывают цветам, которые они видят на экране своего гаджета определённые свойства. Мы укажем те, которые оказались на первом месте у респондентов:

Синий — доверие (34%); Безопасность (28%); Надёжность (43%)
Красный — скорость (76%)
Качество — чёрный (43%); Технологичность (26%)

Доступность — оранжевый (26%); Юмор (28%)

Если вы в ВУЗе учили психологию и даже помните, что преподаватель рассказывал вам о психологии цвета — забудьте, если решили стать web-разработчиком и создавать эффективные сайты. В реальности всё немного не так. Более того, на наше восприятие цвета влияют вкусовые предпочтения, воспитание в семье, этнический и культурный слой, народность к которой мы принадлежим и ещё множество факторов. Под каждого не подстроишься, да и не нужно. Руководствоваться стоит принципом большинства.

Чем вредны «попсовые» сайты

Как часто мы на практике сталкиваемся с желанием заказчика использовать на сайте всё и сразу? Часто. И переговоры ведутся долгие. Желание выделиться среди конкурентов — вполне нормально и разумно. Но здесь важно не перестараться.

Маркетологи зачастую присылают ТЗ в котором значится: «сделать сайт попопсовее». По их мнению — это должно объяснить дизайнеру, что и как. Если быть до конца откровенными, то на самом деле — это не говорит абсолютно ни о чём. На практике, под термином «попопсовее» чаще всего подразумевается красочный фон, гифки, анимации, большие картинки, множество кликабельных кнопок. Мало того, что все эти «прелести» съедают трафик и даже при самой лучшей оптимизации, снижают скорость загрузки и взаимодействия, так ещё и подходят мало кому.

Давайте на чистоту. Вы не заказываете сайт Disnay, не являетесь мультипликационной студией и вашей целевой аудитории гораздо больше 5 лет. Тогда зачем вам такой сайт? В лучшем случае, он подойдёт интернет-магазину игрушек. Да и то взрослых будет раздражать чрезмерная анимация и яркий фон. В конце-концов, деньги платят родители, а не дети.

Можно ли навредить чрезмерной «попсовостью»? Да, можно. Поэтому мы всегда стараемся найти баланс в пожеланиях заказчика и юзабилити. Терять деньги получив красивенький, но интуитивно непонятный сайт на котором будет всё и сразу, вам явно не понравится.

Психология контраста

Если прочитав название этого пункта вы решили его пропустить, мол «Да знаю я всё о контрасте. Сто раз делал в любом фоторедакторе», прочитайте его и вы удивитесь. Речь немного не о том контрасте. Тот о котором подумали вы, на конверсии не влияет никак.

Самый простой пример контраста, который все видели неоднократно — это принцип до и после. Если вы периодически ищете в сети интернет диеты, то умный маркетинг подсунет вам не только диету, но и чудодейственный препарат или комплекс физических упражнений. Сопровождать его будут фотографии «до», «в процессе» и «после». Сравнивая между собой первые две, вы непременно отметите, что на фото «в процессе», перед вами довольно стройный человек, которому худеть не обязательно. А сравним две вторые поймёте, что худой только на фото «после», а на двух предыдущих — человек с лишним весом. Потому что мы подсознательно воспринимаем всё на контрасте.

У вас может возникнуть вполне логичный вопрос — и как этот самый контраст поможет повысить конверсию. При правильном и продуманном дизайне сайта — ещё как поможет. К примеру, вы предлагаете услуги. Каждая из них имеет свой тариф с набором опций и стоимостью. Подробное описание каждой находится на отдельных страницах. Пользователю может быть просто лень каждый раз вызывать меню и вспоминать, какой из тарифов он не изучил. А если попробовать расположить все тарифы с ключевым описанием и цене на одной странице в отдельных ячейках? Тогда визуально сразу видно все предложения и стоимость. Пользователь с удовольствием перейдёт в «Подробнее» того, который его заинтересовал. И вероятность покупки существенно возрастает.

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

Играя с контрастами не стоит забывать и о балансе цветов. Классическим решением является — 60х30х10. Распределяются они так

60% – доминирующий цвет
30% – дополнительный с возможными оттенками

10% – цветовой акцент

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

Взаимосвязь текста и контраста

Здесь всё просто — чем меньший кегль шрифта вы используете, тем более контрастным должен быть текст по отношению к фону. Крупный размер шрифта может быть и схожих оттенков, так как величина обеспечивает читабельность.

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

Цвет кнопки

Цвет кнопки на вашем сайте может быть любым. Но помните, что она является элементом не просто кликабельным, но что главное — побуждающим к действию. Это не значит, что кнопку нужно сделать непременно красной, как можно услышать в процессе курса «Дизайн сайта своими руками за 2 часа». Она должна выделяться любым способом — контрастным цветом, объёмом, шрифтами.

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