Как правильный выбор цвета может повлиять на ваш UX
Ожидания и предпочтения пользователя
UX начинается с типа пользователя, для которого предназначен ваш веб-сайт или приложение. Основные демографические данные, такие как пол или регион, в котором живет пользователь, могут влиять на их восприятие вашего дизайна в зависимости от цвета.
Одно из самых интересных воздействий цвета на UX связано с полом. Исследования показали, что мужчинам и женщинам нравятся и не нравятся определенные типы цветов.
Мужчины склонны больше взаимодействовать с веб-сайтами, выполненные в темных схемах и использующие насыщенные цвета. Например, сайт VLNC Studio (выше). Женщины, как правило, предпочитают взаимодействовать с веб-сайтами со светлыми схемами и приглушенными цветовыми палитрами. Такие как Tally (ниже).
Некоторые мужчины могут резко реагировать на сайты, использующие отчетливо женские цвета, такие как пастельный розовый, пурпурный и желтый. Так же реагируют женщины на страницы с резкими цветовыми схемами.
Промежуточные палитры подойдут для обоих полов.
Цветовые ассоциации и значения
Хотя это не точная наука, но теория цвета выделяет довольно четкие эмоциональные ассоциации для каждого цвета. Обратите внимание, что некоторые цвета могут попасть в противоположные категории. Нужные ассоциации, как правило, срабатывают за счет других элементов дизайна.
- Красный: сила, опасность, любовь / страсть, голод
- Желтый: энергия, счастье, свет, тепло
- Оранжевый: творчество, решительность, стимулирование, поощрение
- Зеленый: природа, рост, гармония, свежесть
- Синий: уверенность, доверие, спокойствие, спокойствие
- Фиолетовый: магия, королевская власть, амбиции, независимость.
Создание узнаваемости бренда
Пользователь потрясен и реагирует не так, как ожидается. Может показаться, что напиток на вкус другой. Все эти чувства происходят от изменения цвета. Возможно, вы тоже засомневались в реальности картинки, когда увидели изображение с зеленой кока-колой.
Цвет – важный элемент в брендинге, потому что создает особую связь между пользователем и дизайном. Цвет рассказывает пользователям о бренде. Он рассказывает о том, с чем они собираются взаимодействовать.
Измените цвет – и пользовательский опыт пострадает. Посетители сайта начинают с первой же секунды сомневаться в отношении бренда, который знают.
Пользовательские шаблоны
Вы заметили, сколько сайтов используют красные или оранжевые кнопки? Для этого есть причина.
Яркие цветные кнопки, которые контрастируют с фоном сайта – красный и оранжевый часто выделяются на светлом или темном фоне – могут помочь пользователям взаимодействовать с элементами, потому что они сразу знают, что ожидают от этой кнопки.
Ведь ключевая часть UX – предоставить пользователю возможности, которые им нравятся и понятны.
Cruise использует прозрачную кнопку с красной рамкой. Это не типичная полностью красная кнопка, но у юзера не возникает сомнений, что это именно то, что нужно.
Net Bluez Net Bluez использует ярко-оранжевую кнопку для самого важного элемента в меню навигации. Обратите внимание: этот элемент словно просится, чтобы его нажали.
Увеличение конверсии
Во время разработки проверяйте цвета в режиме A / B тестирования. Вы увидите, что на некоторые цвета публика реагирует лучше, чем на другие (и необязательно на те, которые вы считаете лучшими).
Коэффициент конверсии, как правило, увеличивается, когда цвет кнопок или ссылок резко контрастирует с остальным дизайном. Посмотрите на сайт ниже. Кнопка какого цвета с большей вероятность заставит вас кликнуть? (Оригинальный цвет синий.)
Обеспечение доступности для всех пользователей
Наконец, цвет влияет на UX таким образом, который не относится к эмоциям или коренится в психологии. Цвет влияет на пользовательский опыт, потому что он может сделать дизайн доступным.
Чтобы понять дизайн, человек должен легко видеть и читать его. Использование цветовых палитр и коэффициентов контрастности, которые соответствуют Рекомендациям по доступности веб-контента (WCAG 2.1), гарантирует, что каждый пользователь сможет понять ваш выбор цвета.
Используйте фильтр для дальтоников, например (как в приведенных ниже примерах), чтобы понять, как другие пользователи видят ваш сайт.
Заключение
Думайте о цвете как об инструменте, который поможет пользователям лучше взаимодействовать с контентом на вашем веб-сайте. Он влияет на пользовательский опыт на эмоциональном уровне и уровне юзабилити.