Становимся дальтониками: эксперимент в сопереживании

https://blog.prototypr.io/going-colorblind-an-experiment-in-empathy-and-accessibility-98b7003737ca
  • Перевод


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

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

В свете этого я решила провести эксперимент по эмпатии и понять, каково это — быть на чужом месте. В частности, на месте моего коллеги Питера.

Эмпатия требует понимания


Наш директор Питер Бендер — дальтоник. Точнее, он дейтераномальный. Это самый распространённый тип дальтонизма, поражающий 5% мужчин. В принципе, это означает трудность с восприятием зелёного цвета: его трудно отличить от остальных. Золотое правило в офисе — никогда не размечать электронные письма или электронные таблицы красным и зелёным, потому что Питер не видит разницы.

Признаюсь, коллегам пришлось несколько раз напомнить мне это правило, прежде чем оно закрепилось в памяти. Хотя я сочувствую Питеру, но недостаточно понимала ситуацию, чтобы проявить эмпатию. В чём разница между сочувствием (sympathy) и эмпатией? Этот маленький мультик от доктора Брене Браун очень хорошо объясняет разницу.


Чтобы лучше понять ситуацию Питера, я согласилась стать «дальтоником» на три дня с помощью расширения See для Chrome. Оно искажает веб-страницы в соответствии с тем, как их видят пользователи с различными нарушениями зрения. Я активировала настройку дейтераномалии на десктопе, ноутбуке и телефоне — и начала смотреть на мир глазами Питера.

Увидеть — значит поверить


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

Зелёный выглядит красным?
Для него все деревья красные?
Если так, то как он может сказать, когда деревья меняют цвет осенью?
Или красный цвет выглядит зелёным?
Предупреждающие знаки выглядят как стикеры на экологически чистых товарах?


Как только я щёлкнула выключателем — и увидела интернет глазами Питера, то сразу всё поняла. В реальности он не видит ни зелёного, ни красного. Они оба коричневые. Фиолетовый становится синим с коричневатым оттенком, а оранжевый — жёлтым с коричневатым оттенком. Визуальная палитра состоит лишь из различных оттенков синего, жёлтого и коричневого.


Слева: как человек с нормальным зрением видит стандартную палитру цветов. Справа: как её видит дейтераномал

Меня невероятно удивило, насколько другим всё выглядит для Питера. Спустя пару часов я подошла к нему и воскликнула:

«Твой мир такой скучный! Палитра реально ограничена».

На что он ответил:

«Я не знаю разницы. Не вижу, чего не хватает».

Хотя я смотрела на сайты как Питер, но поняла, что никогда не смогу воспринимать их как он. У меня более чем 30-летний опыт просмотра полного спектра цветов: я не могу стереть эти воспоминания, чтобы ментальное восприятие полностью совпадало с его восприятием. Но интересно, что он по-прежнему ассоциирует красный с опасностью и беспокойством, а зелёный — со спокойствием и природой, хотя для него они кажутся похожими. Он выучил те же цветовые ассоциации и может говорить на том же языке цветов, что и большинство людей, хотя воспринимает цвета совсем иначе.

Борьба


Преодолев первоначальное недоумение и начав заниматься повседневными делами, я быстро поняла: придётся изменить многие из повседневных привычек, шаблонов и настроек, чтобы приспособиться к новым ограничениям зрения.

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

Другой ключевой системой, которую пришлось изменить, стала система цветных звёзд в Gmail, которыми я размечаю письма на основе важности или необходимых действий. Система быстро дала сбой: шесть установленных цветов недостаточно отличаются. Они выглядят как три очень похожих жёлтых, два неразборчивых синих и один тёмно-коричневый. К счастью, есть вариант с цветами И символами. Теперь понятно почему.


Варианты «звёздочек» в Gmail для человека с нормальным зрением


Варианты «звёздочек» в Gmail для дейтераномала

Наконец, самая неисправимая проблема связана с тем, что я ужасно набираю текст. Я полагаюсь на встроенную проверку орфографии в Chrome, Gmail, Word и др. для подчёркивания опечаток. К сожалению, красное подчёркивание стало коричневым, которое не так заметно, как обычный красный, и мне пришлось значительно повысить бдительность по время набора.

Правила дизайна для визуальной безбарьерности


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

Правило 1: главное — цветовой контраст


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

Руководство W3C по доступности содержимого веб-сайтов (Website Content Accessibility Guidelines) установило конкретные коэффициенты цветового контраста, которые следует соблюдать для крупных и мелких шрифтов, чтобы соответствовать стандарту AA или AAA. К счастью, есть отличные инструменты для проверки.

Этот сайт проверяет цветовой контраст текста и фона в соответствии со стандартами AA и AAA для крупных и мелких шрифтов.

Если ваша цветовая комбинация не соответствует выбранному стандарту контрастности WCAG, этот сайт найдёт аналогичные цветовые комбинации, соответствующие стандартам.

Правило 2: не полагайтесь только на цвет


На банковском сайте нужно было заполнить форму. Я нажала Submit — и ничего не произошло. Попробовала снова. Выглядело так, словно идёт обработка, но затем опять ничего. Оказывается, на сайте использовался красный и зелёный контуры для указания, соответственно, проверенных полей формы и полей с ошибками. Но для меня все они выглядели одинаково. Невозможно было определить, какие поля правильные, а какие нет. Как дизайнер, не полагайтесь только на цвет в качестве индикатора. Нужно также использовать символы. А ещё лучше — выводить сообщение об ошибке с объяснением, что не так. Потому что не только дальтоники, но и люди с нормальным зрением могут не догадаться, что они сделали неправильно.


Слева: как человек с нормальным зрением видит форму с цветными индикаторами. Справа: как дейтераномальный человек видит ту же форму с индикаторами на основе цвета

Эмпатия — мощный инструмент. Она важна для понимания потребностей, желаний и проблем наших пользователей, поэтому позволяет создавать эффективные интерфейсы. Без неё WCAG — просто список утомительных требований, а не полезное руководство, помогающее создать интерфейсы, приятные для всех. Если мы создаём дизайн исключительно на основе собственных привычек и предпочтений, то неизбежно дадим промашку и породим бесполезный продукт. А с помощью эмпатии мы не только создаём лучший дизайн, но и развиваем свои профессиональные качества.
Поделиться публикацией
Комментарии 26
    0
    Хотя я симпатизирую Питеру, но недостаточно понимала ситуацию, чтобы проявить эмпатию. В чём разница между симпатией и эмпатией?

    Sympathy в этом контексте (и, вообще говоря, в большинстве случаев) — не «симпатия», а скорее «сопереживание».
      0

      Сопереживание все же ближе к эмпатии.


      У меня такое ощущение, что психолог попутала симпатию с психопатией

        0
        Sympathy в английском языке это скорее сочуствие, типичный ложный друг переводчика.
        В магазинах открытки «соболезнования о смерти» находятся в разделе «Sympathy» — многие свежие иммигранты на этом прокалываются.
          0
          Да, сочувствие лучше подходит, спасибо.
        0
        Вот отличный рассказ Людвига про то, как правили цвета схемы линий московского метро.
        Там по тегу про эту схему вообще интересно почитать.
          0
          1. А повторение скриншота с цветными обводками полей задумано?
          2.
          Наш директор Питер Бендер — дальтоник. Точнее, он дейтераномальный. Это самый распространённый тип дальтонизма, поражающий 5% мужчин.

          Как-то странно звучит. Если каждый 20 мужчина имеет такое поражение, как описано в статье, то моя выборка (насчитывающая существенно больше 20 мужчин) как-то удивительно не коррелирует с этим фактом. Или же кто-то очень умело скрывает свой дальтонизм.
          PS. если верить википедии, перепутаны дейтераномалия(от которой цифры) и дейтеронапия(от которой картинка).
          3. Интересно пересекается с свежим выпуском Вилсы, где он общался со незрячим.
            +1
            Таблицы Рабкина им всем покажите, они скорее всего сами не подозревают.
              0
              Их действительно столько. Просто они свои проблемные цвета не вообще не видят, а хуже различают близкие оттенки. Полная цветовая слепота редкость.
                0
                Просто я особо зацепился за статью из-за сильного смешения красного и зеленого, которые действительно де-факто стали стандартом в it для error-success уведомлений. И некоторые из спорных интерфейсных решений у нас применялись. И как разработчику, мне ни разу никто не говорил, дескать «чувак, это все круто, но для меня вот эти два варианта идентичны, раздели их как-нибудь чуть иначе». Поэтому я и удивился.
                  0
                  Чистые (или близкие к чистым) красные и зеленые цвета они видят нормально. Проблемы с переходными оттенками от буро-оранжево-коричневых до болотно-зеленых.
                    0
                    О, это тоже хорошая шутка.
                    Чисто зелёный от чисто красного ОЧЕНЬ сильно отличаются и спутать их нереально (во всяком случае тем, у кого дейтеранопия).

                    А вот на яндекс-картах полно переходных оттенков и там я часть путаю грязно-зелёный с грязно-красным (для меня это один цвет или едва различимые оттенки одного цвета, а вот жена часто возмущается, правда в шутку, т.к. она в курсе этой проблемы).
                  +1
                  Я о своём дальтонизме узнал при прохождении медкомиссии при сдаче прав на категорию С. Помню, весьма удивился.

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

                  Если эмуляция не идеальна, и мой пример показателен, то красный не выглядит коричневым, он просто гораздо менее яркий, и при беглом взгляде может показаться коричневым. Так же салатовый очень похож на жёлтый (будь прокляты Космические рейнджеры 2 и индикация улучшения детали), и их тоже можно перепутать. Если видишь два цвета одновременно, то проблем в идентификации обычно не происходит.

                  Посыл статьи правильный — добавляйте больше контраста и не ограничивайтесь цветовой индикацией. Побочным эффектом станет возможность использования продукта на e-ink экранах.

                    0
                    Я по таблицам Рабкина тоже плохо различаю красный и зеленый, но на иллюстрациях в статья я отлично вижу красный и зеленой в левой части
                    0
                    У меня дейтеранопия, долгое время единственной моей проблемой было то, что путал некоторые не особо нужные в жизни цвета (с цветами радуги всё в порядке), но меня это нисколько не беспокоило.

                    Где-то после 25 лет один из окулистов совершенно буднично выдал «ну ты ведь в курсе, что у тебя дальтонизм? нет? ну и не забивай тогда голову».
                    И только после этого я смог понять причины своей забывчивости.

                    p.s. Самая жесть — обжимать витую пару. Раскладку по цветам помню хорошо: БО-О-БЗ-С-БС-З-БК-К (Б — белый, О — оранжевый, З — зелёный, С — синий, К — коричневый), вот только на некоторых кабелях я чётко вижу зелёную и коричневую пару, а на некоторых — зелёный практически сливается с коричневым (коричневый чуть-чуть светлее зелёного).
                      0
                      Как то странно… как можно прожить 25 лет и не заподозрить, что возможно другие видят как то иначе те вещи, на которые смотришь ты и что у них нет вот таких проблем с неуверенным восприятием. Ну вот должно в голову закрасться мысль- ну с фига провода почти одинаковым оттенком делают и вещи подобные этому…
                        0
                        как можно прожить 25 лет и не заподозрить

                        А как заподозрить? :)
                        С самого детства у меня была проблема с запоминанием всяких экзотических цветов типа фиалковых, абрикосовых, слоновых костей, утренних бризов и всего того, чего нет в таблице цветов — но это женские заморочки и меня они как-то мало волновали.
                        При этом никогда не было проблем с распознаванием базовых цветов радуги (7 цветов), особенно когда эти цвета вот они, висят прямо перед глазами на небе :)

                        и что у них нет вот таких проблем с неуверенным восприятием

                        Уверен, что если копнуть, то у вас тоже обнаружится масса проблем с «неуверенным восприятием» чего-либо и вы это списываете просто на «а зачем мне это нужно?».
                        Возьмём два примера:
                        — я не музыкант, но могу довольно чётко держать ритм, простукивая его мысленно (и проверяя по секундомеру), а вот жена — не может, на предложение «а ты попробуй научиться» всегда отвечает «а зачем мне это надо?».
                        — в школе с приятелем развлекались тем, что на особо неинтересных уроках соревновались «кто дольше задержит дыхание» и через какое-то время я спокойно мог с умным видом смотреть на учителя не дыша при этом около полутора минут, остальные (кто играл в крестики-нолики или просто слушал учителя) так не могли.

                        Задумайтесь, вот лично вы можете держать ритм и что-то при этом делать? Если нет, то вопрос — это ваша паталогия или вам это просто не нужно?
                        А задерживать дыхание надолго можете? Если нет, то не заболевание ли это (я уже не могу, но оно мне и не надо)?
                        Думаю, аналогия ясна :)

                        В моём случае — я просто не видел смысла серьёзно заморачиваться с запоминанием оттенков, меня и так всё устраивало (и продолжает устраивать).

                        Ну вот должно в голову закрасться мысль- ну с фига провода почти одинаковым оттенком делают

                        Да тут даже не мысль закрадывалась, меня это просто возмущало и почти бесило!
                        Вот скажите мне, почему на дорогой и качественной витой паре (с эластичным неломким покрытием, которая будет жить даже если её связать узлом и подёргать) зелёный делают зелёным, а коричневый коричневым, а на дешевой — экономят на краске так, что коричневый от зелёного отличить можно только пристально всматриваясь и постоянно ошибаясь? Экономия на красителе вообще копеечная, а сколько она создаёт проблем!

                        Причина такого свинского поведения производителей витой пары стала ясна позднее :)
                        Подозреваю, что «более дорогие» производители делают цветовую схему витой пары с учётом возможного дальтонизма клиента, а «дешевые» просто не задумываются над этим.
                        0
                        Самая жесть — обжимать витую пару

                        Мне как обладателю аналогичной проблемы сложности, обжимать не так сложно, так как по сути главное понять принцип в каком порядке они лежат, и самое сложное это обжать другое конец таким же образом. А цвета уже не так важны в данном случае. Сложность возникает уже у того кто будет переобжимать один конец этого кабеля после после меня, так как может не понять, почему он обжал по стандарту, а в тестере показывает что-то несуразное :)
                        0
                        Если каждый 20 мужчина имеет такое поражение, как описано в статье, то моя выборка (насчитывающая существенно больше 20 мужчин) как-то удивительно не коррелирует с этим фактом. Или же кто-то очень умело скрывает свой дальтонизм.
                        Это ещё и от профессии зависит.

                        Повар, для которого сырое мясо выглядит аналогочно жареному, недалеко уйдёт. Как и врач, который не заметит, что у пациента покрасневшая кожа (ожог, воспаление). Как и дизайнер, который в заказе на семь красных линий нарисует две зелёным цветом. Про витую пару ниже уже упомянули. Есть и другие примеры (например здесь, на с. 172)

                        А если работа не особо получается — человек может и в другую область уйти. Согласно этой статье, особенности цветового восприятия повлияли на выбор профессии у 43% дихроматов и 29% аномальных трихроматов.
                        0
                        Легко почувствовать себя дальтоником с night light mode в Gnome, который роняет цветовую температуру с 6500 К до 4000 К. «А-а-а! Где цвееет????» :)
                        На самом деле фича удобная, но не с таким перепадом, мне 5700-5800 К комфортно.
                          0
                          Я дейтераномальный, но т.к. это мне никак не мешает жить, то я об этом всё время забываю и уж тем более никогда специально не ставлю в известность знакомых. Да что там знакомых, моя жена, как только что выяснилось, не понимала до данного момента, что это такое, пока я ей популярно по полочкам не рассказал и не нашёл статьи на эту тему. Так что среди вашей выборки мужчин очень даже может быть дейтераномальный, а может даже и не один. А может даже они и сами об этом не в курсе.
                            +1
                            Прикольно когда разбираете старые вещи на выброс, попросил жену не выкидывать коричневую рубашку, но жена выкинула зелёную, а коричневую не нашла.
                            0
                            То чувство, когда смотришь на таблицу с подписью «как человек с нормальным зрением видит стандартную палитру цветов. Справа: как её видит дейтераномал» и видишь ошибки в этой таблице, т.к. у меня у самого дейтеранопия :)
                            Вторая строчка, правый квадрат, в таблице «для нормалов» он голубой, в таблице «для дейтераномалов» он синий (скорее даже тёмно синий)… кстати, а какой он на самом деле? :)
                              0
                              Он розовый.
                              Там справа на лево: розовый, фиолетовый, синий…
                              0
                              Я тоже в «пятерке». Никогда особо не страдал от этого, но все же иногда становиться интересно чего такого я не вижу что вызывает обычно недоуменный смех у многих, кто только что узнал о твоей «проблеме»… но недавно узнал что в штатах делают корректирующие очки, и якобы можно увидеть этот мир как остальные 95%. А нужно оно нам или не стоит по пусту расстраиваться?
                                0

                                У меня тоже проблема с цветовосприятием. Как оно по-научному называется не знаю. Если по-простому, то у меня ослаблена чувствительность к красному цвету. Это даёт такой эффект, что чистый красный и чистый зелёный я различаю, но есть проблема с оттенками. Могу спутать коричневый с красным, зелёный с рыжим, жёлтый с салатовым. Фиолетового цвета для меня практически не существует, он, в зависимости от оттенка, будет для меня либо синим, либо розовым. Жена ещё смеётся иногда надо мной, когда я ей указываю на какой-нибудь предмет насыщенно-синего цвета, который мне нравится, а она говорит, что это не синий, а фиолетовый :)
                                Из особенностей в плане технического харрактера, для меня практически не существует зелёных светодиодов, они все жёлтые. Это, конечно, особенно бесит, учитывая тот факт, что моя Bluetooth гарнитура при зарядке сменяет цвет светодиода с красного к зелёному через жёлтый, и никогда непонятно, полностью ли она зарядилась, если я её недавно поставил на зарядку. Приходится супругу спрашивать. Бывают проблемы с обжимкой витой пары, особенно, если ещё и освещение низкой цветовой температурой. Хотя пару месяцев назад попалась бухта кабеля такая, что пришлось искать девушку, чтобы уточнить цвета. Так то я их различал между собой, но сказать точно, какая жилка коричневая, какая оранжевая, а какая зелёная я не мог.
                                Из забавных случаев. Было ещё в школбные времена, пошёл в магазин купить бананов себе. Смотрю, лежат бананы как с картинки, жёлтенькие, гладенькие, аккуратненькие. Блин, да восковые хуже выглядят. Взял, принёс домой, пытаюсь почистить, а они не чистятся, а когда пытаешься есть, то они на столько неспелые, что хрустят как сырая картошка. Отец, конечно, немного посмеялся надо мной, сказал, что бананы зелёные как трава :)
                                Через некоторое время я снова пошёл за бананами, на этот раз я решил убедиться, что беру спелые бананы. Взял понравившуюся связку и поймав мимо проходящую покупательницу, задал ей вопрос, желтые ли бананы в моей руке. Женщина перепугалась, подумала, наверное, что я какой-то ненормальный, испугано промолвила, что жёлтые и бочком, бочком от меня :)
                                С тех пор я стараюсь покупать бананы с чёрными пятнышками. На сколько я понял, если банан стал темнеть, значит он точно спелый.


                                Тут кто-то говорил, что у него много знакомых мужчин, и никого из них дальтоников. Ну вот я дальтоник, и если я не скажу вам, то вы никогда не догадаетесь о моей "особенности". Хотя, я не из тех людей, кто это скрывает, но в обыденной жизни редко попадаются обьекты, цвет которых я не могу идентифицировать. Мы же все прекрасно знаем, что трава зелёная, небо синее, а помидор красный.
                                Столько настрочил в комментарий, может мне статью написать про это?.. :)

                                  0
                                  У меня тоже аномалия. Добавляйте голосовалку, будем считаться.

                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                  Самое читаемое