Исследований, где сравнивалась бы эффективность светлого и темного фона, не так уж и много, причем они довольно старые и их результаты противоречат друг другу. Одни пишут, что долгое чтение черного текста на белом фоне утомляет глаза, поэтому для больших массивов текста советуют использовать темный фон и светлый текст. Другие доказывают ровно противоположное. Есть данные, что легче всего читать зеленый текст на желтом, а также голубой на темно-синем. Такое разнообразие объясняется тем, что для исследований используются разные устройства с разными типами экранов, разные оттенки цветов, разные размеры и начертания шрифтов, разные задачи.
Наиболее свежее исследование в этой области принадлежит Salesforce, сервису, в интерфейсе которого используется множество различных графиков. Они выяснили, что их пользователи более положительно воспринимают светлый интерфейс, но при этом показатели эффективности у темного интерфейса выше. В итоге они разработали “гибридный” вариант: графики отображаются на темном фоне, а текст — на светлом.
Эксперты советуют использовать темный фон в следующих случаях:
- предполагается, что с интерфейсом будут работать в полумраке (например, вечером перед сном), поэтому светлый фон будет выглядеть как неприятное яркое пятно;
- необходимо “спрятать” элементы интерфейса, чтобы они не отвлекали от просмотра контента или работы с ним — считается, например, что по этой причине интерфейс Photoshop темный;
- необходимо облегчить “сканирование” контента, помочь с первого взгляда выделить самое главное — поэтому часто оказывается хорошо располагать на таком фоне графики (что видно из кейса Salesforce) или фотографии.
Тем не менее, для отображения больших объемов текста — например, на медийном сайте, — лучше все-таки выбрать светлое оформление. Одна из причин — так текст легче читать людям с астигматизмом, которых в популяции, по некоторым данным, 50% (а Википедия вообще пишет, что легкий астигматизм есть у большинства населения). Свет, идущий от белого экрана, сужает зрачок, а при рассматривании темного экрана зрачок немного расширяется. Из-за этого людям, страдающим астигматизмом, может быть труднее рассматривать белые буквы на темном фоне: чем шире зрачок, тем сильнее проявляются эффекты астигматизма.
Если вы решите оформить интерфейс в темных тонах, учтите, что свет, идущий от букв, кнопок и изображений, имеет свойство немного “расползаться” на фон. Чтобы буквы не сливались, вокруг них нужно оставлять больше пустого места, чем при использовании светлого фона. Поэтому:
- используйте более крупные шрифты;
- увеличьте межбуквенные и межстрочные расстояния;
- уменьшите длину строк;
- лучше используйте шрифты без засечек;
- не используйте слишком контрастные цвета: светло-серые буквы на черном фоне читаются легче, чем ярко-белые как раз за счет того, что они не так ярко “светятся”.
Хороших вам интерфейсов!
Ссылки для тех, кто хочет углубиться в вопрос
https://bit.ly/2vI4EJ1 – научная статья с обширным литературным обзором старых научных исследований восприятия текста на фоне разных цветов и описанием собственного эксперимента авторов;
https://sforce.co/2APBPQG – кейс Salesforce;
https://bit.ly/2M87otn – хорошая обзорная статья с примерами темных интерфейсов;
https://bit.ly/2vOy746 – статья с примерами правильного применения темных цветов в интерфейсе.
