Сооснователь компании HumanFactor и сервиса для управления качеством клиентских данных Dadata.ru Елена Журавлева написала для AD колонку о том, как интернет-проектам создавать эффективные подсказки для заполнения веб-форм.
Пользователи не любят заполнять формы — никому не хочется тратить время на то, чтобы ввести в множество полей самую разнообразную информацию. Однако этот процесс можно сделать более простым, в том числе с помощью подсказок, облегчающих ввод данных.
Примеры форм известных компаний
Хорошо спроектированные формы могут значительно облегчить пользователям работу с сайтом, но их неудачная реализация может отпугнуть потенциальных клиентов. Для начала разберем, как подсказки реализованы у известных и крупных проектов.
Несмотря на картинку выше, подсказки в форме поиска Google очень хороши. Из их плюсов можно отметить:
- небольшое количество отображаемых вариантов (пользователь не путается);
- разделение на то, что уже набрано, и часть с подсказкой прямо в строке;
- сортировка подсказок по популярности;
- подсказка следующего варианта после пробела;
- подстановка вариант из подсказки в поисковую строку при перемещении по вариантам клавишами стрелок;
- запуск поиска по нажатию Enter.
«Яндекс.Такси»
Сервис «Яндекса» прощает пользователям опечатки (например, если вбить слово «Большаая» вместо «Большая», подсказки все равно будут релевантными).
Названия улиц выводятся без сокращений, что также повышает удобство работы с формой. Еще один плюс — выбранное значение подставляется в поле ввода сразу при перемещении по подсказке клавишами стрелок (↓↑).
Помимо перечисленных плюсов, подсказки в формах «Яндекс.Такси» обладают и определенными минусами. Например, сервис не понимает слова, разделенные пробелом. После «Большая Ч» не показывает вариант «Большая Черемушкинская», а выдает что-то совсем странное:
Никаких сокращений форма также не понимает.
Кроме того, иногда по мере продолжения ввода данных в форму подсказки становятся из релевантных нерелевантными. Например, если начать вбивать «Радон» — выведется список улиц, чего и ожидает пользователь. Но если дописать еще одну букву («Радоне») — улицы пропадают из подсказки, и остается только некий «ФГУП «Радон»», с которым непонятно что делать.
Также нет подсказок домов и подсветки совпадений подсказки и вбитой информации.
«Альфа-Банк»
У «Альфа-Банка» в формах, которые нужно заполнить для получения кредитов наличными и кредитных карт, используются подсказки по ФИО. Среди их плюсов можно отметить сортировку имен в подсказке по частоте использования и небольшое количество этих подсказок.
Минусов больше. Один из самых заметных — имя и отчество никак не зависят от выбранной фамилии, что приводит к смешению вариантов подсказок для людей обоих полов. Проще говоря, в форме можно набрать фамилию «Иванова», а затем в имени букву «А» и увидеть в подсказках «Андрей» и «Александр».
Среди других недостатков:
- подсказка сливается с формой;
- при листании списка подсказок клавишами стрелок, текущее значение не подставляется в поле ввода (как у Google);
- нет подсветки набранной части данных, которые совпали с подсказкой;
- в форме зачем-то есть поле «Пол» — его можно определить автоматически из введенных ФИО;
- система знает мало имен — из ФИО «Абдюшева Зульфия Фетхуловна» подсказки есть только для имени «Зульфия».
Lamoda
Теперь рассмотрим компанию, чья сфера бизнеса подразумевает трепетное отношение к качеству форм, поскольку оно напрямую влияет на продажи — это известный интернет-магазин Lamoda.ru. Нас интересует форма заказа товара.
Выглядит она хорошо — нет большого количества лишних полей, все четко и ясно. Однако на этапе ввода адреса начинаются сложности. Предположим, покупатель живет в городе Павловск. Если он начнет вводить название этого населенного пункта, то увидит подсказки, среди которых нужного города просто нет:
Если попытаться полистать подсказки клавишами стрелок, то легче не будет — выбранная подсказка не подставляется в поле ввода, а значит пользователю придется в любом случае мышкой скроллить список.
Даже если вбить название целиком и потом отделить его пробелом, это никак не скажется на выпадающих подсказках.
Хуже всего то, что система требует обязательно выбрать один из вариантов в списке (просто написать нужный город и нажать Enter нельзя). Если в нем нет нужного города, то совершить покупку не выйдет.
Покупатель из примера выше мог бы договориться с кем-то, кто живет в населенном пункте, который есть в списке Lamoda. Допустим, это деревня Улитино Московской области Павлово-Посадского района.
Здесь возникает другая проблема — в Московской области две деревни с таким названием, одна из них в Одинцовском районе. При этом после выбора населенного пункта в форме заказа разворачиваются дополнительные поля, среди которых нет такого, в которое можно было бы вписать данные о районе. Вероятность доставки по нужному адресу в итоге составляет ровно 50%.
Кроме того, система обязательно требует указать улицу — но в деревне их может просто не быть:
В конечном итоге, скорее всего пользователь устанет от войны с формой Lamoda и уйдет в другой магазин, где сделать заказ можно быстрее и удобнее.
Как измерять эффективность подсказок
Рассмотрев удачные и не очень решения для подсказок в формах, следует поговорить и о том, как измерять их «удачность». Подсказки призваны повысить качество ввода информации, поэтому и оценивать их следует с этой точки зрения.
Уменьшение количества «брошенных корзин»
Как видно из примера с формой сайта Lamoda, неудачно реализованные подсказки могут привести к тому, что потенциальный клиент просто не сможет совершить покупку и уйдет к конкурентам.
Соответственно, следует замерять процент пользователей, которые отказались от покупки именно на этапе ввода информации о доставке, а затем смотреть, снижается ли он после реализации подсказок.
Сокращение времени на ручную обработку данных
Если пользователи вводят данные (например, адрес) в произвольном формате, то для их разбора необходимо так или иначе задействовать ручной труд. Правильно реализованные подсказки позволяют сохранить возможность произвольного ввода (можно просто печатать адрес, а не выбирать из выпадающего списка), но при этом сохраняют данные в базу в нужном формате.
В результате процент данных, требующих ручного разбора, должен снижаться — над этим показателем следует работать.
Снижение числа ошибок
Если форма на сайте не позволяет пользователям быстро вводить нужные данные, это повышает вероятность ошибок при заполнении форм. В свою очередь это может приводить к неправильному оформлению заявок (например, на доставку).
Однако, если пользователю подсказать, к примеру, email-адрес, то он может не вводить его дальше, а просто выбрать нужный из списка — это позволит избежать возможной ошибки.
Получение дополнительных данных о клиентах
Специализированные сервисы подсказок не только облегчают пользователям ввод информации, но и позволяют бизнесу получать больше данных о потенциальных клиентах.
Специализированные сервисы подсказок (неплохой обзор таких систем есть на «Хабре») не только облегчают пользователям ввод информации, но и позволяют бизнесу получать больше данных о потенциальных клиентах.
Например, такие сервисы могут «вытаскивать» из вбитого адреса часовой пояс — это полезно для отправления SMS и почтовых рассылок. Помимо этого они могут определять географические координаты пользователя, что помогает курьерским и сервисным компаниям строить оптимальные маршруты для своих специалистов (например, сантехник с 20 заказами) или курьеров. Облегчает доставку и определение почтового индекса по адресу — далеко не все пользователи знают эти данные или пишут их неправильно, что приводит к тому, что посылка с заказом «уезжает не туда».
Некоторые из подобных сервисов умеют определять город клиента по IP-адресу — это полезно для вывода предложений, относящихся к этому региону (какие-то товары могут быть доступны только в Москве, но не в Челябинске). Для сегментации хороша и функция определения пола по имени — тогда женщинам можно показывать предложения косметики, а мужчинам, к примеру, пены для бритья.
Еще одна важная возможность — определение различных кодов, например ФИАС. Он нужен для синхронизации различных систем — в большинстве случаев можно передавать этот код, а не сам адрес (в котором может быть ошибка), кроме того, он позволяет актуализировать адрес в случае его изменения в будущем, по коду ФИАС в специальной базе можно найти актуальный адрес. Есть еще коды ОКАТО и ИФНС, которые используются для сдачи отчетности в налоговую, их также можно определять с помощью сервиса подсказок.
Заключение
Подсказки в формах могут радикально облегчить и ускорить процесс ввода даже большого количество данных до 5-10 секунд. Ниже представлены советы, следуя которым вы сможете создавать по-настоящему эффективные подсказки:
- Количество подсказок должно быть небольшим — пользователь может просматривать форму с мобильного устройства, и ему будет неудобно скроллить список.
- Самые популярные варианты подсказок следует выносить наверх — это увеличивает скорость ввода информации.
- При перемещении по списку клавишами стрелок нужно подставлять текущий вариант в поле ввода — тогда пользователь сможет просто нажать Enter и отправить нужные данные без лишних кликов.
- Чтобы строка подсказки не была слишком длинной, стоит разбивать информацию на две строки (например, город на одной строке, а улица уже на второй, как здесь).
- Пользователь быстрее просмотрит список подсказок, если подсвечивать совпадения.
- Нужно использовать подсказки для сокращения количества полей в форме — например, убрать поле «Пол», так как в 95% случаев он понятен из введенных имени и фамилии.
- Нельзя заставлять пользователей обязательно выбирать что-то из представленных подсказок, как Lamoda, это пугает пользователей и убивает конверсию — всех вариантов не предусмотреть, поэтому у людей должна быть возможность отправить введенную руками информацию, которая отсутствует в подсказке.
About the author
