Роль цвета в UX

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

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

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

Психология цвета

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

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

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

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

Культурные различия в цвете

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

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

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

Соответствие цветов UX бренду

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

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

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

• Красный — Красный — это цвет опасности и страсти, а также азарта. Это очень сильный цвет, который может вызвать сильную реакцию у людей. Осветление до розового делает его более женственным и романтичным, а затемнение до темно-бордового делает его более приглушенным и традиционным.
• Оранжевый . Оранжевый — очень творческий цвет, который также ассоциируется с приключениями и молодостью. Это тоже очень энергично. Из-за сильной связи оранжевого цвета со стилем 70-х годов он также может вызывать чувство ретро.
• Желтый — желтый цвет счастлив, оптимистичен и жизнерадостен. Он популярен в дизайнах как для детей, так и для взрослых. Более пастельные оттенки часто используются в качестве гендерно-нейтрального детского цвета, в то время как более яркие желтые оттенки популярны в креативном дизайне. Более темные оттенки желтого становятся золотыми, что ассоциируется с богатством и успехом.
• Зеленый . Зеленый вызывает разные ассоциации. С одной стороны, он вызывает ощущение богатства и традиций (особенно темные оттенки), а с другой — тесно связан с защитой окружающей среды и природой. Зелень лайма часто ассоциируется с обновлением и ростом.
• Синий . Синий чаще всего ассоциируется с лояльностью и доверием. Более яркий синий может быть связан с общением, а более тусклый и темный синий может быть связан с грустью и депрессией. Синий — самый популярный цвет в мире, что может объяснить, почему так много компаний выбирают синие оттенки для своего бренда.
• Фиолетовый . Фиолетовый — еще один оттенок с разнообразными значениями. Издавна он ассоциировался с королевской властью и богатством (поскольку пурпурный краситель был редкостью во многих древних цивилизациях, он был зарезервирован для королевских особ). Но это также связано с тайной и духовностью. Фиолетовый также может пробуждать творческий потенциал.
• Черный — черный подразумевает изысканность и роскошь. Однако это также может быть связано с печалью и негативом. В зависимости от других цветов UX, используемых вместе с черным, он может выглядеть современным или традиционным, формальным или повседневным.
• Белый — белый связан с чистотой, невинностью и позитивом. Белый также очень популярен в минималистском дизайне благодаря своей нейтральности и простоте. Как и черный, белый легко приобретает характеристики других цветов, с которыми он используется.
• Серый — Серый имеет разные значения в зависимости от контекста. Он может быть консервативным и утонченным или тусклым и скучным. Он может быть безэмоциональным или капризным. Это также может быть связано с печалью и печалью.
• Коричневый . Коричневый (на самом деле это темный оттенок оранжевого) ассоциируется с приземленностью и приземленностью. Он также ассоциируется с природой и даже с уютом. И, конечно же, это может быть связано с тем, чтобы быть грязным или неряшливым.

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

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

Использование нетрадиционных цветов UX

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

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

Berdan Real Estate — еще один сайт, использующий неожиданную цветовую палитру. Сайт недвижимости использует оттенки желтого и персикового, оба из которых гораздо более энергичны, чем ваш обычный сайт недвижимости (где преобладают большие полосы синего, красного и зеленого).

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

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

Правило 60-30-10

Правило 60-30-10 — это простая теория для создания хорошо сбалансированных и визуально интересных цветовых палитр. Идея состоит в том, что один цвет — как правило, довольно нейтральный (буквально или психологически) — составляет 60% палитры. Другой дополнительный цвет составляет 30% палитры. А затем третий цвет используется как акцент для оставшихся 10% дизайна.

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

Заключение

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

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• Психология дизайна и нейробиология потрясающего UX
• Темные интерфейсы. Хорошее и плохое. Что можно и чего нельзя делать.
• Эмоциональный брендинг для устойчивого дизайна продукта
• Используйте свое вдохновение — руководство по мудбордам
• Убедительный дизайн: эффективное использование продвинутой психологии