Как стать автором
Обновить

Раз и навсегда про тёмную тему или почему вам «на самом деле» нужна тёмная тема

Уровень сложности Простой
Время на прочтение 15 мин
Количество просмотров 34K

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

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

Например, по результатам опроса на сайте CSS‑Tricks: 37% участников проголосовали за светлую тему и 63% за тёмную. Я не смог найти число участников опроса, поэтому сложно оценить репрезентативность.

Есть более свежее исследование от JetBrains. Там, правда, лишь упоминание, что «77% of respondents use dark theme for their editor or IDE«, но в исследование приняло участие 6000 разработчиков, что, согласитесь, уже более значимо статистически.

На нашем любимом Хабре я на скорую руку нашёл две статьи на эту тему, содержащие опросы с большим количеством участников, почему‑то обе за 2019-й год (видимо пик интереса к вопросу, так как в более старых статьях опросы не набирали и тысячи участников):

  • В перевод статьи от Lilly Smith @PatientZero добавил опрос, согласно которому 52.3% процента хабраюзеров предпочитают тёмную тему, 23% предпочитают светлую, а остальные используют тёмную «если это идет сайту/приложению». То есть, по сути опять не менее 2/3 за тёмную тему. Всего проголосовали 1580 пользователей.

  • В статье «Почему разработчики так любят тёмную тему» в опросе участвовало уже 3372 хабра‑пользователя, из которых уже 72.2% выбрали тёмную тему.

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

Вспоминаем как устроен глаз

Доставляет печали, что далеко не каждый, кто умничает на эту тему в интернетах, потрудился разобраться в строении глаза. Это камень в огород некоего Andrew Braun, на которого ссылалась @zverolyub в своей статье. А именно, он заявляет буквально следующее (мой вольный перевод):

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

Andrew, видимо, не до конца понимает как собственно работает глаз. Для начала неплохо вспомнить, что за размер отверстия зрачка отвечают две разные мышцы — дилататор (расширитель) и сфинктер (суживатель) зрачка. Это мышцы‑антагонисты и для поддержания постоянной формы и размера зрачка работать будут обе мышцы (погуглите «Признак Белоглазова» — как выглядят зрачки у людей после смерти, прекрасное новое знание). А вот в крайнем открытом положении сфинктер в основном просто остаётся расслабленным и напряжён лишь дилататор, то есть вовсе не факт, что крайнее положение обязательно будет более энергозатратным и будет что‑то там сильно деформировать.

Строение глаза в интересующей нас области
Строение глаза в интересующей нас области

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

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

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

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

Основной вывод из всего этого в том, что «вероятно» существует некий уровень яркости, который оптимален для глаз.

Целый день смотреть на яркую лампу (коей по сути является монитор) да ещё и при окружающем ярком освещении точно не самая разумная затея. Смотреть на тёмный экран в тёмной комнате — тоже идея не из лучших. Смотреть на яркий экран в тёмной комнате — вряд ли кому‑то понравится. Ну, я думаю суть вы уловили.

Моё личное наблюдение заключается в том, что на усталость глаз от монитора чаще жалуются те товарищи, которые зачем‑то выкручивают себе яркость на 100% и смотрят на это целую рабочую неделю.

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

Академическая точка зрения

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

Итак, чаще всего звучит утверждение, что чёрный текст на белом фоне (позитивная цветовая схема в терминологии учёных) быстрее и точнее воспринимается, чем соответственно белый на чёрном фоне (негативная схема).

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

  • Исследователи используют различные цветовые схемы и замеряют скорость чтения текста (на известном участнику языке) в разных сочетаниях и замеряют время, а затем задают участникам вопросы по тексту — Effects of Background Colors on Reading Speed [1]. Использовалась цветная бумага, причём варианта «белое на чёрном» не было вообще. Исследователи пришли к ошеломляющему результату, что на красном фоне текст читать тяжелее всего!

  • В исследовании, опубликованном в журнале Ergonomics (Piepenbrock, 2013) [2], испытуемых сажали в темную комнату с «24-inch (1920×1200 pixels) TFT display of an Apple iMac» и тремя настольными лампами, которые были расставлены по углам комнаты и направлены к стенам, а затем проверяли остроту зрения с помощью колец Ландольта (это такая таблица с повёрнутыми в разные стороны буквами С). Примечательно, что для позитивной цветовой схемы окружающее освещение было включено (освещённость 16 lx), а для тёмной схемы лампы выключены (0 lx), т. е. при тестировании тёмных схем испытуемые сидели почти в полной темноте. В тех же самых условиях испытуемых просили прочесть текст и найти ошибки. Феноменальным образом оказалось, что тёмный экран в совершенно тёмной комнате во всех случаях видно было несколько хуже, чем светлый при нормальном освещении!

  • Чаще всего в подобных исследованиях просят искать ошибки в тексте, либо, например искать определённое слово на разных цветовых схемах, как это делали в статье Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles [3]. Там тоже была достаточно забавная методика, потому что выбрали шесть прелестных цветовых комбинаций: желтый на синем, белый на синем, красный на зеленом, черный на сером, черный на белом, и зеленый на желтом (sic!). Учёные пришли к прорывному выводу, что красный на зелёном читается хуже всего. Впрочем, интересный момент тоже есть — оказывается, по сравнению с остальными схемами, классический вариант «чёрный на белом» ни в одном из случаев не показал лучший результат, а лучшим оказался почему‑то и вовсе «зелёный на жёлтом», что конечно полный треш.

  • Ещё одно исследование влияния сочетаний текста и фона — The Effect of Web Page Text‑Background Color Combinations on Retention and Perceived Readability, Aesthetics and Behavioral Intention [4]. Участникам давали читать разные тексты в разных цветовых схемах, а затем задавали вопросы по прочитанному. В этот раз авторы догадались добавить в сравнение негативную схему «белое на чёрном», правда остальные схемы почему‑то всё такие же шизовые — голубой на темно‑синем и бирюзовый на черном. Анализ данных «показал что участникам больше всего нравился вариант „голубой на тёмно‑синем“, а хуже всего читался бирюзовый на чёрном«. Тут, признаюсь, я даже не стал искать полный текст...

  • ...и ещё с пяток подобных исследований с аналогичными методами и такими же странными постановками экспериментов.

Хочется отметить статью Text-background polarity affects performance irrespective of ambient illumination and colour contrast (Buchner & Baumgartner, 2007) [5], которая несколько выделяется на фоне остальных и кажется будто бы её авторы наиболее убедительны и скрупулёзны. Во-первых, хоть методика и похожа (участники также искали ошибки в тексте при разных схемах), однако тут участников было заметно больше чем у других, экспериментов несколько и оформлено всё с большой тщательностью. Во-вторых, важно что участников додумались не сажать в полную темноту для тестирования "тёмных" схем, а оставили небольшое фоновое освещение (5 lx, что на мой взгляд всё же маловато, ну да хоть что-то).

Кроме того, это одно из немногих исследований, где помимо частоты ошибок исследователи оценивали множество физиологических параметров (например усталость глаз, головная боль и т. п.), и даже сделали какие‑то выводы с ними связанные (в отличии от [2], где авторы не сочли результаты таких измерений значимыми). Единственное, что меня смущает у Buchner & Baumgartner [5], это исчезающе малая разница в найденных ошибках между обычными позитивной и негативной Ч\Б схемами — разница всего 3–4 ошибки при погрешности около 2 и максимуме около 11–13. Хотя разница безусловно есть и она превышает погрешность, но сомнений добавляет тот факт, что в разных экспериментах даже для классической светлой Ч\Б‑схемы значения различаются больше, чем на погрешность. Может быть следовало провести ещё больше экспериментов и упростить методику?

Что не так с этими исследованиями

Одна из больших проблем всех эти исследований заключается в том, что значительная доля работ сделана более 20 лет назад. И я считаю, что все исследования читабельности цветовых схем на экранах, сделанные раньше начала нулевых, следует попросту игнорировать по одной простой причине — практически все они проводились на ЭЛТ мониторах. Причин, по которой инвертированная схема на ЭЛТ выглядит хуже, две:

  1. ЭЛТ так устроен, что изображение постоянно «моргает» и в перерывах между обновлениями маленький белый текст даёт меньше света;

  2. Низкая контрастность мелкого белого текста, ввиду несовершенства технологии ЭЛТ.

Более того, если текст на ЭЛТ отображается близко к углам, к этому ещё добавляются дополнительные искажения (нижняя часть первого фото под спойлером).

Макро-фотографии различных схем на ЭЛТ и ЖК-дисплеях
Вот так текст выглядит на ЭЛТ-мониторах
Вот так текст выглядит на ЭЛТ-мониторах

Для современных ЖК-дисплеев разница уже не столь однозначна:

Текст на современном ЖК-мониторе (всего лишь FullHD)
Текст на современном ЖК-мониторе (всего лишь FullHD)

Кстати, Buchner & Baumgartner [5] даже отдельно упомянули этот момент, мол «мы в курсе про моргание CRT‑мониторов, в том числе и поэтому данное исследование проводилось на TFT‑дисплеях«. Вот только это, опять же, 2007-й год и использовали они „Apple 17-inch TFT Studio Display“, который может и был хорош для своего времени, но с современными 4k AMOLED‑мониторами его даже смешно сравнивать.

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

Окей. Старые исследования мы отбрасываем, это всё? Как бы не так.

Как вы уже поняли, большая часть исследований данной темы посвящено двум вполне конкретным нюансам — влиянию яркости и контраста на качество восприятия.

Я не просто так выше акцентировал внимание на окружающей освещённости в экспериментах. Ещё с бородатых времён человеческой цивилизации известно, что освещённость рабочего места значительно влияет на производительность рабочего. Каждый, кто подписывал на работе инструктаж по безопасности, знает, что эти вещи вдоль и поперёк зарегламентированы всевозможными СНиПами, ГОСТами, да и вообще стандартами на любой вкус (попробуйте погуглить, ради интереса, сколько подобных регламентов существует на западе — я больше 20 насчитал).

А как именно влияет освещённость рабочего места? Невероятно, но хорошо освещённое рабочее место увеличивает продуктивность и уменьшает количество совершаемых ошибок!

Например Shafique Rahman в 2018-м году [6] в своём исследование пришёл к выводу, что хорошо (но не слишком!) освещённое рабочее место повышает производительность. А вот в исследовании Illuminating the Effects of Dynamic Lighting on Student Learning (Mott, et al., 2012) [7] выяснили, что при хорошем освещении у школьников улучшается успеваемость. У отечественных авторов тоже есть с десяток статей на эту тему, но искать полный текст тяжелее, поэтому ссылок не даю, верьте на слово.

В общем, судя по всему, большая часть исследований мало уделяет внимания тому факту, что светлые цветовые схемы позитивно влияют на концентрацию внимания вовсе не из‑за особенностей восприятия различных цветов на различных бэкграундах, а просто из‑за общего позитивного влияния окружающей яркости на концентрацию. На это намекает очень много моментов, практически в каждом исследовании. Справедливости ради, некоторые всё же упоминают, что «видимо общая яркость текста и фона имеет больше значения чем цветовая схема», например Cosima Piepenbrock уже через год после первого своего упомянутого здесь исследования по теме [2], делает второе [8], и третье [9] почти тем же составом соавторов. И теперь исследователи уже прямо пишут, что лучшее восприятие изображение обусловлено более чётким изображением на сетчатке, вследствие более высокой общей яркости и меньшего зрачка.

Погодите‑ка, разве мы выбираем тёмную тему потому что нам кровь из носу необходимо видеть каждую ошибку в тексте?

Где же исследования долговременной усталости глаз при использовании негативной или позитивной цветовой схемы на протяжении хотя бы пары недель? А вот недавно товарищи из Китая как раз именно такое и сделали: Study on the Effects of Display Color Mode and Luminance Contrast on Visual Fatigue [10]. Исследование достаточно замороченное, но нас интересуют выводы. А выводы там вот такие:

About color mode, results of objective indicators indicated that using electronic screens in the dark mode leads to an increase in BR and PA with respect to the light mode. It meant that objectively the dark mode resulted in less visual fatigue.

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

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

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

Почему же тёмная тема важна на самом деле

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

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

Посмотрите например, как прекрасно для человека даже с незначительной катарактой выглядит Хабр:

Посмотри как прекрасен мир с катарактой
Посмотри как прекрасен мир с катарактой

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

Если вы думаете, что это нечто редкое и об этом можно не беспокоиться, я вас огорчу — у меня есть занимательное исследование и на сей счёт: «Среди обследованных мужчин и женщин 55–84 лет распространенность катаракты составила 72,8%«, (Мунц, 2020) [11].

Более того, есть ряд заболеваний, при которых катаракта является осложнением и встречается в более раннем возрасте, так что доля тех, кто видит сайты размытыми, ещё выше.

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

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

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

Резюме

Итак, для любителей читать только последние абзацы, краткие выводы из всех моих растеканий по древу:

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

  2. При длительном использовании «тёмные» цветовые схемы вызывают меньше утомления глаз.

  3. Большая часть пользователей вынужденных проводить за компьютером длительное время предпочитает тёмную тему независимо от того что лично вы думаете на сей счёт.

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

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

Очень помогает и небезызвестный DarkReader, хотя он не везде работает корректно и иногда тормозит, это всё же лучше чем ничего. Кстати у Chrome есть даже встроенная возможность принудительно включить тёмную тему (chrome://flags/#enable‑force‑dark), но работает оно не всегда лучшим образом.

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

Хочется думать, что здесь всё ещё значительное число людей, имеющих непосредственное отношение к веб‑разработке, поэтому надеюсь обратить на проблему ваше внимание. Спасибо за прочтение и не болейте!

Upd. Вижу некоторые читатели не совсем верно меня поняли и упомянули, что я забыл про другие нарушения со зрением, например астигматизм, при котором тёмная тема читается хуже. Я ни в коем случае не забыл и я, конечно не призываю делать доступной только тёмную тему, нет. Дело в том, что у абсолютного большинства сайтов и приложений доступна лишь светлая тема. Речь скорее о том, что у пользователя должен быть выбор.

Список использованных источников
  1. Effects of Background Colors on Reading Speed (Yigit Aslan, 2019)

  2. Positive display polarity is advantageous for both younger and older adults (Piepenbrock, Mayr, Mund, Buchner, 2013)

  3. Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles (Hill and Scharff, 1997)

  4. The Effect of Web Page Text-Background Color Combinations on Retention and Perceived Readability, Aesthetics and Behavioral Intention (Hall & Hanna, 2003)

  5. Text – background polarity affects performance irrespective of ambient illumination and colour contrast (Buchner & Baumgartner, 2007)

  6. Effect of Illuminance on Human Work Performance, an assessment based on Lighting Laboratory experiment (Shafique Rahman, 2018)

  7. Illuminating the Effects of Dynamic Lighting on Student Learning (Mott, et al., 2012)

  8. Smaller pupil size and better proofreading performance withpositive than with negative polarity displays (Piepenbrock, Mayr, Buchner, 2014)

  9. Positive display polarity is particularly advantageous for small character sizes: implications for display design (Piepenbrock, Mayr, Buchner, 2014)

  10. Study on the Effects of Display Color Mode and Luminance Contrast on Visual Fatigue (Xie, Song, Liu, et al., 2021)

  11. Распространенность офтальмологических заболеваний
    в популяционной выборке старше 50 лет (Мунц, 2020)

Теги:
Хабы:
+59
Комментарии 146
Комментарии Комментарии 146

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн