Nancy Pong
Jul 19, 2017 · 6 min read

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

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

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

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Новое. Журнал для digital-дизайнеров. Посмотреть, что за зверь.


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

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

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

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

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

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

Некоторые приложения и программы отлично помогают пользователям с цветовой слепотой. 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.


Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.


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

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

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

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

Цвет

Советы дизайнеров

Translated from original by Nancy Pong.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade