Десять ошибок при работе с цветом в UI

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

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

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

Итак, поехали

Часто дизайнеры получают клиентский брендбук, в котором уже содержатся цвета бренда. Они разрабатываются графическими дизайнерами, которые уделяют внимание печатной продукции и тщательно прорабатывают основные оттенки в CMYK и Pantone, но при этом не уделяют достаточного внимания отображению бренд-цветов в интерфейсе.

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

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

• Всегда держите в голове правило 60-30-10, которое используют дизайнеры интерьеров. Применяйте его в работе с интерфейсом.

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

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

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

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

• Используйте менее насыщенные цвета для второстепенных элементов.
• Откажитесь от сплошных заливок там, где это можно сделать.
• Если во время работы все же нужен новый цвет или оттенок, поместите его, например, в группу Experimental. Дайте ему шанс показать себя на других макетах. Регулярно проводите ревизию цветов из этой группы и избавляйтесь от ненужных или, наоборот, переносите в дизайн-систему те цвета, которые хорошо себя показали.

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

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

• Прорабатывайте цвета для всех состояний и следите за тем, чтобы они отличались от акцентного.
• Используйте другой оттенок или цвет для ошибок, информационных сообщений и успешных (success) состояний. Так вы дифференцируете элементы интерфейса друг от друга. Например, Netflix на момент написания этой статьи использует оранжевый цвет для отображения ошибок.

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

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

Happy Hues

Color Hunt

Colors and Fonts

Coolors

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

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

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

• Следуйте стандартам WCAG 2.0.
• Проверяйте цвета на юзабилити-тестировании.
• Проверяйте контраст и симулируйте различные нарушения зрения при помощи плагинов и специальных инструментов:

Stark

Who Can Use

Color.review

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

Будьте внимательными при построении цветовой системы, которая содержит градиенты.

Проверяйте контраст каждой области градиента, где расположен текст по стандартам WCAG 2.0.

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

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

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

ColorBox

Lch and Lab colour and gradient picker

Leonardo

HCL Easy

Эта ошибка встречается у начинающих дизайнеров, которые вводят новые цвета и не описывают (или не добавляют их) в основной ui-kit или дизайн-систему. Затем по какой-либо причине они решают изменить цвет. Но при этом в дизайне остаются элементы с предыдущим оттенком. Так появляется очередной дубль цвета и 23-й оттенок черного в тексте.

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

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

Проработка цветов для темной темы — объемный вопрос и заслуживает отдельной статьи. Я затрону только один момент — перенос цветов из светлой темы в темную.

Цветные элементы после переноса со светлого фона на темный с большой вероятностью будут образовывать «плохой» контраст с фоном. Так что просто перекрасить фон в интерфейсе в черный и не модифицировать цвета не получится.

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

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

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