Темные интерфейсы. Хорошее и плохое. Что можно и чего нельзя делать.

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

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

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

Большинство исследований показали, что темный текст на светлом фоне лучше, чем светлый текст на темном фоне, т. е. его легче читать. В одном известном исследовании «зрительная усталость» была значительно выше, когда испытуемые читали светлые символы на темном фоне по сравнению с темными буквами на светлом фоне (Bauer, D., Bonacker, M., and Cavonius, CR 1983).

Существует также ожидание : люди привыкли видеть разнообразный контент, отображаемый темными чернилами на белом фоне, представленный вместе с изображениями. Подумайте о газетах и ​​журналах, которые существуют уже более 350 лет. Возвращаясь еще дальше — на 35 тысяч лет назад, к эпохе палеолита (периода пещерного человека), мы находим наскальные рисунки львов и мамонтов, обычно помещенные на светлом фоне углем или обожженными костями, которыми рисовались изображения.

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

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

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

Есть даже такие вещи, как синдром компьютерного зрения (CVS) и «глазной дискомфорт». Согласно исследованию, более 83 процентов американцев используют цифровые устройства более двух часов в день, при этом 60,5 процента сообщают, что испытывают симптомы цифрового напряжения глаз. (Глаза переэкспонированы: дилемма цифрового устройства.)

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

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

Разработчик Toptal Амин Шах Гилани добавляет: «Лично я использую солнечную темную тему для своего редактора кода. Я предпочитаю темную тему, потому что темный фон приятнее для глаз, тем более что мне нравится приглушать свет или работать ночью».

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

Когда темные интерфейсы работают хорошо

Большинство пользовательских интерфейсов, связанных с развлечениями (смарт-телевизоры, игровые приставки, приложения для телевидения и кино), как правило, имеют дизайн пользовательского интерфейса в темных тонах — и на то есть веские причины. Большинство развлечений, связанных с развлечениями, происходят вечером, их смотрят с расстояния 6-10 футов и смотрят в плохо освещенных помещениях — другими словами, экран соответствует окружающей среде. Кроме того, красочный контент (например, обложка и рекламные ролики) резко выделяется на пользовательском интерфейсе с темной тематикой.

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

В правильном контексте, среде, приложении и использовании пользовательский интерфейс с черным фоном имеет смысл. Всегда учитывайте контекст , в котором, вероятно, будет использоваться интерфейс. Но дело идет еще дальше — выбор использования интерфейса должен зависеть от контента и контекста : что , когда , где и на каком устройстве .

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

Темные пользовательские интерфейсы следует использовать только с разреженным, минимальным текстом и «разбитой» информацией с сильным акцентом на визуальные эффекты — светлый на текст. Если используется текст, он должен сильно контрастировать с темным фоном — желательно чисто белым или другим насыщенным цветом (не темно-серым) на черном фоне.

Когда темные интерфейсы не работают

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

Задача состоит в том, чтобы сохранить достаточный контраст, что влияет на главную задачу: читабельность, которая связана с удобством использования, что влияет на UX. Как правило, на белом фоне работают все цвета, тогда как на темном фоне полезный диапазон цветов резко сокращается.

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

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

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

Что можно и чего нельзя делать при использовании темных интерфейсов

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

Когда можно использовать темные интерфейсы:

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

Когда лучше держаться подальше от темных интерфейсов:

• Когда много текста (читать на темном фоне сложно)
• Когда на экране много смешанного контента
• В случае приложений B2B с большим количеством форм, компонентов и виджетов
• Когда дизайн требует широкой цветовой гаммы

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

• • •

Дальнейшее чтение в блоге Toptal Design:

• UX электронной коммерции — обзор лучших практик (с инфографикой)
• Важность ориентированного на человека дизайна в дизайне продукта
• Лучшие портфолио дизайнеров UX — вдохновляющие тематические исследования и примеры
• Эвристические принципы для мобильных интерфейсов
• Упреждающий дизайн: как создать волшебный пользовательский опыт