Помните ли вы, когда впервые увидели интерфейс с темным фоном? В зависимости от вашего опыта взаимодействия с цифровыми технологиями это может быть iOS 13, Windows 10, Spotify, Winamp или... один из первых компьютеров IBM?
Вы готовы?
Я приглашаю вас в путешествие, в ходе которого расскажу об основных причинах роста и падения популярности темных интерфейсов. Мы сфокусируемся на 3 наиболее важных областях:
- Визуал — тренды, стиль, восприятие
- Технологии — компьютеры, виртуальная реальность, возможности
- Здоровье — человек, тело, зрение
Возможно, в будущем история повторится, и вам придется первыми — вооружившись соответствующими знаниями — принимать подобные осознанные стратегические решения в отношении своего цифрового продукта.
Раньше, чем вы думали
На самом деле темный UI так же стар, как и компьютеры. Более 40 лет назад, в 1981 году, выбор темного фона для первых компьютеров IBM был продиктован технологическими ограничениями. Низкая стойкость стандартного белого цвета, использовавшегося в старых дисплеях, приводила к появлению на экране черных горизонтальных полос. Их количество было слишком велико, поэтому для улучшения восприятия информации и опыта взаимодействия было решено замаскировать их с помощью черного фона. Именно такими были первые компьютеры с интерфейсом командной строки (CLI).
Плюс: Темный цвет может маскировать визуальные ограничения (например, мерцание экрана)
Причина: Технологические ограничения
По той же причине для букв и знаков использовался зеленый цвет, который обладал достаточной стойкостью, чтобы непрерывно светиться до следующего переключения экрана, — уменьшая эффект черных полос.
Сделать компьютеры более понятными для простых смертных
Технологии постоянно развивались, и благодаря новым возможностям дизайнеры получили большую свободу. Они понимали, что черные экраны кажутся чужеродными обычным любителям покликать мышкой...
...поэтому, чтобы приблизить людей к виртуальному миру, интерфейсы стали имитировать реальный мир и физические поверхности.
Так началась эпоха светлых интерфейсов, Light UI, которые своим видом напоминали белые листы бумаги с напечатанными темными буквами — чем более знакомо и понятно что-то новое, тем выше шансы на высокие продажи.
Минус: Темный UI не отражает знакомый пользователям реальный мир
Причина: Маркетинг, направленный на среднестатистических клиентов
Лучшим примером отражения реального мира внутри виртуального является текстовый редактор WYSIWYG (What You See Is What You Get — что видишь, то и получишь), который позволяет увидеть на экране компьютера, как именно будет выглядеть конечный результат, в данном случае распечатанный лист бумаги.
Одна отрасль выжила
Из-за этого значительный спад в создании темных интерфейсов наблюдался почти во всех отраслях... кроме одной! Автомобильной промышленности. Если вы когда-нибудь водили автомобиль, вы прекрасно знаете, как много внимания приходится уделять тому, что происходит за окном. Особенно в плохую погоду или час пик. Задумывались ли вы когда-нибудь, почему практически каждый спидометр (аналоговый или цифровой) имеет темный фон с яркими иконками?
За повседневными вещами стоят решения, которые пришлось принимать дизайнерам.
Представьте себе, что вы забыли выключить свет в салоне автомобиля. Вместо того чтобы сосредоточиться на поездке по темному лесу, вы отражаетесь в оконном стекле, свет слепит вам глаза. Результат: вы постоянно отвлекаетесь. А теперь подумайте, что было бы, если бы все интерфейсы в автомобиле имели яркую подсветку. На ваше счастье кто-то правильно решил, что подсветка должна быть лишь у иконок и индикаторов.
Плюс: Когда взгляд не нужно фокусировать на интерфейсе, пользователи меньше отвлекаются.
Причина: Безопасность и концентрация внимания на более важных задачах.
Доля секунды
У темных интерфейсов есть еще одно преимущество. Глаза быстрее находят информацию, потому что мы мгновенно фокусируемся на более ярких элементах, заметных на темном фоне. Это было доказано в ходе быстрого мини-теста по отслеживанию движения глаз, проведенного агентством Cuberto. Приведенные ниже тепловые карты показывают, насколько сильно мы отвлекаемся при просмотре темных и светлых интерфейсов. Разница очевидна!
Плюс: Люди быстрее находят данные и фокусируют взгляд на более ярких элементах.
Причина: Нет времени тщательно разглядывать интерфейс.
OLED
Первые программы использовали темный UI, потому что экраны имели скромные технические характеристики. Но с тех пор у них появилось множество новых преимуществ, которые оказывают все большее влияние на окружающую среду.
Все началось с того момента, когда Sony выпустила первые OLED-дисплеи (органические светодиоды), особенность которых состоит в том, что каждый пиксель светится сам по себе с разной интенсивностью, а черные пиксели (цвет #000) полностью отключаются. Возможно, один пиксель — это не так уж много, но если 80% экрана занимает черный цвет, отключается значительная его часть, что дает пользователю огромное преимущество — минимальный расход энергии!
Чтобы наглядно объяснить, как расходуется энергия, я задам вам вопрос. Представьте себе, что вы попали на телешоу и прямо сейчас ждете финального острого вопроса на 1 миллион долларов. Ведущий уверенно улыбается, потому что знает, что вы достаточно хорошо разбираетесь в этой теме:
Официальный аккаунт Роналду в Instagram имеет 450 миллионов подписчиков. Если он размещает фотографию, то — в общей сложности — его подписчики, желающие ее посмотреть, потребляют энергию, равную часовой работе:
A. 8 пассажирских самолетов
B. 360 легковых автомобилей
C. 2400 моторных лодок с подвесными моторами
D. 720 000 игровых ноутбуков
Подумайте, не торопитесь. И? У вас есть окончательный ответ? На этот раз вы угадали, ведь на самом деле все ответы правильные. Чтобы увидеть лишь одну его фотографию, подписчики потребляют энергию, равную часовой работе, например, 360 автомобилей с двигателем мощностью 200 л.с. То есть 54 000 000 ватт-часов!
Если вы подумали, что как человек, создающий приложения, вы не можете повлиять на эту ситуацию, на помощь вам приходят темный режим и уже упомянутые OLED-дисплеи. Конечно, точный объем потребляемой дисплеем энергии зависит от многих факторов, например, от того, как создано приложение и какая яркость используется.
Более подробные данные собрали эксперты из Google. Результаты были представлены на Android Dev Summit 2018 — в тот год, когда у Android появился темный режим. Они сравнили, сколько энергии потребляют разные цветовые схемы. Вот что получилось:
При яркости 50% экономия энергии для темного режима по сравнению со светлым достигала 14%, а при яркости 100% эта разница составляла целых 60%!
Когда в Google Maps появился темный режим, экономия энергии при яркости 50% составила 8%, а при яркости 100% — 31%! В случае с картами это еще более важно. Представьте, что вы только что отправились в поход в бесконечные, неизвестные, темные джунгли без доступа к зарядному устройству. Несомненно, одним из ваших главных приоритетов будет максимально долгий доступ к навигации в вашем смартфоне.
Подумайте, что это значит для окружающей среды. Благодаря энергосбережению, темный режим более экологичен, чем его более яркие аналоги.
Плюс: Меньшее потребление энергии на OLED-экранах!!!
Причина: Защита Земли.
Мы проводим все больше и больше времени, глядя в экран. Интерфейсы всегда рядом с нами, поэтому батареи в мобильных устройствах должны сохранять заряд достаточно долго, чтобы позволить нам удовлетворить наши потребности. Возможно, именно поэтому все известные смарт-часы и приложения для них также используют темный UI.
А что насчет меня?
Каждый, кто подолгу взаимодействует с монитором в темноте, знает, как сильно могут уставать глаза. Иногда результатом становится компьютерный зрительный синдром (CVS), симптомами которого могут быть сухость глаз, нечеткость зрения или головные боли. Темный режим значительно снижает излучение и нагрузку на глаза, а значит, пользователи чувствуют себя более комфортно.
Плюс: Темный режим снижает нагрузку на глаза при плохом освещении (например, ночью).
Причина: Минимизировать вред для здоровья пользователя.
Очевидно, что речь идет об очень низком, внешнем освещении и высокой яркости экрана. В противном случае, например, в очень солнечный день на пляже — контрастность темного интерфейса настолько мала, что нам приходится значительно напрягать глаза, чтобы разглядеть важную информацию. Такой сценарий также вреден для нашего зрения.
Минус: При очень сильном освещении (например, в солнечный день) контрастность темного интерфейса очень мала.
Причина: Минимизировать вред для здоровья пользователя.
Подумайте об этом, когда будете создавать свой следующий цифровой продукт. Вы не обязаны выбирать одно решение. Многие приложения позволяют пользователям выбирать наиболее комфортный режим, другие адаптируются к текущему освещению, например, визуальная тема упомянутого ранее приложения Google Maps подстраивается под ту среду, в которой находится пользователь. В прекрасный солнечный день включается светлая тема, а буквально через секунду, после въезда в плохо освещенный туннель, она сменяется на темную.
Дайте пользователю выбор, позаботьтесь о нем, и если вы знаете, что он должен сосредоточиться на более важных задачах (например, вождение автомобиля), сделайте так, чтобы настройки менялись автоматически.
Кроме того, это тренд
Знали ли вы обо всех этих плюсах и минусах, когда впервые столкнулись с темным UI? Или же вы думали, что эта новая темная тема популярна, потому что кто-то сказал, что она выглядит круто? На самом деле... в этом предположении есть доля правды.
Некоторые пользователи предпочитают темный режим из-за его футуристического вида. Среди них и те, для кого смартфон давно уже является самой обычной повседневной вещью. Желая заинтересовать их, создатели цифровых продуктов, проектируют платформы в новых цветах.
В частности, темный режим любят многие пользователи социальных сетей (Facebook, Instagram, Twitter, Reddit), программ, в которых часто приходится работать ночью (Adobe CC, Microsoft Visual Studio Code, OBS Studio) и развлекательных продуктов (Spotify, Netflix, Steam, Oculus VR).
Плюс: Подходит для разных отраслей и соответствует вкусам многих пользователей, особенно технически подкованных.
Причина: Люди используют продукты, которые им нравятся и вдохновляют их.
Однако... существуют отрасли, в которых черный цвет может ассоциироваться с чем-то негативным. Спорим, вы не захотите искать медицинскую помощь в приложении, которое выглядит как сайт похоронного бюро, и где возможность связаться с врачом скрыта за яркой кнопкой, напоминающей свет в конце туннеля?
"Дизайн — это акт коммуникации, что предполагает глубокое понимание человека, с которым общается дизайнер".
Из-за культурных различий люди могут испытывать совершенно разные эмоции, поэтому будьте открыты к новому и динамично реагируйте на изменения в окружающем мире.
Минус: Может ассоциироваться с чем-то плохим в определенном контексте.
Причина: Неправильно подобранный визуальный образ может вызвать нежелательные эмоции.
Резюме
Вот мы и подошли к сегодняшнему дню. Каждый аспект оказал большое влияние на то, в каких отраслях применялся или применяется темный режим. Мы прошли полный круг, и теперь технология снова диктует направление. Но на этот раз она дает неоспоримые преимущества, которые затронут и тех, кто еще не сталкивался с ней.
"Технологии могут меняться быстро, но люди меняются медленно. Принципы дизайна базируются на понимании людей. Они остаются истинными всегда".
Все плюсы:
- Темный цвет может замаскировать визуальные ограничения (например, мерцание экрана)
- Меньше отвлекает пользователей
- Люди быстрее находят данные и фокусируют взгляд на более ярких элементах
- Меньше потребление энергии на OLED-дисплеях
- При плохом освещении темный режим снижает нагрузку на глаза
- Подходит для разных отраслей и соответствует вкусам многих пользователей, особенно технически подкованных
Все минусы:
- Темный UI не отражает знакомый пользователям реальный мир
- При сильном освещении контрастность очень низкая
- Может ассоциироваться с чем-то плохим в определенном контексте
Персональные оценки и плохие ассоциации, технологические ограничения и возможности, а также влияние на наше здоровье и планету — мне кажется, что эти аспекты в наибольшей степени определяют решения дизайнеров. В следующий раз, обсуждая с коллегами новый интерфейс, вы будете вооружены весомыми аргументами, подкрепленными реальными событиями.
Эти знания позволят вам принимать более взвешенные и смелые решения. Вам будет проще разговаривать с клиентами, командой и аргументировать необходимость реализации хотя бы опционального темного UI.
.webp)
