Темная тема или Dark Mode: очередной тренд или важная необходимость
Темная тема – один из трендов, который сейчас набирает большую популярность. Многие известные сайты и приложения добавляют возможность использования темной темы в своем интерфейсе. После таких гигантов, как Apple, Android и Google, темную тему начали добавлять социальные сети (Instagram, VK, Facebook, Twitter), а также многие мессенджеры (What’s App, Viber, Telegram).
Хотим сразу отметить, что темная тема нравится далеко не всем. В первую очередь это связано с восприятием информации, в частности текста. Многим сложно различать светлые буквы на темном фоне. Но почему же тогда все большее количество различных сервисов переходят на «темную сторону»?
Преимущества темной темы
Вот несколько причин, почему темная тема стала настолько востребована:
1. Повышение восприятия информации
Некоторым пользователям проще воспринимать светлый текст на темном фоне. По большому счету это связано с повышенной контрастностью и уменьшением негативного пространства за счет темных оттенков. Но нет никаких доказательств, что темная тема лучше влияет на восприятие текста. По результатам многочисленных исследований, всегда выигрывает, наоборот, светлая тема.
Единственное, что можно отметить: темная тема действительно снижает нагрузку на глаза в ночное время. В неосвещенном либо слабоосвещенном помещении контраст с темным фоном почти незаметен. Глаз человека становится менее чувствителен к свету, нет резкого перехода между цветами. За счет этого и снижается напряжение с глаз.
2. Экономия заряда батареи
Это, конечно, явный плюс темной темы. Из-за того, что экран излучает меньше света, энергопотребление вашего смартфона снижается. Компания Google проводила по этому поводу исследование, которое показало, что, например, темный режим в приложении YouTube позволяет сэкономить от 15 до 63% времени автономного использования устройства. Согласитесь, иногда и 10% заряда очень важны.
3. Лаконичный дизайн
Большинству пользователей просто нравится визуал темной темы. Темные цвета передают значение премиум-контента: они делают интерфейс более стильным, привносят нотку роскоши и богатства.
Также зачастую пользователь просто хочет взглянуть на продукт по-новому. Здесь уже дело вкуса. Возможно, интерфейс проявит себя с другой стороны, и темная тема поможет выявить некоторые плюсы и минусы.
Что лучше: светлая тема или темная тема
Изначально все интерфейсы были только со светлым оформлением. Все мы, читая книгу, привыкли видеть там черные буквы на белом фоне. Такое восприятие информации является обычным для нашего взгляда.
Конечно, интерфейс со светлой темой должен обязательно присутствовать на сайте или в приложении. Если по умолчанию стоит темная тема, необходима возможность переключения на светлую тему, т.к. ранее мы говорили о том, что не каждому пользователю нравится смотреть на темный экран.
Темную тему очень сложно реализовать. Недостаточно просто сменить белый цвет на черный или наоборот. Совсем не каждый интерфейс подходит для темной темы. Есть некоторые элементы, которые не сочетаются с темным дизайном. Также всегда нужно учитывать ЦА, тематику, фирменные цвета и т.д.
Не стоит добавлять темную тему в случае, если:
- В качестве основного контента выступает текст
- Используется большая цветовая палитра
- Сайт/приложение имеет большое количество элементов
Темную тему можно применять, когда:
- Дизайн выполнен в стиле минимализм
- Предполагается использование сайта/приложения в ночное время
Все описанное выше, конечно, относительно, и нужно смотреть на каждый проект индивидуально. Главное – не стоит забывать, что удобство использования важнее всего. Если вы разработаете темную тему, но пользователь не будет в ней так же хорошо ориентироваться, как в светлой, считайте, что ваша работа была проделана зря.
Больше статей на схожую тематику:
Что необходимо учитывать при разработке темной темы
Давайте разберемся, каким основным принципам нужно следовать, чтобы грамотно разработать темную тему для веб-ресурса.
1. Соблюдение темного контраста
При разработке темной темы не стоит брать за основу чисто черный цвет #000000. Его рекомендуется выбирать для текста. Фоны и подложки лучше делать темного-серого цвета, немного уходящего в синий. Рекомендуемый оттенок #121212.
Также необходимо соблюдать глубину при подборе темных оттенков. Особенно это касается мобильных приложений. Такой интерфейс содержит много однотипных элементов. При неправильном цветовом ранжировании их относительно друг друга, вы рискуете сбить пользователя с толку. В данном случае сильно пострадает визуальное восприятие. Условно скажем, чем дальше расположение элемента от пользователя, тем темнее он должен быть. В светлой теме такой эффект создается с помощью теней, но в темной теме их использование невозможно.
Интерфейс Dashboard UI/UX Design имеет фон темнее, чем меню слева, строка поиска и области с различными показателями
Пример интерфейса Dashboard Design, выполненного в темных серо-синих цветах
2. Баланс ярких цветов
При выборе акцентных цветов для темной темы старайтесь избегать слишком насыщенных, ярких цветов. Они создают резкий контраст с темным фоном, за счет чего ухудшается цветовое восприятие. Основные элементы интерфейса (кнопки, иконки, виджеты и т. д.) должны быть хорошо различимы.
Для подбора цветов можно использовать такие приложения, как Color Tool и Coolors. С их помощью вы без труда подберете нужный цвет, который будет сочетаться с различными оттенками темного цвета. Также есть возможность заранее посмотреть, как будет выглядеть примерный интерфейс приложения.
Дизайн темной темы My Wallet с яркими элементами
В качестве акцентов для Motime Resolution App используются иллюстрации и элементы с градиентом
3. Читабельность текста
Цвет шрифта также не стоит выбирать чисто белый #ffffff. Безусловно, его можно применить для основного текста. Но здесь тоже существует система ранжирования: без разграничения текстовых цветов так же, как и для элементов, пользователю сложно будет воспринимать информацию.
Например, для дополнительного описания, неактивного текста можно использовать прозрачность либо оттенки светло-серого цвета. Важные заголовки стоит выделять акцентными цветами. Но главное – не переборщить. Не забываем, что текст обязательно должен хорошо читаться.
На платформе Charles C. D. дополнительные текстовые блоки имеют непрозрачность
Обилие текста на Trading Platform разграничивается фигурами и линиями, также применяется непрозрачность
В разработке темной темы можно ориентироваться на различные гайдлайны. Такие есть у Apple – Human interface Guidelines, Google – Material Design Dark Theme и Microsoft – Designing for Dark Mode.
4. Корректное отображение элементов
После подбора всех элементов для темной темы необходимо проверить правильное их отображение. Сайт или приложение всегда нужно тестировать с различных устройств, т.к. некоторые экраны могут передавать один и тот же цвет по-разному. Поэтому очень важно проверить, правильно адаптирован ваш сайт под мобильные или нет. О том, как это сделать, читайте тут.
На данном этапе есть возможность изменить выбранные цвета. Это обезопасит вас от риска, что вся работа была проделана зря. И не стоит забывать о возможности выбора светлой темы – благодаря статистике вы узнаете, какой процент пользователей применяет в настройках темную тему, а кому по нраву нововведение.
Интерфейс GASENERGY для мобильного приложения отличается от версии для десктопа. Это необходимо для правильного отображения всех элементов.
Сайт Mira Chernova выполнен в минималистическом стиле. Различия между десктопной и мобильной версии не слишком заметны, но все же они есть.
Примеры сайтов с темной темой
Ниже мы сделали подборку сайтов, которые имеют темный дизайн. Мы не хотели показаться банальными, поэтому выбрали ресурсы, которые выделяются среди остальных. Каждый имеет свою уникальную изюминку. Вдохновляйтесь =)
1. The Fabricant
Сайт имеет интересную задумку – возможность путешествовать в пространстве. С помощью стрелочек-указателей мы можем перемещаться в любом направлении, а не просто скролить сайт вниз, как обычно. Сам дизайн напоминает космическую локацию, которая хорошо ассоциируется с тематикой сайта.
2. Dogstudio
Бесспорно, этот сайт разрабатывали любители собак. Несмотря на то, что на сайте используются темные цвета и 3D элементы, все кажется милым, уютным и необычным.
3. L’atelier
Скроллинг помогает нам взаимодействовать с сайтом, за счет чего воспринимать информацию гораздо интереснее. Это отличное решение, позволяющее привлечь пользователя к просмотру объемного контента. Плюс несложная анимация не отвлекает от визуального восприятия.
4. Lestudiodigital
В качестве основного элемента на сайте выступает текст и фотографии. Данные компоненты хорошо подходят для портфолио дизайн-студий – здесь нет ничего лишнего. Ненавязчивая анимация не отвлекает от контента – посетитель фокусирует свое внимание на выполненных работах.
В другой в нашей статье, вы можете посмотреть еще больше примеров сайтов-визиток.
5. AirPods Pro
Это сайт-визитка определенного товара. По мере прокрутки страницы пользователь знакомится с продуктом. Проработанная модель наушников помогает очень точно его визуализировать, а дополнительная анимация дает понять, как все устроено внутри.
Нравится статья? Тогда смотрите наши курсы!
6. Путешествие в темноте
Интерактивный проект, созданный для людей со слабым зрением. По мере скроллинга на сайте меняется изображение, а также запись голосового рассказа. Кроме того, на сайте присутствует функция управления голосом.
7. Wired
Основным элементом на сайте выступает движущаяся модель робота, что выделяет его среди других. Но, признаемся, такая анимация влияет на скорость загрузки. В разделе каталога темный фон выглядит достаточно выигрышно, т.к. товары на его фоне смотрятся по-контрастному круто.
8. CRRTT
При прокрутке сайта мы также можем наблюдать анимацию фигур и типографики. Красный на черном выглядит лаконично и контрастно, что позволяет сосредоточиться на основной информации.
9. Goengine
Ваш курсор является подвижной точкой, что обеспечивает взаимодействие с сайтом. При его наведении меняется текст, иконки, кнопки обводки и т.д. Все просто и со вкусом.
10. Andrew Leguay
Еще один пример сайта-визитки для портфолио. Сайт состоит из обилия анимированной типографики и фотографий. При малейшем наведении курсора или прокрутке большинство элементов оживают.
Примеры роста кликов, конверсий, заказов и прибыли:
Вывод
На первый взгляд разработка темной темы не является слишком сложной задачей. Многие ее воспринимают как тренд и стремятся внедрить на свой ресурс без веских причин. В первую очередь необходимо провести тщательный анализ вашего продукта. После этого – выдвинуть действительно значимые аргументы для добавления темной темы.
Dark Mode больше подходит для приложений. Как правило, они имеют минималистичный дизайн и небольшое количество цветов. На сайтах реализовать темную тему сложнее, ведь на это влияет обилие контента: красочные изображения, сочетание нескольких цветов, использование различных шрифтов и т. д.
Перейти на «темную сторону» – смелое решение. Если решились на такой шаг, надеемся, вы нашли веские причины для этого.
Если вам необходимо создать темную тему для вашего сайта, мы придем вам на помощь! Оставьте заявку на нашем сайте – наши специалисты свяжутся с вами и помогут в решении данного вопроса.
Dark Mode vs. Light Mode: что лучше с точки зрения науки?
У людей с нормальным зрением с физиологической точки зрения содержание любого текста лучше усваивается в режиме Light Mode, но некоторым людям удобнее работать в Dark Mode. Эксперты из Nielsen Norman Group подробно разобрали , какой режим лучше выбирать для работы с точки зрения науки, и чем они отличаются друг от друга, помимо цвета фона и шрифта. Мы перевели эту статью.
При этом Nielsen Norman Group не проводили собственных исследований Dark Mode, а пользовались только данными, которые находятся в открытом доступе. Кроме того, частью исследований с экспертами Nielsen Norman Group поделились ученые, которые изучают влияние Dark Mode и Light Mode на зрение.
Перед текстом необходимо разобраться с терминологией:
Полярность контраста — термин, который используется для описания контраста между текстом и фоном.
Положительная полярность контраста — определение, которое относится к тексту с темным шрифтом на светлом фоне (Light Mode).
Отрицательная контрастная полярность — обозначает сочетание светлого текста на темном — например, черном фоне (Dark Mode).
Дисплеи с Dark Mode излучают меньше света, чем дисплеи в Light Mode, и из-за этого они могут продлить срок службы батареи. Но количество света в окружающей среде влияет не только на энергопотребление, но и на наше восприятие. Чтобы понять, как это происходит, давайте рассмотрим основную информацию о зрачке глаза и том, как он реагирует на количество света в окружающей среде.
Люди чувствительны к количеству света
Человеческий зрачок — это вход в сетчатку: через него свет достигает глаза. По умолчанию зрачок человека меняет размер в зависимости от количества света в окружающей среде: когда света много, он сужается, а когда темно — он расширяется, позволяя проникать большему количеству света.
Маленькие размеры зрачка сделали глаза менее восприимчивыми к сферическим аберрациям, при которых изображение кажется несфокусированным. Кроме того, это позволило увеличить глубину резкости, чтобы людям не приходилось так усердно напрягать глаза, чтобы сосредоточиться на тексте. Диафрагма камеры работает точно так же: фотография, сделанная при f/2,8, будет иметь меньшую глубину резкости и, следовательно, более размытую, чем фотография, сделанная при f/16.
С возрастом зрачок уменьшается в размерах. Слишком маленький размер зрачка приводит к тому, что в глаз попадает слишком мало света — это ухудшает нашу способность читать или распознавать текст, особенно при слабом окружающем освещении — например, ночью. С другой стороны, по мере того, как мы становимся старше, мы становимся более восприимчивыми к бликам, а они особенно вероятны при ярком свете.
Пользователи с нормальным зрением
Исследования, проведенные в 1980-х годах, указывали, что для людей с нормальным зрением или зрением, скорректированным до нормального с помощью линз или очков, полярность контраста не влияла на зрительные характеристики.
При этом существуют и исследования, которые это опровергают — на них мы сейчас и сфокусируемся. Например, в 2013 году в журнале Ergonomics вышла статья, авторы которой изучали остроту зрения и эффективность чтения. А в 2017 году в издании Applied Ergonomics ученые рассматривали проблему так называемого быстрого чтения — когда пользователь краем глаза смотрит в уведомления на телефоне, умных часах или приборной панели в автомобиля, читая буквально несколько слов.
Влияние контрастной полярности на остроту зрения и корректуру
Козима Пипенброк и ее коллеги из Institut für Experimentelle Psychologie в Дюссельдорфе, Германия, изучали две группы взрослых с нормальным зрением: молодые люди в возрасте от 18 до 33 лет и пожилые — от 60 до 85 лет. Ни один из участников не страдал какими-либо заболеваниями глаз.
Перед участниками были поставлены два разных типа задач:
— задача на остроту зрения, которая включала в себя обнаружения так называемого оптотипа Ландольда С — показ символа, который похож на букву «С», только с разрывом не с правой стороны, а с разных сторон.
— задача на корректуру, в рамках которой человеку необходимо прочитать короткий отрывок текста и найти в нем различные ошибки.
Все задания были представлены в разной полярности — для одних участников задачи были в Dark Mode, для других — Light Mode. Полярность контраста была переменной между субъектами — каждый участник видел задачи только с одной полярностью контраста, например, только Dark Mode.
Читайте и другие истории успеха: Бросить высокооплачиваемую работу в рекламе, за 3 месяца стать программистом и переехать в деревню.
Исследователи также собрали данные, связанные с утомляемостью до и после тестирования: участники оценивали усталость глаз, головную боль, мышечное напряжение, боль в спине и субъективное самочувствие в начале и в конце эксперимента.
Результаты показали, что Light Mode победил во всех измерениях: независимо от возраста, положительная полярность контраста была лучше как для задач проверки остроты зрения, так и для задач корректуры. Однако разница между Light Mode и Dark Mode в задаче на остроту зрения для пожилых людей была меньше, чем для молодых — это означает, что, хоть Light Mode и лучше для пожилых людей, они не получали от него такой же пользы, как молодые. По крайней мере, в задаче на остроту зрения.
Когда исследователи изучили показатели утомляемости, то пришли к выводу, что у Light Mode и Dark Mode нет значительной разницы — то есть оба режима утомляют человеческий глаз примерно с одинаковой интенсивностью.
Другое исследование, опубликованное той же исследовательской группой в журнале Human Factors, рассматривало, как размер текста взаимодействует с полярностью контраста в задаче корректуры. Ученые обнаружили, что преимущество положительной полярности увеличивается по мере уменьшения размера шрифта: чем меньше шрифт, тем лучше пользователям читать текст в Light Mode.
Кроме того, даже несмотря на то, что людям было удобнее читать текст в Light Mode с биологической точки зрения, участники исследования не сообщали о каких-либо различиях в восприятии читабельности текста между Light Mode и Dark Mode. По словам ученых, это создает очень важное правило — не слушайте пользователей.
Влияние контрастной полярности на удобство чтения
Джонатан Добрес и его коллеги из Массачусетского технологического института попытались оценить, влияют ли каким-либо образом условия окружающего освещения на преимущество положительной полярности в контексте задачи лексического решения.
Задача лексического решения — парадигма, обычно используемая в психологии. Она включает в себя показ участникам строки букв, и предположения — целое это слово или просто отдельные буквы. Задача лексического решения больше похожа на быстрое чтение, которое мы выполняем в условиях выполнения определенной задачи, которые очень трудно прервать. Например, во время вождения автомобиля или решения важной задачи.
У участников исследования было нормальное или скорректированное зрение. Им были показаны символы разного размера с двумя возможными полярностями контраста — Light Mode и Dark Mode, при разном окружающем освещении: в дневное и в ночное время.
Исследование показало, что освещение, полярность и размер текста влияют на эффективность чтения. Моделирование дневного времени позволило пользователям читать быстрее, чем в ночное время, при этом Light Mode был лучше Dark Mode, а текст с крупным шрифтом читался удобнее, чем с мелким. Интересным результатом стало взаимодействие между окружающим освещением и полярностью контраста: в дневное время не было значительного влияния полярности контраста на эффективность чтения, но в ночное время Light Mode приводил к лучшим показателям, чем Dark Mode. Более того, в темное время суток людям было намного сложнее читать мелкий текст в Dark Mode, чем в Light Mode.
Кроме того, люди работали быстрее днем, чем ночью, в Light Mode, чем в Dark Mode, и с большим размером шрифта — 4 мм, чем с меньшим размером шрифта — 3 мм. В ночное время Light Mode был значительно удобнее для пользователей, чем Dark Mode, а мелкий шрифт было намного легче читать в Light Mode.
Отсутствие эффекта полярности в смоделированных дневных условиях было несколько неожиданным и несовместимым с другим более ранним исследованием Бюхнера и Баумгартнера, в котором также рассматривались светлые и темные условия окружающей среды. Однако в этом исследовании яркое окружающее освещение было намного ниже, чем в исследовании Массачусетского технологического института. Добрес и его коллеги утверждают, что количество окружающего света может повлиять на преимущество положительной полярности, при этом яркий солнечный свет приводит к нулевой разнице, но нормальный офисный свет по-прежнему может создавать разницу.
Долгосрочные эффекты
В этих исследованиях рассматривается одноразовое влияние контрастной полярности на работоспособность человека. Но как насчет долгосрочных эффектов? Другими словами, имеет ли какое-либо влияние длительное воздействие одного типа контрастной полярности?
Результаты исследования, опубликованного в научных отчетах Nature Research в 2018 году, предполагает, что длительное воздействие светового режима может быть связано с миопией (близорукостью). Миопия относится к неспособности четко видеть далекие объекты и сильно коррелирует с уровнем образования и чтением. В своем исследовании Андреа Алеман и ее коллеги из Тюбингенского университета в Германии попросили семь участников в течение часа читать текст, представленный в Light Mode и Dark Mode. Чтобы увидеть, изменилась ли их предрасположенность к миопии после чтения, они измерили толщину сосудистой оболочки позади сетчатки. Истончение сосудистой оболочки тесно связано с миопией, утверждают ученые.
Читайте также Как устроен функциональный диалект Лиспа Clojure и почему использующие его программисты восхищаются им
Исследователи обнаружили значительное истончение этой мембраны, когда участники читали текст, представленный в Light Mode, и значительное утолщение при чтении текста в Dark Mode. Истончение было более выраженным у участников, у которых уже была миопия.
Этот результат предполагает, что работа с текстами в Light Mode может быть лучше по эффективности в краткосрочной перспективе, она может повлечь за собой негативные долгосрочные последствия.
Пользователи с ослабленным зрением
Количество подобных исследований про пользователей с ослабленным зрением меньше. Несмотря на это, существует мнение, что для людей с нарушением зрения лучше использовать Dark Mode. Гордон Легж и его коллеги из Университета Миннесоты определяют две категории слабовидящих: из-за нарушений центрального зрения и из-за мутности глазных сред.
Еще в 1977 году несколько исследований показали, что некоторые люди со слабым зрением предпочитают Dark Mode. В 1985 году Гордон Легге и его коллеги из Университета Миннесоты предположили, что этот эффект вызван «аномальным рассеянием света из-за мутной среды глаза». Предположительно, большее количество приводит к искажению картинки. Таким образом, Dark Mode может быть лучше для людей с, например, катарактой, потому что дисплей излучает меньше света.
В исследовании Легжа у каждого из семи участников с катарактой показатели чтения были лучше в Dark Mode, в то время как на остальных участников с нарушением центрального зрения полярность контраста не влияла.
Исследования Легге легли в основу рекомендации о возможности переключения в Dark Mode для современных компьютерных интерфейсов. В 2005 году греческие ученые также подтвердили, что для увеличения доступности интерфейсов для пользователей с ослабленным зрением, необходимо наличие Dark Mode.
Выводы
Итак, стоит ли использовать Dark Mode? Несмотря на то, что Dark Mode может предоставить некоторые преимущества для пользователей с ослабленным зрением, часть исследований указывают на преимущество Light Mode для людей с нормальным зрением. Другими словами, у пользователей с нормальным зрением Light Mode увеличивает эффективность работы.
Почему Light Mode лучше для производительности? Это объясняется тем, что при положительной полярности контраста существует больше общего света, поэтому зрачок меньше сужается. В итоге это приводит к тому, что пользователям легче сфокусироваться на тексте, при этом не утомляя глаза. Несмотря на то, что более крупный шрифт и яркое освещение лишают этого преимущества у людей с нормальным зрением — исследователи не советуют ставить Dark Mode по умолчанию.
При этом эксперты рекомендуют дизайнерам разрешить пользователям переключаться в Dark Mode по нескольким причинам:
— При длительном использовании Dark Mode менее вреден, чем Light Mode.
— Некоторым людям с нарушениями зрения Dark Mode позволяет лучше различать текст.
— Есть пользователи, которым Dark Mode намного более эстетически привлекателен, чем Light Mode — их довольно много и не стоит о них забывать.
Темная тема или светлая: что лучше? Выводы на основе научных публикаций
Темна тема чи світла: що краще? Висновки на основі наукових публікацій
Редакція ・ Серп 24
У людей с нормальным зрением зрительные характеристики имеют тенденцию улучшаться с включенной светлой темой, тогда как у людей, страдающих катарактой и связанными с ней расстройствами, показатели могут быть лучше при темной теме. С другой стороны, длительное чтение в светлой теме может стать причиной близорукости.
Nielsen Norman Group
Из-за недавнего добавления темной темы в IOS 13, репортер попросил меня рассказать об ее использовании, и популярности, как тренда дизайна. Также подобный вопрос мне несколько раз задали участники нашей UX-конференции.
iOS 13: Светлая тема (слева) и темная тема (справа)
Я должен заранее сказать, что NN / g не проводил собственных исследований темной темы. Однако эти вопросы побудили меня сделать обзор научных публикаций о том, имеет ли темная тема какие-либо преимущества для пользователей с нормальным зрением или нет. В этой статье я поделюсь с вами полученными выводами.
Но сначала давайте убедимся, что мы оперируем одинаковой терминологией.
Определение: Контрастная полярность – это термин, используемый для описания контраста между текстом и фоном:
- Положительная контрастная полярность (светлая тема) означает темный текст на светлом фоне.
- Отрицательная контрастная полярность (темная тема) обозначает сочетание светлого (например, белого) текста на темном (например, черном) фоне.
С активированной темной темой дисплеи излучают меньше света, чем со светлой (это может продлить срок службы батареи). Но количество света в окружающей среде влияет не только на энергопотребление, но и на наше восприятие изображения. Чтобы понять, как, давайте кратко разберем, устройство зрачка глаза и о том, как он реагирует на количество света в окружающей среде.
Зрачок чувствителен к количеству света
Человеческий зрачок – это ворота к сетчатке: через него свет достигает глаза. По умолчанию зрачок человека меняет размер в зависимости от количества света в окружающей среде: когда света много, он сжимается и сужается, а в темноте расширяется, позволяя проникать большему количеству света. Меньший размер зрачка делает глаза менее восприимчивыми к сферическим аберрациям (при которых изображение выглядит не сфокусированным) и увеличивает глубину резкости, чтобы людям не приходилось напрягаться для фокусирования на тексте. В свою очередь, это означает, что их глаза меньше устанут. (Апертуры камеры работают точно так же: фотография, сделанная с фокусным расстоянием f / 2.8, будет иметь более узкую глубину резкости и, следовательно, более размытую, чем фотография, сделанная с f / 16.)
С возрастом зрачок уменьшается в размерах. Слишком маленький размер зрачка означает, что слишком мало света попадает в глаз, что ухудшает нашу способность читать или обнаруживать текст, особенно при слабом окружающем освещении (например, ночью). С другой стороны, старея, мы становимся более восприимчивыми к бликам, а блики наиболее вероятны при ярком свете.
Пользователи с нормальным зрением
В ранних исследованиях, проведенных в 1980-х годах, указывалось, что полярность контрастности не влияла на зрительные характеристики людей с нормальным или откорректированным зрением (т. е. носящим очки или контактные линзы).
Тем не менее, несколько более поздних исследований противоречат этому первоначальному выводу. В частности, мы сосредоточимся на двух статьях, которые затрагивали два разных типа задач. Одна, опубликованная в 2013 году в журнале Ergonomics, посвящена остроте зрения и производительности чтения, а другая, опубликованная в 2017 году в Applied Ergonomics, посвящена исследованию эффективности беглого чтения – быстрое чтение 1-2 слов, которым люди часто занимаются, взаимодействуя с мобильным телефоном, смарт-часами или приборной панелью автомобиля, и которое присутствует в таких действиях, как проверка направления движения или уведомлений.
Влияние контрастной полярности на остроту зрения и корректуру
Козима Пипенброк и ее коллеги из Института экспериментальной психологии в Дюссельдорфе, Германия, изучили две группы взрослых людей с нормальным (или откорректированным до нормального) зрением: молодые люди (от 18 до 33 лет) и пожилые люди (от 60 до 85 лет). Никто из участников не страдал какими-либо заболеваниями глаз (например, катаракта).
Участникам были даны два разных типа заданий:
- Задача на проверку остроты зрения, которая включала обнаружение разрыва в кольцах оптометрической таблицы Головина (Landolt C) – другими словами, им показывали по-разному расположенный символ, аналогичный букве «C», и просили определить, где находится разрыв (например, сверху, внизу).
- Задача на корректуру (вычитку), включающая чтение короткого отрывка текста и выявление различных типов ошибок.
Задания были представлены в разной контрастной полярности – для некоторых участников они были в темной теме, а для других в светлой. Контрастная полярность была переменной между субъектами, это означало, что каждый участник видел задачи только в одной контрастной полярности (например, только в темной теме).
Исследователи также собрали данные об усталости до и после теста: участники оценивали напряжение глаз, головную боль, напряжение мышц, боль в спине и субъективное самочувствие, как в начале, так и в конце эксперимента.
Их результаты показали, что светлая тема победила во всех измерениях: независимо от возраста, положительная контрастная полярность была лучше, как для задач на остроту зрения, так и для задач на корректуру. Тем не менее, разница между светлой и темной темой в задании на остроту зрения была меньше для пожилых людей, чем для молодых. Это означает, что, хотя светлая тема была лучше для пожилых людей, они не получали от нее такой же пользы, как молодые люди, по крайней мере, в задании на остроту зрения.
Когда исследователи посмотрели на показатели усталости, они пришли к выводу, что не было существенной разницы в контрастной полярности (это означает, что люди не устают больше от темной темы или наоборот).
Другое исследование, опубликованное в журнале Human Factors той же исследовательской группой, рассматривало, как размер текста взаимодействует с контрастной полярностью в задачах на корректуру.
Было установлено, что преимущество положительной полярности линейно возрастает с уменьшением размера шрифта, а именно: чем меньше шрифт, тем лучше пользователь видит текст в светлой теме. Интересно, что даже при том, что их производительность была лучше в светлой теме, участники исследования не сообщали о каких-либо различиях в восприятии читабельности текста (например, их способность фокусироваться на тексте) в светлой и темной теме, что только усиливает первое правило юзабилити: не слушайте пользователей.
Влияние контрастной полярности на беглое чтение
Джонатан Добрес и его коллеги из лаборатории Agelab Массачусетского технологического института предприняли попытку количественно определить, влияют ли условия окружающего освещения на преимущество положительной полярности в контексте задачи лексического решения. Задача лексического решения – парадигма, обычно используемая в психологии. Участникам показывают последовательность букв и заставляет их решать, является ли это словом или нет. Задача лексического решения больше похожа на беглое чтение, которое мы выполняем в условиях высокой прерываемости, таких как управление автомобилем, использование в пути мобильного телефона или смарт-часов. Она включает в себя быстрый просмотр дисплея и извлечение соответствующей информации.
Участники исследования Agelab имели нормальное или откорректированное зрение. Им показывали строки символов с двумя возможными контрастными полярностями (темная и светлая тема), при различном окружающем освещении (дневное и ночное) и разном размере шрифта.
Исследование показало, что освещение, полярность и размер текста влияют на производительность. Смоделированное дневное время приводит к более быстрым суждениям, чем смоделированное ночное время, светлая тема лучше, чем темная, и больший шрифт быстрее распознается, чем меньший. Интересным результатом была значительная взаимосвязь между окружающим освещением и контрастной полярностью: в дневное время не было значительного влияния контрастной полярности, но в ночное время светлая тема давала лучшие показатели, чем темная. Более того, в темное время суток людям было намного труднее читать мелкий шрифт в темной теме, чем в светлой.
Люди читали быстрее в дневное время, чем в ночное, в светлой теме, чем в темной, и с большими размерами шрифта (4 мм), чем с меньшими размерами (3 мм). В ночное время светлая тема была значительно лучше темной, а мелкий шрифт намного легче читался в светлой теме. (Более короткие столбцы лучше, чем более высокие. Обратите внимание, что показатель времени, указанный в эксперименте, по сути, представляет собой время, необходимое участникам для правильной оценки представленной строки).
Отсутствие эффекта полярности в смоделированных дневных средах было несколько удивительным и не соответствовало другому более старому исследованию, проведенному Бухнером и Баумгартнером. В нем также рассматривались условия освещенности днем и ночью. Тем не менее, в этом исследовании яркий окружающий свет был намного слабее, чем тот, который использовался в исследовании Agelab (например, офисный свет или яркий уличный свет). Добрес и его коллеги утверждают, что количество окружающего света может повлиять на преимущество положительной полярности, при этом яркий свет приводит к нулевой разнице, но обычный офисный свет все еще способен создавать разницу.
Долгосрочные эффекты
В изученной нами литературе рассматриваются одноразовые эффекты контрастной полярности на зрение человека. Но как насчет долгосрочных эффектов? Другими словами, имеет ли длительное воздействие контрастной полярности какое-либо влияние?
Интересное исследование, опубликованное в научных отчетах Nature Research в 2018 году, предполагает, что длительное воздействие светлой темы может быть связано с близорукостью. Близорукость (или миопия) означает неспособность ясно видеть объекты вдалеке и тесно связана с чтением и уровнем образования. В своем исследовании Андреа Алеман и ее коллеги из Тюбингенского университета в Германии попросили 7 человек прочитать текст, представленный в темной и светлой темах, по часу для каждой. Чтобы увидеть, изменилась ли их предрасположенность к близорукости после чтения, они измерили толщину сосудистой оболочки мембраны позади сетчатки. Истончение сосудистой оболочки связано с близорукостью.
Исследователи обнаружили значительное истончение этой мембраны, когда участники читают текст, представленный в светлой теме, и значительное утолщение при чтении текста в темной теме. Истончение было более выраженным у участников, уже страдающих близорукостью.
Этот результат свидетельствует о том, что, хотя производительность в светлой теме может быть лучше в краткосрочной перспективе, с этим могут быть связаны долгосрочные проблемы.
Пользователи с нарушениями зрения
Как это ни парадоксально, но материалов о пользователях с нарушениями зрения, намного больше, чем о людях с нормальным зрением. Хотя существует негласное мнение, что темная тема лучше, по крайней мере, для некоторых людей с нарушениями зрения. Гордон Легж и его коллеги из Университета Миннесоты определяют две категории слабовидящих: (1) из-за нарушений центрального зрения и (2) из-за нарушения прозрачности оптических сред глаза.
К оптическим средам относятся различные прозрачные вещества в глазу, включая роговицу и хрусталик. Наиболее распространенной причиной нарушения прозрачности глазных сред является катаракта, которая относится к помутнению хрусталика и довольно часто встречается у пожилых людей. Катаракта рассеивает и блокирует часть света, который достигает сетчатки через линзу и, таким образом, предотвращает создание четкого, сфокусированного изображения на вашей сетчатке.
Еще в 1977 году исследование Слоуна показало, что некоторые люди со слабым зрением предпочитают темную тему. (В наших собственных исследованиях доступности, Кара Пернис заметила, что пользователи со слабым зрением иногда переключаются между темной и светлой темами в попытке добиться четкости изображения). В 1985 году Гордон Легг и его коллеги из Университета Миннесоты предположили, что этот эффект обусловлен «ненормальным рассеянием света из-за нарушения прозрачности оптических сред глаза». По-видимому, потому что, если больше света попадает в глаз через мутную линзу, существует большая вероятность искажения. Таким образом, темная тема может быть лучше для людей с нарушениями прозрачности оптических сред глаза, потому что дисплей излучает меньше света.
В исследовании Легга каждый из 7 участников с помутнением оптической среды глаза имел лучшие показатели чтения при темной теме, тогда как на остальных участников с нарушениями центрального зрения, контрастная полярность не оказывала воздействия.
Исследования Легга послужили основой рекомендовать переход современных компьютерных интерфейсов на темную тему. В 2005 году Пападопулос и Гудирас в своей статье рассматривали различные передовые методы обеспечения доступности для пользователей со слабым зрением, и рекомендовали наличие темной темы в пользовательских интерфейсах.
Ряд исследователей в области нормального зрения отметил, что исследования Легга пользователей со слабым зрением проводились на ЭЛТ-дисплеях, в отличие от LED-дисплеев, используемых в большинстве современных девайсов. Эти дисплеи были более подвержены мерцанию в светлой теме, чем в темной, таким образом, возможно, смещение результатов для светлой темы.
Выводы
Хотя темная тема может представить ряд преимуществ для некоторых пользователей со слабым зрением – в частности, страдающих катарактой, данные исследования указывают на преимущество положительной полярности для пользователей с нормальным зрением. Другими словами, у пользователей с нормальным зрением светлая тема в большинстве случаев приводит к лучшей производительности.
Почему светлая тема дает лучшую производительность? Эти результаты лучше всего объясняются тем фактом, что при положительной контрастной полярности общего света становится больше, и поэтому зрачок больше сокращается. В результате меньше сферических аберраций, большая глубина резкости и в целом лучшая способность фокусироваться на деталях без утомления глаз.
Несмотря на то, что у людей с нормальным зрением шрифт большего размера и яркое окружающее освещение могут стереть некоторые из этих преимуществ, мы не рекомендуем переходить на темную тему по умолчанию, если ваша целевая аудитория включает население в целом.
При этом мы настоятельно рекомендуем дизайнерам разрешить пользователям по желанию переходить на темную тему – по трем причинам: (1) могут быть долгосрочные эффекты, связанные со светлой темой; (2) некоторым людям с нарушениями зрения будет лучше работать в темной теме; и (3) некоторым пользователям просто нравится темная тема. (Мы знаем, что люди редко меняют настройки по умолчанию, но у них должна быть возможность это сделать). Маловероятно, что люди изменят режим отображения для случайного сайта, но, если они часто используют веб-сайт или приложение, им может понадобиться такая опция. В частности, приложения, предназначенные для чтения в длинных формах (такие как книги, журналы и даже новостные сайты), должны предлагать функцию темной темы. И этот вариант в идеале должен распространяться на все экраны этого сайта или приложения. Более того, если операционная система предоставляет API темной темы (как в iOS), убедитесь, что вы используете его. Это даст возможность пользователям использовать ваше приложение или сайт в выбранном ими режиме контрастной полярности.
Раз и навсегда про тёмную тему или почему вам «на самом деле» нужна тёмная тема
Существует ли вообще указанная «проблема» и так ли на самом деле всем «нужна» тёмная тема? Сей вопрос, кажется, уже как и где только ни обсасывался, но взглянув на аргументацию большинства статей по теме захотелось разобраться ещё подробнее. Если вы нетерпеливы и просто хотите знать ответ на вопрос из заголовка — просто листайте до выводов.
Начнём издалека, поэтому для начала выясним, что на сей счёт думают сами пользователи, чья работа подразумевает восьмичасовое просиживание глаз за монитором, то есть самая чувствительная к проблеме категория — программисты.
Например, по результатам опроса на сайте 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 лет назад. И я считаю, что все исследования читабельности цветовых схем на экранах, сделанные раньше начала нулевых, следует попросту игнорировать по одной простой причине — практически все они проводились на ЭЛТ мониторах. Причин, по которой инвертированная схема на ЭЛТ выглядит хуже, две:
ЭЛТ так устроен, что изображение постоянно «моргает» и в перерывах между обновлениями маленький белый текст даёт меньше света;
Низкая контрастность мелкого белого текста, ввиду несовершенства технологии ЭЛТ.
Более того, если текст на ЭЛТ отображается близко к углам, к этому ещё добавляются дополнительные искажения (нижняя часть первого фото под спойлером).
Макро-фотографии различных схем на ЭЛТ и ЖК-дисплеях
Для современных ЖК-дисплеев разница уже не столь однозначна:
Кстати, 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].
Более того, есть ряд заболеваний, при которых катаракта является осложнением и встречается в более раннем возрасте, так что доля тех, кто видит сайты размытыми, ещё выше.
Почему так происходит? Ответ прост — при катаракте чаще всего (хотя и не всегда) мутнеет центр хрусталика, из‑за чего при суженном зрачке всё поле зрения оказывается мутным, однако когда на сетчатку попадает меньше света (тёмная тема), зрачок несколько расширяется и для формирования изображения начинают использоваться больше прозрачных областей хрусталика, поэтому воспринимается более чётко.
И поверьте, я не теоретизирую — у меня самого уже несколько лет катаракта, вследствие чего я вынужден пользоваться исключительно тёмной темой везде, где это возможно (к сожалению пока не везде).
К слову, ещё существуют люди, страдающие фотофобией, им тёмная тема тоже облегчает пользование сайтами, хотя таких людей действительно не так много, но всё же.
Резюме
Итак, для любителей читать только последние абзацы, краткие выводы из всех моих растеканий по древу:
Если ваш сайт\приложение требует повышенной концентрации внимания, возможно «светлая» цветовая схема для вас будет оптимальна, если конечно не подразумевается длительного использования, в противном случае существует шанс, что накопленное утомление глаз будет перевешивать позитивные эффекты от повышения концентрации внимания вызванного общей повышенной яркостью.
При длительном использовании «тёмные» цветовые схемы вызывают меньше утомления глаз.
Большая часть пользователей вынужденных проводить за компьютером длительное время предпочитает тёмную тему независимо от того что лично вы думаете на сей счёт.
Если вам не безразлично как ваш сайт видят люди с нарушениями зрения — вы должны предоставить пользователям возможность использовать тёмную тему независимо от того согласны ли вы с первыми двумя пунктами.
Многие крупные сайты постепенно начали исправляться, не так давно тот же Яндекс начал добавлять тёмную тему для всех своих сервисов, за что этим ребятам большой почёт и уважение (хотя команда Маркета что‑то не торопится).
Очень помогает и небезызвестный DarkReader, хотя он не везде работает корректно и иногда тормозит, это всё же лучше чем ничего. Кстати у Chrome есть даже встроенная возможность принудительно включить тёмную тему (chrome://flags/#enable‑force‑dark), но работает оно не всегда лучшим образом.
К сожалению, многие разработчики считают, что тёмная тема это нечто из разряда примочек, которые можно реализовать когда‑нибудь по остаточному принципу. Например почти во многих крупных проектах в которых я работал, архитектура предусматривала возможность устанавливать собственную тему, для этого нужно было всего лишь добавить ещё один файл стилей и добавить одну крошечную настройку в профиль пользователя, но на это, разумеется никто не выделял времени, потому что «у бизнеса другие таски» (ну да вы наверняка и сами знаете как оно бывает).
Хочется думать, что здесь всё ещё значительное число людей, имеющих непосредственное отношение к веб‑разработке, поэтому надеюсь обратить на проблему ваше внимание. Спасибо за прочтение и не болейте!
Upd. Вижу некоторые читатели не совсем верно меня поняли и упомянули, что я забыл про другие нарушения со зрением, например астигматизм, при котором тёмная тема читается хуже. Я ни в коем случае не забыл и я, конечно не призываю делать доступной только тёмную тему, нет. Дело в том, что у абсолютного большинства сайтов и приложений доступна лишь светлая тема. Речь скорее о том, что у пользователя должен быть выбор.
Список использованных источников
Effects of Background Colors on Reading Speed (Yigit Aslan, 2019)
Positive display polarity is advantageous for both younger and older adults (Piepenbrock, Mayr, Mund, Buchner, 2013)
Readability Of Websites With Various Foreground / Background Color Combinations, Font Types And Word Styles (Hill and Scharff, 1997)
The Effect of Web Page Text-Background Color Combinations on Retention and Perceived Readability, Aesthetics and Behavioral Intention (Hall & Hanna, 2003)
Text – background polarity affects performance irrespective of ambient illumination and colour contrast (Buchner & Baumgartner, 2007)
Effect of Illuminance on Human Work Performance, an assessment based on Lighting Laboratory experiment (Shafique Rahman, 2018)
Illuminating the Effects of Dynamic Lighting on Student Learning (Mott, et al., 2012)
Smaller pupil size and better proofreading performance withpositive than with negative polarity displays (Piepenbrock, Mayr, Buchner, 2014)
Positive display polarity is particularly advantageous for small character sizes: implications for display design (Piepenbrock, Mayr, Buchner, 2014)
Study on the Effects of Display Color Mode and Luminance Contrast on Visual Fatigue (Xie, Song, Liu, et al., 2021)
Распространенность офтальмологических заболеваний
в популяционной выборке старше 50 лет (Мунц, 2020)