Законы близости и общего поля в UX-дизайне

Оглавление

Кратко о гештальт-законах

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

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

Для начала, однако, стоит пояснить эти термины.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

Вам также может понравиться:

Блог End-to-end, приди и порядок наведи
09 марта 2022
Быстрый рост проекта, новые команды — неожиданно, всё это негативно повлияло на качество продукта. Как мы осознали проблему, искали пути её решения и что в итоге нам помогло.
Блог Компилятор бизнес-правил на основе деревьев выражений
01 февраля 2022
Статья о том, как мы делали механизм пользовательских уведомлений и как в итоге был создан компилятор на основе технологии деревьев выражений, решающий эту задачу.
Блог Исключения среди исключений в .NET
22 декабря 2021
Не все исключения в C# / .NET ведут себя одинаково. В статье собрана коллекция исключений среди исключений, которые оказались «сильнее», чем конструкция try-catch-finally.