Проектирование для людей с цветовой слепотой

172

Вы читаете перевод статьи “Designing For (and With) Color Blindness”. Над переводом работали Ольга Скулкинаи Ринат Шайхутдинов. При поддержке iSpring.

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

Каждый раз, когда знакомые узнают, что я дальтоник, мне задают вопросы типа: “Вот это что за цвет?” В 95% случаев я отвечаю правильно, на что обязательно слышу: “Погоди, ты ведь правильно назвал {тот или иной} цвет, с чего же ты дальтоник? Что ты видишь?” И тут я с радостью рассказываю, как работает цветовая слепота и как это влияет на меня.

Мы дизайнеры всегда переживаем: разборчив ли контент? Насколько он увлекателен? Достаточно ли крупные кнопки? Пойдет ли пользователь по намеченному пути? Но мы часто забываем, что каждый десятый человек — дальтоник. Сколько раз я скачивал игру и понимал, что ею невозможно пользоваться! Я часто не могу отличить один объект от другого или рассмотреть названия некоторых элементов.

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

В чем мы “видим” проблему

То, что я дальтоник, не означает, что я вообще не вижу цветов. В моей жизни нет недостатка оттенков; жизнь моими глазами не выглядит как фильм Хичкока.

Я вижу все цвета. Мне просто трудно называть и различать некоторые из них. Когда листья осенью меняют цвет, я не всегда вижу красные, оранжевые и желтые оттенки. Иногда я просто вижу оранжевые. Или не замечаю плавного изменения цвета: для меня листья из зеленых превращаются сразу в коричневые. Тем не менее, при проектировании приложений не нужно смотреть на отдельные цвета и оценивать их “видимость”, вместо этого нужно анализировать группы цветов: достаточно ли различимы одни цвета на фоне других. И даже если цвета признаны различимыми, не помешает добавить какое-то дополнительное визуальное отличие.

Успешные приложения

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

Как Trello помогает пользователям с цветовой слепотой различать ярлыки задач

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

Режим для дальтоников в игре Two Dots

Предотвращение ошибок

Итак, вы сделали дизайн, подобрали лейауты, иконки, шрифты и все остальное. Теперь нужно только удостовериться, что выбранные цвета подходят людям с цветовой слепотой. Но как это сделать? Ладно, можно спросить друга/коллегу/родственника-дальтоника, ну а еще варианты? Есть пара способов. Например, приложение Sim Daltonism, которое позволяет увидеть ваш дизайн глазами дальтоника. И если вам будет хоть чуть-чуть сложно различить некоторые элементы, то и мне, скорее всего, тоже. Существует множество разных приложений-симуляторов цветовой слепоты, но этот лучше всего воспроизводит картинку, которую вижу я.

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

Очень просто протестировать дизайн в черно-белом режиме на iPhone: зайдите в настройки и в параметрах универсального доступа включите светофильтр “оттенки серого”.

Вот так на Google-картах отображается интенсивность пробок

“Но как ты работаешь дизайнером, если не можешь различать цвета?”

Хороший вопрос. Я не знаю. Просто делаю вид, что знаю, и надеюсь, что начальник не заметит.

А серьезно, мне так даже проще (но именно в вопросах дизайна, с подбором одежды, например, все не так весело). Я меньше времени трачу на размышления типа “какой оттенок синего выбрать?” или “оранжевый нормально сочетается с этим цветом?”. Вместо этого я думаю, эффективен ли этот лейаут и как дизайн выглядит в черно-белом режиме. Мне не нужно искать друга-дальтоника, чтобы определиться с цветом. Когда я объясняю клиенту, почему выбрал такие цвета, я меньше говорю о названиях, и больше — о температуре и характеристиках: мне важно, вызывают ли они те чувства, которые мне нужно заложить в дизайн. Красный не обязательно означает “нет” или “ошибка” — только при определенной температуре и насыщенности. Если цвет прохладный и расслабленный, в нем нет ни намека на ошибку.

Мне даже легче подбирать цвета. Я не смешиваю краски, пока не добьюсь идеального оттенка. Я не прошу коллег-недальтоников подобрать цвета за меня. Я просто ворую/заимствую готовые палитры. Конечно, я не копирую цвета какого-нибудь приложения целиком. Я просто нахожу композиции с приятной, как мне кажется, цветовой палитрой и отталкиваюсь от них. К примеру, мне показалось, что в клипе Майли Сайрус “We Can’t Stop” очень крутая картинка и цвета. Я украл эти цвета. И еще украл цвета из клипа Gorillaz “Stylo”.

Кадры из клипа Майли Сайрус “We Can’t Stop”
Подборка цветов
Кадры из клипа Gorillaz “Stylo”
Подборка цветов

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

Зачем вы прочитали статью?

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

У вас есть вопросы? Хотите пообщаться? Пишите мне в твиттере или зацените, что мы с коллегами делаем в Intrepid Pursuits.



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

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

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

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

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

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

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

9 мая 2019

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

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

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

31 мая 2018

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

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

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

28 апреля 2018