Pull to refresh

Создание дизайна для дальтоников (и вместе с ними)

Reading time 3 min
Views 60K
Original author: Aaron Tenbuuren


Каждый раз, как кто-то узнает, что я дальтоник, я отвечаю на один и тот же вопрос: «Какой это цвет?». В 95% случаев я отвечу правильно, и поэтому мне задают еще один вопрос: «Подожди, значит, ты понимаешь, что это [вставить название цвета]? Так что ты видишь?». И тут начинается процесс объяснения того, как работает дальтонизм, и как он на меня влияет.

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

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

Где мы находим проблемы


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

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

Удачные приложения


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



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



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


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

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

Самый простой способ протестировать приложение в черно-белом цвете — на iPhone зайти в Настройки → Универсальный доступ → включить Оттенки серого.

1*VlkN51RfZELH0vTL84iMew

«Но как ты стал дизайнером, если даже не можешь видеть цвета?»


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

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

Даже выбор цветов стал проще. Трачу ли я время на смешивание цветов в поиске идеального голубого? Нет. Жду ли я, пока за меня это сделают другие? Нет. На самом деле я беру уже готовые цветовые схемы. Это не значит, что я точь-в-точь копирую коды hex. Я нахожу композиции с приятным сочетанием цветов. Например, клип ‘We Can’t Stop’ от Miley Cyrus, на мой взгляд, обладает отличными цветами. Я беру их оттуда. То же самое с клипом ‘Stylo’ от Gorillaz.

1*YRIQoICfeYpLm5CbnUgrQQ
Кадры из клипа ‘We Can’t Stop’ от Miley Cyrus

1*Z1I-pA5pj0Ogp0kQ2VgWYA
Выбор цветов


Кадры из клипа ‘Stylo’ от Gorillaz
Выбор цветов

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

Итак, зачем я всё это прочитал?


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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

PS
Для сравнения с Google Картами приведу пример Яндекс.Навигатора

Tags:
Hubs:
+46
Comments 78
Comments Comments 78

Articles