10 ошибок работы с цветом на сайте

Нежелание внедрять психологические приемы

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

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

Зеленый цвет символизирует доверие — а что может быть важнее доверия, когда речь заходит о еде?

1. Слепое подражательство

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

Даже если вам очень нравится какой-то сайт, задумайтесь, прежде чем заказывать «точно такое же, но про мои товары».

2. Тусклый call-to-action

Если у вас есть мощный призыв к действию, он должен быть заметен пользователю — за него должен зацепиться глаз пользователя. Бледный и не выделяющийся call-to-action, даже если он отлично сформулирован, просто не будет работать. Не так уж хороша и противоположная ситуация, когда СТА буквально кричит: «НАЖМИ МЕНЯ». Призыв к действию должен быть гармоничным и выделяться за счет выбора контрастных цветов и дизайна.

3. Избыточная цветовая палитра сайта

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

Советуем использовать при подборе цветовой палитры как минимум цветовой круг. Лучше сочетаются друг с другом соседние цвета и те, что расположены напротив.

Советуем также использовать специализированные сайты. Здесь можно сформировать свою гамму или использовать одну из уже готовых.

На первом примере для оформления текста используется 3 цвета, на втором всего два. Именно второй вариант смотрится лучше и текст на нем проще читается.

4. Разный цвет у однотипных элементов

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

На примере две кнопки с одним и тем же назначением на одном сайте. Неудачное решение.

5. Одинаковые цвета у разнотипных элементов

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

6. Недостаток контраста

В погоне за необычной и яркой цветовой гаммой дизайнеры зачастую упускают важный момент: цвет текста и цвет фона должны быть достаточно контрастны, чтобы текст было легко читать. Этот принцип наглядно демонстрируется на примерах ниже.

7. Нестандартный цвет ссылок

Пользователь должен иметь возможность отличить ссылку среди текста, не трогая мышку. Конечно, цвет здесь — не единственный инструмент дизайнера, но, пожалуй, самый действенный. Три правила:

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

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

8. Блеклый минимализм не для импульсивных продаж

Сегодня очень модно создавать лендинги, нацеленные, как правило, на импульсивные продажи. Такие страницы воздействуют на эмоции человека, на пробуждение в нем сиюминутного желания купить товар. Другое модное направление в создании сайтов — минимализм. Он как правило, характеризуется одним или двумя цветами, часто строгими.

Два этих модных веяния чаще всего несовместимы. Нельзя продавать в расчете на эмоции, если ваш ресурс не создает этих самых эмоций при просмотре.

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

Но это не означает, что продающий эмоциональный лендинг должен сиять всеми цветами радуги.

9. Неуместный черный

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

Наши привычки, как и методы маркетологов, перекочевывают из супермаркетов на просторы интернета — к примеру, сайт ювелирной компании, выполненный в черном цвете, выглядит элегантно и дорого:

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

10. Цветовые ограничения дизайнеру

Это правило не относится напрямую к дизайну сайта и подбору цветовой палитры. Речь о постановке задач перед дизайнером при разработке сайта. Если у вас нет уже внедренного фирменного стиля или узнаваемого логотипа (хотя и в этом случае правило частично применимо), не стоит задавать дизайнеру строгие рамки и ограничения по используемым цветам.

Ваше видение может быть сколько угодно прекрасным, но позвольте дизайнеру предложить свое. Если после нескольких попыток он так и не сможет показать нечто, что вам понравится, только тогда стоит задавать ему жесткие рамки в подборе цветовой гаммы.

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

Выводы

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

Для примера мы размыли первый экран Aviasales.ru — внимание привлекают блоки элементов 1, 2 и 3. После прочтения заголовка, т.е. формирования у пользователя правильных ожиданий, он (вспоминаем про правила контраста) будет смотреть на нужные элементы выбора параметров и call-to-action.

А посмотрите, как четко выделяется на размытом фоне основное действие на сайте ostrovok.ru.

Если ваши интерфейсы проходят подобные тесты на ура, то дальнейшие улучшения сайта необходимо проводить, основываясь на понимании пользовательской психологии, т.е. анализируя фидбек от реальных пользователей. С помощью вопросов вроде: «Куда вы посмотрели в первую очередь: на какие 3 элемента сайта, и в каком порядке? Куда вам хочется нажать в первую очередь и почему?» заказав юзабилити-аудит в AskUsers вы сможете понять не только как распределяется внимание пользователей, но и почему они смотрят на те или иные элементы. Данная информация поможет выявить целый ряд проблем в текущем интерфейсе и найти оптимальные варианты их решения.

Помните, что форма подчиняется содержанию. Цветовое оформление служит инструментом, позволяющим сконцентрировать внимание на важной для пользователя и владельца сайта информации.