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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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