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

Проверка правильности ввода

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

Такая проверка необходима, если заполнение поля является обязательной процедурой. Необходима она и тогда, когда поле должно заполняться по строго определенного образцу (адреса, номера телефонов, пароли и т. п.).

Как правило, проверка осуществляется так: при завершении заполнения одного поля и переходе к другому на экране появляется сообщение об имеющихся недочетах. Так это реализовано, например, на сайте для онлайн-обработки фотографий Picnik.Com:

Другой способ заключается в том, что проверка ведется в режиме реального времени, и пользователь получает соответствующее предупреждение, как только совершит ошибку (например, введет недопустимый символ или превысит допустимое в текстовом поле число знаков). Предупреждение, как правило, осуществляется двумя способами. Первый способ заключается в выводе сообщения об ошибке без объяснения причин (в настоящее время
такое бывает очень редко). Второй способ используется гораздо чаще и заключается в том, что на экране отображается конкретная информация о совершенной ошибке (слишком длинное имя пользователя, неверный пароль, использование недопустимых слов и символов и т. п.). Функция проверки позволяет также предупреждать возможные ошибки. Так, при заполнении формы регистрации на сайте онлайнового инструмента ведения списка задач Remember the milk можно получить информацию о принятом формате пароля, лишь перейдя на соответствующее поле:

Как только пользователь начинает вводить пароль при регистрации, он сразу же получает информацию о том, что пароль должен содержать не менее 5 символов.

Похожим образом организован и процесс регистрации на сайте для онлайнового просмотра видео LiveStream:

Рекомендации

• Предпочтительным вариантом является проверка правильности заполнения «на лету»: пользователь получает информацию об ошибке в момент заполнения конкретного поля и тратит значительно меньше времени и усилий на исправление.
• По завершении заполнения каждого поля нужно сообщать пользователю о соответствии/несоответствии введенного принятым за эталон формам и образцам.

Разъяснить причины несоответствий

Распространенной практикой является вывод информации о правильном заполнении зеленым цветом, а о неправильном — красным. Информация может быть представлена как виде текстового сообщения, так и в виде графических символов. Очень желательно, чтобы для обозначения правильного и неправильного ввода применялись отдельные знаки: пользователи, страдающие нарушениями цветового зрения, могут просто не отличить красный цвет от зеленого. В качестве примеров рассмотрим формы регистрации на сайтах Brightkite (сервис для онлайнового обмена текстовыми сообщениями) и PopScreen (видеосервис):

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

На некоторых сайтах (например, на игровом сервисе Thumbslap) отображается информация о ходе проверки правильности ввода данных:

Рекомендации

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