10 правил хороших форм

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Сергей Кулинкович

20 декабря 2012


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

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


1. Подходящие элементы управления

Элементы интерфейса должны соответствовать типу ожидаемой от пользователя информации.

Поля ввода текста.
Радиокнопки для выбора только одного значения из нескольких.
Чекбоксы для выбора либо одного, либо нескольких значений.
Кнопки для совершения действий.

Полный список элементов управления см. на сайте W3C Recommendation.

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


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

Правильно Неправильно

Оформление элементов формы призвано помогать пользователю оценить предполагаемый объем данных.

Правильно
Неправильно

2. Проверка полей

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

Сообщения об ошибках должны содержать рекомендации по их устранению.

Правильно
Неправильно

3. Защита от ошибок

Кнопка отправки формы должна быть неактивна до тех пор, пока пользователь правильно не заполнил все необходимые поля.

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

В случае, если пользователь нажимает на неактивную кнопку, должен происходить возврат к первому неверно заполненному полю.


4. Подсказки и помощь

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

Если форма содержит поля для указания персональной информации, например номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.

5. Грамотная верстка

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

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

Примечание

Если подписи к полям выровнены по правому краю, после каждой из них ставится двоеточие.


Иногда в погоне за компактностью подписи размещают внутри полей ввода. Это допустимо только для очень коротких форм (например, формы авторизации). В противном случае форма перестает читаться, когда подписи заменяются пользовательскими данными.


Область с формой необходимо четко отделять от других элементов страницы.

Правильно Неправильно

6. Правильный фокус

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

7. Сохранность данных

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


8. Поддержка клавиатуры

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


9. Понятная кнопка

Любая форма завершается кнопкой, отправляющей все данные на сервер. Надпись — всегда глагол в неопределенной форме — должна соответствовать тому действию, которое произойдет при нажатии на кнопку. Например, поисковой форме нужна кнопка «Найти», форме авторизации — кнопка «Войти», а форме заказа в интернет-магазине — «Заказать».

Примечание

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


10. Забота о секретных данных

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