![]() |
Сергей Кулинкович
20 декабря 2012 |
|
Скорость решения задачи пользователя и общее впечатление от сервиса во многом определяются тем, насколько успешным будет взаимодействие с формами. Вход с паролем, заполнение адреса доставки, платежных данных или анкеты — все это формы, которые требуют особого внимания.
Форма считается хорошей, если по мере ее заполнения у пользователей не возникает никаких вопросов. Чтобы добиться этого, достаточно следовать изложенным правилам.
Элементы интерфейса должны соответствовать типу ожидаемой от пользователя информации.
![]() |
Поля ввода текста. |
![]() |
Радиокнопки для выбора только одного значения из нескольких. |
![]() |
Чекбоксы для выбора либо одного, либо нескольких значений. |
![]() |
Кнопки для совершения действий. |
Полный список элементов управления см. на сайте W3C Recommendation.
Интерактивные свойства элементов интерфейса должны распространяться и на подписи к ним. Например, при нажатии на лейбл у радиокнопки происходит выбор соответствующего значения.
Необходимо, чтобы принцип работы элемента интерфейса однозначно считывался по его внешнему виду. Поэтому все элементы управления должны наследовать характерные черты, знакомые пользователю.
Правильно | Неправильно |
![]() |
![]() |
Оформление элементов формы призвано помогать пользователю оценить предполагаемый объем данных.
Правильно |
![]() |
Неправильно |
![]() |
Проверка правильности вводимых данных осуществляется по мере заполнения формы. В то же время система должна деликатно молчать, пока пользователь вводит значение, и сообщить об ошибке только после того, как человек закончил ввод (перевел фокус в другое место или нажал на кнопку отправки формы). Когда пользователь возвращается к полю ввода для исправления ошибки, проверка осуществляется непрерывно по мере ввода.
Сообщения об ошибках должны содержать рекомендации по их устранению.
Правильно | ![]() |
Неправильно | ![]() |
Кнопка отправки формы должна быть неактивна до тех пор, пока пользователь правильно не заполнил все необходимые поля.
При этом всегда следует давать понять, почему на кнопку рано нажимать. Для этого в больших формах (когда сообщения об ошибках могут выйти из области видимости) рядом с кнопкой отправки полезно размещать псевдоссылки на поля, в которых были найдены ошибки.
В случае, если пользователь нажимает на неактивную кнопку, должен происходить возврат к первому неверно заполненному полю.
Пользователь должен всегда понимать, каких конкретно данных от него ждут и зачем. Поэтому в сложных формах все неочевидные поля нужно снабжать соответствующими комментариями.
Если форма содержит поля для указания персональной информации, например номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.
Пользователь должен быстро оценить объем, логическую структуру формы и последовательность заполнения полей. Для этого элементы формы располагаются на одной прямой и группируются по смыслу.
Подписи следует размещать слева от полей ввода. При ограниченной ширине блока, например в мобильной версии, допускается размещение подписей над полями.
Если подписи к полям выровнены по правому краю, после каждой из них ставится двоеточие.
Иногда в погоне за компактностью подписи размещают внутри полей ввода. Это допустимо только для очень коротких форм (например, формы авторизации). В противном случае форма перестает читаться, когда подписи заменяются пользовательскими данными.
Область с формой необходимо четко отделять от других элементов страницы.
Правильно | Неправильно |
![]() |
![]() |
Поле, с которым взаимодействует пользователь, следует подсвечивать. При загрузке страницы фокус должен быть сразу установлен в первое поле ввода.
Форма должна «запоминать» все, что в ней указывают. В случае ошибки, перезагрузки или случайного закрытия страницы не надо заставлять пользователя проделывать всю работу еще раз.
Переход между полями нужно осуществлять по нажатию клавиши Tab в правильной последовательности, а выбор вариантов в поле с автозаполнением следует делать возможным и без использования мыши, при помощи клавиш
.
Любая форма завершается кнопкой, отправляющей все данные на сервер. Надпись — всегда глагол в неопределенной форме — должна соответствовать тому действию, которое произойдет при нажатии на кнопку. Например, поисковой форме нужна кнопка «Найти», форме авторизации — кнопка «Войти», а форме заказа в интернет-магазине — «Заказать».
Главная кнопка на странице с формой должна быть одна. Если пользователю предоставляется возможность совершать дополнительные действия, например загружать файлы, соответствующие элементы управления должны быть менее выразительными:
Если форма предполагает наличие секретных данных, например пароля или номера банковской карты, нужно давать пользователю возможность скрыть эту информацию от посторонних глаз.
© 19952023 Студия Артемия Лебедева
|