Как темный режим влияет на UX и веб-дизайн (+ примеры)

Как темный режим влияет на UX и веб-дизайн (+ примеры)
Как темный режим влияет на UX и веб-дизайн (+ примеры)
Anonim

В последнее время кажется, что многие компании применяют подход Jay-Z к дизайну - все черное.

За последние пару лет широко разрекламированная эстетика, известная как «тёмный режим», покорила мир приложений и UI/UX.

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

Мы даже видим, как компании переносят эти темные интерфейсы на свои маркетинговые веб-сайты.

Лично мне нравится такой подход к дизайну.

Взгляните на мой гардероб, и вы легко поймете, что в моем сердце всегда была слабость к темным цветовым палитрам. (и да, я знаю, что я ходячее клише вашего типичного творческого типа).

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

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

Что такое темный режим?

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

Вот как группа IMPACT в Facebook IMPACT Elite выглядит в темном режиме на платформе.

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

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

Изображение предоставлено Quora

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

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

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

Изображение предоставлено AppleInsider

Хотя с момента массового использования ЭЛТ-мониторов прошло уже более 15 лет, любовь многих людей к темным темам никогда не угасала.

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

Влияние темного режима на пользовательский опыт (UX)

Использование темного режима - это серьезный сдвиг в мире дизайна, но, опять же, этот подход подойдет не каждой компании.

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

Брендинг

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

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

Например, взгляните на сайт Audemars Piguet. Компания по производству роскошных часов использует темные тона в своем брендинге, чтобы передать ощущение элегантности и высокого мастерства.

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

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

Удобство использования

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

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

Потоковые приложения, такие как Netflix, являются прекрасным примером этого.

Большинство людей смотрят передачи ночью или в тускло освещенной комнате, сидя на расстоянии примерно 6–8 футов от телевизора.

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

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

Представьте, как неприятно было бы расслабиться на ночь, посмотрев в тысячный раз эпизод «Офиса» на Netflix, а затем увидеть ярко-белый интерфейс.

Также важно подумать о том, как долго пользователи будут использовать ваш продукт.

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

Похоже, это одно из первых применений темного режима, которое до сих пор актуально.

По словам Энди Кларка, основателя студии веб-дизайна Stuff & Nonsense, «технические разработчики использовали темные темы в своих редакторах кода примерно столько, сколько я себя помню».

Он также отмечает, что все самые популярные редакторы кода, такие как код Visual Studio, предлагают темный режим или тему.

Доступность и разборчивость

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

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

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

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

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

Пример разборчивости белого текста на черном фоне и черного текста на белом фоне

Имея это в виду, темный режим - не лучший выбор для сайтов, ориентированных на контент.

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

Как оптимизировать маркетинг и дизайн для темного режима

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

Электронная почта

Темный режим все еще относительно нов, когда дело касается почтовых клиентов, но крупные игроки, такие как Gmail, мобильные приложения Outlook и Apple Mail, уже продвигают эту опцию.

Пример того, как Gmail выглядит в темном режиме

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

  • Старайтесь избегать темно-серых или белых изображений с прозрачным текстом
  • Сохраняйте изображения логотипов в формате JPEG с белым фоном
  • Если сомневаешься, проверь, проверь, проверь!

Чтобы получить полное представление обо всем, что вы можете сделать для оптимизации своей электронной почты для темного режима, я рекомендую прочитать эту статью, написанную Кристиной Остин из IMPACT.

Социальные сети

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

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

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

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

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

Веб-сайт

Пару лет назад я написал статью о том, как поведение мобильных устройств влияет на то, как мы проектируем настольные компьютеры.

Сегодня эта идея еще более верна.

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

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

Дизайнер продукта Джони Вино использует этот подход на своем веб-сайте в примере ниже.

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

Перейди на темную сторону

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

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