Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

Прокачиваем Самокат: глава вторая

Как улучшить путь клиента в сервисе экспресс-доставки
Самокат для многих является эталоном как в плане UX, так и клиентского опыта в целом, а общий рейтинг 4.9 из 5.0 при 842 тысячах оценок лишь подтверждает любовь моих друзей и знакомых к этому сервису.

Я решил взглянуть на Самокат чуть более пристально и ответить на вопрос: отточен ли их customer journey во всех деталях или всё же есть, что улучшить? Ответ – в цикле статей. Это – вторая из них (а вот ссылка на первую, если ещё не читали).

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.

Автор hardclient.com
Структура статьи
Как и предыдущий материал, эту статью я разбил по ключевым этапам и элементам интерфейса. Сегодня мы разберем:

Выбор адреса доставки

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

Выбор на карте

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

Интересно, можно было бы выбрать адрес по умолчанию так, чтобы не сталкивать клиента с сообщением о невозможности доставки в самом начале пути?
hardclient
Уточнение адреса до дома
В отличие от текстового ввода, карта позволяет выбрать адрес без уточнения дома, хотя такого, вероятно, быть не должно.
hardclient
Оповещения о запуске доставки
Если доставка по адресу еще недоступна почему бы не предложить клиенту не только выбрать другой адрес, но и подписаться на уведомление о запуске доставки?
hardclient
Ближайшие пункты самовывоза
При запросе доступа к геолокации сервис поясняет, что покажет ближайшие пункты, если клиент его предоставит. Но почему нельзя отображать их по умолчанию – вопрос.
hardclient
Закрытие запроса на доступ к геолокации
Если клиент решил не предоставлять доступ к геолокации, закрыть сообщение можно, лишь нажав на кнопку отмены, хотя закрытие через тап по фону также было бы ожидаемо.
hardclient
Анимация закрытия запроса
Запрос на геолокацию появляется с помощью быстрой, но плавной анимации, в то время как реакция интерфейса на отмену резкая и прерывистая.
hardclient

Текстовый ввод адреса

Прокрутка списка городов
Область прокрутки со списком городов по умолчанию частично перекрывается экранной клавиатурой. Если вы из Ярославля, выбрать город будет чуть труднее.
hardclient
Return при выборе города
Если в подсказке есть только одно значение, при нажатии на return ничего не происходит: приходится отдельно тянуться до нее пальцем. Хотя мог бы происходить ее выбор.
hardclient
Москва и рядом
При выборе подсказки «Москва и рядом» она превращается просто в Москву. Если ты в подмосковном городе, это может смутить.
hardclient
Уточнение города
При выборе улицы в Подмосковье детализации до города в подписях нет. Так, клиент может получить два Юбилейных проспекта, и какой из них – именно твой, непонятно.
hardclient
Переключение раскладки при выборе адреса
Если клиент выбрал из подсказки улицу, почему бы в этот момент не переключать клавиатуру на цифровую, чтобы ему не приходилось делать это самому?
hardclient
Return при выборе улицы
Как и в случае с городом, кнопка return не выполняет никакой функции, хотя могла бы подтверждать выбор, если в подсказке осталось одно значение.
hardclient
Город при выборе нового адреса
При выборе нового адреса каждый раз нужно выбирать город. Предположу, что большинство новых адресов все же выбирается в том же городе. Почему бы не оставлять город по умолчанию тем же самым, давая возможность его смены?
hardclient
Точность совпадения города
При выборе города из подсказки над экранной клавиатурой значение подставляется с пробелом в конце, из-за которого клиент получает сообщение о том, что город не найден.
hardclient
Отработка выбора адреса без дома
При выборе из подсказки улицы без номера дома и нажатии на return ничего не происходит, хотя можно было бы ненавязчиво подсветить, что номер нужно ввести.
hardclient

Работа с созданными адресами

Прокрутка экрана с адресами
Экран с адресами прокручивается даже тогда, когда контент полностью в него вписывается, и смысла в прокрутке нет.
hardclient
Ожидание при смене адреса
При выборе другого адреса приходится достаточно долго ждать. При этом сервис не подсказывает, сколько осталось ждать и не скрашивает время ожидания.
hardclient
Карта при редактировании адреса
На экране адреса вместо реальной карты отображается макет, который не привязан к контексту. Это может вызвать когнитивный диссонанс («почему на карте не мой адрес?»).
hardclient
Клавиатура при уточнении адреса
При вводе номера подъезда, квартиры, этажа и домофона по открывается буквенная раскладка, которую в большинстве случаев приходится переключать.
hardclient
Корректировка дома в адресе
Если клиент выбрал адрес на карте и ошибся с номером дома, скорректировать его уже не получится: придется удалять адрес и создавать новый.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой Telegram

Поиск с помощью строки

Наравне с каталогом, поиск с помощью строки – один из ключевых этапов на пути к покупке. Особенно в тех случаях, когда клиент знает, что хочет купить. Итак, какие моменты можно улучшить при работе с поисковой строкой?
Реакция строки на нажатие
В то время как у большинства объектов в интерфейсе реализована приятная реакция на касание (touchdown event), поисковая строка на касание не реагирует.
hardclient
Центрирование placeholder'а
При активации строки поиска placeholder и курсор не центрированы по вертикали и смещены вверх. Причина такого размещения не совсем понятна.
hardclient
Клавиатура при прокрутке результатов
Во время просмотра результатов клавиатура по непонятной причине пропадает лишь при повторной прокрутке экрана, хотя имеет смысл прятать ее сразу при первом же скролле.
hardclient
Расположение поля при прокрутке результатов
При прокрутке результатов поиска поле ввода практически прилипает к границам своего контейнера, хотя, вероятно, отступ должен быть чуть больше, чем 1 пиксель.
hardclient
Уточняющие подсказки
Если клиент вводит категорию товаров, в поиск можно добавить уточняющие подсказки, которые позволят быстро выбрать подкатегорию. Например, при вводе запроса «сыр» подсказки могут содержать «плавленый», «творожный» и т.д.
hardclient
Количество категорий
При вводе запроса клиент может столкнуться с большим числом категорий, которое может ввести в ступор. И часто неясно, содержатся в них одни и те же или разные товары.
hardclient
Поиск по рецептам
Почему бы не интегрировать в поиск рецепты? Так, чтобы клиент мог найти рецепт блюда в поиске, изучить и добавить нужные ингредиенты в 1 касание.
hardclient
Текст кнопки return
Кнопка return при вводе никак специально не озаглавлена, хотя под поиск у нее есть специальное значение, которое можно было бы задать на уровне среды разработки.
hardclient
СТА при нулевых результатах
Если ничего по запросу не нашлось, empty state лишь констатирует этот факт, хотя мог бы призывать поискать интересующие товары с помощью каталога.
hardclient
Реакция клавиатуры на отмену поиска
При отмене поиска клавиатура по непонятной причине на некоторое время появляется заново, перекрывая собой контент главного экрана.
hardclient
Поиск в быстрых действиях
В Самокате быстрые действия в принципе не реализованы. А быстрый доступ к поиску мог бы хорошо вписаться в их состав.
hardclient
Гайд: что стоит учитывать при проектировании поисковой строки?

Карточки товаров

Карточки товаров позволяют погрузить клиента в детали предложения. И важно, чтобы они были не только информативными, но и функциональными.
Спектр фотографий
По части товаров отсутствуют фото задней стороны пачки (если клиент хочет посмотреть, что написал производитель) и того, как выглядят товары без упаковки.
hardclient
Увеличение фото
Если клиент хочет посмотреть, что написано на упаковке товара или присмотреться к деталям, сделать это у него не получится: функция зума не предусмотрена.
hardclient
Индикация количества по товару
В карточках нет индикатора, который подсвечивал бы, товар в наличии в достаточном количестве или заканчивается. Это повышает риск, что клиент промедлит и не успеет его купить.
hardclient
Калорийность в порции
Помимо калорийности на 100г, по некоторым продуктам можно также отображать калорийность на порцию. Это позволит легче понять, сколько калорий клиент получит, например, выпив йогурт.
hardclient
Сроки годности
В карточках скоропортящихся продуктов можно ненавязчиво подсвечивать информацию про процессы контроля качества на сборке, чтобы отработать опасения о том, что клиенту привезут товар с истекающим сроком годности.
hardclient
Доставка хрупких и замороженных продуктов
При заказе хрупких и замороженных продуктов может быть опасение, что они по дороге побьются или растают. Карточка товара – хорошее место, чтобы его развеять.
hardclient
Релевантные рецепты
В карточках товарах также можно отображать подборки рецептов, которые могут вдохновить к тому, чтобы приготовить новые блюда – и докупить ингредиентов.
hardclient
Рейтинг товаров
Сервис уже довольно давно собирает оценки по товарам. Если бы он еще и делился этими оценками с клиентами, было бы замечательно, не так ли?😉
hardclient
Шеринг товаров
Возможности поделиться ссылкой на товар в карточке нет. Если ты хочешь рассказать о товаре другу, приходится делать скриншот карточки.
hardclient
Кликабельность производителя
Если клиенту понравился бренд, чтобы найти другие его товары, нужно идти в поиск. Хотя при тапе по производителю можно было бы отображать список всех его товаров.
hardclient
Кстати, читали большой гайд про проектирование карточек товаров?

Работа с избранным

От того, насколько хорошо спроектирована работа с избранным и насколько функция интегрирована в различные этапу пути клиента, зависят как LTV, так и средний чек.
Избранное vs. авторизация
Если клиент еще не вошел в профиль, кнопки добавления в избранное в принципе отсутствуют, хотя можно было бы дать ему возможность добавлять понравившиеся товары и сохранять данные до момента авторизации.
hardclient
Видимость кнопок
Более того, даже если в избранное нельзя добавить товары, пока ты не вошел в профиль, кнопки (если бы они отображались) могли бы при тапе предлагать клиенту войти.
hardclient
Онбординг по избранному
У Самоката есть сторис о том, как добавлять товары и контент в избранное. Почему бы не показывать ее при тапе по placeholder’у избранного, когда в нем еще пусто?
hardclient
Добавление товаров из листинга
Из листинга добавить понравившийся товар в избранное нельзя. Чтобы это сделать, необходимо отдельно переходить в его карточку. Это может быть неудобно.
hardclient
Состояние кнопки в сторис
Кнопка избранного выполнена таким образом, что изначально непонятно, нажата она или нет. Такое состояние может ввести в заблуждение, что сторис уже в избранном.
hardclient
Из корзины – в избранное
Если клиент решил отложить товар, из корзины он может его лишь удалить. Хотя, помимо удаления, в боковые действия можно было бы включить и добавление в избранное.
hardclient
Избранное как блок допродажи
Если клиенту понравились товары, но он пока их не покупал, почему бы не напомнить о них на этапе корзины?
hardclient
Точка входа в избранное
Чтобы зайти в избранное, нужно потрудиться: требуется отдельно переходить на главный экран, прокручивать его, а затем и коллекцию с подборками.
hardclient
Избранное в быстрых действиях
Помимо прочего, точку доступа в избранное можно разместить и в быстрых действиях: оно туда хорошо впишется.
hardclient
Списки избранного
Товаров в Самокате много, и клиент может добавлять в избранное товары под разные случаи и поводы. Однако возможности создавать списки в избранном нет, и при большом количестве товаров в нем это может усложнить поиск того, что нужно.
hardclient
Удаление из избранного
Удалить товар напрямую из избранного у клиента не получится: чтобы это сделать, нужно отдельно переходить в его полную карточку.
hardclient
Видимость товаров после удаления
После удаления товаров из избранного и возврате к списку из карточек они продолжают там отображаться и пропадают только после выхода из избранного.
hardclient
Полная очистка избранного
Вероятно, это баг, но очистить избранное полностью лично у меня не получилось, так как одна из сторис просто не удалялась.
hardclient
Проектируем избранное в приложении: 220 гайдлайнов с примерами
To be continued...
Итак, это была вторая часть нашего путешествия по пути клиента Самоката. Сам сервис хорошо проработан, но, как видим, его еще можно докручивать до лучшей версии.

В следующих статьях мы разберем остальные этапы и постепенно покроем весь customer journey Самоката. Ну а если вы ещё не успели прочитать первую статью, она здесь.

Буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce