SEO SMM Разработка Контекст Аудит

Цвета для сайта: какие сочетания выбрать?

Опубликовано:

11.12.2018

Теги: ,

Цвет на сайте – это не только часть дизайна, это еще и маркетинговый инструмент, компонент юзабилити. Чем проще и удобнее пользоваться сайтом, чем очевиднее для посетителя действия и предложения, тем выше пользовательская активность, конверсия и позиции в поисковой выдаче. Как же цвет может помочь в улучшении юзабилити сайта?

Как повысить юзабилити сайта при помощи цвета?

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

Количество цветов. Используйте на сайте 2 основных цвета. Максимум 3. Большее количество цветов будет рассеивать внимание пользователя, и он не сможет найти нужную информацию сразу. А это повышает риск отказа и ухода со страницы.

Оптимальная резкость. Старайтесь не использовать чистые цвета. Стандарт для оформления текста – черное на белом. Но если вы примените яркий белый (#ffffff) для фона, то такая повышенная яркость экрана быстро утомит зрение пользователя и контент будет восприниматься хуже. Поэтому используйте для фона светло-серый цвет, который не вызывает такого напряжения глаз и повышает читабельность текста.

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

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

  • Серый цвет – цвет неопределенности, нейтральности. Им не нужно оформлять кнопки с призывом активного действия. Он подойдет для недоступной команды, отсутствующего товара и так далее.
  • Красным традиционно используется для отмены, выхода.
  • Зеленый цвет подходит для кнопок «Купить», «Заказать», «Готово».
  • Желтые и оранжевые кнопки привлекают внимание и подталкивают к действию («Подпишись», «Авторизация»).
  • Синий цвет – довольно универсальный, используется для обозначения согласия (авторизация, покупка, подписка).

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

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

Нажатая (активная) кнопка должна выглядеть так, чтобы пользователь быть на 100% уверен, что он нажал на нее. Обязательно проверяйте дизайн-макет на наличие нескольких вариантов состояния кнопок, если хотите улучшить юзабилити сайта.

Цвет ссылок. Для ссылок общепринятым является синий цвет. Конечно, это не всегда уместно с точки зрения дизайна. Но всегда можно подобрать какой-то подходящий оттенок синего или заменить другим цветом. Главное – все-таки выделять ссылки из общей массы текста (цвет, подчеркивание, жирность).

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

Лаконичность и минимализм. Сейчас все больше растет популярность минималистичных сайтов с 1-2 цветами на светлом фоне, с большим количеством «воздуха» между блоками контента. Пестрые, разноцветные сайты могут казаться пользователям старомодными, а значит и контент воспримется как неактуальный.
Воспользовавшись этими советами, вы сможете четче сформулировать пожелания к дизайну сайта при разработке. Грамотный дизайнер подберет цвета сайта, исходя из тематики сайта и предпочтений аудитории.

Оставьте ваш комментарий