Как Terra улучшила взаимодействие с пользователем благодаря Dark Mode

Отображая темную тему для пользователей, предпочитающих темный режим на своих устройствах, Terra снизил показатель отказов на 60% и увеличил количество прочитанных страниц за сеанс на 170%.

André Cipriani Bandarra

Demián Renzulli

Guilherme Moser de Souza

Terra, одна из крупнейших медиакомпаний Бразилии с 75 миллионами пользователей в месяц, снизила показатель отказов на 60% и увеличила количество прочитанных страниц за сеанс на 170% на настольных компьютерах для пользователей, предпочитающих темный режим, предоставив специальную темную тему.

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

60 _%

Снижение показателей отказов

170 _%

Больше страниц за сеанс

Что такое темный режим?

Исторически пользовательские интерфейсы в устройствах отображаются в «светлом режиме», что обычно означает отображение черного текста поверх светлых интерфейсов. Альтернативой является «темный режим», со светлым текстом на темном фоне, например сером или черном.

Темный режим имеет преимущества для пользовательского опыта. Некоторые люди предпочитают его по эстетическим или доступным причинам. У него есть и другие преимущества, такие как сохранение заряда батареи в устройствах. Пользователи могут выразить предпочтение темному режиму с помощью настройки на своих устройствах, которая зависит от операционной системы . Например, на следующем снимке экрана показано, как выглядит опция конфигурации темной темы на устройствах под управлением Android Q :

Чтобы предложить лучший опыт пользователям, которые предпочитают «темный режим», вы можете использовать медиа-запрос prefers-color-scheme со значением light или dark . Этот медиа-запрос отражает выбор пользователя на его устройстве. Затем вы можете загрузить пользовательскую темную тему для тех, кто предпочитает темный режим. Например, загрузив «темный» CSS-файл и изменив такие значения, как шрифт и цвет фона. Следующий код показывает пример этого:

@media (prefers-color-scheme: dark) {
   // apply a dark theme
}

@media (prefers-color-scheme: light) {
  // apply a light theme
}

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

На момент написания статьи (декабрь 2021 г.) Chrome Platform Status определяет, что около 22% веб-трафика поступает от пользователей, выбравших настройку «предпочитать темную тему».

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

Следующий код создает аналитическое измерение для измерения производительности пользователей, которые предпочитают light , а не dark :

function getColorScheme() {
    let colorScheme = 'Unknown';
    if (window.matchMedia) {
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            colorScheme = 'Dark';
        } else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
            colorScheme = 'Light';
        }
    }
    return colorScheme;
}

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');

Terra внедрила этот код на своем сайте и сравнила поведение обеих групп на мобильных (Android) и настольных (Windows) устройствах. На тот момент Terra не предоставляла пользовательскую темную тему, поэтому целями этого эксперимента были:

• Определение размера группы пользователей, предпочитающих темный цвет.
• Выявление закономерностей: например, покидают ли сайт пользователи, предпочитающие темный цвет, быстрее, чем те, кто предпочитает светлый?

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

Мобильный (Android)

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

Рабочий стол (Windows)

В случае с десктопом (Windows) группа пользователей, предпочитающих «темную» тему, оставалась на сайте гораздо меньше: у них был почти в два раза выше показатель отказов, и они прочитали чуть больше половины страниц, чем те пользователи, которые предпочитали «светлую» тему:

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

В качестве следующего шага Terra решила поработать над стратегией «тёмной темы», чтобы посмотреть, смогут ли они улучшить взаимодействие с группой пользователей, предпочитающих тёмный цвет.

Реализация темной темы

Большинство веб-сайтов реализуют темную тему, используя простую стратегию, показанную ранее, — прослушивание изменений конфигурации пользователя с помощью медиа-запроса prefers-color-scheme и изменение стилей на его основе.

Terra решила предоставить пользователю больше контроля: когда они обнаруживают, что на их устройствах включена настройка «предпочитать темный» (через медиа-запрос), они показывают им запрос на навигацию в «ночном режиме». Пока пользователь не отклоняет запрос (нажимая кнопку «Игнорировать»), они учитывают настройки ОС пользователя и применяют пользовательскую темную тему:

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

Вот как выглядит «Ночной режим» Терры:

Измерение влияния темной темы Terra

Чтобы измерить влияние темной темы, Terra взяла группу пользователей, у которых на устройствах включена настройка «Предпочитать темную» и сравнила показатели вовлеченности при показе темы «Светлая» и «Темная». Вот результаты для мобильных устройств (Android) и настольных компьютеров (Windows):

Мобильный (Android)

Хотя показатели отказов остались прежними, количество просмотренных страниц и сеансов почти удвоилось (с 2,47 до 5,24), когда пользователи использовали темную тему:

2 _х

Больше страниц за сеанс

Рабочий стол (Windows)

Оба показателя улучшились при отображении темной темы: показатель отказов вырос с 27,25% до 10,82%, а количество страниц за сеанс увеличилось почти втрое (с 3,7 до 9,99).

60 _%

Снижение показателей отказов

170 _%

Больше страниц за сеанс

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

Заключение

Dark Mode — это настройка, которую пользователи могут включить на своих устройствах, чтобы изменить стиль экранов на темные темы. Эта технология сообщает о преимуществах для пользовательского опыта и для различных аспектов устройств пользователя, таких как экономия заряда батареи.

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

Для компаний с ресурсами для внедрения альтернативной темной темы это рекомендуемый подход. Для тех, у кого нет времени инвестировать в такую ​​функцию, Chrome начинает развертывать функцию Auto Dark Mode .