24 February 2014

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

HFLabs corporate blogWebsite development


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

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

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



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

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



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



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



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

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

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



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

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

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



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

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



Пример кода: подключаем подсказки по адресу к текстовому полю
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.3.0/dist/css/suggestions.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@20.3.0/dist/js/jquery.suggestions.min.js"></script>

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

$("#address").suggestions({
    type: "ADDRESS",
    token: TOKEN
});


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



Пример кода: нестандартное форматирование списка подсказок
$("#address").suggestions({
    type: "ADDRESS",
    token: TOKEN,
    formatResult: formatResult
});

/**
 * Форматирование элемента списка подсказок в две строки.
 * При отрисовке списка подсказок вызывается для каждого элемента списка.
 * @param value        Текст подсказки
 * @param currentValue Введенный пользователем текст
 * @param suggestion   Объект подсказки
 * @returns {string} HTML для элемента списка подсказок
 */
function formatResult (value, currentValue, suggestion, options) {
    suggestion.value = suggestion.value.replace("Россия, ", "");
    var address = suggestion.data;
    var city =
        (address.city !== address.region && join([address.city_type, address.city], " ")) ||
        "";
    // первая строка - регион, район, город
    var part1 = join([address.region, join([address.area_type, address.area], " "), city]);
    // вторая строка - населенный пункт, улица, дом, квартира
    var part2 = join([
        join([address.settlement_type, address.settlement], " "),
        join([address.street_type, address.street], " "),
        join([address.house_type, address.house], " "),
        join([address.block_type, address.block], " "),
        join([address.flat_type, address.flat], " "),
    ]);
    // подсветка введенного пользователем текста
    part1 = $.Suggestions.prototype.highlightMatches.call(
        this,
        part1,
        currentValue,
        suggestion,
        options
    );
    part2 = $.Suggestions.prototype.highlightMatches.call(
        this,
        part2,
        currentValue,
        suggestion,
        options
    );
    var suggestedValue = part2
        ? part2 + '<br><span class="suggestions-suggestion-region">' + part1 + "</span>"
        : part1;
    return suggestedValue;
}


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



Пример кода: ограничиваем поиск конкретным регионом России
$("#address").suggestions({
    type: "ADDRESS",
    token: TOKEN,
    constraints: {
        locations: {
            // КЛАДР-код Москвы
            kladr_id: "7700000000000",
        },
    },
});


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



Пример кода: ограничиваем количество подсказок
$("#address").suggestions({
    type: "ADDRESS",
    token: TOKEN,
    count: 7
});


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



Пример кода: автоматически заполняем адрес из выбранной подсказки
$("#address").suggestions({
    type: "ADDRESS",
    token: TOKEN,
    onSelect: showSelected
});

/**
 * Заполняет поля формы гранулярными полями адреса из выбранной подсказки
 * @param suggestion Выбранная подсказка
 */
function showSelected (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], " ")
    );
}


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



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



Вживую можно посмотреть на демостраницах:


Исходники на гитхабе

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

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

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

via AlexGechis
Tags:подсказки при вводеавтодополнение адресавалидация формкачество данныхdadata
Hubs: HFLabs corporate blog Website development
+49
41.8k 288
Comments 108
Top of the last 24 hours