Как пользователи воспринимают тёмную тему и как избежать проблем при её проектировании 

Резюме: Тёмная тема популярна, но использовать её необязательно. Людям нравится тёмная тема, но она никак не влияет на их поведение. Они рассматривают её на уровне системы, а не приложения. Если вы решите внедрить поддержку тёмной темы, протестируйте дизайн, чтобы предотвратить типичные проблемы, которые с ней связаны.

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

Содержание статьи:

• Почему люди говорят, что им нравится тёмная тема
• Что пользователи ожидают от тёмной темы
• Каких проблем, связанных с тёмной темой, следует избегать
• Тёмная тема: лучшие практики

Почему люди говорят, что они используют тёмную тему

В недавнем опросе 115 участникам задали вопрос, в каком режиме они обычно используют свои мобильные устройства. Примерно 1/3 ответили, что выбирают тёмную тему, 1/3 — светлую тему, и 1/3 — сочетают обе темы. Аргументы в пользу того, что тёмная тема улучшает опыт взаимодействия, а в некоторых случаях и доступность, всегда сводятся к нескольким одинаковым причинам, упомянутым как пользователями, так дизайнерами и разработчиками:

• Снижение нагрузки на глаза
• Экономия заряда батареи
• Эстетическая привлекательность
• Улучшение доступности для людей с нарушениями зрения, например, катарактой

Давайте детальнее рассмотрим часто упоминаемые причины поддержки и использования тёмной темы.

Снижение нагрузки на глаза

Снижение нагрузки на глаза — наиболее распространённая причина, которую пользователи с нормальным зрением упоминают при выборе тёмной темы. Как сказал один из участников исследования: «Мои глаза всегда были чувствительны к яркому свету. Поэтому в идеале я использую тёмную тему везде, где можно. [...] Я не думаю, что смогу вернуться к обычному режиму. [Мои] глаза устают намного меньше. Мне кажется, что и голова у меня меньше болит [...]».

Хотя тёмная тема не гарантирует полного избавления от головной боли, многие в это верят. И это побуждает их устанавливать тёмную тему на своих девайсах.

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

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

Экономия заряда батареи

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

На вопрос о причинах использования тёмной темы некоторые участники опроса говорили: «[Тёмная тема] экономит заряд батареи больше, чем светлая» или «Для экономии заряда батареи». Большинство пользователей, вероятно, включают тёмную тему в настройках операционной системы, предполагая, что таким образом она даёт им максимальные возможности сэкономить заряд батареи на устройстве. И они не задумываются о том, поддерживает ли индивидуальный дизайн тёмную тему или нет. Это происходит потому, что большинство людей не до конца понимают суть процесса.

Правда в том, что тёмная тема может экономить заряд батареи только на устройствах с OLED-дисплеями (Organic Light-Emitting Diode — органический светодиод). По состоянию на 2023 год примерно половина выпускаемых смартфонов использует OLED-дисплеи. Для справки, первым iPhone с OLED-дисплеем был iPhone X, который вышел в 2017 году. OLED-дисплеи управляют каждым пикселем индивидуально и передают каждому столько энергии, сколько необходимо в данный момент. Это означает, что когда в некоторых составляющих дизайна есть тёмные цвета, пиксели могут потреблять меньше энергии, чем те, которые отображают более яркие цвета. Пиксели чисто чёрного цвета (#000000), могут полностью выключиться и сэкономить наибольшее количество энергии.

Результаты исследования Университета Пердью показали, что при использовании тёмной темы при 100% яркости экрана потребление энергии в среднем снижалось на 67%. Однако при 30% яркости экрана средние показатели энергосбережения в условиях тёмной темы падали до 14%. Другими словами, когда речь идёт о потреблении заряда батареи, яркость экрана так же важна, как и режим отображения.

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

Эстетическая привлекательность

Многим людям просто нравится, как выглядит интерфейс в тёмной теме. Некоторые участники опроса оставили комментарии вроде: «Визуально мне нравится тёмная тема», «Мне нравится вид тёмного экрана» и «Тёмная тема куда круче».

Некоторые дизайнеры даже создают проекты исключительно в тёмной теме и не позволяют пользователям переключаться на светлую. В большинстве таких случаев первоначальный выбор тёмной темы — решение с позиции эстетики, которое не способствует повышению удобства использования. Например, компания Spotify выбрала отображать контент в тёмной теме на постоянной основе, потому что пользователям она показалась более привлекательной по сравнению со светлой. Те, кто повлиял на это дизайн-решение Spotify, сравнивали опыт использования приложения с походом в кинотеатр. Они подчеркнули, что менее важные элементы интерфейса на тёмном фоне могут стать менее заметными. Что в первую очередь они отдают приоритет яркой графике и обложкам альбомов, также как тёмный зал кинотеатра не отвлекает внимание от фильма на экране. Похожая логика руководит дизайном многих видеостриминговых приложений, таких как Netflix, Hulu, Disney+, Peacock, Kanopy, Max и Amazon Prime Video — ни в одном из них невозможно переключиться на светлую тему.

Эффект эстетики в юзабилити гласит, что когда люди считают дизайн привлекательным, они предполагают, что его легче использовать. Один из участников отметил: «Мне нравится эстетика тёмной темы. Всё кажется более современным и удобным в использовании». Однако подобных комментариев недостаточно для того, чтобы изначально создавать все дизайн-проекты в тёмной теме. Эстетически приятный визуальный дизайн не может компенсировать плохое юзабилити. У его основ мало общего с тёмной и светлой темами. Если у вас есть сомнения, попробуйте провести несколько тестирований юзабилити, используя одни и те же задачи в режимах светлой и тёмной темы в собственном приложении или в приложении конкурента. Маловероятно, что цветовая схема станет самой большой проблемой юзабилити.

Улучшение доступности для людей с нарушениями зрения

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

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

Итак, стоит ли поддерживать тёмную тему?

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

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

Что пользователи ожидают от тёмной темы

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

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

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

Например, один из участников тестирования юзабилити потратил несколько минут, чтобы найти рождественские носки на Etsy в режиме тёмной темы (смотрите изображение ниже). Когда он нашёл понравившийся носок, он перешёл на отдельный сайт, чтобы оценить стоимость вышивки на носках. Этот сайт не поддерживал тёмную тему. Когда участник открыл его, он не прокомментировал тот факт, что сайт не поддерживал тёмную тему. У него также не возникло никаких сомнений перед его использованием. Примерно через 10 минут, когда его спросили, поддерживали ли какие-либо сайты или приложения, которые он использовал во время сессии, тёмную тему, он ответил: «Мне кажется, все они открывались в режиме тёмной темы. Когда мы напомнили ему о сайте с вышивкой, он прокомментировал: «Я думаю, что есть вещи, для которых наличие тёмной темы обязательно... Что касается этого случайного сайта, для меня на самом деле это неважно».

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

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

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

Графика

Графика должна выглядеть одинаково хорошо и в режиме тёмной темы, и светлой. Проблема возникает тогда, когда составляющие графики становятся невидимыми на тёмном фоне или непрозрачные фоны становятся видимыми. Лучше использовать SVG, WEBP или PNG-форматы, вместо JPG, чтобы поддерживать прозрачность.

Наложения слоёв (создание глубины)

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

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

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

Читаемость

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

• Чрезмерно тонкие шрифты
• Слишком жирные шрифты
• Недостаточный контраст цветов

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

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

Шрифты, которые недостаточно контрастируют с фоном, явно сложно рассмотреть и прочитать как в режиме тёмной, так и в режиме светлой темы.

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

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

Цветовой контраст

Высоконасыщенные цвета плохо видны на тёмном фоне и не отвечают требованиям доступности WCAG 2, где минимальный контраст для обычного текста равен 4,5:1, а для крупного текста — 3:1.

Несогласованность каналов

Часто в нативных мобильных приложениях есть ссылки на веб-страницы. Эти страницы иногда отображаются во встроенных браузерах приложения или в браузере телефона. Во многих случаях нативное приложение поддерживает тёмную тему, а сайт отображается в светлой. Иронично, когда команды разработчиков продукта прилагают большие усилия, чтобы поддерживать тёмную тему во всём приложении, только чтобы «перекинуть пользователей на светлую».

Структура страницы

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

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

Плавающие компоненты

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

Сканируемые коды

Не все сканеры кодов также совершены, как камеры смартфонов. Многие из них, когда находятся в инвертированном режиме тёмной темы, не могут обработать такие сканируемые коды, как QR-коды или штрихкоды. Многие устройства для сканирования настроены на обнаружение тёмного переднего плана на светлом фоне. Лучше всего представлять сканируемые коды в форматах, которые будут одинаково отображаться в режиме светлой и тёмной темы, например, в PNG-формате.

Тёмная тема: лучшие практики

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

Вложение ресурсов в поддержку тёмной темы наиболее важно в следующих случаях:

• Долгие сессии, например, новостное приложение или приложение для чтения электронных книг. Как правило, чем дольше пользователи смотрят на дизайн в течение одной сессии, тем больше вероятность того, что у них возникнет напряжение в глазах, а батарея будет разряжаться быстрее.
• Частое использование, например, мессенджер. Чем чаще пользователи взаимодействуют с дизайном, тем больше времени они смотрят на него. И тем больше вероятность, что они будут обращаться к нему в условиях низкой освещённости.
• Низкая освещённость, например, приложение для онлайн-просмотра фильмов или приложение для создания белого шума. Чем больше люди склонны использовать дизайн в тёмной обстановке, тем более раздражительным становится воздействие ярких белых экранов на расширенные зрачки пользователей.
• Ограниченное взаимодействие с медиаконтентом, например, не социальные медиаприложения. Такой медиаконтент, как фотографии и видео, выглядит одинаково в режимах светлой и тёмной тем. Чем больше у вас такого контента, тем меньше разница между темами.

Если вы решите поддерживать тёмную тему, ниже вы найдёте несколько рекомендаций:

• Отражайте настройки тёмной темы операционной системы устройства по умолчанию. Если от пользователей требуется вручную активировать тёмную тему на уровне приложения, многие могут не заметить, что такая опция доступна. Или они могут почувствовать раздражение из-за того, что им придётся включать тёмную тему дважды: сначала на устройстве, а затем в приложении. Возможность переключения режима отображения в приложении — это хорошо, но имейте в виду, что в большинстве случаев пользователи не будут искать его в приложениях. За исключением, возможно, таких, как читалки или платформы для онлайн-просмотра фильмов, которые часто используются в тёмной обстановке.
• Тестируйте дизайн в режиме тёмной темы, чтобы убедиться, что все его элементы и иллюстрации хорошо видны. Используйте прозрачность для фонов изображений, уделите особое внимание плавающим элементам и оверлеям. Не полагайтесь на плагины для того, чтобы идеально выполнить все эти задачи.
• Проверьте электронную почту. Несмотря на то, что вы можете контролировать сайт и приложение, вы не можете в полной мере управлять отображением электронных писем в почтовом клиенте. Мы видели много случаев, когда приложение корректно поддерживало тёмную тему, но шрифты, логотипы и изображения неправильно отображались в электронных письмах. Даже если сейчас вы не поддерживаете тёмную тему, проверьте, как будут выглядеть элементы дизайна, если люди будут использовать её в своей электронной почте.

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!

Перевод статьи "Dark Mode: How Users Think About It and Issues to Avoid" из блога NNG