Примеры использования расстояний в дизайне. Часть 2

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

Alina Kovtun
Дизайн-кабак

--

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

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

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

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

Группируя соответствующие поля ввода, вы упрощаете процесс ввода данных.

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

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

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

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

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

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

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

Когда посетители заходят на главную страницу поиска Google, первое, что они замечают, — это логотип Google и поле поиска под ним.

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

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

Зигзагообразный шаблон для привлечения внимания пользователей

--

--