Если хотите узнать, как не надо делать формы, сходите на сайт Bloomingdales.com и добавьте что-нибудь в корзину. Нажмите Checkout – ship to one address («Заказ – доставка по адресу»). Какую кнопку вы видите в самом низу формы? Reset form («Очистить форму»)! Разве это захочет сделать покупатель, когда заполнит все поля? Мы так не думаем.
Кнопки Back one step («Вернуться на шаг назад») и Save and continue («Сохранить и продолжить») вообще непонятно к чему относятся, поскольку отделены от остального содержимого формы горизонтальной чертой. Но прежде всего разработчикам сайта следует, конечно, убрать кнопку «Очистить форму».
В поисках форм, состоящих из нескольких шагов, мы ввели слова «страхование имущества» в Google и по ссылкам посетили сайты NetQuote, State Farm и Allstate.
Форма, предлагаемая сразу же на первой странице сайта NetQuote, поначалу нам очень понравилась. Посетитель вводит почтовый индекс и вид страховки, а затем нажимает кнопку Start («Начать»). На второй странице у него спрашивают фамилию и снова индекс, правда, это поле заполняется автоматически. Далее пользователь должен ответить на несколько дополнительных вопросов. И вот перед ним появляется кнопка «Я заполнил эту часть формы». Сколько же частей ему еще нужно заполнить? В этом месте мы вышли из процесса. На сайте NetQuote отлично выполнены отдельные этапы заполнения формы, они небольшие и понятные, но здесь явно не хватает индикатора процесса, который показывал бы, сколько шагов осталось пройти.
Чтобы заполнить форму на сайте State Farm, нам пришлось воспользоваться меню. На первой странице формы нужно указать штат, ввести имя и адрес. Форма выглядит довольно простой, мы заполняем поля и переходим на следующую страницу. Здесь нужно заносить информацию, необходимую для расчета страховой суммы: стоимость имущества, вычеты, личные обязательства и так далее. Посетитель может воспользоваться калькулятором и почитать описание непонятных для него терминов. Здесь нам приходится задержаться надолго. Мы были на этом сайте дольше, чем на предыдущем, но не получили ответов на многие вопросы.
Может быть, нам больше повезет на сайте Allstate? На первой же странице нас просят ввести в форму вид страховки и район проживания. Пока ничего сложного, и мы нажимаем кнопку Go («Вперед»). На следующей странице нужно указать индекс и ответить на пару простых вопросов. Мы делаем все, что требуется, и продолжаем.
Дальше предлагается ввести личные данные, хотя эта информация не является обязательной. Нам нравится такой подход. Если верить индикатору процесса, мы сейчас находимся на первом этапе из двух. На следующей странице нам задают еще пять коротких вопросов, мы нажимаем кнопку Get Your Quick Insurance Quote Now («Рассчитать стоимость страховки прямо сейчас») и получаем то, зачем пришли, а также телефоны, по которым можно связаться с фирмой Allstate.
Вы, наверное, уже догадались, у кого мы в конечном счете купили страховку? Что получили сайты NetQuote и State Farm, затребовав нашу личную информацию? Разве нельзя было рассчитать страховку, не имея этих данных? Лучше бы они указали примерную стоимость страховки, а после этого спросили, не хотим ли мы узнать точную цифру. Вот здесь уже можно запрашивать личные данные или предлагать связаться со страховым агентом по телефону.
А в какой «форме» находятся ваши веб-формы? Они очень важны, поскольку помогают вам обмениваться информацией с покупателями, рассказывать им о ценности ваших товаров. Если для заполнения формы потребуется время, нужно принять все меры, чтобы поддержать движущую силу убеждения на прежнем уровне. Запрашивайте лишь самый минимум информации. Маркетологи обожают получать данные о клиентах и в результате задают больше вопросов, чем нужно. Так можно потерять многих потенциальных покупателей.
Запрашивайте только необходимые сведения
Отделите поля, обязательные к заполнению, от всех остальных. Вот хороший пример. На первой странице сайта RoofSmith.com посетителю предлагается выбрать тип крыши (ровная или скатная), которую он собирается крыть. От этого ответа зависит, какие кровельные материалы ему будут предложены на следующей странице. Так же можно поступить и на любом другом коммерческом сайте. Попросите покупателя ввести адрес доставки счета, затем спросите, совпадает ли он с адресом доставки. Предложите ввести адрес доставки только в том случае, если ответ на предыдущий вопрос был положительным.
Объясните, зачем нужно заполнять форму и какую пользу от этого получит клиент
Формы, которые так и хочется заполнить, встречаются крайне редко. А ведь очень важно заинтересовать клиента, рассказать ему, какие выгоды он получит в конечном итоге. В то же время эта информация не должна мешать оформлению заказа. В качестве примера можно привести форму регистрации на сайте Allegis Group's thingamajob.com:
Пообещайте связаться с клиентом
Если вы спрашиваете у посетителей номер телефона, объясните, зачем вам это нужно. В точке действия еще раз напомните, что вся информация останется в строгом секрете. Например, на сайте компании Volvo Construction посетителю предлагается ввести сведения о себе и своем предприятии. При этом говорится, что если клиент заполнит соответствующую форму, региональный представитель свяжется с ним в течение 24 часов и ответит на все интересующие вопросы:
Видимо, многие владельцы компаний считают, что их бизнес вне конкуренции: мы крайне редко встречали на сайтах обещания связаться с клиентом в течение 24 часов. Но нельзя забывать, что покупатель теряет интерес к товару, если продавец не обращает на него внимания, – и движущей силе убеждения в этот момент приходит конец.
Предоставьте выбор
На сайте RADirect любой посетитель получит на свою заявку «Гарантированный ответ в течение одного рабочего дня». Кроме того, посетители могут поговорить с менеджером по телефону (звонок бесплатный) или задать вопрос прямо на сайте:
Соблюдайте общепринятые стандарты
Просмотрев самые разные формы на сайтах, вы обнаружите, что обязательные для заполнения поля принято помечать звездочкой (*). На бумажном бланке такие звездочки обычно означают сноску. Обязательно укажите, что поля, помеченные звездочкой, необходимо заполнить.
Короче – не всегда лучше
При оптимизации формы разработчики в первую очередь стараются убрать лишние поля. Недавно один из наших клиентов провел такое A/B– тестирование. Двум группам посетителей сайта были предложены два варианта формы: в первом варианте присутствовало поле для ввода адреса электронной почты, а во втором нет. Хотя вторую форму заполнило большее количество пользователей, покупателей среди них почти не оказалось. Нельзя исключать из формы такое важное поле, как адрес электронной почты – ведь рекламные рассылки играют огромную роль в работе интернет– магазина. Общение с клиентами по e-mail поддерживает движущую силу убеждения и обеспечивает продажи на сайте.
Обработка ошибок
Чтобы посетитель мог быстро исправить допущенные ошибки, от него требуется не только внимание и терпение. В ответ на некорректный ввод данных сайт должен выдать понятное сообщение. Обычно обработку ошибок возлагают на программистов. Им говорят: «Напишите нужный код», но не объясняют, как лучше это сделать. Получив такую сухую инструкцию, разработчик выполнит ее, как может: точно, аккуратно и с минимальными усилиями. В результате сообщение об ошибке, которое появится перед пользователем, может быть совершенно ему непонятным.
Вам, наверное, приходилось сталкиваться с подобным: вы заполнили форму, нажали кнопку «Отправить» и получили взамен жуткую страницу с сообщением об ошибке. На ней нет никакой дополнительной информации. А вдруг вы допустили несколько ошибок? Исправив одну из них, вы снова попадете на эту страшную страницу. Как будто нельзя написать обо всех ошибках сразу, чтобы избежать необходимости исправлять каждую из них по отдельности.
Ошибки при вводе бывают двух видов:
1. пропущено поле, обязательное для заполнения;
2. тип или формат данных не соответствуют требованиям.
В первом случае речь идет о тех сведениях, которые вам необходимы. Например, в форме оформления подписки обязательно нужно указать адрес электронной почты.
Во втором случае ошибка появляется, если у введенных данных неправильный тип или формат. Например, в поле для адреса электронной почты клиенту не позволяют ввести номер телефона.
При создании формы хорошо подумайте, какие поля стоит в нее включить. Определитесь, будете ли устанавливать строгий формат для вводимых данных. Но в любом случае ваша система должна сразу определить, что ввел пользователь в соответствующее поле: номер телефона или адрес электронной почты.
У каждого программиста есть свои излюбленные методы обработки ошибок, но в целом их можно разделить на две группы: обработка ошибок на стороне клиента и обработка ошибок на стороне сервера. Другими словами, данные проверяются на ошибки либо до отправки формы на сервер, либо после. Какой вариант подойдет вам лучше всего?
На первый взгляд, между ними нет особой разницы, однако программисты яростно спорят по этому вопросу уже несколько лет. Проверка ошибок на стороне клиента производится быстрее (еще говорят, что веб– приложение в данном случае ничем не отличается от обычной программы на компьютере пользователя). Однако для нее требуется создавать сценарий на JavaScript, а будет ли этот сценарий выполняться, зависит от версии браузера и от самого компьютера, что, несомненно, является большим ограничением.
Обработка ошибок на стороне сервера дает больше возможностей, здесь не возникает никаких проблем совместимости. Однако при этом данные совершают несколько кругов от компьютера пользователя к серверу и обратно. К тому же, проверить форму на ошибки можно только после нажатия кнопки «Отправить».
Как должно выглядеть сообщение об ошибке
Главное, чтобы покупатель, увидев сообщение об ошибке, сразу понял, что и где нужно исправить. Хороший пример можно увидеть на сайте Banana Republic. Если вы пройдете по ссылке Access Your Info («Информация о пользователе»), которая расположена внизу страницы, и введете в поле адреса электронной почты случайную строку, то прямо над этим полем появится сообщение об ошибке и указание по ее исправлению:
Постарайтесь сообщить об ошибке такими словами, будто она произошла не по вине пользователя (даже если на самом деле все было именно так!). Обвините во всех грехах свой сервер (поверьте: его самолюбие от этого не пострадает). Например, напишите так: «К сожалению, наш сервер не смог понять, какой адрес электронной почты вы ввели».
Попробуйте обойтись без требований вводить текст в строго определенном формате. Многим пользователям это не нравится, к тому же в большинстве случаев ваша система может сама извлечь из строки нужные данные и перевести их в соответствующий формат.
Не берите пример с сайта Nordstrom.com. Там требуют, чтобы посетитель вводил номер телефона без пробелов, черточек, точек или скобок. Но почему? Он ведь человек, а не робот. И это сайт должен обеспечить ему удобный ввод, а не наоборот. Для ввода телефонного номера нужно предусмотреть несколько самых распространенных форматов. Опытный программист без труда сможет написать соответствующий код и проверить, ввел пользователь номер телефона или имя любимой собаки.
