для чего нужна темная тема
Почему разработчики так любят тёмную тему
– Скажи мне, почему разработчики так любят тёмную тему?
– А ты попробуй ночью под одеялом влупить светлую!
Иногда мне хочется бросить всё, сказать, что я птичка, и мне всё это сложно. Потом я вспоминаю, что айтишники – это лучшие люди из всех, кого я только встречала, и, превозмогая боль и слёзы, я продолжаю их исследовать. В этой статье я пытаюсь понять истоки влечения к тёмной теме, а также качнуть лодку и дать шанс светлой.
После того разговора про боль в глазах от светлой темы под одеялом, у меня остались некоторые вопросы:
В ответ я хотела получить развёрнутые мысли с детальной аналитикой, ссылками на исследования в проверенных источниках, сравнительные аналогии, но вместо всего этого чаще получала: «Она мне просто больше нравится».
В итоге у меня сложилось впечатление, что для многих разработчиков тёмная тема – это аксиома. Выбор, не требующий доказательств. Но! Пользуюсь случаем, своим незнанием и желанием докопаться до истины, я решила углубиться в этот вопрос по-настоящему.
Аргументы за использование светлой темы
Как известно, весь мир делится на практиков и теоретиков. В то время, как разработчики просто берут и меняют предустановленные светлые темы на тёмные, учёные ведут неравный бой за обеление светлой темы и доказательство её преимуществ.
Аргументы за использование тёмной темы
А что если учёные, которые топят за «чёрным по белому» ошибаются? Здесь я собрала причины, по которым тёмные темы так любы-дороги разработчикам:
Спорные территории где-то между тёмным и светлым
Следующие три пункта я хочу оставить для дискуссии в комментариях. Пишите своё мнение, опыт, кидайте ссылки на исследования.
И тут я поверила
Пока я писала эту статью, у меня случилась беседа с нашим дизайнером, который рассказывал мне, как переделал внутренний интерфейс одного из наших сервисов. Каково же было моё удивление, когда к концу рассказа оказалось, что светлая темы интерфейса сменилась на тёмную. Тут я не выдержала и, воздев руки к небу, спросила: «Да почему. Почему тёмная тема и здесь?»
На что дизайнер ответил: «Да посмотри же! Разве ты не видишь, что так лучше видно? Это же простые законы контрастности! А если выделить на тёмной теме текст жирным, то он будет восприниматься как более читаемый!»
В тот момент я была не готова уверовать в эту точку зрения, потому что мысленно всё ещё пребывала на светлой стороне силы. Так я и жила ещё пару дней, пока как-то раз не вышла из вагона метро ровно посередине перрона. Посмотрела налево и увидела чёрным по белому написано… Точнее, не увидела.
А через пару минут села в автобус, а там мне рыжим по чёрному пишут! И тут я уверовала.
Истина где-то рядом
Истина где-то рядом, и если отходить от вопросов коллективного бессознательного, вкусовщины и прочего объективно-субъективного, можно прийти к следующим выводам:
Переходим на темную сторону: что такое темная тема и зачем она нужна в приложении
Преимущества использования темного режима
Темная тема — не просто модное увлечение. Она дает три положительных эффекта, о которых сейчас расскажем.
Забота о здоровье
Когда мы резко заходим из светлого помещения в темное, то «слепнем» на несколько минут. Это некомфортно, но адаптация проходит быстро. А вот если наоборот, из светлого помещения переходим в темное, то привыкание займет долгое время (20-30 минут).
Точно так же обстоят дела и со смартфонами. Когда мы смотрим на яркий дисплей в темном пространстве, наше зрение долго адаптируется к темноте. И сопровождается дискомфортом для глаз.
Есть также исследования Гарвардского университета, что пользование электронными устройствами с ярким дисплеем перед сном подавляет секрецию мелатонина. А недостаток этого гормона вызывает диабет, депрессию и, возможно, ожирение.
Экономия заряда батареи
Компания Google протестировала влияние темной темы на аккумуляторы телефонов и получила следующие результаты:
При яркости в 50 % темная тема в приложении «Youtube» экономит заряд на 15 %. При яркости в 100 % экономия заряда батареи составляет аж 60 %!
Без темного режима все белое пространство на дисплее вашего телефона требует больше энергии, что, в свою очередь, разряжает батарею.
Сделаем важную оговорку: темная тема экономит заряд на экранах OLED/amoled, которые используют устройства под управлением Android. Но Apple делает смартфоны на LCD (жидкокристаллический экран). Однако в прошлом году компания анонсировала, что поменяет дисплеи в 2020 году. И действительно, вышел флагманский смартфон iPhone 11 Pro с OLED-экраном.
Красивый дизайн
Темный режим кажется интересным за счет новизны и дает возможность представления графических элементов (рисунки, информационные графики) в необычном свете.
Некоторые оттенки выглядят лучше на темном фоне, чем на светлом. Например, ваши брендовые цвета могут быть блеклыми и на светлом фоне просто теряться.
Плюс, согласно исследованиям, темный фон позволяет дольше удерживать пользователей в приложении.
Примеры темных тем
Android 10
Google долгое время тестировал темную тему в приложении GMail и наконец-то в августе 2019 года включил ее в Android 10. Плюс компания дала сторонним разработчикам инструменты для интеграции их приложений с темной темой. 
iOS 13
Apple также выкатили темный режим в своих продуктах, работающих на iOS 13. В Dark Mode система использует более темную цветовую палитру, чтобы контент выделялся на таком фоне. 
Мессенджер еще тестирует темную тему. Для смены варианта отображения, нужно сначала включить новый интерфейс в настройках, а потом передвинуть ползунок «Темный режим». 
VKontakte
Также добавили темную тему в приложение. Как утверждают разработчики VK, они переработали более 2 000 файлов, чтобы подобрать цветовые гаммы. Активировать опцию можно в разделе «Настройки». 
Кому нужна темная тема
Темная тема — это дополнение к основной светлой теме, соответственно разработка новой опции несет дополнительные и необязательные затраты. Поэтому ее делают далеко не все, а те, кто может позволить себе выделить бюджет для большего удобства клиентов.
Необходимо провести анализ, как часто и в какое время пользователи включают ваше приложение. Возможно, у вас много контента, который нужно долго просматривать.
Например, наш Заказчик компания «ТрансТехСервис» занимается продажей новых и подержанных автомобилей. В этой нише до совершения покупки люди тратят много времени на изучение ассортимента. Клиенты могут по несколько часов просматривать товары в приложении, в том числе и ночью. Для ТТС разработка темной темы в приложении будет вложением в бизнес, а не затратой. 
В этом случае, даже если ваши клиенты пользуются устройствами на базе Android 10 или iOS 13, которые могут сами переключить светлый режим на темный, все равно нужно помнить о собственном решении. Так как реализованная штатными инструментами смартфонов темная тема не всегда выглядит хорошо, а иногда даже очень плохо, что определенно будет мешать пользователям вашего приложения.
Проливаем свет: так ли полезна темная тема для глаз?
Как работает и всем ли подходит
Темная тема, или темный режим (Dark Mode), держится в трендах последние несколько лет. Разработчики сайтов, приложений и операционных систем добавляют переключение на темный интерфейс и заявляют, что он помогает сосредоточиться на работе, экономит заряд батареи и снижает нагрузку на глаза. Разбираемся, действительно ли темная тема полезна.
До темного экрана додумались только сейчас?
Вовсе нет. Когда домашние компьютеры только начинали появляться, популярный сегодня темный режим был единственным и безальтернативным.
Внутреннюю часть экрана монохромных мониторов с электронно-лучевой трубкой (ЭЛТ) обрабатывали специальным покрытием — люминофором. Именно благодаря ему картинка на таких мониторах была «матричной». Так что называть темный режим чем-то новым не совсем правильно.
Неудивительно, что при такой статистике любое новое решение проблемы синдрома компьютерного зрения сразу воспринимается как чудодейственное средство. Что и произошло с темной темой. У нее появилась армия фанатов, журнал Popular Science называл темный режим «отличной и удобной альтернативой ослепляющему белому цвету», многие издания открыто писали, что темная тема избавит пользователей от проблем с глазами. Однако мнение экспертов отличается.
А кто против?
Но не может же этот режим совсем не работать, раз у него даже армия фанатов есть!
Восприятие информации глазами может отличаться в зависимости от внешних факторов. В тусклом помещении нагрузка на глаза будет выше из-за яркой подсветки, при ярком освещении нагрузку увеличит экран с включенным темным режимом. В некоторых случаях именно «классический» вариант с темным текстом на белом фоне будет более полезным для здоровья глаз.
Мне-то что делать?
Если вас действительно беспокоит сухость или усталость глаз, возможно, стоит купить капли искусственная слеза или специальный матовый экран для устройства. Иногда могут помочь регулировка яркости и контрастности экрана, настройка источников света и расположение экрана.
Так нужно использовать темный режим или нет?
Нельзя утверждать, что темная тема лучше для глаз, — доказательств этому не существует. В некоторых случаях она может помочь, в других, наоборот, усилит дискомфорт.
Но точно можно сказать, что чем больше вариантов отображения существует, тем лучше. Выбор темы — вопрос личных предпочтений. А вот что действительно поможет глазам, так это не смотреть в экран сутки напролет.
Тёмная тема vs Светлая тема: что лучше?
Примечание переводчика: тёмная тема в дизайне интерфейсов к 2020 году стала чуть ли не обязательной. Вслед за Apple и Android на поезд Dark Mode «впрыгнули» и другие крупнейшие игроки рынка (например, Google, What’s App, Instagram). Тёмную тему любят по нескольким причинам:
У людей с нормальным (или скорректированным до нормального) зрением зрительное восприятие лучше работает со светлой темой, в то время как людям, имеющим катаракту или другие нарушения зрения, проще иметь дело с тёмной темой.
С другой стороны, в долгосрочной перспективе чтение в светлом режиме может стать причиной близорукости.
Спустя некоторое время после презентации тёмной темы на iOS 13 меня попросили высказать своё мнение о пользовательских характеристиках тёмной темы и её популярности в дизайне. Этот же вопрос мне не раз задавали и на нашей UX конференции.
iOS 13: Светлая тема (слева), тёмная тема (справа)
Должна сразу сказать, что NN/g (Nielsen Norman Group) не проводили своего собственного исследования на эту тему. Тем не менее эти вопросы заставили меня обратиться к академической литературе, исследующей вопрос, несёт ли в себе тёмная тема какие-либо преимущества для здоровых пользователей и пользователей с нарушениями зрения. В этой статье я поделюсь с вами своими открытиями и выводами, но сперва давайте определимся с терминами:
Полярный контраст — термин, который используется для описания контраста между текстом и фоном.
Положительный полярный контраст (светлая тема) относится к тёмному тексту на светлом фоне.
Отрицательный полярный контраст (тёмная тема) обозначает сочетание светлого (т. е. белого) текста на тёмном (т. е. чёрном) фоне.
В тёмной теме дисплеи испускают меньше света, чем в светлой, таким образом, способствуя энергосбережению батареи. Но количество света в окружающей среде влияет не только на энергопотребление, но и на наше восприятие. Чтобы понять, как это работает, давайте кратко пройдёмся по базовым знаниям о человеческом зрачке и том, как он реагирует на количество света в помещении.
Человеческий зрачок чувствителен к количеству света
Человеческий зрачок — это ворота в сетчатку: через него свет попадает в глаз. По умолчанию, наш зрачок изменяет размер в зависимости от количества света в окружающей среде: когда света много, он сокращается и становится уже, а когда темно, он расширяется, чтобы впустить внутрь больше света. Меньший размер зрачка делает глаз менее восприимчивым к сферическим аберрациям (которые нарушают чёткость изображения) и увеличивает глубину резкости, из-за чего человеку не приходится прикладывать усилия, чтобы сфокусироваться на тексте, что в свою очередь означает, что его глаза меньше устают во время чтения (апертура камеры работает по тому же принципу: фото, снятое при диафрагме f/2.8, будет иметь меньшую глубину резкости, чем фото, снятое при f/16, и соответственно будет более размыто).
С возрастом зрачок уменьшается в размере. Слишком маленький размер зрачка означает, что света внутрь попадает недостаточно, что снижает нашу способность читать и распознавать текст, особенно в слабом рассеянном свете (например, ночью). С другой стороны, чем старше мы становимся, тем восприимчивее мы делаемся к ослеплению ярким светом, которое может возникнуть в условиях сильной освещённости.
Пользователи с нормальным зрением
Первые исследования, проведённые в 1980-х, привели к выводу, что у людей с нормальным или скорректированным (очками или контактными линзами) до нормального зрением полярный контраст не влияет на визуальное восприятие.
Тем не менее, более поздние исследования опровергают это начальное утверждение. Обратим внимание на следующие 2 статьи: одна, опубликованная в 2013 году в журнале Ergonomics (Эргономика), рассматривает остроту зрения и производительность чтения; вторая, опубликованная в 2017 Applied Ergonomics (Прикладная Эргономика), исследует эффективность скорочтения — быстрое прочтение 1-2 слов, которые часто встречаются людям при взаимодействии с мобильным телефоном, умными часами или приборной панелью автомобиля, а также на мобильных картах или уведомлениях.
Влияние полярного контраста на остроту зрения и корректуру текста
Козима Пипенброк (Cosima Piepenbrock) и её коллеги из Института экспериментальной психологии в Дюссельдорфе (Германия) изучали 2 группы взрослых людей с нормальным (и скорректированным до нормального) зрением: молодых людей в возрасте от 18 до 33 лет и старших в возрасте от 60 до 85 лет. Ни у кого из испытуемых не было глазных заболеваний (вроде катаракты и пр.).
Участникам были предложены 2 вида заданий:
Исследователи также собрали данные об усталости испытуемых до и после теста: напряжении глаз, головной боли, мышечном напряжении, болях в спине, и попросили дать оценку своему состоянию в целом, как до, так и после эксперимента.
Результаты показали, что светлая тема выиграла по всем направлениям: независимо от возраста положительный полярный контраст дал лучшие результаты и в задании на остроту зрения, и в задании на корректуру текста. Тем не менее, разница в результатах теста на остроту зрения в тёмной и светлой теме у старших испытуемых была меньше, чем у молодых, из чего можно сделать вывод, что светлая тема не даёт им особых преимуществ, по крайней мере, если дело касается остроты зрения.
Когда исследователи проверили метрики усталости, то пришли к выводу, что между результатами с разным полярным контрастом нет особенных расхождений, что означает, что, например, тёмная тема (впрочем, как и светлая) не повышает показатели утомляемости.
Другая научная работа, опубликованная в журнале Human Factors той же исследовательской группой, изучала взаимодействие размера текста и полярного контраста в заданиях по корректуре текста. Исследование показало, что эффективность светлой темы растёт в линейной прогрессии с уменьшением размера текста. Простыми словами: чем мельче текст, тем проще пользователю читать его в светлой теме. Интересно то, что хотя производительность участников была выше в светлой теме, никто из них не отметил никакой разницы в восприятии текста в тёмной и светлой темах (т. е. им не было сложнее фокусироваться на тексте в том или ином режиме). Впрочем, это только лишний раз доказывает первое правило юзабилити: не слушайте пользователей.
Влияние полярного контраста на беглость чтения
Джонатан Добрес (Jonathan Dobres) и его коллеги в MIT’s Agelab попытались дать количественную оценку, насколько освещённость влияет на эффективность светлой темы в контексте задачи «лексического решения». Задача «лексического решения» — метод в психологии, когда испытуемым предлагается серия букв, и они должны решить, является ли она словом или нет. Схожую задачу — беглое распознавание текста в условиях отвлечённости — мы решаем, когда ведём машину или пользуемся мобильным телефоном на ходу. Во всех перечисленных случаях требуется быстро взглянуть на дисплей и извлечь нужную информацию.
Участники исследования в Agelab имели нормальное и скорректированное до нормы зрение. Серии букв демонстрировались им в положительном и отрицательном полярном контрасте (светлой и тёмной темах), в разных условиях освещения (дневной и ночной свет) и в разных размерах шрифта.
Исследование показало, что и освещение, и полярный контраст, и размер текста оказывают влияние на производительность в тесте, причём довольно предсказуемым образом. Искусственный дневной свет помогает быстрее принимать решения, чем искусственный ночной свет, светлая тема работает лучше тёмной темы, а больший размер текста читается быстрее, чем меньший. Интересным моментом была значительная связь между освещённостью и полярным контрастом: при дневном освещении контраст не имел особого значения, но при ночном свете светлая тема дала лучшие результаты по сравнению с тёмной темой. Более того, при ночном освещении людям было гораздо сложнее прочесть мелкий текст в тёмной теме.
Люди выполняли задания быстрее при дневном освещении (чем при ночном), в светлой теме (чем в тёмной теме), при более крупном шрифте в 4 мм (чем при мелком шрифте в 3 мм). При ночном освещении светлая тема показала себя значительно лучше, чем тёмная, и мелкий шрифт было гораздо легче прочесть в светлой теме. Короткие столбцы показывают лучшие результаты. Отметим, что время, замеренное в эксперименте, является временем показа (демонстрации). Хотя оно и включает в себя больше факторов, чем чистое время оценки, оно по большому счёту отражает время, необходимое участникам для считывания показанной строки.
То, что разный полярный контраст дал фактически одинаковые результаты в тестах с искусственным дневным светом, стало неожиданностью, кроме того, это противоречит более раннему исследованию, проведённому Buchner and Baumgartner, которое также изучало влияние количества освещенности. Впрочем, в том исследовании использовался дневной свет гораздо меньшей силы, чем в эксперименте Agelab (надо полагать, речь про сопоставление офисного освещения и яркого дневного света). Добрес с коллегами настаивают на том, что сила дневного освещения влияет на эффективность светлой темы — яркий свет сводит её эффективность к нулю, в то время как рассеянный офисный свет усиливает её преимущество.
Долгосрочные последствия
Пока вся рассматриваемая нами литература исследовала краткосрочное влияние полярного контраста на производительность читателя. Но как насчёт долгосрочных последствий? Иными словами, будет ли долгосрочное использование светлой или тёмной темы иметь какой-либо эффект?
Интересное исследование, опубликованное в Nature Research’s Scientific Reports в 2018 году предполагает, что постоянное использование светлой темы может вызвать миопию. Миопия (или близорукость) — неспособность чётко видеть далёкие объекты — сильно обусловлена уровнем образования человека и тем, сколько он читает. В своём исследовании Андреа Эйлман (Andrea Aleman) и её коллеги в Университете Тюбингена в Германии дали 7 участникам задание 1 час читать текст в светлой теме, и 1 час — в тёмной теме. Чтобы понять, повысилась ли их предрасположенность к миопии, учёные замеряли толщину хориоидеи — сосудистой оболочки глаза. Истончение хориоидеи ассоциируют с миопией.
Исследователи обнаружили значительное истончение сосудистой мембраны, когда участники эксперимента читали текст в светлой теме, и значительное утолщение, когда читали в тёмной теме. Истончение было особенно заметно у участников исследования, которые уже страдали близорукостью. Этот результат позволяет предположить, что хотя наша производительность выше в светлой теме, за её долгое использование придётся заплатить свою цену.
Пользователи с нарушениями зрения
Парадоксально, но о людях с нарушениями зрения гораздо меньше научной литературы, чем о здоровых, хотя есть негласное соглашение, что тёмная тема рекомендована по меньшей мере некоторым из них. Гордон Легг (Gordon Legge) с коллегами из Университета Миннесоты выделяют два вида снижения зрения: 1) нарушения центрального зрения; 2) нарушение прозрачности глазных сред.
Глазными средами называют различные прозрачные субстанции глаза, включая
роговицу и хрусталик. Самая распространённая причина нарушения прозрачности — это характерная для пожилых людей катаракта, при которой происходит помутнение хрусталика. Катаракта рассеивает и блокирует часть света, который идёт к сетчатке и препятствует формированию на ней чёткого изображения.
Уже в 1977 году в исследовании Слоуна было отмечено, что некоторые люди со слабым зрением предпочитали тёмную тему. В наших собственных исследованиях на тему доступной среды Кара Пернис (Kara Pernice) также наблюдала, что пользователи со слабым зрением иногда переключались со светлой темы на тёмную с целью получить большую ясность. В 1985 Гордон Легг и его коллеги из Университета Миннесоты выдвинули гипотезу, что дело в «аномальном рассеивании света, вызванным помутнением глазных сред», ведь чем больше света попадает на затемнённую линзу, тем больше она даёт искажения. Таким образом, тёмная тема может быть лучше для людей с помутнением глазных сред, так как при ней экран излучает меньше света.
В экспериментах Легга все 7 участников с помутнением глазных сред выдали лучшие результаты по чтению в тёмной теме, в то время как участники исследования с нарушением центрального зрения никак не отреагировали на смену полярного контраста.
Эта работа Легга стала причиной наличия тёмной темы в современных компьютерных интерфейсах. В 2005 году Пападопулос (Papadopoulos) и Гудирас (Goudiras) в своей статье о доступной среде для слабовидящих пользователей рекомендовали, чтобы во всех пользовательских интерфейсах была возможность перейти со светлой темы на тёмную.
Правда, тут есть одна оговорка — исследование Легга проводилось с использованием ЭЛТ-мониторов (CRT), а в наше время их повсеместно вытеснили LED-мониторы. ЭЛТ-мониторы были склонны сильнее мерцать в светлой теме, чем в тёмной, что по всей видимости делает результаты эксперимента необъективными.
Выводы
Так стоит ли нам всем переходить на тёмную тему в свете её популярности сегодня? Хотя тёмная тема и несёт в себе пользу для людей с нарушениями зрения, в особенности связанных с помутнением глазных сред (например, катарактой), результаты исследований указывают на преимущество положительного полярного контраста для пользователей со здоровым зрением. Иными словами, здоровому человеку будет легче работать с текстом в светлой теме в подавляющем большинстве случаев.
Почему светлая тема повышает нашу производительность? Лучше всего это объясняется тем, что при положительном полярном контрасте излучается больше света, и зрачок больше сокращается, снижая сферические аберрации, увеличивая глубину резкости и нашу способность сфокусироваться на деталях, не утомляя глаз.
Хотя большой размер шрифта и яркие условия освещённости помещения могут нивелировать разницу, мы всё же не рекомендуем вам переходить на тёмную тему по умолчанию, если ваша целевая аудитория — не специализированная группа людей, а широкие массы населения.
Тем не менее, дизайнерам следует предусмотреть наличие тёмной темы в опциональном режиме по трём причинам: 1) светлая тема может привести к нежелательным последствиям в долгосрочной перспективе; 2) людям с определёнными нарушениями зрения будет проще работать в тёмной теме; 3) некоторым пользователям просто больше нравится тёмная тема. Мы знаем, что люди редко меняют настройки, принятые по умолчанию, но у них должна быть такая возможность. Конечно, вряд ли кто-то будет менять настройки отображения для какого-то случайного сайта, но если речь идёт о сайте или приложении, которым пользуются на постоянной основе, эта возможность должна быть предусмотрена. В особенности это касается приложений, предназначенных для длительного чтения, таких как приложения для чтения книг, журналы и новостные сайты. Причём в идеале эта функция должна присутствовать на всех страницах приложения или сайта. Более того, если операционная система сама предлагает тёмную тему в своих интерфейсах (как, например, iOS), воспользуйтесь этим, чтобы ваши пользователи сами могли выбирать тот полярный контраст, который они предпочитают.