Принцип завершения в визуальном дизайне

No items found.
Аудио перевод статьи
0:00
0:00
·

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

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

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

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

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

1. Применение

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

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

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

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

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

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

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

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

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

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

Дизайнеры могут использовать принцип завершения, чтобы:

  1. показать пользователю, что дополнительный контент существует
  2. подтолкнуть пользователей к взаимодействию с ним

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

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

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

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

Например, страница “Сон” в приложении для медитаций Headspace кажется полной, хотя, если прокрутить ее ниже, можно обнаружить несколько других вариантов медитации.

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

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

3. Убедитесь, что части элемента дают представление о завершенной форме

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

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

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

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

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

Напротив, приложение Target эффективно применило принцип завершения для обозначения дополнительных элементов за пределами экрана. В разделе “Делайте покупки в вашем магазине” представлены 3 кнопки, последняя из которых обрезана. Ее видимая часть составляет примерно 40% полного размера, что позволяет надлежащим образом проинформировать пользователей о доступном контенте.

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

Заключение

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

Источник:
nngroup.com
·
comments powered by HyperComments