Прокачайте ваш онбординг
с навигатором интерфейсов Experrto
Выберите категорию

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

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

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

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

Каждый тип формы образует одну группу.

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

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

Содержание статьи

Обозначение связи объектов при помощи общих характеристик

Цвет
Форма
Размер

Заключение

Обозначение связи объектов при помощи общих характеристик

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

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

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

Цвет

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

Набор элементов воспринимается как строки, а не столбцы. Все благодаря группировке по цвету

Набор элементов воспринимается как строки, а не столбцы. Все благодаря группировке по цвету

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

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

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

Главная страница онбординг-платформы Experrto: Кнопки регистрации и «Подробнее», а также хотспот рядом с заголовком и стрелка прокрутки лендинга одинакового цвета. В этом случае пользователи логично предполагают, что все эти элементы кликабельны (как и ссылки в блоге)

Главная страница онбординг-платформы Experrto: Кнопки регистрации и «Подробнее», а также хотспот рядом с заголовком и стрелка прокрутки лендинга одинакового цвета. В этом случае пользователи логично предполагают, что все эти элементы кликабельны (как и ссылки в блоге)

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

Еще один пример использования принципа подобия для выбора цвета кнопок к обучающих тултипах:

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

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

В приведенном ниже примере все кнопки в Центре сообщений зеленые, поэтому пользователю приходится тратить время на выяснение того, какая кнопка является основной. Кроме того, кнопка «Отправить» (Submit Inquiry) находится далеко от самого сообщения, что также сбивает людей с толку и плохо сказывается на пользовательском опыте.

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

UX-дизайн: как сделать ваш продукт удобным для восприятия

Форма

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

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

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

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

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

Не стоит использовать иконки одинаковой или очень похожей формы для обозначения разных категорий, поскольку они могут ошибочно сигнализировать о взаимосвязи. В навигации по приложению Makr один и тот же значок использовался как для функции «Сохранить даты» (Save the dates), так и для функции RSVP

Не стоит использовать иконки одинаковой или очень похожей формы для обозначения разных категорий, поскольку они могут ошибочно сигнализировать о взаимосвязи. В навигации по приложению Makr один и тот же значок использовался как для функции «Сохранить даты» (Save the dates), так и для функции RSVP

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

Например, на главной странице сайта Etsy некоторые продукты отмечены как имеющие бесплатную доставку (FREE shipping) или являющиеся бестселлерами (Bestseller) с индикаторами аналогичной формы, но разного цвета, а индикатор «Бестселлер» включает небольшой значок, который помогает визуально отличить эти товары от группы товаров с бесплатной доставкой.

Etsy.com

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

Другой пример:

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

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

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

Как помочь пользователям разобраться в интерфейсе сайта?

Размер

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

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

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

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

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

Anthropologie

Другой пример:

«Что нового в ассортименте ИКЕА»

Баннер со ссылкой на статью «Что нового в ассортименте ИКЕА» отличается по размеру от карточек товара 

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

Специалисты провели исследование на сайте Марты Стюарт. Оно показало, что некоторые пользователи даже не обратили внимание на обучающее видео в правой части сайта, так как по размеру оно было таким же, как и рекламные баннеры, расположенные под ним.

Специалисты провели исследование на сайте Марты Стюарт.

Интуитивно понятный интерфейс: 4 простых принципа

Заключение

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

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

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

Прокачайте ваш онбординг!

По материалам: nngroup.com

Прокачайте ваш онбординг
с навигатором интерфейсов Experrto