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

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

Андре Сиприани Бандарра
Демиан Рензулли
Гильерме Мозер де Соуза
Guilherme Moser de Souza
X LinkedIn

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

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

    60 %

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

    170 %

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

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

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

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

Настройки темного режима Android Q.
Настройки темной темы 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
}

Поддержка браузера

  • Хром: 76.
  • Край: 79.
  • Фаерфокс: 67.
  • Сафари: 12.1.

Источник

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

На момент написания (декабрь 2021 г.) статус платформы Chrome определяет, что примерно 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) цифры показателя отказов и количества страниц за сеанс не показали больших различий между пользователями, которые предпочитают «светлый» вариант, по сравнению с теми, кто предпочитает «темный»:

Режим отображения Показатель отказов Страниц за сеанс
Предпочитает свет 25,84% 3,96
Предпочитает темноту 26,10% 3,75

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

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

Режим отображения Показатель отказов Страниц за сеанс
Предпочитает свет 13,20% 7.42
Предпочитает темноту 24,12% 4,68

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

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

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

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

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

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

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

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

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

Скриншот темной темы Терры.
Темная тема Терры, «Ночной режим».

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

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

Мобильный (Андроид)

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

Режим отображения Показатель отказов Страниц за сеанс
Предпочитает свет 26,91% 2.47
Предпочитает темноту 23,91% 5.24

    2 х

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

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

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

Режим отображения Показатель отказов Страниц за сеанс
Предпочитает свет 27,5% 3,7
Предпочитает темноту 10,82% 9,99

    60 %

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

    170 %

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

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

Заключение

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

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

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