Цвет сайта влияет на его восприятие пользователями — аксиома и доказывать это не имеет смысла. Если у компании нет своих корпоративных цветов, то пожелания заказчиков в ТЗ по созданию сайта могут быть самыми разными. Начиная от «сделайте мне стильно и красиво», до «давайте синий, я тут прочитал, что он лучше всего».
Примерно лет 5 назад, русскоязычный сегмент интернета буквально накрыла волна редизайна. Все, кто в момент создания своего интернет-офиса хотел сайт любого цвета, главное чтобы он был красным, начали массово перекрашиваться в синий. И да, это привело к увеличению конверсии.
Но не ждите, что просто создав правильный дизайн, в том числе по цвету и контрасту, вы тут же получите приток новых клиентов. Каким бы продуманным, привлекательным и эффективным с точки юзабилити не был ваш сайт, а наша команда постарается убедить вас сделать именно такой, он решает далеко не всё. Если это не импульсивная покупка, как правило их большая часть совершается в офлайне, человек нажмёт заветную кнопку «Купить» только в случае если:
- Пользователю эта вещь нужна, или он думает, что может быть нужна (целевой трафик)
- Его устраивает цена продукта
- Предоставленная о товаре информация объективная и исчерпывающая
- Сайт интуитивно-понятен и на нём просто ориентироваться
- На сайте присутствуют психологические мотиваторы, что отображается в правильном визуальном дизайне
Если вы хотели получить чёткий ответ на вопрос, в какой цвет покрасить сайт, чтобы автоматически выросли продажи — перекрашивайте из красного в синий. Этот приём уже сработал для многих, скорее всего окажется эффективным и для вас. В этой статье мы копнули глубже и собрали советы наших веб-разработчиков, которые ежедневно создают сайты попадающие в ТОП-выдачи. В том числе и ТОП-0.
Немного о психологии цвета и что с ней не так
- Синий — доверие (34%); Безопасность (28%); Надёжность (43%)
- Красный — скорость (76%)
- Качество — чёрный (43%); Технологичность (26%)
- Доступность — оранжевый (26%); Юмор (28%)
Если вы в ВУЗе учили психологию и даже помните, что преподаватель рассказывал вам о психологии цвета — забудьте, если решили стать web-разработчиком и создавать эффективные сайты. В реальности всё немного не так. Более того, на наше восприятие цвета влияют вкусовые предпочтения, воспитание в семье, этнический и культурный слой, народность к которой мы принадлежим и ещё множество факторов. Под каждого не подстроишься, да и не нужно. Руководствоваться стоит принципом большинства.
Чем вредны «попсовые» сайты
Маркетологи зачастую присылают ТЗ в котором значится: «сделать сайт попопсовее». По их мнению — это должно объяснить дизайнеру, что и как. Если быть до конца откровенными, то на самом деле — это не говорит абсолютно ни о чём. На практике, под термином «попопсовее» чаще всего подразумевается красочный фон, гифки, анимации, большие картинки, множество кликабельных кнопок. Мало того, что все эти «прелести» съедают трафик и даже при самой лучшей оптимизации, снижают скорость загрузки и взаимодействия, так ещё и подходят мало кому.
Давайте на чистоту. Вы не заказываете сайт Disnay, не являетесь мультипликационной студией и вашей целевой аудитории гораздо больше 5 лет. Тогда зачем вам такой сайт? В лучшем случае, он подойдёт интернет-магазину игрушек. Да и то взрослых будет раздражать чрезмерная анимация и яркий фон. В конце-концов, деньги платят родители, а не дети.
Можно ли навредить чрезмерной «попсовостью»? Да, можно. Поэтому мы всегда стараемся найти баланс в пожеланиях заказчика и юзабилити. Терять деньги получив красивенький, но интуитивно непонятный сайт на котором будет всё и сразу, вам явно не понравится.
Психология контраста
Самый простой пример контраста, который все видели неоднократно — это принцип до и после. Если вы периодически ищете в сети интернет диеты, то умный маркетинг подсунет вам не только диету, но и чудодейственный препарат или комплекс физических упражнений. Сопровождать его будут фотографии «до», «в процессе» и «после». Сравнивая между собой первые две, вы непременно отметите, что на фото «в процессе», перед вами довольно стройный человек, которому худеть не обязательно. А сравним две вторые поймёте, что худой только на фото «после», а на двух предыдущих — человек с лишним весом. Потому что мы подсознательно воспринимаем всё на контрасте.
У вас может возникнуть вполне логичный вопрос — и как этот самый контраст поможет повысить конверсию. При правильном и продуманном дизайне сайта — ещё как поможет. К примеру, вы предлагаете услуги. Каждая из них имеет свой тариф с набором опций и стоимостью. Подробное описание каждой находится на отдельных страницах. Пользователю может быть просто лень каждый раз вызывать меню и вспоминать, какой из тарифов он не изучил. А если попробовать расположить все тарифы с ключевым описанием и цене на одной странице в отдельных ячейках? Тогда визуально сразу видно все предложения и стоимость. Пользователь с удовольствием перейдёт в «Подробнее» того, который его заинтересовал. И вероятность покупки существенно возрастает.
Ещё один приём, который позволяет добиться контраста и повысить конверсию — использование так называемых «акцентных пятен». Они не обязательно должны быть яркими. Но непременно должны выделяться чем-либо на фоне других элементов.
Играя с контрастами не стоит забывать и о балансе цветов. Классическим решением является — 60х30х10. Распределяются они так
- 60% — доминирующий цвет
- 30% — дополнительный с возможными оттенками
- 10% — цветовой акцент
В повседневной жизни это можно увидеть на примере женского классического офисного костюма. Пиджак и юбка — доминанта, рубашка — дополнение, шейный платок или контрастные бусы — акцент.
Взаимосвязь текста и контраста
Здесь всё просто — чем меньший кегль шрифта вы используете, тем более контрастным должен быть текст по отношению к фону. Крупный размер шрифта может быть и схожих оттенков, так как величина обеспечивает читабельность.
Как и в подборе цветов и оттенков для всего сайта, при определении контраста цвета и фона, дизайнеры используют цветовой круг. На нём размещены первичные цвета, которые после смешивания дают вторичные и так далее. Максимально подходящие цвета находятся на колесе либо рядом, либо напротив друг-другу.
Цвет кнопки
Иногда заказчики просят сделать стильный лаконичный сайт в одной цветовой гамме. Но даже в этом случае, кнопки нужно выделить. Проведите простой эксперимент. Достаточно среди членов своей семьи и знакомых. Просто распечатайте в цвете страницу стильного и лаконичного сайта в единой цветовой гамме, который вам нравится. И попросите указать на элементы, которые привлекают больше всего внимания. Все укажут на разные. Если же кнопки призывающие к действию будут выделены любым способом, то в большинстве случаев именно они и станут главным притягательным объектом.
