Тёмная тема vs Светлая тема: что лучше?

в 8:01, , рубрики: dark mode, DarkMode, interface, UI, UX, близорукость, Блог компании FunCorp, веб-дизайн, дизайн, зрение, интерфейсы, исследование, катаракта, миопия, разработка мобильных приложений, тёмная тема, юзабилити

Тёмная тема vs Светлая тема: что лучше? - 1

Примечание переводчика: тёмная тема в дизайне интерфейсов к 2020 году стала чуть ли не обязательной. Вслед за Apple и Android на поезд Dark Mode «впрыгнули» и другие крупнейшие игроки рынка (например, Google, What’s App, Instagram). Тёмную тему любят по нескольким причинам:

  1. Она экономит расход батареи;
  2. Считается, что она снижает напряжение глаз, и с ней легче работать при слабом освещении;
  3. Некоторым она просто больше нравится.

Но, оставив в стороне рассуждения об эстетике тёмной темы, так ли уж она полезна для глаз? На самом ли деле тёмная тема повышает продуктивность работы с текстом? Ралука Будиу (Raluca Budiu) из Nielsen Norman Group даёт исчерпывающие ответы.

* * *

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

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

Спустя некоторое время после презентации тёмной темы на iOS 13 меня попросили высказать своё мнение о пользовательских характеристиках тёмной темы и её популярности в дизайне. Этот же вопрос мне не раз задавали и на нашей UX конференции.

image

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 имели нормальное и скорректированное до нормы зрение. Серии букв демонстрировались им в положительном и отрицательном полярном контрасте (светлой и тёмной темах), в разных условиях освещения (дневной и ночной свет) и в разных размерах шрифта.

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

image

Люди выполняли задания быстрее при дневном освещении (чем при ночном), в светлой теме (чем в тёмной теме), при более крупном шрифте в 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), воспользуйтесь этим, чтобы ваши пользователи сами могли выбирать тот полярный контраст, который они предпочитают.

Автор: Olga Malysheva

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js