Реализация карты для туристического сайта
Будучи разработчиком и опытным пользователем Goibibo, мы всегда стремимся развивать функции nextGen для сайта. Особенности, которые облегчают пользователю задачу создания наилучшего маршрута для своих планов путешествий.
идея
Однажды, при поиске подходящего отеля на сайте, я заметил, что копирую адрес отеля с сайта и вставляю его на карту Google, чтобы получить расстояние от него до известных/туристических мест. Поскольку я знал код сайта, я написал быстрый скрипт, который начал сообщать мне расстояние от нескольких фиксированных мест от каждого отеля, который я посещаю на сайте, в консоли разработчика.
Это заставило меня задуматься, сколько людей сталкиваются с этой проблемой? Я спросил нескольких, и в конце концов все они так и делают, когда ищут гостиницу в городе. Будь то для деловых целей или для отдыха, в основном все гуглили адрес.
Улучшение карты
Теперь, когда проблема была известна, мы приступили к решению. На сайте уже была реализована карта, на которой было нанесено расположение отеля. Благодаря использованию Google Map Autocomplete и Google Map Distance Matrix API карта была готова облегчить жизнь пользователя.
Благодаря правильному сочетанию интеграции и пользовательского интерфейса карта была готова. Не хватало только «Той искры». Тот шарм, который заставляет продукт стоять далеко впереди других. Поскольку используемые инструменты были общедоступны, это было легко создать. И, как говорится, «Великие дела никогда не приходят из зоны комфорта». Поэтому мы стали больше копать.
Устранение нежелательного
Первое, что мы схватили, это уровень масштабирования. Мы сделали зум-настройщик. Карта автоматически настраивается на такой уровень масштабирования, при котором все места, которые вы искали, находятся в поле зрения. Это облегчает пользователю настройку уровня масштабирования каждый раз при поиске.
Поскольку Matrix API возвращает всю информацию о маршруте и карту маршрута (пошаговыми словами), мы подумали, что эта информация не будет полезной для пользователя. Отображение только оценки времени и расстояния будет работать. Наведите указатель мыши, чтобы подсветить маркер, легко щелкните, чтобы закрыть вкладки и т. д. Было сделано несколько улучшений, чтобы завершить продукт.
Исследование поведения пользователей
Продукт был интегрирован с сайтом и запущен. Реакция была потрясающей. Около 10% людей использовали эту функцию. Цифры росли день ото дня, и команда перешла к следующей задаче.
Через несколько дней мы заметили, что пользователи несколько раз искали одно и то же место. Мы были удивлены и не могли придумать, почему! Прошло несколько часов, и мы поняли, что при поиске отеля пользователи будут искать туристические места на карте каждого отеля, заходя в каждый отель, который они выбрали. Что дальше;
Мы проанализировали ситуацию и сразу предложили решение. Локальное хранилище. Как только пользователь ищет место на карте, мы сохраняем его в локальном хранилище. Данные хранятся по городам, что означает, что все места, найденные на карте отеля в городе «X», будут автоматически показаны на всех картах отелей в городе «X». Следовательно, пользователю достаточно выполнить поиск один раз, и он сможет увидеть расстояние до этих мест от любого отеля на соответствующей странице продукта.
Что дальше
Эти кусочки дополняли продукт и широко использовались пользователями. Хотя все еще есть большое количество пользователей, которые выполняют поиск по одному и тому же месту несколько раз. Оказалось, что они открывают несколько страниц продукта со страницы списка продуктов, поэтому синхронизация с локальным хранилищем не может работать.
Далее мы реализуем синхронизацию между вкладками, прослушивая события localstorage. Это принесет пользу и во многих других отношениях, например, при синхронизации дат/конфигураций комнат между открытыми вкладками. Более того, мы отформатировали наши данные таким образом, чтобы знать, что люди ищут в какой области. Скажем, если у нас будет больше поисков ТАДЖ-МАХАЛ (место) из определенного района в агре (город), мы предоставим это в качестве предварительно заполненных данных на карте для этого района/города.
Это упражнение научило нас тому, как формировать технологию и ресурсы в соответствии с поведением пользователя.
Нажмите, чтобы увидеть продукт в действии: goo.gl/71Bpdz (открыть как страницу для рабочего стола)
Первоначально опубликовано на goibibo.github.io 14 июля 2015 г.
