Как делать правильные веб-формы

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

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

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

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

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

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

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

На этом все.

Комментариев: 55

  1. Дата: Сентябрь 21, 2008, 15:45 | Ссылка

    Спасибо автору большое за предоставленные советы, сейчас запишу, при составлении форм безусловно пригодиться.

  2. Дата: Сентябрь 23, 2008, 06:50 | Ссылка

    спасибо

  3. Дата: Сентябрь 23, 2008, 19:39 | Ссылка

    Да да , огромное спасибо за советы, давно искал эти формы , очень нужны . Еще раз спасибо , выручили

  4. Дата: Сентябрь 26, 2008, 16:37 | Ссылка

    спс интересн!

  5. Дата: Сентябрь 26, 2008, 22:35 | Ссылка

    Спасибоавтору ,очень пригодилось

  6. Дата: Сентябрь 27, 2008, 15:35 | Ссылка

    Спасибо!

  7. Дата: Сентябрь 27, 2008, 23:05 | Ссылка

    Спасибо пригодилось.

  8. Дата: Сентябрь 29, 2008, 01:06 | Ссылка

    Спасибо, не буду оригинальничать и повторю за всеми))

  9. Дата: Сентябрь 30, 2008, 10:28 | Ссылка

    Для новичков очень полезная информация, спасибо, выручили.

  10. Дата: Сентябрь 30, 2008, 10:30 | Ссылка

    Спасибо за руководство, помогающее обойти множество ошибок

  11. Дата: Сентябрь 30, 2008, 12:47 | Ссылка

    сейчас запишу, при составлении форм безусловно пригодиться. Автору респект

  12. Дата: Сентябрь 30, 2008, 12:49 | Ссылка

    Да да , огромное спасибо за советы, давно искал эти формы , очень нужны . Еще раз спасибо , выручили

  13. Дата: Сентябрь 30, 2008, 12:51 | Ссылка

    Дельная информация только начал изучать HTML больше таких статей особенно для новичков

  14. Дата: Сентябрь 30, 2008, 13:53 | Ссылка

    Спс, конечно многово я еще не знаю …. только начинаю , но за это огромный респ

  15. Дата: Сентябрь 30, 2008, 14:22 | Ссылка

    я тоже тока начинаю, было полезно,

  16. Дата: Сентябрь 30, 2008, 16:40 | Ссылка

    40 тысяч обьезян в жопу сунули банан! )
    Помниться мне реплика в правилах одного чата )))
    Почитал я и понял - нифига не правильно я формы делал. Нужно исправляться…

  17. Дата: Сентябрь 30, 2008, 18:40 | Ссылка

    Благодарю,мне помогло.

  18. Дата: Октябрь 2, 2008, 02:41 | Ссылка

    Благодарю.

  19. Дата: Октябрь 3, 2008, 00:07 | Ссылка

    Отличная инфа спасибо.

  20. Дата: Октябрь 8, 2008, 23:00 | Ссылка

    спасибо!!

  21. Дата: Октябрь 10, 2008, 18:21 | Ссылка

    Спасибо за советы…

  22. Дата: Октябрь 13, 2008, 19:25 | Ссылка

    Большая благодарность вам..
    отличная статья

  23. Дата: Октябрь 18, 2008, 20:06 | Ссылка

    Пасибки дорогие

  24. Дата: Октябрь 20, 2008, 15:52 | Ссылка

    благодарю

  25. Дата: Октябрь 21, 2008, 16:43 | Ссылка

    Очень полезная информация и описано все доступно. Спасибо большое автору

  26. Дата: Октябрь 22, 2008, 20:13 | Ссылка

    Огромное спасибо! Мне как раз кстати!

  27. Дата: Октябрь 28, 2008, 20:44 | Ссылка

    полезная статья! есть что применить на своём сайте. thk

  28. Дата: Ноябрь 13, 2008, 16:55 | Ссылка

    Грамотная статейка, супер

  29. Дата: Ноябрь 14, 2008, 00:16 | Ссылка

    совет стоящий. спасибочки.

  30. Дата: Ноябрь 21, 2008, 02:54 | Ссылка

    спасибо

  31. Дата: Ноябрь 21, 2008, 17:36 | Ссылка

    Отлично, очень позновательно.

  32. Дата: Ноябрь 27, 2008, 16:21 | Ссылка

    Классно, вещь полезная! Спасибо! Буду заходить к Вам постоянно :)

  33. Дата: Декабрь 2, 2008, 16:09 | Ссылка

    Главное в html формах - это ненавязчивая валидация.

  34. Дата: Декабрь 6, 2008, 00:26 | Ссылка

    Спасибо за советы/ А вы знаете что через mac os можнозапустить windows через html./

  35. Дата: Декабрь 16, 2008, 10:47 | Ссылка

    Спасибо за советы, но хотелось бы получить информацию не только по юзабилити форм, а и то как их делать на практике :)

  36. Дата: Декабрь 19, 2008, 15:44 | Ссылка

    Стоящая информация. Спасибо.

  37. Дата: Декабрь 24, 2008, 05:16 | Ссылка

    Лично мне все равно какие формы заолнть.

  38. Дата: Декабрь 24, 2008, 20:17 | Ссылка

    СПС за инфу. Очень полезная и мне помогла

  39. Дата: Декабрь 28, 2008, 23:30 | Ссылка

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

  40. Дата: Январь 4, 2009, 19:42 | Ссылка

    Всех с Новым годом поздравляю бесплатных трафиков желаю.мятых баксов два вагонаю наших денег два лимона!

  41. Дата: Январь 19, 2009, 22:47 | Ссылка

    Хороший список. Но главное чтоб все было просто.

  42. Дата: Февраль 9, 2009, 16:27 | Ссылка

    Спасибо!Полезный пост!

  43. Дата: Март 5, 2009, 19:03 | Ссылка

    Спасибо за инфу!Только начал изучать HTML-пока все очень досиупно и понятно!

  44. Дата: Март 11, 2009, 18:44 | Ссылка

    Большая благодарность вам!

  45. Дата: Март 15, 2009, 20:02 | Ссылка

    Отличная инфа спасибо Вам большое.

  46. Дата: Март 19, 2009, 16:20 | Ссылка

    Спасибо за статью!Все очень подробно!

  47. Дата: Апрель 3, 2009, 22:14 | Ссылка

    Спасибо за ценную инфу,в принципе разобрался быстро.

  48. Дата: Май 24, 2009, 19:11 | Ссылка

    Все очень хорошо написано. Надеюсь при составлени форм эта информация мне пригодится. Спасибо.

  49. Дата: Август 7, 2009, 15:03 | Ссылка

    Спасибо огромное за информацию, очень помогло =)))

  50. Дата: Октябрь 14, 2009, 10:24 | Ссылка

    Для таких малоопытных как я в самый раз.

  51. Дата: Октябрь 24, 2009, 13:37 | Ссылка

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

  52. Дата: Март 15, 2010, 18:13 | Ссылка

    Причем чисто по инерции, неужели не понятно, что бессмысленно это…

  53. Дата: Апрель 21, 2010, 10:20 | Ссылка

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

  54. Дата: Апрель 22, 2010, 10:32 | Ссылка

    Рынок поисковых систем давным-давно занят такими монстрами как гугл.яндекс,яху и так далее.Зачем делать поисковик,которым будут пользоваться от силы несколько сотен человек!

  55. Дата: Июнь 25, 2010, 15:37 | Ссылка

    Админ. Хотелось бы поговорить относительно рекламы .Отпишите ваши условия на e-mail.
    Интересен вопрос размещения текстовых ссылок - “навсегда”
    Зарнее благодарен.

Оставьте комментарий!

Обязательные поля отмечены знаком *

*
*

Powered by WP Hashcash

Тэги, соотвествующие заданному условию не найдены.