Law of Common Region
Закон общего региона
Элементы, как правило, воспринимаются как группы, если они разделяют область с четко определенными границами.
Готовый рецепт
Общая область создает четкую структуру и помогает пользователям быстро и эффективно понимать взаимосвязь между элементами и разделами.
Добавление границы вокруг элемента или группы элементов - это простой способ создать общую область.
Общая область также может быть создана путем определения фона за элементом или группой элементов.
Происхождение
Принципы группировки (или гештальт-законы группировки) - это набор принципов в психологии, впервые предложенных гештальт-психологами для объяснения наблюдения, что люди естественным образом воспринимают объекты как организованные шаблоны и объекты, принцип, известный как Prägnanz. Гештальт-психологи утверждали, что эти принципы существуют потому, что разум обладает врожденной склонностью воспринимать паттерны в стимулах на основе определенных правил. Эти принципы подразделяются на пять категорий: Близость, Сходство, Непрерывность, Замкнутость и Связность.
Иначе:
Закон близости говорит, что объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Подобная группировка (разбиение на группы) помогает верно воспринимать информацию.
Закон общего поля гласит: элементы воспринимаются как группа, если они находятся в одной области, имеющей чёткую границу. Данный закон стоит использовать при недостатке пространства.
Приведём несколько примеров.
С помощью пустых промежутков между объектами можно объединить их в несколько чётко воспринимаемых групп.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Fgtmfhwv1%2F01_random-vs-united.jpeg&width=768&dpr=4&quality=100&sign=625b593f&sv=1)
Объекты, расположенные близко друг к другу, будь они даже разной формы или цвета, будут ощущаться как группы, поскольку близость превалирует над остальными характеристиками.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Feguov5ns%2F02_proximity-overpowers.jpeg&width=768&dpr=4&quality=100&sign=7708107d&sv=1)
При группировке объектов следует учитывать соотношение внешнего и внутреннего пространств: внутренние промежутки всегда должны быть меньше внешних. Данное правило используется даже в этом тексте (как и практически в любом другом): расстояние между буквами меньше, чем таковое между словами, в то время как расстояние между словами меньше междустрочного интервала. Таким образом, благодаря закону близости, у нас получается различать упорядоченные слова и строки, а не просто случайный набор знаков.
При этом, как видно на изображении ниже, закон общего поля доминирует над законом близости:
Закон общего поля превалирует над законом близости: серый прямоугольник создаёт новую группу из шести объектов.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Ftz3hrcd0%2F03_the-law-of-common-region.jpeg&width=768&dpr=4&quality=100&sign=b3dc6dbd&sv=1)
Как группировка объектов облегчает работу с веб-страницами
Как уже сказано выше, благодаря группировке возникает определённая иерархия объектов. При взаимодействии с веб-страницей такая иерархия позволяет пользователю быстрее и логичнее воспринимать контент.
Закон близости является главенствующим при группировке объектов. В психологии этот процесс называется сокращением, или сворачиванием: небольшие фрагменты информации объединяются в группы, что позволяет лучше удерживать эти сведения в кратковременной памяти.
В качестве простого примера может служить последовательность из 6 цифр, запомнить которую без группировки сложнее, чем разбив её на три группы по две цифры в каждой, в результате чего запоминать уже нужно только три сущности вместо шести. В самом деле, что проще запомнить: 235698 или 23 56 98? Ответ очевиден.
Таким образом, при грамотном разбиении объектов на группы улучшается восприятие страницы и сокращаются усилия, которые пользователь затрачивает на взаимодействие с сайтом для достижения своих целей.
Применение закона близости улучшает восприятие формы: благодаря разделению личных и рабочих данных становится понятно, к чему относятся те или иные поля.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Fkb1iknui%2F04_proximity-law-in-a-form.jpeg&width=768&dpr=4&quality=100&sign=6a5c32b4&sv=1)
Что касается уже упомянутого закона общего поля, то он помогает в разработке компактных интерфейсов (когда мало места), а также в ситуациях, когда нужно что-либо поправить в короткие сроки.
Ниже приведён пример, где расстояние между верхним и нижним рядами изображений практически такое же, как между изображением и подписью к нему. Из-за этого трудно разобрать, какая подпись к чему относится, особенно если изображений много. Проблема решается достаточно просто: вокруг каждого объекта можно добавить границу, и тогда отношение подписи к изображению становится очевидным.
Благодаря границе становится понятно, к какому изображению относится та или иная подпись.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Fylif2rhd%2F05_border-improves.jpeg&width=768&dpr=4&quality=100&sign=f50c016e&sv=1)
И еще один реальный пример. Старая версия сайта Ikea не позволяла однозначно определить, к чему относится селектор количества товара. После обновления дизайна группировка элементов улучшилась, а между объектами появился разделитель. Таким образом, дизайнеры применили закон близости, а также закон общего поля с видимой границей.
Благодаря новому дизайну пользоваться корзиной на сайте Ikea стало намного проще.
![](https://ivan-demin.gitbook.io/~gitbook/image?url=https%3A%2F%2Farcadia.spb.ru%2Fmedia%2Frsshz0zg%2F06_redesign-of-ikea-shopping-cart.jpeg&width=768&dpr=4&quality=100&sign=dc0808fa&sv=1)
Резюме
Законы близости и общего поля являются двумя важными принципами гештальтпсихологии. В дизайне они помогают создать простые в использовании интерфейсы, улучшить восприятие веб-страниц и обеспечить эффективное взаимодействие с продуктом.
Last updated