Law of Common Region

Закон общего региона

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

Готовый рецепт

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

2. Добавление границы вокруг элемента или группы элементов - это простой способ создать общую область.

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

Происхождение

Принципы группировки (или гештальт-законы группировки) - это набор принципов в психологии, впервые предложенных гештальт-психологами для объяснения наблюдения, что люди естественным образом воспринимают объекты как организованные шаблоны и объекты, принцип, известный как Prägnanz. Гештальт-психологи утверждали, что эти принципы существуют потому, что разум обладает врожденной склонностью воспринимать паттерны в стимулах на основе определенных правил. Эти принципы подразделяются на пять категорий: Близость, Сходство, Непрерывность, Замкнутость и Связность.

Иначе:

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

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

Приведём несколько примеров.

С помощью пустых промежутков между объектами можно объединить их в несколько чётко воспринимаемых групп.

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

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

При этом, как видно на изображении ниже, закон общего поля доминирует над законом близости:

Закон общего поля превалирует над законом близости: серый прямоугольник создаёт новую группу из шести объектов.

Как группировка объектов облегчает работу с веб-страницами

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

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

В качестве простого примера может служить последовательность из 6 цифр, запомнить которую без группировки сложнее, чем разбив её на три группы по две цифры в каждой, в результате чего запоминать уже нужно только три сущности вместо шести. В самом деле, что проще запомнить: 235698 или 23 56 98? Ответ очевиден.

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

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

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

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

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

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

Благодаря новому дизайну пользоваться корзиной на сайте Ikea стало намного проще.

Резюме

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