Принципы гештальта определяют, как люди воспринимают визуальный мир — включая цифровые интерфейсы. Один из них, закон общей области, гласит: если элементы находятся в одном визуальном контейнере, мы воспринимаем их как группу. Более того, мы предполагаем, что эти элементы чем-то связаны — обладают общей характеристикой или выполняют схожую функцию.
Дизайнеры могут использовать закон общей области с пользой. Для этого нужно применять границы, фоны и тени, чтобы визуально объединить связанные элементы.
Определяйте группировку элементов
Что заставляет нас считать, что определённые объекты принадлежат к одной группе? В 1999 году гештальт-психологи Стивен Палмер и Ирвин Рок сформулировали закон общей области. Этот принцип восприятия гласит, что элементы, находящиеся в одной и той же ограниченной области, воспринимаются как группа. Важно, чтобы эта область имела чётко определённую границу. В интерфейсах для этого можно использовать рамки или фоновый цвет, чтобы создать контейнер, в который помещаются связанные элементы. Это помогает пользователям понять структуру пользовательского интерфейса и увидеть логические связи между элементами.
Превосходите сходство
Добавление общего фона визуально объединяет элементы. Мы воспринимаем их как связанные, даже если они различаются по форме.
Дизайнеры используют этот приём, чтобы организовать контент и интерфейсные элементы в чёткие и понятные блоки. Это помогает пользователю понять структуру интерфейса и определить, с какими элементами он может взаимодействовать. Например, в приложении Slack используется принцип общей области: секция управления выделена тёмным фоном, что визуально отделяет её от других элементов интерфейса.
Превосходите близость
Как взаимодействуют различные принципы гештальта? Например, если два элемента находятся рядом, но при этом принадлежат к разным областям, чёткая граница между ними — более сильный визуальный сигнал, чем их пространственная близость.
В пользовательских интерфейсах создание общей области для связанных элементов помогает пользователю понимать группировку. Например, в более ранней версии планшетного приложения Food Network было трудно понять, к какому рецепту относится определённая оценка: под названием рецепта оставалось слишком много свободного пространства. Эту проблему решили, обрамив связанные элементы границей, использовав карточный макет.
Установите иерархию
Закон общей области помогает выстраивать визуальную иерархию. Дизайнеры группируют элементы, выделяя их границами или помещая на общий фон. Это позволяет пользователям легче ориентироваться в интерфейсе и быстрее находить нужную информацию.
Пример можно увидеть на страницах статей, где изображения часто объединены с подписями. Создание визуальной границы между этими двумя элементами отделяет их от остального содержимого статьи.
Выделяйте несколько элементов
Закон общей области придаёт структуру и позволяет визуализировать сразу несколько групп. Это особенно важно в таблицах, где сравниваются разные продукты и их характеристики. В подобных случаях дизайнеру необходимо найти способ выделить и столбцы, и строки.
Один из способов структурировать такую таблицу — использовать «зебру», то есть чередование фонов для строк, а также границы для отделения столбцов. Другой вариант — обвести строки рамкой, а при наведении менять цвет фона у столбцов.
Выделяйте важную информацию
Как и в реальной жизни, границы могут не только разделять, но и объединять. Использование рамки для изоляции одних элементов от других также показывает пользователю, какие элементы относятся к одной группе. В качестве альтернативы дизайнеры могут обводить элементы, связанные между собой. Такие карточные макеты часто применяются, например, в погодных приложениях.
Группируйте связанную информацию
Человеческий мозг постоянно анализирует и классифицирует информацию, которую мы видим. Используя закон общей области в дизайне, вы выполняете часть этой работы за пользователя. С первого взгляда он может выделить важные данные, например сведения о прогнозе погоды, и проигнорировать остальное.
Привлекайте внимание к важному
Ограничение элементов в рамках визуальной области делает их заметными на фоне остального интерфейса. В приведённом примере лёгкое изменение цвета фона, границы и тени отделяет форму регистрации от остальной части страницы. Это привлекает к ней внимание и подчёркивает её значимость.
Показывайте взаимосвязь
Согласно закону общей области, контейнеры передают идею связи между элементами. Это работает и в графическом дизайне. Даже если контейнер не имеет чётких границ, он объединяет элементы внутри, создавая ощущение завершённости.
Элементы, выходящие за пределы границы, нарушают восприятие группы и создают ощущение хаоса и небрежности.
Применяйте несколько общих областей
Один из способов выстроить иерархию — использовать несколько общих областей одновременно. В примере каждая карточка имеет общий цвет фона, что делает их отдельными элементами. Белый фон и граница вокруг всей группы карточек, в свою очередь, показывают, что эти карточки относятся к одной категории.
Совет! Чрезмерное использование закона общей области может привести к визуальной перегрузке. В таких случаях подумайте об использовании пустого пространства — оно снижает визуальную сложность дизайна.
