Создаем эмоции в UX дизайне при помощи цвета

автор Ник Бабич
91

Над переводом работали: Nancy Pong и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.


В наше время цвет играет более важное значение, чем раньше. В современном мире нам нужно уметь общаться без слов, а цвет — это ключ к такому общению.

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

Красный

Опасность, важность, страсть

Красный — это один из самых сильных цветов, который ассоциируется одновременно и с любовью, и с войной. Цвет явно связан с чувством злости: в английском языке даже есть такая идиома “to see red” — злиться, рассвирепеть.

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

И Netflix, и YouTube используют красный как основной цвет.

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

Навигационная кнопка “Удалить” сделана контрастнее, чем нейтральная “Отмена”.

И, наконец, красный ассоциируется с высокой температурой.

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

Оранжевый

Уверенность, энергия, оптимизм

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

Рекламная кампания Orange Telecom. Источник: Адам Хейс

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

Оранжевая кнопка поиска служит призывом к действию на сайте Hipmunk.

Желтый

Внимание, счастье

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

Breitling используют желтый цвет, чтобы сфокусировать внимание посетителя на кнопке-действии “Узнать больше о модели”.

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

Источник: hlvticons

Если вы используете желтый, придерживайтесь простого правила — светло-желтый напоминает пользователям о солнышке и счастье, а темные тона (например, золотой) навевают серьезность и несут ощущение старины, даже древности.

Зеленый

Рост, природа, успех

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

Organic Food используют в дизайне сайта много зеленого.

Обратите внимание на насыщенность цвета

Насыщенность зеленого цвета.

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

В сочетании с голубым, зеленый усиливает ощущение чистоты и опрятости.

Синий

Доверие, комфорт, расслабление

Синий — это один из самых важных цветов в UI дизайне — и один из самых распространенных. В зависимости от тона и оттенка, синий цвет может представлять разные чувства, мысли и эмоции. Темные оттенки синего могут создавать ощущение грусти. Опять же, в английском языке есть выражение “to feel blue” — грустить.

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

Приложение Calm использует светло-голубой как основной цвет.

Вряд ли вы спишете на совпадение то, что две крупнейшие социальные сети Twitter и Facebook используют синий как основной цвет.

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

Фиолетовый

Роскошь, романтика, творчество

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

Люксовые бренды используют фиолетовый цвет в качестве корпоративного.

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

Google Forms с обновленной фиолетовой цветовой схемой.

Розовый

Женственность, невинность, молодость

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

Источник: Dribbble

Розовый не всегда означает женский. На самом деле, чрезмерное использование розового в роли “женского” цвета может раздражать пользователей, навязывая им определенные гендерные роли.

Коричневый

Консерватизм, земля, стабильность

Лондонские джентльмены не носят коричневого в городе (no brown in town). Точно так же, коричневый не подходит большинству сайтов — но уж там, где коричневый к месту, он работает идеально. Он создает некую старомодную, деревенскую атмосферу, которая прекрасно соответствует сайтам, связанным с активностью на природе, и даже магазинам органических продуктов. Ассоциация с деревом также предполагает стабильность и надежность.

Сайт шоколада Dove практически полностью выполнен в коричневом цвете: разные оттенки используются в разных частях сайта.

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

Черный

Формальность, Сила, Утонченность

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

В комбинации с серебряным и серым, он может привносить утонченность, как на примере ниже:

Портреты от SCOTCH & SODA

Белый

Свежесть, стерильность, здоровье

В противовес черному, белый акцентирует все цвета вокруг себя: в силу этого его обычно выбирают в качестве второго цвета.

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

Белый — основной цвет карточки.

Серый

Формальность, нейтральность, утонченность

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

В зависимости от оттенка, серый может обладать характеристиками и белого, и черного. Когда серый выступает в роли основного цвета, он создает ощущение формальности — но это не всегда плохо. Dropbox используют серый, чтобы подсветить кнопку-призыв к действию “Зарегистрироваться бесплатно” — это помогает пользователям быстрее найти нужную кнопку.

Dropbox — пример правильного использования серого.

Вы можете минимизировать “мрачное” ощущение от серого при помощи контента или дополнительных изображений. К тому же, это добавляет фокуса выделяющемуся элементу.

Светло-серый цвет лучше всего работает для кнопок в неактивном состоянии.

Серые цвета для кнопок.

Заключение

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

A/B тестирование конверсии.

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

Читайте UX Planet: Twitter | Facebook


Изначально опубликовано на babich.biz



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Цвет

Посты в категории Основы дизайна

TOP-10 навыков, чтобы начать работать дизайнером

Ринат Шайхутдинов

9 мая 2019

Посты в категории Основы дизайна

Видео-курс «Основы графического дизайна»

Ринат Шайхутдинов

31 мая 2018

Посты в категории Основы дизайна

Как использовать визуальную иерархию в веб-дизайне

Ольга Жолудова

28 апреля 2018