Web Application Form Design
Автор: Luke Wroblewski
Источник: Functioning Form

«Элементы ввода на форме должны быть организованы в логические группы таким образом, чтобы мозг обрабатывал форму как набор взаимосвязанных областей» (HTML: the Definitive Guide).

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

Формы

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

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

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

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

Использование визуальных элементов

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

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

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

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

Основные и дополнительные кнопки

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

Когда на форме расположено одновременно несколько кнопок (например, «Вперед» и «Назад»), визуальный вес второстепенной необходимо уменьшить. Это уменьшит риск потенциальных ошибок и поможет пользователю завершить заполнение формы.

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

Дизайн форм