Правило близости

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

Кто разработал гештальт-принципы

Для начала нужно сказать, что оба правила очень тесно связаны с гештальт-психологией, поскольку основаны на ее принципах.

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

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

Правило близости в жизни и в интерфейсах

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

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

Приведем еще один наглядный пример. В первую очередь вы увидите две группы элементов, а не 18 отдельных кругов:

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

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

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

Например, если у изображения есть подпись, она должна располагаться очень близко к нему. Так пользователь не перепутает, к какой картинке относится заголовок.

Использование правила близости и примеры

Рассмотрим, как чаще всего используется правило близости.

Группировка

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

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

Еще один пример: с помощью группировки и правила близости можно сделать формы для заполнения более удобными. Для этого обратите внимание на заголовки полей, сами поля и формат ввода:

Негативное пространство

Группировка и правило близости не могут существовать без негативного или белого пространства. Именно оно отделяет группы объектов друг от друга.

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

Визуальная иерархия

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

Например, пункты в футере можно сгруппировать в категории, и они будут разделены негативным пространством: визуальная иерархия достигнута.

Читаемость

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

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

Польза (зачем использовать правило близости?)

Теперь можно кратко подытожить, чем полезно правило близости для ваших работ:

Правило близости основано на том, как расстояние между элементами влияет на их восприятие. Однако, чтобы говорить о расстояниях более конкретно, нужно изучить правило внутреннего и внешнего.

В чем суть?

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

Далее разберем примеры того, как правило внутреннего и внешнего используется в интерфейсах.

Использование в типографике, списках, карточках и блоках

Типографика

Начнем с отдельного слова. Его внутреннее расстояние — это промежутки между букв, а внешнее расстояние — это пробелы до других слов. Чтобы буквы складывались в одно слово, но при этом слова не склеивались друг с другом, внутреннее расстояние (между буквами) должно быть меньше, чем внешнее (между словами).

Когда мы видим строки, состоящие из слов, то считаем расстояние между словами внутренним, а между строками (также называется интерлиньяж) — внешним. Соответственно, интерлиньяж должен быть больше, чем расстояние между словами.

Дальше идет абзац. По правилу, расстояние между абзацами должно быть больше, чем интерлиньяж. Потому что в данном случае расстояние между абзацами является внешним, а между строками — внутренним.

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

Списки

• Внутри текста каждого пункта сохраняются те правила, которые мы рассказали выше.
• Что касается расстояния между пунктами, то здесь оно является внешним, поэтому должно быть больше, чем расстояние между строками текста.
• Если есть заголовок, то он должен находиться на еще большем расстоянии, чем пункты списка.

Карточки

• Текст, фото и кнопка призыва к действию (CTA) должны считываться как разные группы, то есть расстояние между ними — внешнее.
• В то же время оформление текста и заголовка должно соответствовать всем правилам, которые мы уже рассмотрели.
• Как правило, у карточки есть подложка. Расстояние от контента (текст, фото, кнопка) до границ подложки будет внешним, то есть самым большим.

Блоки

• Если смотреть на интерфейс в целом, то отступы внутри смысловых блоков будут внутренними, а между блоками — внешними, самыми большими.
• Расстояния между всеми блоками должны быть равны.
• Заголовки блоков должны быть ближе к своим блокам, а не к предыдущим.
• Если у блока есть подложка, то внутри него работает такая же логика, как с карточками.

Ошибки в организации карточек:

Ошибки в организации списков:

Ошибки в организации полей ввода и кнопок:

Ошибки в проектировании хедера:

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

Правило внутреннего и внешнего по сути является частным случаем правила близости. Оно позволяет более точно определить подходящие расстояния для отдельных частей дизайна.

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