Насколько часто вы сталкиваетесь с заполнением веб-форм? Думаю, что часто. Будь то покупка товара в интернет-магазине или регистрация нового почтового ящика.

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

Мы предлагаем ознакомиться с 16 советами оптимизации веб-форм.

  1. Капча (captcha) является достаточно эффективным инструментом для блокирования спама. Однако некоторые данные свидетельствуют о том, что плохо читаемая капча может значительно снизить количество регистраций или других действий на сайте. Если вам, все же, крайне необходимо использовать капчу, убедитесь, что она легко читается.
  2. Чрезмерно большое количество полей в форме. Пользователи должны заполнять только самые необходимые поля. Например, неужели вам действительно важен пол или дата рождения человека, который заказывает у вас на сайте холодильник? Не утомляйте пользователей. Часто бывает так, что большое количество полей или сложности при заполнении формы заставляют пользователя просто закрыть в браузере вкладку с вашим сайтом.
  3. Сделайте форму очевидной. Всевозможные современные скрипты помогают сделать формы красивым, однако красота — это не гарантия удобства и простоты заполнения. Сделайте форму простой и очевидной. Попросите друзей протестировать насколько легко заполнить форму.
  4. Кнопка «Очистить». Размещение кнопки «Очистить» рядом с кнопкой «Отправить» помогает только в одном — случайно удалить пользователю все то, что он внес в форму. Если уж очень необходимо, то размещайте кнопку «Очистить» как можно дальше от кнопки «Отправить».
  5. Кнопка отмены. При заказе того или иного товара не стоит показывать кнопку «Отменить». Это равносильно вопросу продавца: «Вы действительно хотите купить этот товар?».
  6. Обязательные поля. Как правило, люди хотят работать как можно меньше. По этой причине, ваши клиенты должны знать, какие поля обязательны для заполнения: только поля со звездочкой или с подобной маркировкой.
  7. Показывайте пользователям примеры заполнения формы. Например, под полем ввода номера телефона укажите, в каком формате вы хотите видеть введенный номер телефона (деление на код города и сам номер телефона или просто набор цифр без пробелов). Однако, не стоит увлекаться количеством примеров форматирования — это может создать сложности для пользователя.
  8. Показывайте кнопки «Вперед» и «Назад», если веб-форма состоит из нескольких шагов. Очень важно, чтобы при возвращении на предыдущую страницу, данные, которые внес пользователь, сохранялись.
  9. Подтверждение правильности заполнения формы. Есть два способа подтверждения правильности заполнения формы. Вы можете использовать скрипты на стороне клиента (например, JavaScript, который зависит от браузера) или серверную обработку. В пользу обработки на сервере говорит тот факт, что такая обработка намного меньше зависит от браузера пользователя и его настроек. Кроме того, такой способ более безопасен.
  10. Сообщения об ошибках. Убедитесь, что при ошибках в заполнении формы, пользователь получит понятные подсказки для корректировки или исправления ошибок. Например, если был введен некорректный адрес электронной почты, то система должна сообщать пользователю именно об этом, а не просто выдавать общую фразу «Ошибка заполнения».
  11. Проверка правильности заполнения каждого поля с помощью Ajax. Некоторые сайты используют проверку корректности вводимых данных уже на этапе заполнения пользователем формы. Это может быть очень эффективным и удобным. Согласитесь, ошибку намного проще исправить на этапе заполнения каждого поля, чем потом возвращаться к нему повторно.
  12. Функция «Запомнить». Позволяет клиентам экономить время при последующих входах или авторизации на вашем веб-ресурсе.
  13. Избегайте таких требований как: «Ваш пароль должен содержать буквы в верхнем и нижнем регистре, число, знак препинания и быть не короче 8 символов». Да, такое требование повышает защищенность пароля, однако оно может препятствовать повторным посещениям из-за того, что пользователь просто забудет пароль.
  14. Индикаторы прогресса. Для форм, которые состоят из нескольких страниц, очень желательно показывать индикатор прогресса заполнения. Людям любят знать на каком этапе заполнения формы они находятся, и сколько осталось шагов до завершения.
  15. Призывайте своих посетителей к действию. Ориентируйте посетителей на практические действия с их стороны. Используйте глаголы совершенного вида, т.е. «Найти» вместо «Искать».
  16. Размещение и размер кнопок. В веб-форме не забудьте выделить наиболее важные кнопки, ведущие к переходу. Например, если окончательное подтверждение заказа имеет две кнопки «Завершить заказ» и «Сохранить изменения», то стоит убедиться в том, что кнопка «Завершить заказ» более крупная и заметная.