Правила близости в дизайне

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

Как работает расстояние в дизайне

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

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

Как использовать расстояния?

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

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

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

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

1. Улучшение формы заполнения

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

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

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

Можно использовать близость в дизайне для форматирования ввода данных. Вы можете использовать фрагментацию для нескольких типов данных. Например, вы просите пользователей указать номер телефона, гораздо проще представить его по частям, потому что им будет легче сканировать и проверять входные данные. Сравните «+79065653322» с «+7 (906) 565–3322».

2. Улучшить понимание контента

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

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

3. Подчеркните определенные элементы

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

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

4. Направляйте взгляд зрителя через контент

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