Как правильно создавать заполняемые пользователями формы? Как сделать их наиболее удобными? Ответы на эти вопросы попытался дать Stoney De Geyter в своей статье .
В принципе, многое из того что описано в статье уже стало стандартом при создании грамотных форм, тем не менее я решил перевести статью - правда не дословно, а своими словами - и записать ее в этом блоге для себя и для всех, кому она будет интересна...
Итак, читаем...
О чем эта статья: в ней дано описание создания веб-формы, а также простейший функционал, включающий отображение ошибок, которые могу произойти при заполнении формы пользователем.
Почему это важно: формы - это стандартный способ предоставления посетителям сайта возможности связаться с вами либо отправить заказ. Если форма работает неправильно, это пугает ваших посетителей или создает дополнительные препятствия, которые посетитель может преодолеть с большим трудом. Все это приводит к значительному снижению уровня коммуникации/отдачи от сайта.
Чему нужно уделить внимание:
- Гибкие требования к вводимой информации: по возможности, не предъявляйте повышенные требования к информации, вводимой пользователем. Например, не требуется ввода пробелов или дефиса при вводе номера телефона.
- Настройте переключение между полями по нажатию кнопки "Tab": использование таба упрощает переход между полями, что позволяет посетителю не браться за мышку для перехода на другое поле.
- Правильный порядок перехода по "Tab": убедитесь, что порядок переключения между полями по табу (задается для поля атрибутом taborder) соответствует их расположению на странице.
- Понятные заголовки полей: из названия поля должно быть понятно какую именно информацию необходимо указать в данном поле.
- Заголовок над полем: размещайте название поля ввода над ним, а не под.
- Требуйте только действительно необходимое: не заставляйте посетителей вводить информацию, которая вам не абсолютно необходима.
- Минимум инструкций: уменьшите, насколько возможно, количество инструкций, ведь пользователи не любят их читать.
- Инструкции на полями: если инструкция необходима, размещайте ее над полем ввода, а не под ним.
- Дружелюбным вывод ошибок: если произошла ошибка при вводе данных, то сообщение об ошибке должно быть дружелюбным и вежливым.
- Понятное обозначение ошибок: если произошла ошибка, выделяйте поле с ошибкой так, чтобы оно было хорошо заметным.
- В ошибке описывается решение: в сообщении об ошибке должно понятным образом описываться как посетитель может ее исправить.
- Ошибка указывает, куда можно обратиться: очень полезно в сообщении об ошибке добавлять информацию о том, к кому и каким образом можно обратиться, если ошибка произошла не по вине посетителя и невозможно перейти дальше.
- Сохраняйте данные при ошибке: если произошла ошибка, все данные, указанные в полях ввода, должны сохраняться, чтобы посетителю не пришлось заново заполнять все поля формы.
- Задавайте значения по-умолчанию: для тех полей, которые требуют выбор одного значения из нескольких(select, radio, checkbox), по возможности, задавайте выбор по-умолчанию.
- Не слишком ограничивайте: предоставьте посетителю широкий диапазон вариантов выбора, чтобы он не оказался вне его.
- Отмечайте обязательные поля: укажите обязательные поля, вместо обозначения необязательных полей.
- Индикатор прогресса: формы, состоящие из нескольких страниц должны иметь индикатор прогресса, на котором обозначается на каком шаге находится посетитель и сколько еще их осталось.
- Возможность вернуться на предыдущий шаг: посетитель должен иметь возможность вернуться на предыдущую страницу формы для исправления ошибки.
- Убрать лишнюю навигацию: будет не лишним убрать со страниц с формами всю навигацию по сайту, не относящуюся к заполняемым формам.
- Ссылка на информацию о приватности: разместите ссылку на страницу с описанием политики сохранения приватности информации, введенной пользователем.
- Финальная проверка информации: выводите страницу, на которой пользователь может просмотреть всю введенную информацию и подтвердить ее правильность.
- Страница подтверждения/благодарности: после получения информации из формы, показывайте посетителю страницу, подтверждающую, что отправка данных произошла успешно.
- Группируйте поля вертикально: лучше размещать поля одно под другим, чем сбоку.
- Правильное использование radio-buttons: используйте их там, где возможен выбор только одного варианта.
- Размещайте кнопку Submit недалеко от полей: кнопка отправки данных должна размещать как можно ближе к полям ввода.
- Подходящая ширина полей: убедитесь, что ширина полей достаточная для отображения информации, которую может ввести посетитель.
- Уберите кнопки "reset" или "cancel": пользователь может нажать ее случайно, что приведет у полной очистке всех уже заполненных полей, что очень огорчит вашего посетителя.
- Где возможно отключите Autocomplete: отключите Autocomplete (Autocomplete=off) для всех полей, где он не нужен.
- Кнопки призывают к действию: кнопка отправки формы должна призывать к совершению действия, например, "Разместить заказ", "Перейти" и т.д.
На этом все.
Комментариев: 55
Спасибо автору большое за предоставленные советы, сейчас запишу, при составлении форм безусловно пригодиться.
спасибо
Да да , огромное спасибо за советы, давно искал эти формы , очень нужны . Еще раз спасибо , выручили
спс интересн!
Спасибоавтору ,очень пригодилось
Спасибо!
Спасибо пригодилось.
Спасибо, не буду оригинальничать и повторю за всеми))
Для новичков очень полезная информация, спасибо, выручили.
Спасибо за руководство, помогающее обойти множество ошибок
сейчас запишу, при составлении форм безусловно пригодиться. Автору респект
Да да , огромное спасибо за советы, давно искал эти формы , очень нужны . Еще раз спасибо , выручили
Дельная информация только начал изучать HTML больше таких статей особенно для новичков
Спс, конечно многово я еще не знаю …. только начинаю , но за это огромный респ
я тоже тока начинаю, было полезно,
40 тысяч обьезян в жопу сунули банан! )
Помниться мне реплика в правилах одного чата )))
Почитал я и понял - нифига не правильно я формы делал. Нужно исправляться…
Благодарю,мне помогло.
Благодарю.
Отличная инфа спасибо.
спасибо!!
Спасибо за советы…
Большая благодарность вам..
отличная статья
Пасибки дорогие
благодарю
Очень полезная информация и описано все доступно. Спасибо большое автору
Огромное спасибо! Мне как раз кстати!
полезная статья! есть что применить на своём сайте. thk
Грамотная статейка, супер
совет стоящий. спасибочки.
спасибо
Отлично, очень позновательно.
Классно, вещь полезная! Спасибо! Буду заходить к Вам постоянно
Главное в html формах - это ненавязчивая валидация.
Спасибо за советы/ А вы знаете что через mac os можнозапустить windows через html./
Спасибо за советы, но хотелось бы получить информацию не только по юзабилити форм, а и то как их делать на практике
Стоящая информация. Спасибо.
Лично мне все равно какие формы заолнть.
СПС за инфу. Очень полезная и мне помогла
Хорошая статья. Думаю она будет полезной для новичков и для небрежный профессионалов.
Всех с Новым годом поздравляю бесплатных трафиков желаю.мятых баксов два вагонаю наших денег два лимона!
Хороший список. Но главное чтоб все было просто.
Спасибо!Полезный пост!
Спасибо за инфу!Только начал изучать HTML-пока все очень досиупно и понятно!
Большая благодарность вам!
Отличная инфа спасибо Вам большое.
Спасибо за статью!Все очень подробно!
Спасибо за ценную инфу,в принципе разобрался быстро.
Все очень хорошо написано. Надеюсь при составлени форм эта информация мне пригодится. Спасибо.
Спасибо огромное за информацию, очень помогло =)))
Для таких малоопытных как я в самый раз.
Да, полезная информация для разработчиков сайта. У некоторых смотришь, до того безграмотно составлены формы пользователей, охота сразу закрыть и больше никогда не появляться на таком сайте
Причем чисто по инерции, неужели не понятно, что бессмысленно это…
Реально задолбали срать в комментах, и ведь будут продолжать. До сих пор кучи людей заказывает подобное и еще больше за копейки срут везде, где только можно.
Рынок поисковых систем давным-давно занят такими монстрами как гугл.яндекс,яху и так далее.Зачем делать поисковик,которым будут пользоваться от силы несколько сотен человек!
Админ. Хотелось бы поговорить относительно рекламы .Отпишите ваши условия на e-mail.
Интересен вопрос размещения текстовых ссылок - “навсегда”
Зарнее благодарен.