Качество и интеграция клиентских данных
74,54
рейтинг
24 февраля 2014 в 15:51

Разработка → Делаем адресные формы более привлекательными



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

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

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



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

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



Тщетные попытки ввести «Турчанинов», «Турчанинов пер», «пер Турчанинов», «ТУРЧАНИНОВ» также не увенчались успехом. Если честно, хотелось уже заказать в другом месте. Но интерес закончить начатое перевесил негодование, и, в результате, мы ввели название крупной улицы неподалеку от офиса и нажали «ОК».



Да, это модальное окно с названием улицы. Нажимаем «Продолжить» и можем ввести дом.



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

Отличный пример как делать не надо.

А как сделать форму, которая будет удобна? Возьмём, для примера, страницу обращения в интернет-приёмную правительства Москвы:



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

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

Перенесём страницу в прототип, чтобы проще было проектировать:



Сразу же возникает вопрос: можно ужать адресную информацию в одно поле? Или требуется разбиение на несколько элементов?

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



Пример кода: подключаем подсказки по адресу к текстовому полю
<div class="form-group">
    <label for="address">Адрес</label><span class="required"> </span>
    <input type="text" class="form-control" id="address" placeholder="Введите адрес в свободной форме (до дома)">
</div>

$("#address").suggestions({
    serviceUrl: DADATA_API_URL + "/suggest/address",
    token: TOKEN,
    selectOnSpace: true
});


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



Пример кода: нестандартное форматирование списка подсказок
/* Подсветка совпадения в результатах поиска */
.autocomplete-suggestions strong {
    color: #3399FF;
    font-weight: normal;
}

$("#address").suggestions({
    serviceUrl: DADATA_API_URL + "/suggest/address",
    token: TOKEN,
    selectOnSpace: true,
    formatResult: self.formatResult
});

/**
 * Форматирование элемента списка подсказок в две строки.
 * При отрисовке списка подсказок вызывается для каждого элемента списка.
 * @param suggestion   Подсказка
 * @param currentValue Введенный пользователем текст
 * @returns {string} HTML для элемента списка подсказок
 */
formatResult: function (suggestion, currentValue) {
    var address = suggestion.data;
    // первая строка - регион, район, город
    var part1 = join([
        address.region,
        join([address.area_type, address.area], " "),
        join([address.city_type, address.city], " ")
    ]);
    // вторая строка - населенный пункт, улица и дом
    var part2 = join([
        join([address.settlement_type, address.settlement], " "),
        join([address.street_type, address.street], " "),
        join([address.house_type, address.house], " ")
    ]);
    // подсветка введенного пользователем текста
    var pattern = '(^|\\s+)(' + $.Suggestions.utils.escapeRegExChars(currentValue) + ')';
    part2 = part2.replace(new RegExp(pattern, 'gi'), '$1<strong>$2<\/strong>')
    var suggestedValue = part2 ?
        "<span class=\"autocomplete-suggestion-region\">" + part1 + "</span>" + "<br>  " + part2
        : part1;
    return suggestedValue;
}


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



Пример кода: ограничиваем поиск конкретным регионом России
$("#address").suggestions({
    serviceUrl: DADATA_API_URL + "/suggest/address",
    token: TOKEN,
    selectOnSpace: true,
    onSearchStart: self.forceMoscow,
    formatResult: self.formatResult
});

/**
 * Ограничивает поиск Москвой
 * @param params Параметры ajax-запроса
 */
forceMoscow: function (params) {
    var query = params["query"];
    var pattern = /Москва/i;
    if (!pattern.test(query)) {
        query = "Москва " + query;
    }
    params["query"] = query;
}


Чтобы не появлялся скролл, будем показывать первые 7 из 10 подсказок (отсортированы они по релевантности, поэтому качество поиска не пострадает):



Пример кода: фильтруем список подсказок
$("#address").suggestions({
    serviceUrl: DADATA_API_URL + "/suggest/address",
    token: TOKEN,
    selectOnSpace: true,
    maxHeight: 310,
    onSearchStart: self.forceMoscow,
    onSearchComplete: self.trimResults,
    formatResult: self.formatResult
});

/**
 * Фильтрует список подсказок
 * @param query       Введенный пользователем текст
 * @param suggestions Массив подсказок для введенного текста
 */
trimResults: function (query, suggestions) {
    suggestions.splice(7,3);
    suggestions.forEach(function(suggestion) {
        suggestion.value = suggestion.value.replace("Россия, ", "");
    })
}


Когда пользователь выбирает конкретный вариант из списка, в «Адрес» помещаем выбранное значение, а в остальные поля формы подставляем гранулярные поля адреса:



Пример кода: автоматически заполняем адрес из выбранной подсказки
$("#address").suggestions({
    serviceUrl: DADATA_API_URL + "/suggest/address",
    token: TOKEN,
    selectOnSpace: true,
    maxHeight: 310,
    onSearchStart: self.forceMoscow,
    onSearchComplete: self.trimResults,
    formatResult: self.formatResult,
    onSelect: function(suggestion) {
        if (suggestion.data) {
            this.value = self.formatSelected(suggestion);
            self.showSelected(suggestion);
        }
    }
});

/**
 * Заполняет поля формы гранулярными полями адреса из выбранной подсказки
 * @param suggestion Выбранная подсказка
 */
showSelected: function (suggestion) {
    var address = suggestion.data;
    $("#address-postal_code").val(address.postal_code);
    $("#address-region").val(
        join([address.region_type, address.region], " ")
    );
    $("#address-city").val(join([
        join([address.area_type, address.area], " "),
        join([address.city_type, address.city], " "),
        join([address.settlement_type, address.settlement], " ")
    ]));
    $("#address-street").val(
        join([address.street_type, address.street], " ")
    );
    $("#address-house").val(
        join([address.house_type, address.house], " ")
    );
}  // любите работать с кодом? 
   // У нас есть отличные вакансии http://hh.ru/employer/15589


Раз все поля теперь заполняются автоматически, мы можем сделать адресную часть формы более лаконичной:



По аналогии делаем ФИО и получаем такую форму обратной связи:



Вживую можно посмотреть на демо-странице (+ исходники на гитхабе).

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

Представляете, если бы на каждом сайте: при покупке билета, оформлении заказа в интернет магазине или при заполнении формы регистрации — была такая простая процедура ввода данных? Если бы заполнение формы с любого устройства было максимально удобно и на это требовалось всего 5-10 секунд?

Предлагаем начать делать мир лучше уже сейчас! Подключайтесь к сервису и пробуйте, смотрите за реакцией пользователей, проводите a/b тестирование. И удачи вам с вашими клиентами!

via AlexGechis
Автор: @algenon
HumanFactorLabs
рейтинг 74,54
Качество и интеграция клиентских данных

Комментарии (108)

  • +9
    Вот если бы такой скрипт можно было держать на своем сервере. Тогда бы пользовался, а так страшновато.
    • 0
      А что вас пугает? Необходимость отдавать данные наружу?
      • +8
        152-ФЗ. Фамилия и адрес — однозначно персональные данные человека. Он еще с нами договор не заключил, а мы его данные на левый сервер уже шлем.
        • 0
          Адрес сам по себе персональными данными точно не является. ФИО в отрыве от остальных данных — тоже.
          Ну и разумеется, мы не сохраняем данные запросов.
          • +15
            Ну и разумеется, мы не сохраняем данные запросов.

            А, ну если Вы так говорите…
            • –5
              Да, мы так говорим и ручаемся за это репутацией компании.
              • +5
                Рекомендую курс.
                Вкратце:
                Верить кому-либо чисто на основании репутации — глупо. Верить можно только утверждениям построенным на фактах.
          • +2
            К сожалению, адрес является. А уж адрес вкупе с ФИО…
            • +2
              Адрес сам по себе не является персональными данными без фио… Так как является всего лишь данными об объекте жилого/нежилого фонда администрации города/области.
              • –2
                То есть Вас не смутит, что я опубликую в газете, что по вашему домашнему адресу постоянно храниться в квартире 5 млн. долл. И появление такой информации в газете с вашим домашним адресом не вызовет у вас мысли о вмешательстве в ваше персональное пространство.

                Я просто сам с этим связан, и сам знаю 400 сравнительно честных способов отбрехаться от претензий по ФЗ-152. Поэтому я сильно ошибусь, если предположу, что Вы предлагаете некоторую трактовку, не обеспеченную разъяснением какого-либо госоргана?
                • +2
                  Смутит, конечно. Но если вы не будете знать, что этот адрес — именно мой — то вы не сможете провести на меня целенаправленную атаку. Таким образом, если у вас есть только база адресов — без ФИО и прочих данных — я смогу попасть «под раздачу» только случайно.

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


                    Или и вовсе скачать КЛАДР с сайта налоговой и стать счастливым обладателем 25 миллионов адресов. Квартирами можно дополнить по вкусу :-)
                • +2
                  Не подменяйте понятия. Вы сами пишите «вашему домашнему адресу», что значит «адрес с привязкой» к конкретному человеку.
                  Нет конкретного человека (ну в крайнем случае группы лиц, ну хотя бы фамилии), нет перс. данных («Нет тела — нет дела» =) )
                  Разглашение информации о наличии денег по какому-то адресу может быть наказуемо скорее всего только по другим статьям УК, например, ст. 33 «соучастие», как подстрекателя: «Подстрекателем признаётся лицо, склонившее другое лицо к совершению преступления путём уговора, подкупа, угрозы или другим способом. Уговор — это систематические просьбы, иные действия, направленные на создание у подстрекаемого лица представления о необходимости совершения преступления.»
                  Не надо мешать всё в кучу.
                  Вы сильно ошибётесь, так как я занимаюсь интеграцией систем защиты персональных данных. Предлагаю не меряться пиписьками.

                  Вот вам тогда такое разглашение перс. данных: «По адресу г. Москва, ул. Дорожная, д.9 лежит среднестатистически крупненькая сумма»
        • +1
          Вот только, во-первых, эти данные «на левый сервер» посылаются по-отдельности — а во-вторых, они на том сервере, как правило, уже есть.
      • +7
        Надежность. Когда скрипт находится у себя, ты уверен что он будет работать. А вот когда такую услугу предоставляет сторонний сервис — никогда не узнаешь когда он загнется или введет какую-нибудь мзду. Но когда такое произойдет куча сайтов останется без сервиса.

        Уж лучше бы скрипт был обфусцированный или открытый, но оплата разовая.
        • 0
          Есть возможность подключиться к выделенному экземпляру сервиса с резервированием, стоит 2800 в год. Для совсем крупных проектов можно установить локальный экземпляр у себя.
        • +1
          На самом деле такая возможность есть, и её используют наши клиенты, просто мы хотели сделать сервис более доступным в финансовом плане для всех, у кого есть задача работы с клиентскими данными. С подсказками есть три варианта работы:
          1. Бесплатный (идеальный вариант для тестирования): доступ к основным функциям, лимит на 10.000 запросов в сутки.
          2. Платный (годовая абонентская плата): неограниченное количество запросов, сервис подсказок развёрнут на AWS на нескольких серверах с балансировщиком, гарантия доступности 7х24. И поверьте, у нас нет цели делать его дорогим, резко увеличивать абонентскую плату и т.п.
          3. Свой билд (разовая оплата, поддержка): Вы можете купить билд для установки у себя и делать с ним что захочется.
          Это что касается надёжности. По поводу сохранения приватности данных — если Вы заметили, подсказки на ФИО и на адрес независимы друг от друга, и мы никак не сможем сделать связку ФИО-адрес даже если очень захотим, а по отдельности они не несут никакой приватной информации:)
          • +4
            «Даже если очень захотим» — неверно. Если захотите — можете. Вариантов масса.
            • 0
              Ответил выше.
            • +1
              Скажите, если бы мы сделали SOAP или REST API вместо готового javascript, разные для ФИО и адреса, в запросе только строка (соответственно, мы не знаем какой из вариантов ответа Вы выберете) это бы Вас успокоило?
              • –1
                Это более безопасно, так как делает сложнее корреляционный анализ при большом количестве запросов, однако чем меньше вариантов, тем больше шансов, что информация всё равно остаётся доступной.
                Но гарантий нет всё равно, увольте.
        • +1
          Скрипт в платной версии за 2800 руб в год находится на амазоновских серверах с балансировкой (используются 2 инстанса с балансировщиком). Вы уверены, что у вас будет более надежно?

          Плюс к тому мы все время обновляем версии КЛАДР, базы МосГорБТИ и прочие адресные и именные справочники, вы уверены, что хотите делать это самостоятельно?
          • 0
            Ни в чем нельзя быть уверенным на 100%.
            Гугл ридером многие пользовались и никто не ожидал что он накернится, но это случилось.
            Так хотя бы я уверен что эта часть будет работать гарантировано, пока я ее поддерживаю.

            А автоматизировать обновление кладра при желании, не такая сложная задача.
            • 0
              А что, так тяжело отключить наш скрипт разбора, если что-то накроется или не понравится? Самое страшное, что может случиться — вернетесь к вашей текущей форме, нет?
              • 0
                Это не сложно, если использовать Ваш скрипт на одном или двух сайтах.
                А если сайтов 10 и больше? Вы представляете сколько это работы?
                • 0
                  Ну если это такой масштаб, то вы можете использовать наш промышленный вариант установки на территории заказчика, но там совсем другая стоимость сервиса. Если интересно — напишите мне в личку, можно обсудить.
        • 0
          Если такое случится, то возникнет замечательная рыночная ниша, которая моментально будет кем-нибудь заполнена.
    • 0
      Можно держать и у вас, только это будет совсем другие деньги стоить, чем SaaS версия. Кому интересно — пишите мне в личку, обсудим.
  • 0
    Deleted
  • +1
    При сжимании по ширине, одновременно с прыжком в одну колонку, строки «Ф» / «И» / «О» превращаются в двухстрочные, хотя это еще даалеко не требуется — ширина бОльше, чем было до перехода из двухколоночного в одноколоночный.
    • 0
      Спасибо за замечание!
    • 0
      Спасибо, теперь однострочные превращаются в двухстрочные только при ширине менее 768 пикселей.
      • 0
        почему? когда двухколоночный, то в одну строку на ширине 460 пикселей влезают.
        а как становится одной колонкой — в две строки уже на 768. бред какой-то
        • –1
          Это стандартное поведение сетки бутстрапа, в меру моего понимания.
  • +1
    Не понял зачем поле Город, если кроме Москвы там ничего нет. А еще плохо, что нужно выбирать из списка ФИО, даже если все сам ввел
    • +1
      Не понял зачем поле Город, если кроме Москвы там ничего нет.

      Просто для наглядности :-)

      А еще плохо, что нужно выбирать из списка ФИО, даже если все сам ввел

      Да, вы правы, это неудобно. Поправим в ближайшее время.
      • –1
        Пара общих рекомендаций:
        1. Лучший интерфейс — его отсутствие. Не хватает одной очень важной кнопки: определить адрес автоматически через геолокацию. Еще лучше делать это без кнопки автоматически (ибо лучший интерфейс — …).
        2. Уважайте пользователя: поясняйте, для чего нужно заполнить каждое из поле. В процессе формулирования объяснений, возможно, поймете, что половина полей или не обязательны, или вовсе не нужны. Заодно повысится шанс, что человек заполнит «обязательные» поля реальными данными, а не белибердой.
    • +1
      Как это кроме Москвы ничего нет? Есть Зеленоград, Троицк и куча им подобных.
      • 0
        Ага, и зеленоградские адреса в формате корпус-квартира без улицы не понятно как ввести. Например, Зеленоград, корпус 1210, кв.77 — это полный адрес, который в большинстве сервисов не ввести без проблем и этот сервис — не исключение.
        • 0
          Квартиру в строку действительно не ввести, мы пока не предоставляем подсказки по квартире и на форме сделали для неё отдельное поле, однако с остальной частью Вашего адреса подсказки справляются без проблем:
          • +1
            да, но я, как русский человек не ввожу «к1210», а пишу «корп. 1210» или «к. 1210» или вообще «корпус 1210». Все эти варианты не проходят.
            И кстати, даже Зеленоград, 1210 не находится.
            • 0
              Да, про «корпус», «к.» и «корп.» хорошая идея, мы подумаем как лучше сделать и исправим:)
            • 0
              Это самая настоящая бага, поправим.
              • 0
                Спасибо! Зеленоград — вообще одна большая бага в плане адресов. Мне однажды даже в визе из-за адреса отказали, неправильный, мол.
              • 0
                Кстати, в идеале — я ввожу именно Зеленоград 1210, а система сама уж разбирается, как ей писать слово «корпус», потому чо по запросу, например, «Тверская 5» мне выдало кучу вариантов, включая «дом 5/6» и «строение 5», что очень удобно.
                • 0
                  Конечно, это и есть ожидаемое поведение :-)
                • 0
                  Поправили!
  • 0
    Начинание хорошее. Вот косяки беглым тестом: http://joxi.ru/ZjwLUxjKTJAURxMAjZE
    • 0
      Простите, я не понял, в чем косяки. В том, что вы можете исправить ФИО и адрес по своему усмотрению?
      • 0
        А разве это не косяк? Какие данные необходимо воспринимать как правильные? Я Пушкин или Ковалёв?

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

          Мы не стали запрещать отправку формы с некорректным телефоном, потому что в исходной форме это поле не валидировалось. Поэтому просто сигнализируем человеку, что он ошибся при вводе.
          • 0
            Так пользователь ввел обе фамилии и Ковалев и Пушкин. Какую из них считать правильной?
            • 0
              Ту, которая введена в гранулярном поле «Фамилия». Можно еще при правке в гранулярном поле просто очищать общее.
              • +2
                Можно еще при правке в гранулярном поле просто очищать общее.

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

                Кстати, протестил на паре соседей — оба не догадались, что при неудачном автоматическом разборе можно поправить данные в гранулярных полях вручную. Наверное, стоит оформить это более очевидным образом.
                • 0
                  Да, это отличная мысль! Добавим.
                • 0
                  Поправили :-)
          • +2
            Поэтому просто сигнализируем человеку, что он ошибся при вводе.

            Возможно, тогда так и надо написать, что-то типа «Мы не можем разобрать номер телефона, проверьте, пожалуйста, ещё раз. Но если хотите, то можете отправить форму и так».
  • +1
    Форма получается дружелюбнее, как минимум внешне. Но скрипт за меня отдельные поля заполнять не стал:
    — из ФИО вниз перекочевало только имя
    — из адреса вообще ничего не перекочевало — улица подсказывается правильно (если вводить без ул./б-р/etc в начале, о чём не каждый знает), но дом скрипт не находит
    • 0
      Вы не могли бы привести пример?
  • 0
    ну я в свободной форме ввел Андрей Владимирович Ульдин (свои данные), получил… Владимирович Андрей [ ]
    • 0
      На форме подсказки по ФИО даются в том же порядке, в котором Вы вводите данные, но разбираются они правильно. Мы посчитали, что если Вам больше нравится писать сначала отчество, потом имя, то и подсказки должны быть в таком же порядке:)
  • 0
    Ввожу «Красноярск мира 36». Ни одного совпадения.
    • +2
      Да
      (шёпотом) потому что на примере формы только Москва, мы об этом писали выше:)
      • 0
        Это не так. Например, в форме выводится подсказка для: г. Горячий Ключ Краснодарского края.
        • +1
          Сколько ни работаю с КЛАДР, а всё не перестаю удивляться новым забавным случаям. Действительно, там есть такая улица: «край Краснодарский, г Горячий Ключ, дор Автодорога Москва-Новороссийск», поэтому она попала в подсказки. Мы обязательно вскоре исправим метод фильтрации по региону, пока же оставим как есть, так как при вводе московского адреса вероятность встретить такую строку очень мала. Это надо целенаправленно заходить в интернет-приёмную правительства Москвы и вводить Красноярск…
  • 0
    Не могу ввести фамилию «Углив» — при нажатии пробела подставляет «Угливец»
    • –3
      да и в адресе сплошные глюки
    • 0
      Угливец — это подсказка. Просто продолжайте набирать дальше после Углив (например, Углив Александр)
  • 0
    Интересно было бы услышать мнение людей, которые сталкивались с проблемой обработки адресов по всей России (привет, КЛАДР:)). Уверен, что тут такие есть. Насколько удобно пользоваться сервисом в таком виде, в котором он есть сейчас? Что хотелось бы видеть?
  • –1
    сорри за оффтоп, но что-то формы вначале очень похожы на пиццерию Папу Джонс :))
    • 0
      «Все события и персонажи вымышлены. Любое совпадение с реальностью является случайным» :)
  • +3
    В целом форма очень понравилась, разобрался с ней сразу же. Удивительно, но мои имя с отчеством были угаданы формой по первым буквам :)

    Но если в вашей тестовой форме нажать «назад» в браузере — а потом «вперед» — то фамилия улетает в поле ФИО, имя — в фамилию, отчество — в имя, индекс — в отчество, регион — в адрес, улица становится регионом…

    И еще пожелание. Должен быть простой способ выключить все подсказки и заполнить все вручную. Самые последние баги будут еще год отлавливаться — а если из-за мелкого бага в системе подсказок не получится написать обращение к правительству родного города — получится очень некрасиво.
    • 0
      Спасибо :-)

      Но если в вашей тестовой форме нажать «назад» в браузере…

      Скажите, пожалуйста, у вас Хром?

      Должен быть простой способ выключить все подсказки и заполнить все вручную.

      Так и сейчас нет никаких ограничений — все поля можно заполнить вручную.
      • 0
        Да, у меня Хром, свежая версия. Кстати, «производные» поля не редактируются вручную, совсем.
    • 0
      Павел, спасибо большое за комментарий! В дополнение хочу сказать, что основные баги этой формы, мы, конечно, исправим, но некоторые мелкие оставим как есть. Цель статьи — показать, как за несколько шагов можно упростить даже самую сложную форму с клиентскими данными, чтобы пользователи хотели к вам возвращаться и рекомендовали друзьям (удобные сервисы рекомендуют всегда). Форма приёма заявлений от граждан была выбрана лишь в качестве примера и мы не имеем отношения к её разработке.
      На самом деле, большинство тех, кто сталкивался с задачей формирования подсказок адресов по России, или валидацией адресов, понимают, насколько это сложная и далеко не всегда решаемая проблема. Нам удалось накопить достаточно большой опыт в этой сфере и мы хотим поделиться результатами со всеми. И я очень надеюсь, что формы, подобные той, которую мы сделали, можно будет встретить практически на любом сайте.
  • 0
    Статья интересна для тех, кому нужно готовое. Написали бы еще обзорную статью по нормализации данных.
    • 0
      А какие вопросы вам бы хотелось увидеть в этой статье? Мы только за :)
      • 0
        Например, как бьется введенная произвольная строка с пользовательскими данными — словари, паттерны, алгоритмы. Как ищутся дубликаты в уже существующих пользовательских данных — приемы DataQuality, нечеткий поиск, расстояния. Про свой ФАКТОР расскажите, что инновационного в нем придумали, какие существующие решения/библиотеки были использованы.

        Не так много есть информации на русском по качеству данных, а поле применения широкое.
  • +3
    У моего товарища ФИО имеет вид «Сидоров Сидоров Петр». Т.е. фамилия из двух слов через пробел и нет отчества. Я думаю он уже проклял всех оптимизаторов на свете которые делают поле ФИО и бъют потом его на три части.

    То что в случае если ФИО не распарсилось можно что-то писать в поля «фамилия и имя» это попытка оправдать плохую реализацию. Т.е. «если не распарсилось, то вы сами можете вписать, правда не очевидно что туда вообще можно писать, не понять что же в итоге отправиться в случае если в ФИО написано Иван Иванов, а в полях фамилия и имя Петр Петров, но можно же!»

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

      У нас на форме нет такого поля :-)

      пользователь должен иметь возможность разбить их так, как надо, не полагаясь на умную ЭВМ.

      Вот ровно так и сделано.
      • –2
        Поля «Фамилия» и «Имя». Не поставил две ковычки. Вот скриншот:


        Если «Фамилия», «Имя» и «Отчество» это поля для ввода, то они должны соответственно выглядеть. А сейчас это какое-то «задизайнивание» формы ради самого процесса.
    • 0
      По поводу адреса одной строкой — полностью согласен, дробить нужно не всегда. Но валидация нужна и подсказки помогают упростить ввод. Вот придёт Вам адрес «Москва Пушкинская 5», и что такое Пушкинская: улица, набережная или площадь? С подсказками такого вопроса не может возникнуть
      • 0
        Да также может, если человек выберет не то. Наберет пушкинская и нажмет ок, а подставится площадь вместо улицы.

        В случае если это произойдет есть два варианта развития событий:
        1) менеджер возьмет супер умную утилиту, которая определит что «Москва Пушкинская 5» это скорее всего площадь (по крайней мере ваша подсказка улицу не предлагает, наверное на ней нет пятого дома)
        2) менеджер поднимет телефон и позвонит пользователю: «Здравствуйте, магазин Рога и Копыта, кило рогов заказывали? Завтра в три удобно? Кстати у вас улица или площадь? Ждите курьера, удачного дня!»

        И да, люди которые живут на улицах\площадях с такими названиями, обычно знают о возможных разночтениях и просто введут правильно.
        • 0
          Боюсь, всё может быть намного печальнее: даже если есть менеджер, который подтверждает заказ по телефону, он может быть не в курсе, что есть и улица, и площадь, далее курьер вобьёт в яндекс карты «Москва Пушкинская 5» и Вы можете сами посмотреть куда он поедет к указанному времени:)
          Мне кажется, что валидация не помешает никогда, тем более что она правильная, даже если есть менеджер, который делает контрольный звонок. Кстати, в перспективе мы планируем добавить GPS координаты, которые позволят быстрее сегментировать заказы на обработку и подготавливать маршруты для курьеров:)
    • 0
      Хочу уточнить по поводу Вашего друга: у него прямо в российском паспорте записано Сидоров Сидоров через пробел? Мне казалось, что у нас двойные фамилии всегда пишутся через дефис…
      • +2
        Да в паспорте. Не обязательно.
      • +1
        У корейца видел в паспорте фамилию типа «Ир Ким».
      • +1
        Люблю проверять подобные парсеры и даже простые валидаторы каждого поля своим адресом. Вполне может быть дом с номером типа 19-21 (именно через дефис, пускай даже через минус обычный, а не юникод-символы 0x2010 и 0х2011 :) — ваши подсказки не разобрались, хотя в принципе нашёл, но через подчеркивание почему-то. А так «Вы ввели неизвестный нам адрес». Не понимает обычный для многих формат "<улица>, <дом>, <кв>" не говоря о "<улица> <дом>-<кв>". это так, типа фидбэка.
        • 0
          О, Ваш адрес — один из моих любимых тест кейсов! По поводу дефиса Вы правы, мы используем нижнее подчёркивание, но лишь потому, что так адрес заведён в КЛАДР. Вот и возникает вопрос как правильно — с дефисом, что логичнее с точки зрения здравого смысле, или же как в справочнике? Наверное, Вы правы, и стоит использовать дефис.
          По поводу формата — спасибо большое за идею, мы подумаем как добавить поиск с запятыми и тире.
          • 0
            Вероятно стоит применять не строгое сравнение, а из записей КЛАДР формировать регулярные выражения или что-то вроде этого. Или приводить их к своей нормализованной форме, которая однозначно сочетается с КЛАДР, но при этом и выглядит по человечески. Вообще, конечно, задача сложная, даже естественный интеллект с ней не всегда справляется в виду того, что ему «противостоит» (или без кавычек? :) другой естественный интеллект.
          • 0
            Правильный формат — тот, который требует наименьших усилий от пользователя и позволяет вводить данные не задумываясь. В идеале — система должна понимать основные варианты написания: в случае с адресом это, например, приведенные выше 2 варианта.
      • +1
        Интересно, где должны быть дефисы в имени «Самед Ага Гасан Ага оглы Алиев» — реальный политический деятель в СССР. :)
        • 0
          Да, я был не совсем прав — в гражданском кодексе про дефис написано в статье «Порядок записи фамилий супругов при государственной регистрации заключения брака», если фамилия с пробелами исторически, то ничего не меняется. В любом случае, надо понимать, что мы делаем подсказки, то есть упрощаем ввод, но не запрещаем ввод собственных значений. Если человек знает, что у него сложная фамилия, то он просто вбивает её как есть игнорируя подсказки. Конечная реализация всегда остаётся за Вами:)
  • 0
    (ошибся веткой)
  • +2
    Очень прикольная штука, молодцы!
  • +1

    небольшой фидбек: добавьте стиль :hover для строк с серым фоном (надо потемнее на сделать), сейчас они не выделяются, сбивает с толку если наводить или на клаве стрелочками перемещаться
  • –1
    Индекс нужно проставлять автоматически, если хватает корректных данных об улице / доме.
    • +1
      Мы так и делаем
      • +2
        Гуд, не заметил этого, когда вводил «адрес в свободной форме». Соседнее поле «номер дома» осталось незаполненным и процесс автопроставления индекса не запустился :) Вообще, по личным ощущениям, необходимость вспомнить проклятый индекс — самая раздражающая вещь при заполнении адресных форм.
  • +1
    Зеленоградский адрес без улицы не распознаётся, проблема настолько распространенная, что уже привыкла в строке «Улица» писать Зеленоград, а «город» — Москва. А когда «умный» автоподстановщик попадается — пиши пропало, мой адрес не ввести. Для примера попробуйте Зеленоград, корпус 1210, кв. 78. Улицы у нас нет, а дома зовутся корпусами (кстати, большинство сервисов также не даст ввести номер корпуса и не ввести номер дома, вы хитро вышли из положения, объединив эти поля).

    Крик души:
    Дорогие разработчики интерфейсов — услышьте мои мольбы — поле «Улица» в адресе — не должно быть обязательным!
    • 0
      Повторю то, что написал выше про Зеленоград: подсказки работают до дома и с Вашим адресом справляются в штатном режиме


      Для номера квартиры на форме есть отдельное поле. По поводу обязательности улицы полностью Вас поддерживаю, не нужно делать улицу обязательной, именно из-за таких адресов, как Ваш, на приведённой в примере форме мы не делали это поле обязательным
    • 0
      Возможно, имеет смысл в подсказках обрабатывать «корпус» как «к», спасибо за идею
  • 0
    Могут ли быть «Подсказки» для Беларуси?
    • 0
      Пока, к сожалению, нет. В дальнейшем — возможно.
    • +1
      На самом деле могут, если мы найдем хороший белорусский справочник, пусть даже платный, но с периодическими обновлениями, для адресов. Пока такие справочники нам удалось собрать только для Украины (закупаем у местных провайдеров) и Казахстана.
  • –2
    Запутано сильно. Метод со свободной формой плох.
    0. Сложно. Для далеких от компа людей.
    1. Лишнее поле.
    2. Дублирование данных.
    3. У пользователя появляется дилемма

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

    Адрес можно сократить до двух полей. Город и Адрес. По дефолту, город определяется автоматически по ip и идет до адреса. ФИО тоже одно поле. Регион нафиг не нужен. Индекс никто не помнит, а если помнят то не вводят.

    У вас 14 полей. Вариант без танцев с бубнами это 2 поля на адрес и по одному на фио, тел, мыло и сообщение. Т.е. всего 6 полей.
    • +1
      Мы специально оставили гранулярные поля видимыми, чтобы продемонстрировать их автоматическое заполнение из подсказок.

      Конечно, можно убрать их с формы, получится компактная форма. Подсказки при этом работают, и если пользователь ввел ФИО/адрес из подсказки, то гранулярные значения будут доступны. Ну а если ввел «неизвестное» значение, то на сервер просто уйдет ФИО/адрес одной строкой.

      Регион в данном примере строго Москва, поэтому от геолокации имхо толку мало. Но в общем случае, наверно, лучше с ней.
      • 0
        Компактный вариант клевый.

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

        З.Ы. Ввел тел +38 063 111 22 33. Поле просветилось красным, но причину ошибки не выдало. Лучше ее вывести в поповере.

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

Самое читаемое Разработка