Принцип сходства в визуальном дизайне

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

Источник

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

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

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

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

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

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

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

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

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

Tribute.co: И для иконки загрузки, и для кнопки «Record or Upload video» используется один и тот же красный цвет, что визуально объединяет эти элементы в одну группу. В таком интерфейсе пользователи могут предположить, что иконка и кнопка функционируют одинаково, однако здесь иконка несёт лишь декоративный характер и не является кликабельной.

Кнопки одного цвета воспринимаются одинаково важными. Поэтому рекомендуется использовать отдельный цвет для основных кнопок призыва к действию (CTA), чтобы выделить их среди второстепенных элементов. На примере внизу видно, что все кнопки Message Center являются зелеными. Это заставит пользователя потратить время на то, чтобы понять, какая кнопка является основной, чтобы отправить форму (более того, кнопка «Submit» находится далеко от блока с сообщением, что еще больше замедлит пользователей).

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

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

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

Аналогичным образом, когда указатели (тэги) имеют уникальную форму, пользователи могут находить определённые элементы гораздо оперативнее. Если же указатели выглядят слишком похожими, то просмотр и обнаружение различий занимает больше времени. К примеру, на главной странице Etsy некоторые продукты помечены тэгами «Free shipping» или «Bestseller». К счастью, два тэга различаются цветами, а тэг «Bestseller» содержит маленькую иконку, которая визуально отличает два тэга.

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

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

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

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

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

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

Больше интересных материалов ищите в нашем блоге и телеграм-канале.