Красные ночные палитры интерфейсов

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

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

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

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

Кстати, в текущей итерации сайта Protraktor я даже добавил эту палитру как демонстратор — выберите её в правом верхнем углу и оцените, о чём речь. (Она очень сырая, как концепт — не получается подобрать хорошие настройки CSS-фильтров, чтобы превращать изображения стаьи в красные, не знаю как это решить, не делая ручных дублей для каждой картинки). Плюс не имеет смысла оценивать её, если вы сейчас не сидите ночью в поле или хотя бы в санузле с выключенным светом. При этом она должна быть развернута на весь экран, чтобы другой UI от браузера не мешал — в общем, чтобы не было никаких других источников некрасного света, кроме звёзд, отдельных диодов от бытовой техники и/или луны. Но подробнее далее.

Для структурированности, разобью статью на блоки, типа вопросов и ответов. Начнём с, предполагаю, самого ожидаемого —

А зачем это делать? Разве не хватает темных палитр?

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

Конечно, можно выкрутить яркость дисплея до минимума, либо сделать более технически простую ночную палитру, когда яркость наиболее светлого цвета (того, что в «тёмной» — а это не равно «ночной» — мы бы сделали белым) будет весьма низкой, но в таком случае, чтобы сохранять чувствительность палочек, нашим колбочкам будет сильно не хватать цвета и такой интерфейс будет банально плохо видно, не зря же есть требования WCAG к контрасту — хотя этот подход и используют на тех же судах, когда цветопередача объектов на морских картах считается важнее, чем риски потери ночного зрения. Но на ночном мостике судна обычно несколько человек, а общее освещение и те же индикаторы (репитеры гирокомпаса и т.п.) все равно делают красными согласно требованиям.

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

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

Это, кстати, проблема автонавигаторов и вообще современных панелей автомобилей в условиях ночной трассы между городами — только БМВ заморочились с этим на текущий момент.

Что нужно учесть, чтобы имело смысл делать красную ночную палитру?

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

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

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

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

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

Как рисовать?

Хорошо, разобрались, что мы можем расчитывать на хорошие дисплеи и что никакой негодяй не будет слепить зажигалкой, костром или прожектором на рабочем месте рядом, да еще и понимаем, что наш интерфейс — не какая-то массовая история, а встроенный HMI и мы имеем полный контроль над содержимым экрана. Как теперь рисовать?

Тут уже всё просто. Рисуем палитру используя только красный компонент RGB. То есть всё пространство для манёвра у нас в двигании ползунка R, а остальные должны быть по нулям — иными словами, все цвета палитры находятся в диапазоне от #000000 до #FF0000.

Разумеется, интерфейс скорее всего всё равно будет с светлым контентом на черном фоне — ибо яркий красный прямоугольник всё равно будет раздражать, даже если он не глушит ночное восприятие.

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

Что с визуализацией тревог?

Разумеется, мы с вами говорим не об игрушках, а о серьезных системах, и если ночью мы вынуждены страдать, то скорее всего это система для поддержания ситуационной осведомленности. А значит, у нас могут возникать тревоги (alerts) — все эти критические алармы (alarms) и менее критичные предупреждения (warnings или cautions).

Но как сделать опасное заметным на красном фоне?

Мысля традиционно — никак. Сигнальных цветов же нет. Но здесь на помощь приходят методы проектирования для людей с дальтонизмом. Если нужно показать тревогу  делаем её мигающей с ярким красным фоном, ещё и с иконкой тревоги, а не предупреждения. Если предупреждением — пусть она мигает текстом и рамкой, а не фоном, плюс иконка будет другая. И так далее.

Причем я бы в таком случае основную «нейтральную по состоянию» палитру делал, допустим, в диапазоне красного компонента от 0 до 192, а тревоги бы делал rgb(255,0,0) — то есть необычно яркие элементы в любом случае привлекут внимание.

А можно всё же немного цвета?

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

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

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

Стоит ли заморачиваться?

И последнее, прочитав всё это, вы скорее всего сделаете вывод, что это супернишевая история. И вы будете правы — в 99.9% красные ночные палитры не нужны, слишком много жертвования другими принципами. Это достояние редких, в основном профессиональных случаев.

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