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

Но, как и со многими вещами, чрезмерное использование одного цвета может привести к проблемам с контрастом. Google был известен тем, что до того, как сформировались принципы Material Design. Их «идеальный синий» можно было найти во всем: от кнопок, до ярлыков, ссылок, элементов украшения.

Некоторые из их интерфейсов стали настолько насыщенны синим и серым, что пользователи не могли отличить первичные действия от вторичных и начали испытывать проблемы взаимодействия с программным обеспечением Google. Примером этого был Gmail, и виной всему был:

Недостаток контраста.

Анатомия кнопки

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

Пример компонента карточки с двумя неконтрастными действиями
Пример компонента карточки с двумя неконтрастными действиями
Если бы все кнопки были синими, когда доступно более одного действия, это создавало бы путаницу, потому что все действия были бы визуально равны. Когда мы добавим другие элементы пользовательского интерфейса, которые также используют такой же цвет, то глаз привыкнет к этим элементам и перестанет уделять им необходимое внимание. Мне нравится называть этот эффект «слепота элемента», потому что это может случиться с любым элементом интерфейса, а не только с кнопкой.
Тот же компонент карточки, что и выше, но с улучшенным контрастом для первичного действия
Тот же компонент карточки, что и выше, но с улучшенным контрастом для первичного действия
Подобная история с любой группой элементов интерфейса. Информационная архитектура и приоритезация элементов, основанные на целях пользователей, являются ключом к разработке интерфейсов, которые не только пригодны для использования, но также обеспечивают отличное взаимодействие пользователей (людям не нужно активно искать сигналы, их глаза следуют за контрастными элементами). Это приводит к замечательным результатам в тестах Click-Through-Rate (CTR), что, в свою очередь, делает отделы маркетинга очень счастливыми.

Цвет? Какой цвет?

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

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

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

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

Как протестировать контраст в дизайне интерфейса?

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

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

Пример интерфейса в градациях серого, экспонирует элементы со слабым контрастом
Пример интерфейса в градациях серого, экспонирует элементы со слабым контрастом
Вы можете сделать предварительную оценку доступности с помощью рекомендаций WCAG2.0. Кроме того, к вашим услугам множество расширений и плагинов браузера для основных дизайн приложений, которые помогут вам добавить эти тесты в ваш рабочий процесс. Тестирование на доступность не следует рассматривать как нечто второстепенное. Сделайте его неотъемлемой частью ежедневного рабочего процесса, и вы сделаете свою аудиторию очень счастливой.

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

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

Почему мы это делаем?

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

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

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

Как вы проверяете свои проекты на достаточную контрастность? Какую методологию или инструментарий вы нашли для себя? Пишите в Twitter.