Этот разбор – лишь мнение, основанное на нескольких важных фактaх и исследовании авторитетного разработчика. Если вы не согласны с нашими выводами, поделитесь своим мнением в комментариях.
Бо́льшую часть дня мы смотрим на экран: смартфон, компьютер, панели управления, рекламные мониторы на зданиях, в транспорте и офисных центрах. К вечеру глаза и мозг устают настолько, что хочется закрыться в комнате без единого источника света и наслаждаться темнотой. Поэтому успех тёмной темы вполне понятен. Экран испускает намного меньше света, смотреть на него намного комфортнее, ничего не раздражает.
Свет против тьмы
Выбор темы – это не самое технически важное решение. Вашему телефону или компьютеру всё равно, в какой цветовой гамме отображать информацию. Здесь всё решает ваш комфорт (и немного желание угнаться за трендами, но мы остановимся на комфорте).
Только представьте: легли вы спать, но вспомнили что-то важное. Или не можете уснуть и решаете погуглить причины Пунических войн. Вы открываете браузер – и получаете мощный пучок света в лицо.
А всё потому, что даже при включённой тёмной теме на устройстве и в браузере поисковики остаются большим светлым пятном.
Но это же неправильно? Просмотр страниц в темноте не должен ассоциироваться с дискомфортом. С другой стороны, если такие гиганты, как Google и Яндекс, не добавляют тёмную тему, может, и не надо? У них же явно больше ресурсов – они должны были всё взвесить и осознанно отказаться от выбора темы. Так ведь? Что ж, у нас нет ответа.
Что же делать?
С января 2020 года все нормальные браузеры (извини, Internet Explorer, тебя нет в этом списке) могут использовать медиазапрос CSS prefers-color-scheme. Запрос принимает два значения: light или dark. То есть светлый, тёмный и без предпочтений.
Учитывая, что это медиазапрос, который использует функцию matchMedia в JavaScript, мы можем протестировать предпочтения пользователей в плане цветовой схемы.
Кстати, такой тест уже провёл Джеремайя Браттон (Senior Front End Designer и разработчик в нескольких американских компаниях). Давайте посмотрим, что у него получилось.
Эксперименты
Джеремайя хотел ответить на два вопроса:
- Как много пользователей предпочитают светлый режим, а не тёмный?
- Будет ли у пользователей с тёмным режимом выше дочитываемость статей.
Первый вопрос вполне логичен. А ответом на второй вопрос экспериментатор пытался понять, становится ли тёмная тема решающим фактором, чтобы задержаться на сайте.
Получилось вот что:
- «Светлых» пользователей оказалось в четыре раза больше, чем «тёмных» (71 тысяча против 16).
- Дочитываемость оказалась примерно одинаковой: 45,5% и 47,5%, всё в рамках погрешности.
Серая часть
Кроме светлой и тёмной схем, Джеремайя отслеживал и третий вариант – без предпочтений. По его мнению, около 8 тысяч таких визитов поступали от поисковых роботов, неизвестных юзер-агентов и пользователей устаревших браузеров. Это были те случаи, когда в ответ на запрос о цветовой схеме сайт не получил никакой ответ. Раньше в списке, кроме светлой и тёмной темы, был вариант «без предпочтений», но он устарел. Сейчас логика такая: свет – это всё, что не тьма. То есть в 71 тысячу «светлых» пользователей попали и те, кто сознательно выбрал повышенную яркость, и те, кто ничего не выбирал.
Вывод
Желаемого результата «Люди жаждут тёмную тему» не получилось. Для сайта Джеремайи внедрение тёмной темы – это не такая уж и срочная задача. Но он всё равно планирует это сделать, просто не сейчас.
Наше заключение
Массовый переход на тёмную тему идёт. Всё больше приложений предлагают своим пользователям уйти в тень. И всё больше пользователей познают комфорт тёмной темы, не желая раздражаться на белые пятна сайтов в браузере.
Мы думаем, этот тренд повторит путь адаптивной вёрстки – сначала его будут использовать единицы, а потом от его наличия будет сильно зависеть процент отказов. Так что обязательно поставьте внедрение выбора темы в ваш план работы с сайтом. А чтобы понять, насколько это срочная задача, проведите такой же тест, как Джеремайя. То есть добавьте в код медиазапрос и параметры изменения цветов. Вот так, например:
Читайте также:
Зачем нужен адаптивный дизайн сайта
Как продавать больше в интернет-магазине
9 примеров оформления страницы обратной связи
