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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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