Формы: сделаем пользователю удобно!

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

Ограничим фантазию пользователя

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

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

Если известна длина вводимого значения, обязательно задайте атрибут MAXLENGTH для текстового поля. Если это возможно, задайте одинаковые значения для атрибутов SIZE и MAXLENGTH - если пользователь будет видеть все, что он ввел, вероятность ошибок ввода существенно уменьшится.

Предлагайте пользователю значения по умолчанию, в том числе атрибуты CHECKED для CHECKBOX и RADIO, SELECTED для списка. Включайте в форму подсказки для пользователя, подробно поясняющие, как какие поля заполнять, непременно помечайте обязательные для заполнения поля.

Правильно выберем размер формы

Иногда надо бывает ввести довольно много данных. Как лучше спроектировать форму для ввода большого объема информации?

Мне (да и вам, наверно, тоже) приходилось сталкиваться с двумя крайностями: либо разработчик пытается впихнуть все поля формы на одну страницу, и пользователю приходится многократно пролистывать экран, чтобы эту форму заполнить; либо, наоборот, на каждой странице предлагается заполнить 2-3 поля, затем нажать кнопку "далее" и таким образом пройти с десяток страниц. И то, и другое, как правило, вызывает резко отрицательную реакцию пользователя.

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

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

Контроль введенных данных - используем JavaScript

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

JavaScript-контроль данных форм осуществляется через механизм событий. Чаще всего используют события onChange и onSubmit.

Событие onChange возникает в момент потери полем фокуса при условии, что данные в поле были изменены. Обработка события onChange, как правило, используется для контроля данных, введенных именно в это поле (к примеру, контроль на длину введенной строки, диапазон допустимых значений, шаблон поля - скажем, только цифры, или правильный формат e-mail, и т.п.).

Событие onSubmit возникает при нажатии кнопки "Submit". В этот момент все данные в форму уже должны быть введены, и обработка события onSubmit, как правило, включает контроль взаимосвязей введенных пользователем данных (заполнение обязательных полей, правильность заполнения каких-либо полей в зависимости от значений других полей).

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