UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Принцип завершения образа (замкнутости) в визуальном дизайне
Редакція
Редакція

Опубліковано

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

#ux

Люди склонны заполнять пробелы, чтобы воспринимать объект целиком.

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

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

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

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

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

Логотипы компании

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

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

В логотипе Службы общественного вещания (PBS) применен принцип завершенности для изображения 3 голов (2 в положительном пространстве и 1 в негативном)

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

Иконки интерфейса

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

Например, Google Slides применил принцип завершенности к одной из своих иконок. Она передает функцию посредством минималистичного визуального дизайна.

Форма иконки Google Slides использует принцип завершенности. Иконка изображает круг, наложенный на объект, который наш разум воспринимает как квадрат. Несмотря на незавершенную фигуру, мы легко можем заполнить пробелы

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

Применение принципа завершенности к сигналу о наличии дополнительного контента

Дизайнеры могут использовать принцип завершённости, чтобы: 1) указать, что существует дополнительный контент, и 2) стимулировать пользователя взаимодействовать с ним.

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

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

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

Например, страница «Sleep» в приложении для медитации Headspace выглядит завершенной, хотя в нижней части страницы есть несколько других предложений для медитации. Этот дизайн можно улучшить, отображая сегментированный элемент (например, половину последующей кнопки «See all recent») для передачи дополнительного контента, как показано ниже.

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

Проверьте сегментированные элементы

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

Какой из этих двух рисунков легче понять? Большинство из нас, вероятно, скажет, что на графике слева легче увидеть полный круг

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

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

Напротив, приложение Target успешно применило принцип завершенности. В дизайне представлены 3 варианта кнопок в разделе «Shop your store»; третий вариант был обрезан. Этот третий элемент имел примерно 40% размера от двух других элементов и предоставлял достаточно контента для передачи информации.

Приложение Target успешно применило принцип завершенности к третьей кнопке в наборе

Вывод

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

Узнайте больше о визуальном восприятии и других принципах психологии, влияющих на дизайн, в нашем учебном курсе The Human Mind and Usability.


Перевод статьи nngroup.com

Топ коментарі (0)