Как цвет влияет на пользовательский опыт?

Posted on by riasevastopol

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

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

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

  • Какие конкретно цвета оптимальнееподойдут вашей посадочной странице?

Определение целевой аудитории

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

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

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

Исходя из этого для начала выясните четыре главных момента:

1. отрасль и Продукт, для которых будет создаваться сайт
2. Состав целевой аудитории
3. Как целевая аудитория принимает определенные цвета
4. Как цвет возможно использован в UX-дизайне сайта

Примечательно, что кое-какие области стараются придерживаться конкретного цвета, к примеру, в веб-дизайне технологических гигантов Dell и HP преобладает светло синий цвет, в то время как продуктовые компании выбирают зеленый (Whole Foods, Tropicana).

Эта тенденция имеет в полной мере очевидные обстоятельства — верная гамма оказывает помощь вызвать у потенциальных клиентов необходимые компаниям чувства:

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

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

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

  • Теория цвета: 7 уроков на примере популярных брендов

Создание цветовой палитры

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

Красный, желтый и светло синий являются первичными (primary) цветами в круге. Комбинируя их, возможно создать вторичные (secondary) цвета: оранжевый, зеленый и фиолетовый. Белый возможно применять как фон, а тёмный — в качестве тени.

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

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

Цвета, располагающиеся рядом между собой в цветовом круге, именуются смежными. Сочетание смежных цветов менее контрастно и приводит к спокойным эмоциям у визитёров. Компания Lloyds Bank выбрала два таких цвета для собственного сайта:

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

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

  • Как применять психологию цвета для повышения конверсии?

Улучшение UX

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

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

1. Выделение страниц

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

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

2. Понятные визуальные элементы управления

Элементы управления должны иметь собственный особенный стиль, тогда пользователь не будет гадать, что же случится при нажатии на тот либо другой элемент. К примеру, CTA внизу страницы возможно выделить вторым цветом, дабы разрешить понять — эта кнопка предназначена для самого серьёзного действия на сайте.

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

К примеру, на сайте компании Republica кнопка при наведении меняет собственный фоновый цвет:

3. Выделение ответственной информации

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

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

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

  • Теория цвета — как руководить вниманием пользователя?

4. Указание последовательности действий

Цвет оказывает помощь выстроить контент на веб-странице по степени важности — это разрешает пользователю легко отыскать как раз то, что ему необходимо.

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

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

Высоких вам конверсий!

По данным: impactbnd.comimage source benedeki

Случайные статьи:

Влияние цветов на организм и самочувствие человека


Подборка похожих статей:

riasevastopol

More Posts