WebDev - блог

Как правильно создавать заполняемые пользователями формы? Как сделать их наиболее удобными? Ответы на эти вопросы попытался дать Stoney De Geyter в своей статье How Web Forms Should Be Developed.

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

Итак, читаем...

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

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

Чему нужно уделить внимание:

• Гибкие требования к вводимой информации: по возможности, не предъявляйте повышенные требования к информации, вводимой пользователем. Например, не требуется ввода пробелов или дефиса при вводе номера телефона.
• Настройте переключение между полями по нажатию кнопки "Tab": использование таба упрощает переход между полями, что позволяет посетителю не браться за мышку для перехода на другое поле.
• Правильный порядок перехода по "Tab": убедитесь, что порядок переключения между полями по табу (задается для поля атрибутом taborder) соответствует их расположению на странице.
• Понятные заголовки полей: из названия поля должно быть понятно какую именно информацию необходимо указать в данном поле.
• Заголовок над полем: размещайте название поля ввода над ним, а не под.
• Требуйте только действительно необходимое: не заставляйте посетителей вводить информацию, которая вам не абсолютно необходима.
• Минимум инструкций: уменьшите, насколько возможно, количество инструкций, ведь пользователи не любят их читать.
• Инструкции на полями: если инструкция необходима, размещайте ее над полем ввода, а не под ним.
• Дружелюбным вывод ошибок: если произошла ошибка при вводе данных, то сообщение об ошибке должно быть дружелюбным и вежливым.
• Понятное обозначение ошибок: если произошла ошибка, выделяйте поле с ошибкой так, чтобы оно было хорошо заметным.
• В ошибке описывается решение: в сообщении об ошибке должно понятным образом описываться как посетитель может ее исправить.
• Ошибка указывает, куда можно обратиться: очень полезно в сообщении об ошибке добавлять информацию о том, к кому и каким образом можно обратиться, если ошибка произошла не по вине посетителя и невозможно перейти дальше.
• Сохраняйте данные при ошибке: если произошла ошибка, все данные, указанные в полях ввода, должны сохраняться, чтобы посетителю не пришлось заново заполнять все поля формы.
• Задавайте значения по-умолчанию: для тех полей, которые требуют выбор одного значения из нескольких(select, radio, checkbox), по возможности, задавайте выбор по-умолчанию.
• Не слишком ограничивайте: предоставьте посетителю широкий диапазон вариантов выбора, чтобы он не оказался вне его.
• Отмечайте обязательные поля: укажите обязательные поля, вместо обозначения необязательных полей.
• Индикатор прогресса: формы, состоящие из нескольких страниц должны иметь индикатор прогресса, на котором обозначается на каком шаге находится посетитель и сколько еще их осталось.
• Возможность вернуться на предыдущий шаг: посетитель должен иметь возможность вернуться на предыдущую страницу формы для исправления ошибки.
• Убрать лишнюю навигацию: будет не лишним убрать со страниц с формами всю навигацию по сайту, не относящуюся к заполняемым формам.
• Ссылка на информацию о приватности: разместите ссылку на страницу с описанием политики сохранения приватности информации, введенной пользователем.
• Финальная проверка информации: выводите страницу, на которой пользователь может просмотреть всю введенную информацию и подтвердить ее правильность.
• Страница подтверждения/благодарности: после получения информации из формы, показывайте посетителю страницу, подтверждающую, что отправка данных произошла успешно.
• Группируйте поля вертикально: лучше размещать поля одно под другим, чем сбоку.
• Правильное использование radio-buttons: используйте их там, где возможен выбор только одного варианта.
• Размещайте кнопку Submit недалеко от полей: кнопка отправки данных должна размещать как можно ближе к полям ввода.
• Подходящая ширина полей: убедитесь, что ширина полей достаточная для отображения информации, которую может ввести посетитель.
• Уберите кнопки "reset" или "cancel": пользователь может нажать ее случайно, что приведет у полной очистке всех уже заполненных полей, что очень огорчит вашего посетителя.
• Где возможно отключите Autocomplete: отключите Autocomplete (Autocomplete=off) для всех полей, где он не нужен.
• Кнопки призывают к действию: кнопка отправки формы должна призывать к совершению действия, например, "Разместить заказ", "Перейти" и т.д.

На этом все.

Добавить в закладки: