Карта пунктов выдачи, на которой удобно выбирать
Что показать в карточке, как связать карту со списком и почему мобильному экрану нужен особый подход.
Покупатель выбирает пункт выдачи. Ему нужно понять, где он расположен, открыт ли после работы и подходит ли для конкретного заказа. Набор одинаковых меток на карте отвечает только на первый вопрос.
Удобный выбор складывается из трёх частей: понятных данных о пункте, согласованной работы карты и списка, а также явного подтверждения.
Подготовьте данные пунктов
Начните с собственного списка объектов. У каждого пункта должен быть стабильный ID, название, адрес, координаты и часы работы. Возможность оплаты, доступность для маломобильных посетителей и ограничения по посылкам добавляйте, если эти сведения действительно есть у Вас в данных.
Уточните, что обозначает координата: центр здания или вход для посетителей. Если вход расположен со двора, короткий ориентир и фотография могут оказаться полезнее дополнительного масштаба карты.
Геокодирование помогает получить координаты по адресу, но не создаёт актуальный справочник Ваших пунктов выдачи. Расписание, доступность и условия обслуживания должны приходить из системы, которая ими управляет.
Свяжите карту со списком
Один выбор должен одинаково отражаться в обоих представлениях. Нажатие на метку выделяет пункт в списке. Выбор строки приближает карту к тому же объекту и открывает его карточку.
Пункты выдачи
Фильтры тоже должны работать согласованно. Если покупатель выбрал «Открыто после 20:00», неподходящие пункты исчезают и со списка, и с карты. Иначе человек открывает метку и получает противоречащую фильтру информацию.
Когда пунктов много, объединяйте соседние метки в кластеры. Число в кластере показывает количество объектов; нажатие помогает рассмотреть их ближе. Для небольшого числа пунктов достаточно отдельных маркеров. Пример кластеров на главной.
Не меняйте выбор только потому, что человек передвинул карту. Перемещение помогает изучить район, а кнопка «Выбрать этот пункт» подтверждает решение. В заказ сохраняйте ID пункта, чтобы похожие названия и адреса не создавали неоднозначности.
Продумайте выбор на телефоне
На небольшом экране карта, длинный список и полная карточка одновременно занимают почти всё место. Дайте переключиться между картой и списком с сохранением фильтров и выбранного пункта.
В короткой карточке достаточно названия, адреса, графика и действия выбора. Подробности про вход и дополнительные услуги можно раскрыть. Кнопку подтверждения размещайте так, чтобы экранная клавиатура и панель браузера не перекрывали её.
- Покажите список и при сбое загрузки карты. Адрес и график должны оставаться доступны.
- Обозначайте выбор подписью или значком, а не только цветом.
- Оставьте возможность найти пункт без разрешения на геолокацию.
- После возвращения к оформлению заказа показывайте название выбранного пункта и действие «Изменить».
Подключайте возможности поэтапно
Для первой версии достаточно карты, Ваших объектов, карточки и списка. Бесплатная подложка и JavaScript SDK Ммаппс работают без API-ключа. Маркеры, карточки и кластеры описаны в справочнике SDK.
Поиск адресов понадобится, если покупатель хочет найти пункты рядом с введённым местом. Матрица расстояний — если нужно сравнить автомобильный путь. Эти операции подключаются отдельно и расходуют квоту API. Автомобильное время не стоит выдавать за пешую доступность.
Для карты с данными OpenStreetMap сохраняйте предусмотренную SDK атрибуцию. Ссылки на правила использования собраны в разделе о лицензиях карты.
Проверьте весь путь на телефоне: найти район, открыть карточку, выбрать пункт, изменить выбор и вернуться к заказу. Именно эта последовательность покажет, помогает ли карта завершить задачу.
Вернуться ко всем статьям
