Темные паттерны веб-форм или какой была бы самая конверсионная форма

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

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

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

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

Placeholder — подсказки для ввода в форму нужной и конкретной информации, как правило находящейся в самом поле и исчезающей при начале взаимодействия с ней.

Checkbox — кнопка переключателя, имеющая 2 значение, «да» или «нет» ( вкл/выкл ).

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

Имеем 3 стандартных поля ввода + дополнительная форма в ней:

Максимально облегчить заполнение формы и привести к конечной отправке любыми способами.

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

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

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

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

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

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

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

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

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

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

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

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

Исходя из данной ситуации, расположим поле номера первым, обозначив его самым важным из полей и с первого взгляда единственным полем для заполнения, по следующей причине — Любой пользователь начавший заполнение формы введет поля номера, что для нас имеет самый важный фактор из всех оставшихся полей, будет готов для заполнения оставшихся, в случае если пользователь не заполнит поля и не отправит форму, по средством ajax, мы считаем время начала заполнения и в случае не произведения отправки формы, в течении 20 минут, данные формы автоматически отправляются в CRM владельца. Такая же схема действует при попытке завершении сессии на сайте или закрытия вкладки(один из трех сценариев).

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

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