Как мы сделали интерактивную карту, которая строит маршрут голосом

Задача

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

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

• • куда именно ехать;
• • какой объект ему нужен;
• • как добраться;
• • откуда строить маршрут;
• • что делать, если адрес неудобно вводить вручную.

Для Helby мы решили превратить обычный блок «Контакты» в полноценный интерактивный навигационный инструмент.

Не просто «мы находимся здесь»

На странице контактов компании расположено несколько важных объектов:

• • главный офис в Дзержинске;
• • склад в Дзержинске;
• • склад в Долгопрудном.

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

А если маршрут можно задать голосом?

Представьте ситуацию. Вы открыли сайт с телефона и хотите приехать на склад. Вам нужно ввести длинный адрес:

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

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

На странице реализован голосовой ввод для маршрутов до складов в Дзержинске и Долгопрудном. Интерфейс показывает состояние «Говорите сейчас!» и позволяет затем запустить построение маршрута.

Как работает сценарий

Вместо длинной формы с ручным вводом адреса пользователь проходит несколько понятных шагов.

Выберите склад

На карте можно выбрать склад в Дзержинске или склад в Долгопрудном. Также пользователь может выбрать объект непосредственно через карточки с адресами.

Нажмите на микрофон

После нажатия кнопки система сообщает пользователю: «Говорите сейчас!»

Назовите свой адрес

Пользователь просто произносит адрес, откуда ему необходимо построить маршрут. Например: «Нижний Новгород, проспект Гагарина, 25».

Постройте маршрут

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

Один результат — три способа взаимодействия

Мы не заставляем пользователя работать с картой только одним способом.

Я знаю, куда хочу

Выбираю нужный объект на карте или через карточку с адресом.

Я хочу ехать отсюда

Использую текущее местоположение и строю маршрут до выбранного склада.

Я хочу назвать адрес

Нажимаю кнопку микрофона и произношу адрес голосом.

Почему мы добавили голос

Хороший интерфейс — это не добавление максимального количества функций. Это сокращение количества действий, которые человеку необходимо совершить.

Обычный сценарий

• найти адрес;
• скопировать его;
• открыть карты;
• вставить адрес;
• выбрать нужный объект;
• построить маршрут.

Новый сценарий

• выбрать склад;
• сказать адрес;
• построить маршрут.

Чем меньше лишних действий между намерением пользователя и результатом, тем понятнее и удобнее интерфейс.

Карта стала интерфейсом

Но голос — только одна часть решения. Мы сделали карту не статичным изображением, а интерфейсом.

На карте одновременно отображаются несколько объектов компании. При выборе карточки нужный объект становится центром карты.

Пользователь может быстро переключаться между:

• • главным офисом;
• • складом в Дзержинске;
• • складом в Долгопрудном.

Карта использует Яндекс.Карты. На странице доступны стандартные элементы навигации и геолокации.

Главная задача была не в том, чтобы «сделать красиво»

Можно было просто разместить Яндекс.Карты, добавить три маркера и показать адреса. Технически задача была бы решена.

Но пользовательский сценарий остался бы практически тем же: «Вот карта. Дальше разбирайтесь сами».

Мы пошли от другой логики. Что хочет пользователь? Не карту. Он хочет попасть на нужный склад. Это важное различие.

Почему это особенно полезно для B2B

Для интернет-магазина можно просто показать: «Наш офис находится здесь». Но у компании со складами задача другая.

• • клиенты;
• • партнёры;
• • перевозчики;
• • водители;
• • сотрудники;
• • поставщики.

И для них адрес — это не просто справочная информация. Это часть операционного процесса.

Если человеку нужно приехать на склад, ему нужен не только красивый контактный блок. Ему нужен понятный путь: откуда ехать, куда ехать и как добраться.

Голос не ради технологии

Голосовые интерфейсы часто добавляют на сайт ради эффекта: «Смотрите, у нас есть голосовой поиск». Это не всегда оправданно.

В нашем случае голос решает конкретную проблему: адрес неудобно вводить вручную, особенно на мобильном устройстве.

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

Что получилось в итоге

Мы взяли стандартный раздел «Контакты» и превратили его в интерактивный навигационный сервис.

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

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

Технология должна исчезать за интерфейсом

Мы могли бы подробно рассказать о JavaScript, API карт, геолокации, распознавании речи, обработке адреса, построении маршрутов и интерактивных маркерах.

Но для конечного пользователя всё это не имеет значения. Он видит только понятный сценарий:

В этом и заключается хороший digital-продукт: сложная технология работает внутри, а снаружи остаётся простой и понятный интерфейс.

От карты к навигационному интерфейсу

Интерактивная карта для Helby — это небольшой, но показательный пример нашего подхода к разработке.

Мы не начинаем с вопроса: «Какую технологию добавить на сайт?»

Мы начинаем с другого: «Какое действие должен совершить пользователь и что сейчас мешает ему сделать это максимально быстро?»

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

STOMP — разработка цифровых решений и интерактивных интерфейсов