11+ способов оптимизации веб формы обратной связи

форма обратной связиИногда я себя спрашиваю, зачем я так много уделяю внимание веб форме на сайте? Зачем каждый раз анализирую поля форм и их оформление? Зачем тестирую работу скрипта с особым пристрастием?

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

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

И совсем не важно какую именно форму на Вашем сайте человек заполняет:

  • будь-то форма комментариев
  • форма подписки по e-mail
  • ответ в гостевую книгу
  • форма службы поддержки
  • форма для отзывов, жалоб и предложений
  • корзина заказов в Интернет-магазине
  • или форма…   придумайте сами или посмотрите, что у Вас есть на сайте

Главное не поставить множество преград, чтоб только что родившееся, и еще не окрепшее желание совершить действие и связаться с Вами — не пропало совсем. Помните, оно может пропасть в любой момент, на каком-либо из полей формы.

Внимание! Постарайтесь не отпугнуть Вашего посетителя в столь щепетильный для него момент, в момент заполнения данных формы.

11+ рекомендаций по совершенствованию веб формы обратной связи.

  1. Просите заполнить только те поля, которые Вам необходимы для оказания услуги. Если Вам для подписки на рассылку нужно только имя и электронный адрес, не спрашивайте фамилию. Если Вам для доставки товара необходим адрес – не спрашивайте как туда добраться. Если человек сложил товары в корзину, не спрашивайте откуда он узнал о вашем магазине.
  2. Не плодите поля там, где можно обойтись 1-2 полями. Чем меньше полей тем больше шансов, что человек их заполнит. Например, при написании адреса можно сделать 1 поле и внизу написать пример, как его заполнить. А можно под каждый параметр создать отдельное поле: индекс, город, улица, дом, корпус, квартира, этаж, регион, страна… Как говорится 7 раз отмерь, а потом отрежь. Далеко не всегда есть необходимость в стольких полях.

    В выборе полей отталкивайтесь от посетителя, а не от того, что так легче обрабатывать полученные данные. Подумайте, готовы ли Вы жертвовать прибылью ради того, чтоб легче было формировать таблицы по работе с клиентами?
  3. Если поля обязательные к заполнению – пометьте их , напишите перед формой, что обозначает данная пометка. Не надейтесь, что абсолютно у всех Ваших пользователей уже достаточный опыт работы в Интернет и они знают, что обозначает «* — звездочка».
  4. Продумайте какие поля должны быть обязательными, а какие нет , не требуйте ничего лишнего. Например, есть много случаев, когда e — mail не является обязательным полем формы.
  5. Если полей в форме слишком много разбейте их на шаги. Оптимально 3 шага и меньше, максимум — 5 шагов.
  6. На каждом шаге сообщайте человеку где именно он находится. Пример можно посмотреть на RUpay
  7. Если в форме есть такие личные данные как: ФИО и домашний адрес — добавьте на сайт страницу «политика приватности» о неразглашении данных . В форме добавьте ссылку на эту страницу.
  8. Если одно из полей формы — электронный адрес. Добавьте значок антиспама . Или пару слов о том, что Вы не будете нигде публиковать этот e-mail и заниматься спамом.
  9. Если посредством формы обратной связи передаются персональные данные, такие как: ФИО, паспортные данные, домашний адрес, код дебетовой или кредитной карточки visa или другие данные, которые человек хотел бы сохранить в тайне —  поместите над формой значок «замок» и напишите, что данные формы передаются по защищенному соединению.

  10. Пишите вразумительное название форм, для чего предназначена форма. Человек заполняя форму должен ясно представлять с какой целью он это делает, и тогда он может оценить необходимость заполнения некоторых обязательных и необязательных полей.
  11. На кнопке отправки желательно писать не просто «ОК» или «отправить», а что-то, что идентифицируется с предназначением формы: «отправить комментарий», «пересчитать заказ», «очистить корзину»… , чтоб клиент  (посетитель) понимал, что произойдет потом.
  12. После отправки данных через форму:
    • дайте пользователю обратную связь, сообщите, что было сделано, например: заявка принята, ожидает модерации…
    • какую обратную связь, какие действия от Вас ожидать в ответ на форму в ближайшее время
    • в какие сроки будет сделана обработка заполненной формы
    • предложите человеку, что делать ему дальше на Вашем сайте: добавить еще один комментарий, отправить новость другу, вернуться к покупкам, почитать статьи по теме…
  13. В дизайне формы постарайтесь использовать как можно меньше шумовых помех в виде линий таблицы вокруг каждого поля. Не создавайте визуальный шум, который затрудняет понимание полей и отвлекает внимание.

Это далеко не полный список того, на что необходимо обратить внимание при создании форм обратной связи. Есть мноножество нюансов как в визуальном оформлении, так и в названии полей + стратегии подачи полей для заполнения.

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

P.S. Какие формы Вам нравятся, что не нравится в формах напишите в комментариях — жутко интересно Ваше мнение.

, , , ,

30 Responses to 11+ способов оптимизации веб формы обратной связи


  1. Fatal error: Uncaught Error: Call to undefined function ereg() in /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php:64 Stack trace: #0 /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php(19): the_commenter_link() #1 /home/svetlana/public_html/wp-includes/class-walker-comment.php(180): custom_comment(Object(WP_Comment), Array, 1) #2 /home/svetlana/public_html/wp-includes/class-wp-walker.php(146): Walker_Comment->start_el('', Object(WP_Comment), 1, Array) #3 /home/svetlana/public_html/wp-includes/class-walker-comment.php(140): Walker->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #4 /home/svetlana/public_html/wp-includes/class-wp-walker.php(371): Walker_Comment->display_element(Object(WP_Comment), Array, '5', 0, Array, '') #5 /home/svetlana/public_html/wp-includes/comment-template.php(2091): Walker->paged_walk(Array, '5', 0, 0, Array) #6 /home/svetlana/public_html/wp-content/themes/canvas/comments.php(43): wp_list_comments(Array) #7 /home/svetlana/pub in /home/svetlana/public_html/wp-content/themes/canvas/includes/theme-comments.php on line 64