Принцип близости: расстояние показывает связь

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

Макс Вертгеймер разбирал группировку по расстоянию в работе 1923 года: меняя промежутки между одинаковыми точками, он показывал разные способы их объединения. Доступен английский перевод в сборнике Эллиса 1938 года, раздел I.

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

Представьте форму с двумя блоками: «Сообщения о заказах» и «Новости сервиса». Под каждым заголовком стоят переключатели каналов доставки. Это учебный пример Atlas UX.

Если расстояние от последнего переключателя первого блока до второго заголовка такое же, как между переключателями, граница групп получается слабой. Можно ошибочно отнести канал к соседнему типу уведомлений.

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

Сначала определить смысловые группы. Запишите, какие элементы должны читаться вместе. Иначе аккуратный ритм отступов лишь закрепит неверное деление.

Сравнивать промежутки. Рассмотрите расстояние от подписи до своего поля и до соседнего поля. Рабочие значения выбирайте в контексте размера текста, содержания и ширины экрана. В обзоре исследований группировки важную роль играют относительные расстояния; универсального отступа для любой формы из него получить нельзя. Wagemans и соавторы, 2012, раздел 3.3.

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

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

Рамка, цвет и сходство формы могут подсказывать другую группировку. Не рассчитывайте, что близость всегда победит. Если одна пара элементов объединена расстоянием, а другая — оформлением, сначала проверьте, нужна ли такая неоднозначность.

В исследовании Johansson и Ulrich участники определяли направление групп квадратов. Результаты зависели от согласованности пространственной и контрастной подсказок. Это лабораторная задача, а не проверка формы настроек. Авторы, 2024.

Избыточный разрыв тоже может мешать вашей задаче: пояснение окажется далеко от поля, а кнопка — от данных, к которым относится. Не делайте «больше воздуха» самостоятельным критерием качества.

Покажите настройки без предварительного объяснения и попросите найти канал для сообщений о заказах. Уточните, какие переключатели, по мнению человека, относятся к каждому заголовку. Затем дайте изменить одну настройку и проверьте фактический результат.

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

Сходство объединяет элементы по признакам оформления. Общая область использует воспринимаемую границу группы. Группировка в смысловые блоки касается организации содержания и памяти: соседство на экране само по себе ещё не создаёт понятного смыслового блока.

• Wertheimer, 1923; перевод Ellis, 1938. Laws of Organization in Perceptual Forms — историческая авторская работа, разделы I–III.
• Wagemans et al., 2012. A Century of Gestalt Psychology in Visual Perception I — исследовательский обзор, DOI 10.1037/a0029333.
• Johansson & Ulrich, 2024. Serial processing of proximity groups and similarity groups — первичное исследование, DOI 10.3758/s13414-024-02861-2.
• W3C. Understanding SC 1.3.1: Info and Relationships — официальное пояснение требования доступности.