Бренд

Темная сторона UI. Преимущества темных интерфейсов.

Темная сторона UI. Преимущества темных интерфейсов.

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

Темная сторона UI. Преимущества темных интерфейсов.

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

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

Визуальное восприятие темного

Один из опросов, результаты которого были опубликованы довольно давно, в 2009, на сайте ProBlogger, уже продемонстрировал пару интересных моментов. Читателей спросили, какой тип фона они предпочитают в блогах. Почти половина ответили, что отдают предпочтение светлому фону  — и это логично, ведь блоги обычно построены прежде всего на текстовом контенте, а потому аспект читабельности перевешивает остальные. Однако, 10% респондентов ответили, что они предпочитают темный фон и более чем одна треть упомянули, что выбор фона зависит от характера и тематики блога, контента, которым он наполнен. Такой внушительный процент пользователей дизайнеры никак не могут проигнорировать в процессе поиска эффективных решений. Более того, в случае более слабой концентрации текстового контента в цифровом продукте — вебсайте или приложении — этот сегмент становится даже больше. Это хороший пример того, что исследование и опросы должны быть неотъемлимой частью дизайна. Зная, что хочет пользователь или хотя бы то, к чему он готов, дизайнеры могут позволить себе разумно нарушать стереотипы и ломать границы традиционного видения.

Научное исследование, которое провели по данной теме Richard H. Hall и Patrick Hanna, раскрывает важные моменты, касающиеся визуального восприятия фонового цвета и его продуктивности. Проанализировав результаты практических экспериментов, проведенных различными учеными ранее в сфере эффективности и читабельности веб страниц, автор сделали вывод: «Было обнаружено, что комбинации с положительной полярностью приводили к лучшей эффективности (это темный цвет на светлом фоне), и, как и показывают ранее упомянутые исследования, чем больше контраст между цветовой комбинацией, тем выше будет эффективность его восприятия». Следовательно, темный фон может быть так же эффективен, как и светлый, в случае, если остальные аспекты, в частности контраст и разборчивость элементов страницы, разработаны и протестированы должным образом. Исследование содержит много полезной и важной информации, основанной на тестировании  пользовательских взаимодействий относительно разных цветовых комбинаций и их эффективности, а потому рекомендовано к прочтению для дизайнеров.

seafood_recipe_website_landing_tubik

Вебсайт по кулинарии из морепродуктов

Аспект читабельности

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

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

tubik_studio_website_ui_bakery

Вебсайт пекарни

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

  • темный фон поглощает некоторую часть света от остальных элементов, поэтому следует оставлять достаточно пустого места или «воздуха» между элементами;
  • правильно выбранная длина строки может сделать блоки текста более читабельными и легкими для восприятия пользователей;
  • аспекты вдумчивого дизайна межстрочного пространства, равно как и длины текстовой строки, может иметь большое влияние на фактор читабельности, особенно на темном фоне, поэтому размер абзаца, межстрочное и межбуквенное простанство должны быть тщательно продуманы;
  • темный не всегда оначает черный, поэтому в каждом конкретном случае дизайна имеет смысл уделить некоторое время тестированию разных темных фонов и цветов для презентации данного контента — будьте открыты к экспериментам;
  • оттенки, градиенты и эффекты блеска могут негативно сказаться на читабельности;
  • шрифты без засечек (sans-serif fonts) обычно более читабельны, тогда как шрифты с засечками (serif fonts) могут выглядет более элегантно — учитывая этот фактор, можно улучшить читабельность и презентацию контента.

tubik_studio_buonapp

Интерфейс приложения BuonApp — социальной сети для обмена рецептами

Аспект контрастности

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

contrast-table

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

Одно из ранних исследований аспектов контрастности и читабельности содержит такой совет: «В случае темного фона, удостоверьтесь, что вы не используете слишком яркие буквы: снизьте тональность белого текста до бледно-серого, или смягчите используемый цвет, чтобы снять излишний контраст и свечение; этот принцип используется при создании слайдов: как минимум 5% серый применяют, чтобы снять сияние яркого белого. Интересно, что читается он все равно как «белый». Также, сделайте текст жирным, заметным, чтобы у него хватило сил не быть «съеденным» темнотой». Этот тест, как и многие другие, может открыть новые варианты тонирования для эффективной и естественной подачи контента на странице сайта или экране приложения.

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

tubik-studio-application-recipes-and-cooking-1

Приложение с базой рецептов

Аспект эмоционального восприятия

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

tubik_studio_museu

Приложение Museu

Преимущества темного фона

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

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

tubik_studio-architecture_firm

Вебсайт архитектурного бюро

Вопросы к рассмотрению

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

  • Исследование пользовательской аудитории. Практические опросы, теоретические исследования и эксперименты являются важными источниками данных о целевой аудитории, ее желаниях и ожиданиях, которые представляют основу для выбора эффективной и привлекательной дизайн-схемы.
  • Исследование конкуренции. Исследование ближайших конкурентов дает понимание, какие дизайн-решения уже применены другими игроками на рынке, и этот фактор может повлиять на выбор оригинального дизайна с целью сделать продукт заметным.
  • Тестирование взаимодействий. Темный фон, будучи более уязвимым в аспектах читабельности и разборчивости, должен быть тщательно протестирован на всех типах устройств и в разных разрешениях.
  • Фактор окружения. Анализ типичных условий, в которых продукт чаще всего будет использоваться целевой аудиторией, может дать дополнительные причины в пользу или против темного фона.
  • Количество контента. Количество элементов и блоков, которые должны появиться на экране или странице, может повлиять на решение относительно фона: темный фон при небольшом пространстве между элементами интерфейса может значительно усложнить их восприятие.
  • Характер контента. Темный фон может демонстрировать лучшую продуктивность для интерфейсов, основанных на графическом контенте, чем на больших блоках текста к прочтению.

tubik-studio_social_network

Приложение мобильной социальной сети

Рекомендации к прочтению

Вопрос применения темного фона в пользовательских интерфейсах стал объектом внимания многих профессионалов в последнее время. В ракурсе дизайна, мы могли бы порекомендовать следующие статьи по данной теме (ссылки представляют оригинальные статьи на английском языке):

The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention

Visual Perception: An Introduction

Art and Visual Perception: A Psychology of the Creative Eye

Colour Choices on Web Pages: Contrast vs Readability

The Dos and Don’ts of Dark Web Design

Англоязычный оригинал статьи был опубликован в Tubik Blog

Don’t be shy to share this content:

UI дизайн, UX дизайн, веб дизайн, дизайн, дизайн взаимодействий, дизайн интерфейсов, дизайн мобильных приложений, колористика, читабельность вебсайта,
  • English
  • Russian


This website is designed and curated by Tubik Studio learn more about us Contact Us