Валидация лид-форм — полное руководство

Posted on by riasevastopol

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

Имейте в виду, что оптимизация лид-форм — это главный компонент процесса оптимизации конверсии, и главное внимание тут направляться выделить валидации полей.

  • Юзабилити лид-форм: действенные способы увеличения конверсии вебмагазинов

Что такое валидация лид-формы?

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

К примеру, Twitter не разрешит вам перейти на следующий этап регистрации, если вы введете адрес электронной почты в неправильном формате:

Валидация лид-форм — полное руководство

В то время, когда вы введете адрес почты в том формате, что нужен совокупности, рядом с полем покажется галочка, свидетельствующая о том, что формат введенных данных верен:

Сущность валидации — обеспечивать введение пользователями данных в формате, требуемым совокупностью (к примеру, адрес почты обязан соответствовать стандарту user@example.com, а вот, например, пароль обязан содержать не меньше 7 знаков).

Существуют два главных вида формы валидации:

1. Валидация по окончании отправки данных.
2. Встроенная валидация.

  • 10 несложных идей по улучшению конверсии лид-форм

Валидация по окончании отправки данных

Данный вид валидации самый распространенный, но вместе с тем далеко не самый успешный. Принцип его работы достаточно несложен: по окончании заполнения всех нужных полей пользователь отправляет эти на сервер веб-ресурса (в большинстве случаев нажатием кнопки «Послать»), где они и проходят валидацию. Итог проверки возвращается на компьютер пользователя в виде сообщения: в случае если все сведенья верны, то покажется подтверждающее данный факт сообщение, в случае если нет — то сообщение об неточности.

Как вы осознаёте, такая организация процесса валидации может приводить к массе неудобств. Представьте, что вы израсходовали порядка 10 мин. на заполнение весьма долгой формы, а после этого взяли сообщение, что совершили 8 неточностей, как на примере ниже:

Простите, но вы совершили 8 неточностей при заполнении формы регистрации. Исправьте неточности, отмеченные ниже, и попытайтесь опять.
Неточности: пароли не совпадают; неправильно введен email-адрес; не указана дата рождения и т.д.

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

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

Пип Лайя (Peep Laya), основатель и известный маркетолог блога ConversionXL, пробовал заполнить форму, вышеприведенную, чтобы получить смету на грядущее мероприятие. По окончании валидации формы совокупность сказала о идеальной неточности. Строка «Число гостей» потребовала ввода конкретного числа, в то время как Пип ввел предполагаемый диапазон гостей (от 50 до 100), что логично в действительности, потому, что ни при каких обстоятельствах нельзя быть уверенным в том, сколько человек посетит то либо иное мероприятие.

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

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

Встроенная валидация

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

Встроенная валидация форм разрешает определить об неточности без промедлений и без того же скоро ее исправить

Твитнуть цитату

Хороший пример встроенной валидации — регистрационная форма Twitter. При заполнении полей вы видите или подтверждающий сигнал (зеленую галочку), или сигнал, говорящий о наличии неточности (красный крестик):

Большая часть специалистов сходятся во мнении, что встроенная валидация благотворно воздействует на опыт сотрудничества с ресурсом (user experience). Вот что говорит о лид-формах Люк Врублевский (Luke Wroblewski), директор по продуктам Гугл и создатель книги «Сперва мобильные!»:

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

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

  • коэффициент успешного заполнения формы повысился на 22%;
  • на 22% сократилось число идеальных неточностей;
  • рейтинг удовлетворенности повысился на 31%;
  • время исполнения задачи уменьшилось на 41%;
  • на 47% уменьшилось число фиксаций глаз;
  • на 22% увеличилось число людей, посчитавших, что заполнение формы стоило затраченных упрочнений.

Одна из статей веб-ресурса Designmodo посвящена описанию встроенной валидации на уже упомянутом сервисе микроблоггинга Twitter:

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

Это настоящее откровение! В итоге, человеку не нужно будет ждать перезагрузки всей страницы, дабы проверить, заполнена ли форма нужными данными».

Приемы оптимизации лид-формы

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

1. Дополните лид-форму кратким пояснительным текстом (подсказками)

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

Но текст, что вы размещаете рядом с полями формы, должен быть максимально дешёвым. Агентство Baymard Institute информирует, что на протяжении совершённого им изучения самые успешных вебмагазинов было распознано, что 92% из них грешат неадекватным описанием полей лид-форм в ходе подтверждения заказа.

Дабы избежать путаницы, попытайтесь быть максимально конкретными в подсказках, как на примере ниже:

Посредством маленьких, но предельно ясных пояснений, разработчикам удается ответить на все вероятные вопросы со стороны пользователя: как написать собственный имя, код безопасности и номер карты. Микротекст оказывает помощь визитёрам заполнить форму стремительнее, с меньшим числом неточностей.

Джошуа Портер (Joshua Porter), UX-директор в Hubspot, кроме этого отмечает немыслимую полезность данного инструмента. Выяснив, что пользователи испытывают затруднения с заполнением платежной информации, он добавил строчок текста, которая информировала, что информация, вводимая в форму, обязана совпадать с информацией, размещенной на их пластиковых картах. Затем новшества неприятность провалилась сквозь землю.

«Убедитесь, что вводимая вами информация сходится с данными вашей пластиковой карты»

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

В соответствии с итогам изучения агентства Baymard Institute, пользователи ощущают неудобство и тревогу, в то время, когда при заполнении формы их просят ввести данные личного характера (к примеру, номер телефона либо адрес места жительства) и наряду с этим не растолковывают, для чего эта информация нужна. Разумеется, что таковой подход чреват большим уровнем отказов, потому, что далеко не все готов дать эти сведенья бесплатно. В микротексте же вы имеете возможность дать ответ на подобные вопросы и снять лишнее напряжение. В частности, направляться обратить внимание пользователей на то, для чего вам необходимы те либо иные эти, для каких целей:

«На данный адрес мы вышлем вам Email с подтверждением подписки»

2. Будьте аккуратны с сообщениями об неточностях

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

Обратите внимание на то, как реализована совокупность оповещения об неточности на сайте Meetup.com (соцсеть). В этом случае неверно заполнено поле почтового индекса:

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

3. Будьте тактичны при оповещении об неточностях

светло как сутки: людям не нравятся сообщения об неточностях.

Издание Smashing Magazine информирует, что «кроме того в случае если человек заполнил до 90% лид-формы верно, но по окончании ее перезагрузки и отправки страницы заметил сообщение об неточности, он будет ощущать себя так, как будто бы ничего и не заполнял».

Для начала, не применяйте слова с негативным оттенком. забыть все фразы типа «неточность» и «неправильно».

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

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

Ниже — пример, в котором все сделано верно. Обращаем внимание на то, как Гугл информирует своим пользователям о идеальных ими неточностях:

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

4. Не будьте излишне придирчивы

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

К примеру, если вы запрашиваете у человека дату, разрешите ему ввести год как «16» либо «2016» — не требуется ограничивать его каким-то одним вариантов, поскольку разумеется, что смогут быть использованы оба эти обозначения. Кроме этого разрешите людям ставить (/) либо (.) между цифрами. В то время, когда вы запрашиваете номер телефона, не потребуйте наличия пробелов, скобок либо чего-нибудь еще — пускай пользователь введет собственный номер телефона так, как ему это комфортно.

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

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

Джеймс Робинсон (James Robinson), создатель бестселлера «Будущее сетевого маркетинга», говорит по этому поводу следующее:

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

Особенно это относится паролей. Старайтесь не допускать происхождения для того чтобы сценария:

«Поле с паролем не может быть безлюдным;
Пароль обязан содержать от 8 до 16 знаков;
В пароле должны быть использованы цифры и буквы;
Пароль обязан содержать хотя бы одну цифру либо букву;
Не допускается повторения числа либо буквы до 3-х раз и т.д.»

  • 5 советов по созданию вашей следующей лид-формы

Предупредительные меры

Грамотный сервис и комфортный user experience — это не только своевременные и приятные глазу сообщения об неточностях, но и инструменты, каковые оказывают помощь пользователям не выполнять неточностей вовсе. Перечисленные выше приемы во многом преследуют ту же цель, но их не всегда бывает достаточно. Ниже перечислены пара предупредительных инструментов, при наличии которых совершить неточность возможно разве что намерено.

1. Не следуйте неспециализированному правилу

На большинстве сайтов вы имеете возможность встретить лид-форму, при заполнении которой (в большинстве случаев, поля «Пароль») вы не видите вводимые значения: они заменяются звездочками. Как вы осознаёте, не обращая внимания на то, что эта практика обширно распространена, она далеко не самая успешная, потому, что приводит к с юзабилити.

Вместо того, дабы делать как все, экспериментируйте. К примеру, имеете возможность попытаться совокупность с показом последнего введенного знака в пароле (это легко находка для обладателей смартфонов с мелкими экранами):

2. Продемонстрировать пароль

Еще в 2009 году на данный нюанс обращал якоб и внимание Нильсен (Jakob Nielsen), основатель консалтингового агентства Nielsen Norman Group, в собственной статье «Хватит скрывать пароли» (Stop Password Masking). Он кроме этого говорит, что маскировка пароля ведет к громадным проблемам с юзабилити лид-формы. В соответствии с Нильсену:

  • пользователи совершают больше неточностей, в то время, когда они не видят, какие конкретно знаки вводят в поле. Исходя из этого они чувствуют себя не хватает с уверенностью и легко смогут вовсе отказаться от заполнения формы (что ведет к понижению показателя конверсии);
  • появляющаяся неопределённость и неуверенность в итоге ведет к тому, что люди склонны применять более простые пароли, каковые. Это заметно снижает степень безопасности, а следовательно — и удовлетворенность вашим сервисом, в случае если внезапно появится критическая обстановка.

Маскировка пароля ведет к проблемам с юзабилити — пользователи не видят вводимые эти

Твитнуть цитату

Посмотрите на пример eBay:

Кстати, совсем необязательно потребовать от пользователя подтверждения email-адреса при регистрации. Так делают многие сервисы, но это не предлог поступать так же. Вместо этого возможно последовать примеру Vimeo — запрашивать электронный адрес лишь один раз:

3. Не применяйте плейсхолдеры

Плейсхолдеры выглядят следующим образом:

Они не совсем эргономичны по следующим обстоятельствам:

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

4. Выпадающие меню и всплывающие подсказки

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

Не забывайте пример, вышеприведенный, в котором пользователю нужно ввести конкретное число визитёров мероприятия?

Вместо того, дабы выпытывать у пользователя правильное число гостей, разработчикам следовало реализовать форму ввода информации в формате того же выпадающего меню, где возможно было бы выбрать один из диапазонов (0-50, 50-100, 100-200 и т.д.).

В случае если имеется возможность, то применяйте разработку встроенных подсказок. Пример — ниже:

  • Тонкости настройки лид-форм, каковые разрешат вашей конверсии взлететь вверх

Заключение

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

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

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

Высоких вам конверсий!

По данным conversionxl.comImage source Simo Tata

Случайные статьи:

JS.Валидация форм. Часть1


Подборка похожих статей:

riasevastopol

More Posts