Принцип близости в визуальном дизайне

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

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

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

Располагайте связанные элементы рядом друг с другом

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

Для создания групп объектов необходимо использование различного количества символа “пробел”. Например, в хедере сайта городского совета Веллингтона функция "Поиск" при просмотре на большом экране располагается на той же строке, что и основная навигация по сайту. Однако дополнительные пробелы между основной навигацией и “Поиском” указывают на то, что они принадлежат к отдельным группам и, таким образом, имеют отличительные функциональные возможности. Этот пробел очень важен для того, чтобы функция “Поиска” отличалась от остальной части главного меню.

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

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

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

С другой стороны, группировка несвязанных элементов может скрывать эти элементы от пользователей. Например, на сайте EDD в Калифорнии кнопка “Добавить” теряется среди несвязанных с ней кнопок “Следующий”, "Сохранить как черновик" и "Отменить". Чаще всего пользователи смотрят только на один пункт в группе и на основании него делают вывод о других элементах. (Заметим, что кнопки "Предыдущий" и "Следующий" связаны между собой, поэтому их группировка повысила бы удобство их использования).

Элементы, расположенные далеко друг от друга, кажутся несвязанными, легко упускаются из виду

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

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

Аналогичным образом, инструкции по взаимодействию с текущим содержимым экрана в приложении Hulu на Apple TV расположены в нижнем правом углу экрана, вдали от соответствующего содержания. Кроме того, текст затеняется фоном фотографии. Из-за этого мой муж долгое время считал, что он никак не может взаимодействовать с выбранным элементом.

Расположение может нарушаться в адаптивном дизайне

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

Например, на главной странице сайта “Transport for London Driving” ссылки на информацию о “Ultra Low Emission Zone” и “Low Emission Zone” расположены рядом, в двух разных столбцах. Расположение этих двух ссылок в непосредственной близости позволяет пользователям увидеть их сразу и сравнить их между собой, чтобы решить, на что они хотят нажать. Однако на маленьких экранах эти ссылки расположены на большом расстоянии друг от друга, поскольку два столбца с информацией загружаются один над другим, а не рядом друг с другом. Такое неудачное расположение может привести к тому, что мобильные пользователи никогда не заметят вторую статью.

Заключение

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