# Law of Common Region

<figure><img src="https://2027862921-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWfuagHTNcXOGsxFKj5T4%2Fuploads%2FSoD1Mb8SSDa3vEQq5LRR%2Fimage.png?alt=media&#x26;token=9463d810-b34f-4223-99c0-e31b75964068" alt=""><figcaption></figcaption></figure>

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

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

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

### Происхождение <a href="#origins" id="origins"></a>

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

### Иначе:

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

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

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

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

<figure><img src="https://arcadia.spb.ru/media/gtmfhwv1/01_random-vs-united.jpeg" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://arcadia.spb.ru/media/eguov5ns/02_proximity-overpowers.jpeg" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://arcadia.spb.ru/media/tz3hrcd0/03_the-law-of-common-region.jpeg" alt=""><figcaption></figcaption></figure>

### Как группировка объектов облегчает работу с веб-страницами <a href="#id-1" id="id-1"></a>

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

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

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

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

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

<figure><img src="https://arcadia.spb.ru/media/kb1iknui/04_proximity-law-in-a-form.jpeg" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://arcadia.spb.ru/media/ylif2rhd/05_border-improves.jpeg" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://arcadia.spb.ru/media/rsshz0zg/06_redesign-of-ikea-shopping-cart.jpeg" alt=""><figcaption></figcaption></figure>

### Резюме <a href="#id-2" id="id-2"></a>

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