November 17, 2020

Как правильный выбор цвета может повлиять на ваш UX

Ожидания и предпочтения пользователя

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

Одно из самых интересных воздействий цвета на UX связано с полом. Исследования показали, что мужчинам и женщинам нравятся и не нравятся определенные типы цветов.

Мужчины склонны больше взаимодействовать с веб-сайтами, выполненные в темных схемах и использующие насыщенные цвета. Например, сайт VLNC Studio (выше). Женщины, как правило, предпочитают взаимодействовать с веб-сайтами со светлыми схемами и приглушенными цветовыми палитрами. Такие как Tally (ниже).

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

Промежуточные палитры подойдут для обоих полов.

Цветовые ассоциации и значения

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

  • Красный: сила, опасность, любовь / страсть, голод
  • Желтый: энергия, счастье, свет, тепло
  • Оранжевый: творчество, решительность, стимулирование, поощрение
  • Зеленый: природа, рост, гармония, свежесть
  • Синий: уверенность, доверие, спокойствие, спокойствие
  • Фиолетовый: магия, королевская власть, амбиции, независимость.

Создание узнаваемости бренда

Вы ожидаете, что элементы дизайна для Coca-Cola будут красного цвета. Цвет настолько синонимичен бренду, что его называют «кока-колой». Измените цвет – и все будет «неправильно».

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

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

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

Пользовательские шаблоны

Вы заметили, сколько сайтов используют красные или оранжевые кнопки? Для этого есть причина.

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

Ведь ключевая часть UX – предоставить пользователю возможности, которые им нравятся и понятны.

Cruise использует прозрачную кнопку с красной рамкой. Это не типичная полностью красная кнопка, но у юзера не возникает сомнений, что это именно то, что нужно.

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

Увеличение конверсии

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

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

Обеспечение доступности для всех пользователей

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

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

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

Заключение

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