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. Дмитрий Игошин 6.02.2008 at 16:32 #

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

  2. Виталий Сердюк 6.02.2008 at 16:59 #

    Светлана, спасибо!
    Распечатал — и на доску.
    Бум применять 🙂

  3. ALEXeen 6.02.2008 at 18:51 #

    Спасибо за совет! Очень толково

  4. Надежда 9.02.2008 at 15:52 #

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

  5. Ирина 9.02.2008 at 19:12 #

    Светлана, Вы могли бы дать ссылки на сайты Ваших клиентов (портфолио)?
    Возможно, у Вас на одного клиента станет больше ))

  6. Светлана Svetolish 10.02.2008 at 20:50 #

    Спасибо за комментарии, очень вдохновляет на новые статьи.

    Ирина, я ответила Вам по электронной почте

  7. Олька 11.02.2008 at 21:55 #

    Очень толковая статья, большое Вам спасибо, Светлана. Теперь и пользоваться будет проще, и организованно все будет.

  8. Владимир 15.02.2008 at 13:18 #

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

  9. Про Деньги 16.02.2008 at 02:28 #

    Спасибо! С формами обратной связи у меня всегда проблем, то они «улетают» куда -то, то вовсе невидны. Напомнили что надо за них взяться.

  10. krito 21.02.2008 at 23:25 #

    Кинул в закладки,спасибо…Очень кратко и информативно)Прям пособие)

  11. Дмитрий Игошин 22.02.2008 at 08:15 #

    Простите что не смог За Вас проголосавать в конкурсе у Арнольда -(
    не получилось зарегистрироваться и все -(
    при голосовании отдал бы Вам симпатию 😉

  12. Светлана Svetolish 22.02.2008 at 17:26 #

    Дмитрий, как нежат Ваши слова мои ушки 😉
    Это не последний конкурс в нашей жизни. Я регистрацию у Арнольда со второй попытки прошла. Модерацию получила через несколько дней, то ли 17числа, то ли 18 — не помню.

  13. Fred Perry 22.04.2008 at 09:09 #

    Otlicinaia informatia dlea cavo nujdaetsea v atom:)s smisle u cavo probemi s nimi:)

  14. MostWanted 1.05.2008 at 19:24 #

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

  15. MostWanted — не за что, потом покажете форму?

  16. saurongorynich 31.05.2008 at 17:12 #

    Самое главное писать ПЕРЕД формой, что поля отмеченные звёздочкой обязательны для заполнения, а не после, как все почему-то делают 🙂

  17. MostWanted 1.07.2008 at 04:05 #

    Получилось у нас вот что: savepic.info/feedback.php
    При создании была использована немалая часть ваших советов. За что еще раз благодарю 😉

  18. Марина 6.08.2008 at 19:16 #

    Да, и кнопку «отправить» не картинкой и заметной на фоне

  19. Parus 11.11.2008 at 22:42 #

    Очень важные примечания, но несоблюдение этих правил разработчиками сайтов, говорит о полном издевательстве над заказчиком! на своем опыте могу сказать что являюсь самоучкой, умных книг и лекций по дизайну и программированию не слушал НО ВСЕ ПРАВИЛА ЧТО ВЫ ОПИСАЛИ ОБ ОБРАТНОЙ СВЯЗИ я всегда соблюдал на 100% !!!
    Прочитав вашу статью убедился что я всегда был прав и делал все правильно. Кстати многие создатели сайтов с пеной у рта доказывают что та или иная функция или тот или иной элемент являются неправильным и не удобным., Я НА ЭТО ВСЕГДА ЗАДАВАЛ ВОПРОС НЕУДОБНЫМ ДЛЯ КОГО? для создателя сайта?, (сложнее делать) или для поисковика? — НЕЗАБЫВАЙТЕ ЧТО САЙТ В ПЕРВУЮ ОЧЕРЕДЬ ДОЛЖЕН БЫТЬ СОЗДАН ДЛЯ ЛЮДЕЙ!!! и небойтесь спорить с разработчиками так как у них у многих обсолютна нет ни какого вкуса, чувства дизайна ….

  20. прок 14.12.2008 at 11:33 #

    Полезная статья, многие правила не использовал, после прочтения буду все перестраивать.

  21. umni4ka 3.01.2009 at 22:44 #

    скажу что советы давно известны, но их часто забываешь… казалось бы мелочь, а играет важную роль! Так что все равно автору большое спасибо! Я вот оказывается некоторые совсем забыла….

  22. derySereept 2.05.2009 at 21:29 #

    Хм, почему-то у меня вместо заголовка блога вопросики…

  23. Лариса 3.05.2009 at 18:50 #

    Здравствуйте, Светлана.
    Огромное спасибо за великое открытие простых истин!
    Как начинающей, для меня не совсем понятна фраза (необходимые действия): «добавьте значок антиспама».
    Буду очень благодарна, если поясните.

  24. derySereept — это глюк связанный с кодировками. Какой браузер используете? У меня все нормально

  25. Лариса значок антиспама каждый дизайнер рисует по своему ))
    Чаще всего он выглядит как перечеркнутое красным слово спам. Другие примеры поищите в гугл картинках

    Для формы достаточно нарисовать обычный замок и написать слова заверяющие пользователя, что адрес не передается третьим лицам, и вы тоже ненавидите спам

  26. Александра 5.06.2009 at 12:05 #

    Советы, конечно, дельные.
    Не нравится: «Добавьте значок антиспама», «напишите, что данные формы передаются по защищенному соединению»…

    Написать можно что угодно, а будут ли они на самом деле передаваться по защищенному соединению?
    Сотни начинающих вебмастеров прочитают Вашу статью и везде напишут про защищенное соединение, про антиспам… Но им тут никто не сказал о том, что нужно ведь еще и обеспечить, чтобы данные ДЕЙСТВИТЕЛЬНО передавались по защищенному каналу, а чтобы е-мэйл не попал в спам-базы нужно и форму тоже защищать, и базу данных от взлома.

  27. Александра, я как-то не подумала в статье влиять на совесть начинающих вебмастеров )) Надеюсь они прочитают Ваш комментарий и более ответственно подойдут к вопросу ЗАЩИТЫ ДАННЫХ как с технической стороны, так и с учетом людского фактора.

  28. Иван 21.09.2009 at 13:18 #

    Статья действительно хорошоя, но у многих возникают трудности с технической стороны. Дам один совет — «На сегодняшний день существует ряд генераторов форм обратной связи на сайт и не только, которые за считанные минуты сделают необходимую Вам форму и подготовят все необходимые данные. Вам останется лишь поместить сгенерированный код на любую страницу Вашего сайта.»

    • Иван не важно как вы решаете техническую сторону вопроса: сами пишите код, платите за то, чтоб его написали или используете генератор форм. Приведенные 11+ способов никто не отменял, все равно перед созданием надо подумать и какие поля делать, и как форму назвать, и как кнопку назвать и т.д.

Trackbacks/Pingbacks

  1. Интересный Абсурд - 9.02.2008

    Обзорник — новая рубрика…

    Я подумал и решил завести новую рубрику – “Обзорник”. Ибо хочется давать и статистику, и ссылки на интересные материалы других бл….

viagra