Лого vc.ru

Почему подсказки в форме на сайте могут помочь удержать пользователя

Почему подсказки в форме на сайте могут помочь удержать пользователя

Сооснователь компании HumanFactor и сервиса для управления качеством клиентских данных Dadata.ru Елена Журавлева написала для ЦП колонку о том, как интернет-проектам создавать эффективные подсказки для заполнения веб-форм.

Поделиться

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

Примеры форм известных компаний

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

Google

Несмотря на картинку выше, подсказки в форме поиска Google очень хороши. Из их плюсов можно отметить:

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

«Яндекс.Такси»

Сервис «Яндекса» прощает пользователям опечатки (например, если вбить слово «Большаая» вместо «Большая», подсказки все равно будут релевантными).

Названия улиц выводятся без сокращений, что также повышает удобство работы с формой. Еще один плюс — выбранное значение подставляется в поле ввода сразу при перемещении по подсказке клавишами стрелок (↓↑).

Помимо перечисленных плюсов, подсказки в формах «Яндекс.Такси» обладают и определенными минусами. Например, сервис не понимает слова, разделенные пробелом. После «Большая Ч» не показывает вариант «Большая Черемушкинская», а выдает что-то совсем странное:

Никаких сокращений форма также не понимает.

Кроме того, иногда по мере продолжения ввода данных в форму подсказки становятся из релевантных нерелевантными. Например, если начать вбивать «Радон» — выведется список улиц, чего и ожидает пользователь. Но если дописать еще одну букву («Радоне») — улицы пропадают из подсказки, и остается только некий «ФГУП "Радон"», с которым непонятно что делать.

Также нет подсказок домов и подсветки совпадений подсказки и вбитой информации.

«Альфа-Банк»

У «Альфа-Банка» в формах, которые нужно заполнить для получения кредитов наличными и кредитных карт, используются подсказки по ФИО. Среди их плюсов можно отметить сортировку имен в подсказке по частоте использования и небольшое количество этих подсказок.

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

Среди других недостатков:

  • подсказка сливается с формой;
  • при листании списка подсказок клавишами стрелок, текущее значение не подставляется в поле ввода (как у Google);
  • нет подсветки набранной части данных, которые совпали с подсказкой;
  • в форме зачем-то есть поле «Пол» — его можно определить автоматически из введенных ФИО;
  • система знает мало имен — из ФИО «Абдюшева Зульфия Фетхуловна» подсказки есть только для имени «Зульфия».

Lamoda

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

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

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

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

Хуже всего то, что система требует обязательно выбрать один из вариантов в списке (просто написать нужный город и нажать Enter нельзя). Если в нем нет нужного города, то совершить покупку не выйдет.

Покупатель из примера выше мог бы договориться с кем-то, кто живет в населенном пункте, который есть в списке Lamoda. Допустим, это деревня Улитино Московской области Павлово-Посадского района.

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

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

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

Как измерять эффективность подсказок

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

Уменьшение количества «брошенных корзин»

Как видно из примера с формой сайта Lamoda, неудачно реализованные подсказки могут привести к тому, что потенциальный клиент просто не сможет совершить покупку и уйдет к конкурентам.

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

Сокращение времени на ручную обработку данных

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

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

Снижение числа ошибок

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

Однако, если пользователю подсказать, к примеру, email-адрес, то он может не вводить его дальше, а просто выбрать нужный из списка — это позволит избежать возможной ошибки.

Получение дополнительных данных о клиентах

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

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

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

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

Еще одна важная возможность — определение различных кодов, например ФИАС. Он нужен для синхронизации различных систем — в большинстве случаев можно передавать этот код, а не сам адрес (в котором может быть ошибка), кроме того, он позволяет актуализировать адрес в случае его изменения в будущем, по коду ФИАС в специальной базе можно найти актуальный адрес. Есть еще коды ОКАТО и ИФНС, которые используются для сдачи отчетности в налоговую, их также можно определять с помощью сервиса подсказок.

Заключение

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

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

Автор из скромности забыла упомянуть, что самые крутые и при этом бесплатные подсказки, которые подключаются на любой сайт, живут здесь: dadata.ru/suggestions/#demo

Интересный сервис, хотя и глючный местами.

0

Максим, а в чем глючный? Можете уточнить?

0

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

Допустим, меня интересует два адреса:
1) Березовский, Блюхера 1
2) Березовский, Комсомольская 10

Ввод[В]: Березовский
Ответ[О]: Свердловская обл, г Березовский
Правильно
--
В: Березовский, блюхера
О: Свердловская обл, г Екатеринбург, ул Блюхера
Приплыли.
--
В: Березовский, комсомольская
О: Свердловская обл, г Березовский, ул Комсомольская
Правильно
--
В: Березовский, Комсомольская 10
О: Кемеровская обл, г Березовский, ул Комсомольская, д 10
Приплыли
===
То есть часть адреса при вводе отрабатывает правильно, но добавление дополнительных данных дает, порой, абсолютно неожиданный результат.

Дело в том, что Подсказки работают по ФИАС. ФИАС – классификатор адресов, который содержит все адреса и историю их изменений. К сожалению, ФИАС не совершенен, и в нем приличное количество ошибок.

Так, например, ФИАС знает, что есть город Березовский, а в нем улица Комсомольская. Но не знает о том, что есть дом 10 (в ФИАС для данной улицы вообще нет домов). Соответственно, Подсказки предлагают ближайший существующий вариант.

С "Блюхера, 1" все еще интереснее – в ФИАС нет такой улицы для города Березовск. Яндекс Карты по данному запросу приводят Березовский тракт 1, то есть эта улица возможно переименована. Но в ФИАС истории переименований для нее опять же нет.

При этом в соседнем Екатеринбурге есть улица Блюхера, потому Подсказки предлагают более релевантный ответ.

Мы стараемся отлавливать такие ошибки — в т.ч. и по замечаниям пользователей на форуме. Дополняем ФИАС и исправляем в нем найденные ошибки. Ведем работу по слиянию ФИАС с базой Почты России (в ней есть адреса, которых нет в ФИАС). По вашему комментарию поставили запрос на дополнение справочника.

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

Например:
В: екатеринбург, улица ленина
О: Свердловская обл, г Екатеринбург, село Горный Щит, ул Ленина

В чем прикол? А в Екатеринбурге нет улицы Ленина. Есть проспект Ленина. Но, кстати, на этом даже "Ок, Гугл" прокалывается.

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

И еще более странно, когда я указал правильно 2 реальных значения ("Березовский, Комсомольская"), но ошибся с номером дома, мне уже не верят, что мне нужен дом именно в указанном городе и на указанной улице...

Это знаете, словно услышать на улице одно английское слово и начать сомневаться, что ты в России.

Сервис в любом случае очень нужный и полезный. Я себе в закладки добавил. Но раз уж вы спросили... я привык отвечать развернуто :)

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

0

не так давно, даже платная версия сервиса была в offline - это было печально.

0

Егор, да, и мы улучшили доступность в связи с этим, поставили третий резервный экземпляр dadata.ru.

Вот тут можно подробнее почитать: dadata.userecho.com/topic/752578-maj-2015-proveryaem-pasporta-i-uluchshaem-dostupnost-servisa/

сделайте исправление опечаток в почтовых доменах

0

Я думаю автору надо сказать огромное спасибо за такой пост. Спасибо!)

Подключаюсь не глядя.

Люди в деревнях, названий которых нет в базе lamoda, не покупают на lamoda.ru, а поскроллить витрину этого сайта можно без указания города)

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

Ребят привет. Обращаюсь к веб-программистам.
На опенкарт форуме есть их модуль для движка опенкарт. Сделан кривовато, но Елена Журавлева отписала в теме что поправивший этот модуль программист может сам распространять его за деньги на этом форуме. Может возьмется кто?

Ну таки здгавствуйте.

1. "...в форме зачем-то есть поле «Пол» — его можно определить автоматически из введенных ФИО;..."

Что значит зачем-то? А если скрипт определит пол неверно, что тогда делать?

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

Есть 100500 фамилий, заканчивающихся на гласные и, при этом, являющихся мужскими. И наоборот. К примеру "Алекс Смитт" - это мужчина или женщина?

3. "...система знает мало имен — из ФИО «Абдюшева Зульфия Фетхуловна» подсказки есть только для имени «Зульфия»..."

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

4. "...Предположим, покупатель живет в городе Павловск. Если он начнет вводить название этого населенного пункта, то увидит подсказки, среди которых нужного города просто нет..."

Значит в этот город может и не быть доставки. Всё логично.

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

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

Где выпускающий редактор? Выходи из запоя.

Но в целом, статья полезная. Как для меня.

P.S. "скроллить", "скроллить", "скроллить"...
По-русски написать, не?

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

0

Ребят, сделайте уже МОБ версию ленда

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

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

Сейчас обсуждают
Андрей Жигунов

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

Галерея: как на самом деле фотографируют моделей, вещи и еду для рекламы
0
XageRu
Xage

Это самый жопный момент имхо).
Где та грань между "стоп и зафиксировать убытки".
И "слишком рано сдался"...

5 советов о том, как провалить проект
0
Культурный Код

лучше бы само НАЗВАНИЕ лекарства попроще придумали бы. А то я уже забыл, как называется

«Тантум Верде» записала ролик с Тимати, чтобы выделиться из рекламного шума
0
Ilja Razinkov

"Можно ли сейчас что-нибудь заработать на майнинге криптовалют?" - что нибудь можно. Например глубокое разочарование ))

Можно ли заработать на майнинге криптовалюты
0
Oleg Matveenko

Логотип гугла старый.

Сделки за неделю: Новости российского венчурного рынка с 19 по 25 сентября
0
Показать еще