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

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

Группировка полей и подписей

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

Разделение групп полей горизонтальными линиями поможет пользователю устанавливать связи между подписями и полями. Группировка не должна быть хаотичной: поля, объединенные в группу, должны быть логически связаны. Число полей в группе не должно быть больше 5-6 (в противном случае поля будут создавать помехи внутри группы).

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

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

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

Длина подписей и полей

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

Дизайн форм (часть 2)