ОФОРМЛЕНИЕ ЗАКАЗА: ВЫБОР АДРЕСА И ВРЕМЕНИ ДОСТАВКИ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
162
ГАЙДЛАЙНА
Оформление заказа – один из последних шагов на пути клиента к покупке, и лучше не ставить ему палки в колеса. Как сделать выбор адреса доставки, пункта выдачи заказов, даты и времени максимально удобным? Разберем в этой статье. Как всегда, детально и с примерами.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
22 детальных чек-листа по eCommerce доступны в моем Telegram.

1. ОБЩИЕ ТРЕБОВАНИЯ К КАРТЕ

Перед тем как погрузиться в процессы выбора пункта самовывоза и адреса курьерской доставки, пройдемся по общим моментам, связанным с использованием функционала карт.

Выбор на карте доступен

Как в случае с курьерской доставкой, так и с ПВЗ реализуйте возможность выбора точки на карте: для значительной части клиентов она более удобна, чем текстовый ввод.
hardclient

Качество карты

Лучше использовать качественные сервисы – Яндекс или 2ГИС. Но встречаются случаи, когда даже Яндекс умудряются настроить так, что карта пикселит:
hardclient

Размер карты

Карта не должна быть слишком маленькой, иначе работа с ней будет затруднена – особенно если точек на карте достаточно много.
hardclient

Масштаб кнопками

Базовый момент: дайте клиенту возможность приближения и удаления карты с помощью стандартных кнопок плюса и минуса.
hardclient

Масштаб жестами

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

Масштаб нажатием на пины

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

Масштаб по умолчанию

Сделайте масштаб по умолчанию таким, чтобы клиент видел все точки города и мог приблизить карту в нужную его часть.
hardclient

Масштаб не слишком широкий

При этом масштаб не должен быть слишком широким. Чем меньше ненужного зума клиенту приходится делать, тем лучше.
hardclient

Без задержек в реакции карты

Задержки при перемещении по карте и изменении ее масштаба не вызовут у клиента ничего, кроме раздражения.

Без лишних маркировок

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

Без просмотра карточек

Когда клиент выбирает адрес доставки или ПВЗ, не совсем понятно, зачем давать ему просматривать карточки других заведений из Яндекса при клике по их пинам на карте.
hardclient

Геолокация доступна

Определение местоположения позволит клиенту сэкономить время на ручном вводе своего адреса и упростит процесс оформления заказа.
hardclient

Запрос геолокации своевременный

Не стоит запрашивать у клиента местоположение сразу при переходе к оформлению заказа. Сделайте это в нужный момент – когда он перейдет к выбору адреса.
hardclient

Пояснение к запросу геолокации

Добавьте перед системным запросом пояснение о том, для чего сайту требуется доступ к геолокации. Это улучшит понимание и повысит шансы на то, что доступ предоставят.
hardclient

Определение локации корректно

Если клиент дает согласие на определение своего местоположения, он ожидает, что его адрес будет определен без ошибок, и вводить его заново не потребуется.

Страна и город по IP

Даже если клиент не давал разрешения на определение местоположения, страну и город можно автоматически определить по его IP-адресу (сэкономив ему время).
hardclient

Центрирование по запросу

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

Обработка запрета на геолокацию

Если определение локации отключено, поясните это клиенту и опишите, как можно восстановить доступ для вашего сайта.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

2. ВЫБОР ПУНКТА САМОВЫВОЗА

Сеть пунктов широкая

Сеть пунктов выдачи должна быть достаточно широкой, чтобы клиенту удобно было добраться до ПВЗ из любой точки города.
hardclient

Карта + поиск по списку

Кому-то удобнее искать сразу по карте, кому-то – ввести название улицы/района/метро и выбрать точку из списка. Предусмотрите поиск обоими способами.
hardclient

Список vs. адреса на карте

Приведите список адресов и пины на карте в соответствие, чтобы облегчить клиенту навигацию: 2 пина на карте – соответственно, 2 карточки ПВЗ в списке.
hardclient

Сортировка по удаленности

Если доступна геолокация, пункты выдачи заказов в списке можно сортировать по удаленности от местоположения клиента.
hardclient

Без сортировки по стоимости

Сортировка ПВЗ по стоимости доставки очень непривычна и может вызвать у клиента вопросы. Особенно если по всем пунктам в списке доставка бесплатная.
hardclient

Сортировка понятна

Если вы располагаете ПВЗ списком, отсортируйте их по какому-либо принципу, не располагайте их спонтанно.
hardclient

Без длинной прокрутки

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

Ближайший доступный ПВЗ

Процесс поиска ПВЗ можно упростить, предоставив клиенту возможность выбора ближайшего к нему пункта выдачи в 1 клик.
hardclient

Доставка, если нет поблизости

Если ближайший доступный ПВЗ не определяется, не стоит оставлять клиента 1-на-1 с этой проблемой – предложите ему доставку в качестве альтернативы.
hardclient

Пункт выдачи выбираем 1 раз

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

Фильтрация пунктов самовывоза

Если ПВЗ отличаются по каким-либо параметрам (например, наличие примерочной), дайте клиенту возможность отфильтровать их при поиске точки для самовывоза.
hardclient

Фильтры работают корректно

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

Все ПВЗ на одной карте

Задача клиента – найти ближайший удобный к нему пункт самовывоза. Поэтому лучше отображать их на одной карте, а не разбивать карты по компаниям-операторам.
hardclient

Пояснение по методу поиска

По чему именно можно искать пункт самовывоза? Метро? Улица? Название торгового центра? Поясните это для клиентов, облегчите им поиск нужного ПВЗ.
hardclient

Текстовый поиск без задержек

При вводе метро/улицы/района список пунктов должен обновляться мгновенно. Уберегите своих клиентов от того, что заснято на примере.

Только доступные пункты

Зачем в принципе давать клиенту возможность просматривать недоступные пункты самовывоза, мне не совсем понятно. А вам?
hardclient

Без неработающей доставки

Если какие-то из пунктов самовывоза не поддерживают доставку, лучше о них просто не писать. Иначе у клиента может сложиться не лучшее впечатление.
hardclient

Группировка пинов

Чтобы не перегрузить интерфейс, пины можно группировать, отображая их в виде одного элемента с числом точек в рамках покрываемой области.
hardclient

Пины хорошо заметны

Пины должны быть контрастными и привлекать к себе внимание. Пины, которые трудно разглядеть на карты – еще одна палка в колеса клиента на пути к покупке.
hardclient

Маркировка пинов

Маркировка пинов сделает их более визуально привлекательными. А если ПВЗ разные, это сделает карту более информативной.
hardclient

Пины в хорошем качестве

Базовый момент: пины должны быть загружены в хорошем качестве (в идеале – в векторе) и не должны пикселить. Вот от такого исполнения лучше воздержаться.
hardclient

Без дополнительных меток

Если рядом с пинами размещать дополнительные метки с текстом, есть риск, что интерфейс перегрузится, а сами метки будет трудно прочитать.
hardclient

Где разместить информацию о ПВЗ?

Подробное описание пункта выдачи лучше выносить в его карточку в списке рядом с картой или в popup при клике по конкретному ПВЗ.
hardclient

Данные по ПВЗ актуальны

Регулярно обновляйте свои и сторонние данные по ПВЗ. Если клиент придет за товаром и поймет, что ПВЗ переехал или закрылся, позитивных эмоций это точно не вызовет.

Точный адрес

Адрес пунктов самовывоза должен быть указан максимально точно – вплоть до этажа и помещения. Не заставляйте клиента искать пункт выдачи на месте.
hardclient

Названия ПВЗ унифицированы

Унифицируйте названия пунктов самовывоза. В противном случае может сложиться впечатление, что за качеством данных плохо следят.
hardclient

Названия ПВЗ осмысленные

Размещайте в названиях пунктов выдачи заказов осмысленный текст. Показывать системные коды или ID пункта на уровне клиента нет смысла.
hardclient

ПВЗ не дублируются

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

Карточки ПВЗ легко различимы

Карточки с адресами пунктов выдачи должны легко восприниматься и не должны «прилипать» друг к другу.
hardclient

Станция и расстояние до метро

Помимо самого адреса в карточку ПВЗ в качестве индикатора можно добавить станцию метро и расстояние от метро до пункта.
hardclient

Как добраться

Информация о том, как лучше добраться, дополняет точный адрес и делает путь к пункту выдачи более удобным.
hardclient

Маршрут до пункта

Если клиент выбирает магазин, в котором товар доступен уже в моменте, функция построения маршрута до пункта выдачи будет релевантной.
hardclient

Вход в здание

Указание входа в здание дополнительно позволяет упростить путь клиента и сократить время на поиск пункта выдачи.
hardclient

Фото пункта выдачи

Кроме того, текстовое описание маршрута до ПВЗ можно снабдить фото дома, в котором он расположен. Это упростит будущий путь до пункта и позволит легче сориентироваться.
hardclient

Фото релевантны

Следите за качеством контента, размещаемого по ПВЗ. Решив посмотреть панораму аптеки Монастырёв, я никак не ожидал, что окажусь в японском ресторане.

Часы работы

Не забудьте указать часы работы ПВЗ. Это позволит лучше управлять ожиданиями и снизит риски того, что клиент приедет не вовремя.
hardclient

Ближайшая доставка

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

Срок хранения

Также позволяет лучше управлять ожиданиями клиента в отношении следующих шагов снижает риски того, что он не успеет получить заказ.
hardclient

Способы оплаты

Также дополнительно можно подсветить, какие способы оплаты поддерживаются в пункте выдачи заказов. Это сделает его страницу более информативной.
hardclient

Особенности ПВЗ

Можно ли оформить возврат? Есть ли примерочная? Можно ли оформить частичный выкуп? На эти другие вопросы можно ответить прямо при выборе адреса.
hardclient

Highlight отсутствия особенностей

В некоторых случаях имеет смысл подсветить отсутствие тех или иных особенностей ПВЗ в явной форме, чтобы клиент по ошибке не предположил, что они там есть.
hardclient

Стоимость видна сразу

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

Highlight дальнейших шагов

Чтобы лучше управлять ожиданиями клиентов и снизить риски того, что клиент пришел, а товара еще нет, в карточке ПВЗ можно дополнительно подсветить следующие шаги.