UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Особенности проектирования темной темы
Редакція
Редакція

Опубліковано

Особенности проектирования темной темы

#ui

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

Раньше я не рассматривал этот вопрос, как отдельную тему, хотя много лет занимался темным дизайном интерфейса. У меня большой опыт проектирования темных палитр, и я попытался разобраться почему один вариант работает, а другой – нет. Это помогло бы мне улучшить мои дизайны в будущем.

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

Итак, давайте отложим в сторону слухи и посмотрим, что на самом деле означает темная тема, почему она существует и что говорят о ней исследования.

Что такое темная тема?

Все приложения должны иметь как светлые, так и темные (или дневные, и ночные) темы.

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

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

Темная и светлая темы приложения Google News

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

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

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

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

Темная тема для темных сред

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

Задолго до того, как темная тема стала модной и, в конечном счете, получила поддержку на уровне ОС, я проектировал приложения и веб-сайты с темными палитрами. Почему? Ну, в некоторой степени, для экономии заряда батареи. Дисплеи на мобильных телефонах обычно являются основным потребителем электроэнергии, и с ростом количества пикселей с подсветкой, как в AMOLED-дисплеях, количество потребляемой дисплеем энергии напрямую связано с общим количеством света, которое он излучает. Приложение с темной палитрой потребляет на 90% меньше энергии, чем приложение со светлой.

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

Netflix, как вы можете видеть на рисунке ниже, является хорошим примером мобильного приложения с темной темой.

Мобильное приложение Netflix

Большинство стриминговых сервисов по умолчанию используют темную тему, потому что люди часто смотрят видео ночью или в плохо освещенных местах. Таким образом, темная тема интерфейса – лучший вариант, гарантирующий, что интерфейс не будет отвлекать от контента. У нас не так много телевизоров без рамки, не так ли?

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

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

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

Типичная страница в темной теме в пять-шесть раз менее яркая, чем при светлой.

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

Дизайнеры скрытно уменьшают контрастность в дизайнах со светлой темой.

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

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

Цвет состоит из трех компонентов, которые я сейчас попытаюсь объяснить настолько просто, насколько смогу:

  • оттенок – спектр, в котором появляется цвет.
  • насыщенность – насколько интенсивно представлен оттенок.
  • яркость – количество черного или белого, добавляемое к цвету.

Примечание редактора. Для более глубокого изучения теории цвета для цифровых дисплеев см. серию статей Pabini Gabriel-Petit на сайте UXmatters. Часть 1 охватывает свойства цвета и основы контраста; часть 2 углубляется в эффекты контраста; Часть 3, посвящена применению теории цвета к цифровым дисплеям.

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

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

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

Контраст в темной теме

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

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

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

Их примеры создания темной темы содержат такие странные решения, как замена простых линий по краям карточки на почти неразличимый темно-серый фон.

У провайдера спутникового телевидения Dish также есть услуга стримингового видео в мобильном приложении. Как показано на рисунке ниже, они также злоупотребляют серым цветом.

Мобильное приложение Dish Anywhere

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

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

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

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

Темный не значит черный

Быстрый и простой способ начать создавать темную палитру – это создать тени (shades) для всех цветов.

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

Тень (shade) не является разновидностью цвета, но означает добавление к цвету черного. Ненасыщенный тон (tint) означает добавление белого. Таким образом, розовый – это ненасыщенный тон красного цвета.

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

Я почти ничего не проектирую на чистом черном фоне. Исключения, когда черный является ключевой частью бренда. Вместо этого я выбираю другой темный цвет из палитры – или сам делаю тень (shade) – и обнаруживаю, что он оказывает тот же эффект, что и черный или очень темный серый, усиливая при этом ощущение индивидуальности бренда.

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

Рисунок 4. Темная тема мобильного приложения Twitter

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

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

Исследования темной темы

Но неожиданно темная тема заметно лучше читается при ярком освещении, чем светлая.

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

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

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

Но неожиданно, темная тема заметно лучше читается при ярком освещении, чем светлая.

Различия в читабельности в обоих случаях, безусловно, были статистически значимыми, но они меньше, чем различия в читабельности, которые вы получите от изменений размера шрифта или контрастности.

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

Вывод

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

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

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

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


Перевод статьи uxmatters.com

Топ коментарі (0)