Статьи

02.05.2017

Дизайн для людей с цветовой слепотой

Перевод статьи Aaron Tenbuuren — Designing For (and With) Color Blindness

Каждый раз, когда кто-то узнает, что я дальтоник, меня начинают мучить вопросом: «Скажи, какой это цвет?!». И в 95% случаев я даю верный ответ. Тогда мне говорят: «Погоди, но если ты можешь правильно определить, что это за цвет, почему ты говоришь, что ты — дальтоник? Что же ты видишь?». Давайте я расскажу вам, что такое дальтонизм и как он влияет на меня.

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

Если одному из 10 пользователей будет сложно или даже невозможно использовать ваше приложение, ваши рейтинги и отзывы будут стремительно ухудшаться. Итак, как нам это проверить? И как мы можем предотвратить такие проблемы?

Где мы «видим» проблемы?

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

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

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

Некоторые разработчики проделали большую работу, чтобы сделать приложения с учетом особенностей людей, страдающих дальтонизмом. Так, приложение Trello, позволяющее работать с задачами, дает возможность пользователю активировать специальный режим — «color blind mode». Это опция дает возможность таким людям как я, легко различать метки.

Решение Trello, позволяющее пользователям с дальтонизмом различать ярлыки

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

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

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

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

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

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

Самый простой способ посмотреть на ваш дизайн в монохромном режиме (если вы работаете на iPhone) — это зайти в настройки и переключиться в режим Grayscale.

Загруженность трафика на Google Maps

Как может дизайнер не различать цвета?

Отличный вопрос! Я не знаю. Я просто делаю вид, что знаю, что делаю и надеюсь, что мой босс этого не заметит.

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

Даже выбирать цвета, которые я буду использовать, стало легче. Трачу ли я время на подбор нужного оттенка синего? Нет. Ожидаю ли я, чтобы это будут делать те, у кого нет проблем с различением цветов? Нет. На самом деле, я обычно использую уже готовые цветовые палитры. Не думайте, что я нахожу приложения и полностью копирую использованные в них цвета. Я выбираю композиции, которые, на мой взгляд, имеют удачную палитру, и беру их за образец. Например, мне очень понравились цвета, использованные в клипе Майли Сайрус на песню «Can’t stop». Я взял их для своего дизайна. То же самое было с клипом Gorillaz на песню «Stylo».

Кадры из клипа «We Can’t stop» в исполнении Miley Cyrus

Цветовая палитра

Кадры из клипа «Stylo» в исполнении The Gorillaz

Цветовая палитра

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

Итак, зачем вам все это нужно?

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

Автор — Aaron Tenbuuren, см. оригинал статьи

Другие статьи

+7 495 724-60-03

info@userhouse.ru

119435, Москва, Большой Саввинский переулок, 12с5

Мы в соц. сетях:

© 2010–2017 User House