Контраст и подобие: Как связать элементы интерфейса при помощи визуальных приёмов

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

Digital-агенство Red Collar подготовило для рубрики «Интерфейсы» перевод заметки.

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

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

Контраст

Источник: Deviantart

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

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

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

Свет и тень

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

Источник: Usability Post

Главная идея такова, что затемнение «нажатой» кнопки делает её более реалистичной, имитируя тени в 3D-мире. Помимо этого, видоизменение кнопки сигнализирует пользователю о произошедшем действии. Этот способ контраста выходит далеко за рамки простого улучшения визуальных эффектов. На самом деле, в дизайне интерфейсов это довольно полезный инструмент.

Основатель Usaura Дмитрий Фадеев
подчёркивает, что контраст светлого и тёмного может быть применим в двух вариантах в UI-дизайне:

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

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

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

Сталкивая цвета

Использование контраста в цвете — жизненно необходимая техника, которую вам стоит взять на вооружение. Она помогает вести взгляд пользователя, менять его настроение, даёт подсказки. Таким образом сайт получает свой отличительный стиль. Говоря о контрасте, цвета можно условно разделить на две противоположные группы: тёплые и холодные.

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

Холодные цвета — зелёные, синие, фиолетовые. Эти более склонны к расслаблению, успокоению, покорению и пассивности.

Как можно использовать это в своих интересах?

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

На примере выше видно, как жёлтый ярко выделяется на синем. Таким же образом красный забирает внимание у зелёного, почти съедая его.

Источник: TV Safety.org

Контраст между тёплыми и холодными цветами может обратить внимание (или отвлечь его) на определённые области в интерфейсе. Просто посмотрите на пример сайта TV Safety.org (выше). Особенно хорошо видно, как красные навигационные кнопки выделяются, потому что они сопровождаются зелёным фоном.

Передний и задний план

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

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

Источник: Connecting & Separating Elements Through Contrast & Similarity

Как видно выше на примере, проиллюстрированном Брэдли, зелёные круги схожи друг с другом, и оранжевые полосы тоже выглядят одинаково. Но они контрастны уже между собой.

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

Если хотите узнать больше о контрасте как способе отображения визуальной иерархии, ознакомьтесь с этой отличной
статьёй Стивена Брэдли.

Подобие

Как мы упоминали в предыдущей статье, подобие во внешности объектов передаёт подобие их функций.

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

Не все виды подобия имеют одинаковый эффект. Некоторые работают сильно, другие более изящно. Главное — не забывайте о контексте. Рассмотрим все виды подобия в контексте применения их в UI-дизайне.

Три главных «подобия»

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

Взгляните на первую иллюстрацию и посмотрите, какие объекты смотрятся наиболее связанными.

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

Но что, если бы все предметы были одной формы и цвета?

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

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

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

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

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

Применение «подобия» в UI-дизайне

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

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

Ссылки

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

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

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

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

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

Как Энди Рутледж объясняет в своём
исследовании, AIGA использует разнообразие подобий уже на другом уровне:

Источник: Gestalt Principles of Perception-2: Similarity

На сайте есть множество разных видов ссылок: статьи, авторы, комментарии, разделы сайта, и так далее. Каждый вид ссылки имеет своё отличие, будь то цвет, подчёркивание или курсив. Это намного более сложная иерархия, чем на Reddit, но применяются всё те же принципы подобия.

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

Несмотря на все вариации, эти элементы помогают создавать легко понятное распределение ссылок по категориям:

Заголовки статей — ссылки представлены оранжевым, жирным, не подчёркнутым текстом с засечками.
Категории — например, такие ссылки на категории, как «Голос» представлены светло-серым подчёркнутым текстом в верхнем регистре без засечек.
Люди или комментарии — представлены красноватыми, подчёркнутыми ссылками.
Действия пользователя — такие ссылки на действия, как «Найти вакансию» (появляется в категории Aiga Design Jobs) представлены тёмно-серым, подчёркнутым текстом в смешанном регистре. Для дальнейшей связи между действием и категорией ссылка появляется на таком же сером фоне.

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

Контент

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

Посмотрим, как страница ZURB передаёт эти связи с помощью подобия.

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

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

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

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

Организация

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

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

Также можно разделить элементы на две категории. Голубые квадраты смотрятся связанными, зелёные смотрятся тоже связанными. У каждого элемента одинаковые физические характеристики (квадраты одинакового размера), но наше зрение различает две отдельные категории.

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

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

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

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

Гармония контраста и подобия

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

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

Брэдли поясняет, что сайт Lowdi мастерски воспользовался подобием и контрастом при выборе цветов.

Источник: Connecting & Separating Elements Through Contrast & Similarity

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

Если хотите больше образцов гармонии контраста и подобия, ознакомьтесь со
статьёй Codrops с 25 моделями акцентирования в веб-дизайне.

Вывод

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

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

Присылайте свои интерфейсные кейсы на interface@siliconrus.com