Dark mode теперь повсюду. Так ли он полезен? (в конце поста опрос) / Хабр

Дизайнеры одежды известны тем, что любят носить чёрное, но они не одиноки в этом: в 2017 году чёрный был самым популярным цветом в женской одежде, по данным компании Edited, занимая 36% рынка. Популярность тёмных оттенков вышла за границы моды и добралась до дизайна UX и UI: многие популярные приложения и программы дополнились «тёмным режимом», инвертирующим главную цветовую схему веба.

Примеры руководств по созданию тёмных тем для Material Design.

Разумеется, в сочетании тёмного фона со светлым текстом нет ничего нового. Получившие в 1980-х развитие текстовые процессоры WYSIWYG (аббревиатура от «what you see is what you get», «что видишь, то и получаешь», произносится «wiziwig») впервые познакомили нас с интерфейсами пользователя, напоминавшими привычный чёрный текст на белой бумаге. До этого компьютеры имели монохромные ЭЛТ-мониторы, отображавшие пиксельный зелёный текст на чёрном фоне. В Adobe Creative Suite тёмный интерфейс использовался многие годы, а Spotify уже довольно давно имеет цветовую схему «светлое на тёмном» (хотя в 2015 году она была переделана).

Тёмные интерфейсы существуют уже очень долго, но у пользователей они стали невероятно популярны только за последние несколько лет. Лишь за прошлый год опции включения тёмного режима появились в MacOS, Apple iOS и Android, а также во многих других приложениях и платформах. Тёмный режим Instagram появился в начале октября; в приложении Gmail тёмный режим появился на этой неделе.

Чем стимулируется эта новая одержимость веба тёмными цветами? Когда я спросила у друзей, почему они переключились на тёмный режим, многие ответили, что он «удобнее для глаз», например, по ночам тёмный фон менее резок, чем ярко-белый экран. Хотя более тёмный интерфейс может казаться лучше для глаз (к тому же, он на самом деле экономит заряд батареи), читаемость он не улучшает.

Руководства Human Interface Design компании Apple по Dark Mode iOS.

Я попросила Ралуку Будиу, директора по исследованиям Nielsen Norman Group, занимающейся консультациями по UX и UI, прокомментировать мнение о том, что тёмный режим меньше напрягает глаза. «При исследовании юзабилити у нас есть правило „не слушай пользователя“. Оно значит, что нужно наблюдать за тем, как люди выполняют действия (и делать замеры), а не верить тому, что они утверждают».

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

Похоже, что опубликованные исследования по эргономике подтверждают её мнение. Исследование 2017 года из журнала Applied Ergonomics выявило, что тёмные символы на светлом фоне повышают читаемость и настоятельно рекомендуются вне зависимости от возраста пользователя. Журнал Human Factors: The Journal of the Human Factors and Ergonomics Society выяснил в 2013 году, что «обычно повышенная яркость положительной полярности приводит к улучшению восприятия деталей».

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

Поэтому, если вам нужно много читать, Будиу всё равно рекомендует проверенную схему «чёрное на белом». Но если вы очень не хотите отказываться от тёмного режима, то вот несколько советов, позволяющих справиться со снижением читаемости. Apple рекомендует тестировать контент, включив в тёмном режиме опцию «Increase Contrast and Reduce Transparency» в параметрах iPhone, как вместе, так и по отдельности.

Также в некоторых контекстах тёмный режим может быть полезным. Согласно руководству Apple по human interface, тёмный режим позволяет выделять контент, при этом окружающий его UI отходит на второй план. Поэтому логично, что Adobe Creative Cloud использует тёмный интерфейс пользователя: это ПО предназначено для редактирования изображений, и тёмный UI повышает приоритет графики, минимизируя его для менее важных текстовых элементов.

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

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

_{Ссылка на опрос от 22 апреля}

Весной редакция Хабра проводила опрос о тёмных темах в сообществе ВК. Там Dark Mode победил с большим отрывом. Интересно, что о тёмных темах в вебе и приложениях думает аудитория сайта.

Темный или светлый UI? Советы по выбору цветовой схемы для вашего интерфейса / Хабр

Наша повседневная жизнь — это бесконечный поток решений. В личной и профессиональной жизни мы должны учитывать многочисленные противоположные точки зрения и условия, и лучше, когда решения основаны не только на предположениях, но и на фактах, опыте и знаниях. Сегодня мы обсудим одну из частых задач для UI-дизайнеров, которые должны делать проект за проектом — какая схема лучше для интерфейса, светлая или темная?

Факторы, влияющие на выбор цветовой схемы

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

Читаемость и разборчивость

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

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

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

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

Однако некоторые научные исследования, относящиеся к 1980-м годам, показывают, что для больших объемов текста светлый фон представляется более эффективным выбором для большинства пользователей. Изучая работу рекламных носителей, Д.Бауэр и К.Р.Кавоний поделились своими исследованиями в статье «Улучшение удобочитаемости визуального отображения при помощи изменения контраста» (1980). В частности, они обнаружили, что участники были на 26% более точными при чтении текста, когда на светлом фоне фигурировали темные буквы.

Почему это так? Джейсон Харрисон из Sensor Perception and Interaction Research Group (Университет Британской Колумбии) объясняет это явление следующим образом. Люди с астигматизмом (которых, согласно различным статистическим данным, около 50% населения) чувствуют, что сложнее воспринимать белый текст на черном, чем черный текст на белом. Отчасти это связано с уровнем освещенности. С ярким дисплеем (на белом фоне) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы. С темным дисплеем (черным фоном) радужная оболочка открывается, чтобы получать больше света, и деформация линзы создает гораздо более нечеткий фокус для глаза. Итак, основываясь на этом исследовании, если интерфейс представляет много текста и требует длительного чтения, то светлый фон более удобен для пользователя.

Доступность

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

Ясность

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

Отзывчивость

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

Окружение

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

Чеклист список для выбора цветовой схемы

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

1. Определите цель интерфейса. Определив основные точки использования интерфейса и возможности решения проблем пользователя, вы сделаете выбор цветовой схемы более обоснованным. Если пользовательский интерфейс является текстовым (блог, новостная платформа, электронный ридер и т.д.), светлый фон будет более эффективным выбором. Свет делает экран просторным, и становится легче сосредоточиться исключительно на содержании. С другой стороны, если интерфейс вращается вокруг изображений, а не текста, то цветовая схема с темным или ярким фоном может быть хорошим решением, поскольку цвета изображений будут ощущаться глубже.
2. Проанализируйте свою целевую аудиторию. Определение и анализ целевой аудитории – это главное, что должен сделать дизайнер. Понимание того, кто является вашим потенциальным пользователем и что он хочет получить от сайта или приложения – это прочный фундамент для удобного, полезного и привлекательного интерфейса. Люди среднего возраста и пожилые люди предпочитают интерфейсы со светлой цветовой схемой, поскольку они находят ее более интуитивной и управляемой. Молодые люди часто считают  интерфейсы с темным фоном более оригинальными и стильными, что может быть способом привлечения целевых пользователей. Подростки и дети предпочитают интерфейсы, где используются яркие фоны и забавные детали. Выбор цвета, очевидно, зависит от характера функционирования интерфейса и контента. Но предпочтения целевой аудитории всегда являются хорошим ключом к решениям, ориентированным на пользователя.
3. Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”. Наоборот, он будет бороться за внимание пользователя в условиях сильной и динамически меняющейся конкуренции. Выбор цветовой схемы становится способом сделать приложение или веб-сайт отличающимся и привести к столь драгоценному первому взаимодействию со стороны пользователя. Время, затраченное на исследование существующих продуктов в сегменте, сэкономит вам время и силы, которые вы, в противном случае, потратите на редизайн неэффективных решений.
4. Тестируйте, тестируйте, тестируйте. Описанные выше моменты убеждают в одной ключевой вещи: поскольку цвет относится к факторам, непосредственно влияющим на удобство использования и привлекательность интерфейса, каждое дизайнерское решение должно быть соответствующим образом проверено – в разных разрешениях, на разных экранах и в различных условиях. Тестирование позволит выявить сильные и слабые стороны цветовой схемы до того, как продукт выйдет на рынок, получит внимание  и потеряет шанс произвести первое впечатление.

Компромиссные решения

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

Темный интерфейс, белые вкладки для содержания

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

Предоставление пользователю возможности выбора цветовой схемы

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

Полезное чтение:

• Темная сторона UI: преимущества темного бэкграунда
• Влияние фона страницы на читаемость, возвраты, восприятие и поведение
• Визуальное восприятие: введение
• Искусство и визуальное восприятие: психология креативного взгляда
• Выбор цветов для веб-страницы: контрастность против читаемости
• Что делать не делать в темном веб-дизайне
• Почему светлый текст на темном фоне это плохая идея
• Когда использовать светлый текст на темном фоне

В центре внимания — принципы темного дизайна пользовательского интерфейса

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

Физики говорят, что черный на самом деле не цвет; это отсутствие света . В своих экспериментах по освещению солнечного света через призмы сэр Исаак Ньютон даже не включил его в спектр цветов.

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

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

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

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

Темный пользовательский интерфейс против светлого

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

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

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

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

Тем не менее, есть много веских причин для использования темных интерфейсов:

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

И есть ситуации, когда не рекомендуется:

• При большом объеме текста (трудно читать на темном фоне)
• При наличии большого количества смешанного контента
• Когда дизайн требует широкой цветовой гаммы

Приборная панель настольного приложения в темном режиме. (от Рамоушн)

Темная тема — это не черная тема. Лучше всего рассматривать тему как «слабое освещение». Одной из основных проблем темных интерфейсов является достижение достаточного контраста, чтобы визуальные элементы были разделены, а текст был разборчивым. Большинство дизайнеров считают, что использование черного цвета было бы оптимальным для достижения сильного контраста. Но лучше не использовать настоящий черный (#000000) для фона или цвета поверхности . Черный цвет лучше использовать для других элементов пользовательского интерфейса и использовать с осторожностью. Например, настоящий черный цвет можно использовать для небольших элементов пользовательского интерфейса или рамок вокруг них.

Темная тема Google Material Design рекомендует использовать темно-серый (#121212) в качестве цвета поверхности темной темы «для выражения высоты и пространства в среде с более широким диапазоном глубины». Кроме того, многие дизайнеры рекомендуют добавлять к темно-серым оттенкам тонкий темно-синий оттенок при определении цветовой гаммы. Это имеет тенденцию создавать лучший темный тон для цифровых экранов и более приятную темную цветовую палитру пользовательского интерфейса.

Веб-сайт Бриттани Чан смешивает темно-серый с синими оттенками для приятной темной цветовой палитры пользовательского интерфейса.

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

Особое внимание следует уделить контрасту текста в темных интерфейсах.

Рекомендации по обеспечению доступности веб-контента (WCAG) призывают к тому, чтобы «визуальное представление текста имело коэффициент контрастности не менее 4.5:1 », за исключением крупномасштабного текста, который должен иметь коэффициент контрастности не менее 3:1 . Поэтому дизайнеры должны убедиться, что контент остается удобным для чтения в темном режиме.

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

Недостаточно контраста между текстом и фоном в темном дизайне пользовательского интерфейса слева.

Фокусировка Внимание: цвет

Цвет выделяется в темных интерфейсах. Лучше всего использовать схемы с более светлыми, ненасыщенными акцентными цветами. Избегайте использования насыщенных цветов в темных пользовательских интерфейсах, , поскольку они могут визуально вибрировать на темных поверхностях. Более того, рекомендуется, чтобы цвета соответствовали стандарту WCAG AA не менее 4,5:1 при использовании с текстом.

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

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

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

Текст и основные элементы, такие как кнопки и значки, должны соответствовать стандартам разборчивости при отображении на темном фоне. Как показано выше в приложении Jabra Sound+, для текста и значков можно использовать цвета, отличные от белого.

На сайте Google Material Design есть полезный генератор цветовых палитр (в разделе «Инструменты для выбора цветов»), с помощью которого дизайнеры могут создавать и применять цветовые палитры к пользовательскому интерфейсу. Уровень доступности цветовых комбинаций также можно измерить с помощью сопутствующего инструмента «Цвет».

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

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

Чем меньше, тем лучше: использование отрицательного пространства

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

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

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

Минималистичный темный веб-дизайн пользовательского интерфейса. (Денис Тыринский)

Слова стиля: типографика

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

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

Рекомендация W3C AAA для текста обычного размера (менее 18 пунктов, если не полужирный шрифт) должна иметь коэффициент контрастности не менее 7:1 . Это также относится к другим элементам пользовательского интерфейса: значкам, изображениям текста и текстовым меткам, таким как метки кнопок. Дизайнеры обязаны обеспечить доступность всех цифровых продуктов для всех. Это не только улучшает удобство использования и, следовательно, UX, это закон в большинстве стран.

У дизайнеров есть бесчисленное множество возможностей найти отличные шрифты, которые хорошо работают в темных интерфейсах. Google Fonts, Font Library и Adobe Typekit — это лишь некоторые из них, которые предлагают простую интеграцию с приложением или сайтом и широкий выбор вариантов.

На странице AirPods Pro на сайте Apple используется крупный шрифт и высокая контрастность для максимального эффекта.

Общение Глубина: Высота

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

Почему глубина? Большинство современных систем проектирования используют систему уровней высот для передачи глубины. Ощущение глубины соответствует миру природы. Наше зрение имеет восприятие глубины, и мы живем в трехмерном мире. Глубина помогает подчеркнуть визуальную иерархию интерфейса. Элементы на переднем плане, например, привлекают к себе внимание, например диалоговое окно с предупреждением.

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

Глубина темных пользовательских интерфейсов может быть отображена путем осветления поверхностей по мере их приближения к подразумеваемому источнику света. (по материальному дизайну)

Придумывание цвета поверхности каждого уровня требует осторожности. Лучше не иметь более четырех или пяти уровней. Дизайнеры должны учитывать контраст текста, поскольку поверхности поднимаются выше в стеке и становятся светлее. Если цвет фона недостаточно темный, чтобы соответствовать уровню контраста не менее 15,8:1 между белым текстом и поверхностью, текст на самой высокой (и самой светлой) приподнятой поверхности не будет соответствовать стандарту 4,5:1. В некоторых случаях лучше указать цвет текста элемента равным 9.0005 true black (#000000) в системе дизайна для достижения хорошего контраста на светло-сером фоне.

Размышляя над изложенными выше принципами, вот несколько отличных примеров темного дизайна пользовательского интерфейса:

Веб-сайт Atom Finance.

Atom Finance использует темную тему для изысканного внешнего вида и ограничивает количество акцентных цветов тремя. Макет использует пустое пространство и разреженный минималистский дизайн для сложного финансового веб-сайта. Сайт хорошо использует тонкое затенение, чтобы указать различные высоты компонентов в пользовательском интерфейсе.

Веб-сайт электронной коммерции в темной теме от Дэниела Клоппера.

Веб-сайт электронной коммерции в темной теме от Дариона Митчелла.

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

Dashboard Рубена Фернандеса для IBM.

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

Мобильные приложения с правильным темным дизайном пользовательского интерфейса: Wego, Spotify и Apple (Android и iOS).

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

Резюме

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

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

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

Дайте нам знать, что вы думаете! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дополнительная информация в блоге Toptal Design:

• Темные интерфейсы. Хорошее и плохое. Что можно и чего нельзя делать.
• Принципы дизайна и их важность
• Изучение гештальт-принципов дизайна
• Привлекательность и подвижность. Руководство по принципам моушн-дизайна
• Улучшите свой UX с помощью этих успешных принципов дизайна взаимодействия

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

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

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

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

Большинство исследований показали, что темный текст на светлом фоне лучше, чем светлый текст на темном фоне, т. е. его легче читать. В одном известном исследовании «зрительная усталость» была значительно выше, когда испытуемые читали светлые символы на темном фоне по сравнению с темными буквами на светлом фоне (Бауэр Д., Бонакер М. и Кавониус С. Р. 19).83).

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

Доисторические рисунки возрастом 30 000 лет в пещере Шове, Франция.

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

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

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

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

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

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

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

Приложения Bloomberg Anywhere для iOS (автор Джереми Фюрст).

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

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

Toptal Developer Редактор кода Амина Шаха Гилани от Atom.

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

Когда темные пользовательские интерфейсы работают хорошо

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

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

Хулу.

Нетфликс.

Приложение Apple iTunes.

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

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

Концепция дистанционного управления и диагностики автомобиля от Ramotion.

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

Киноархив CINEMATEK в Брюсселе использует черный фон для драматического эффекта.

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

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

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

В этом примере недостаточная контрастность некоторых элементов пользовательского интерфейса, что влияет на UX. (от GUOHAO.W)

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

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

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

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

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

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

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

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

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

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

Несмотря на то, что это игра, многие смешанные типы контента плохо сочетаются с темной цветовой палитрой.

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

• • •

Дополнительная информация в блоге Toptal Design:

• В центре внимания: принципы темного дизайна пользовательского интерфейса
• Роль цвета в UX
• Создание руководства по стилю пользовательского интерфейса для лучшего UX
• Ретроспектива тенденций UX-дизайна, 2019 г.
• Как использовать тематический анализ для улучшения UX

Миклош Филипс

Главный UX-дизайнер

Об авторе

Миклош — ведущий дизайнер UI/UX/продуктов с более чем 17-летним опытом.