I am ready for a long road flight for work with a week- or months-long projects.
Прокачиваем Самокат: глава вторая
Как улучшить путь клиента в сервисе экспресс-доставки
Самокат для многих является эталоном как в плане UX, так и клиентского опыта в целом, а общий рейтинг 4.9 из 5.0 при 842 тысячах оценок лишь подтверждает любовь моих друзей и знакомых к этому сервису.
Я решил взглянуть на Самокат чуть более пристально и ответить на вопрос: отточен ли их customer journey во всех деталях или всё же есть, что улучшить? Ответ – в цикле статей. Это – вторая из них (а вот ссылка на первую, если ещё не читали).
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.
Я решил взглянуть на Самокат чуть более пристально и ответить на вопрос: отточен ли их customer journey во всех деталях или всё же есть, что улучшить? Ответ – в цикле статей. Это – вторая из них (а вот ссылка на первую, если ещё не читали).
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.
Структура статьи
Как и предыдущий материал, эту статью я разбил по ключевым этапам и элементам интерфейса. Сегодня мы разберем:
Выбор адреса доставки
Выбор адреса – одно из первых действий в сервисе, которое клиент может совершить еще до авторизации. Важно, чтобы этот процесс был кратким, бесшовным и не требовал каких-либо значимых трудозатрат.
Выбор на карте
Скорость загрузки карты
При попытке выбора адреса карта загружается с заметной задержкой. Особенно это чувствуется, если сигнал сети не максимальный.
Точка по умолчанию
Если не предоставлять доступ к геолокации, по умолчанию при первом выборе адреса отображается точка в Кремле и сообщение о том, что туда доставить заказ нельзя.
Интересно, можно было бы выбрать адрес по умолчанию так, чтобы не сталкивать клиента с сообщением о невозможности доставки в самом начале пути?
Интересно, можно было бы выбрать адрес по умолчанию так, чтобы не сталкивать клиента с сообщением о невозможности доставки в самом начале пути?
Уточнение адреса до дома
В отличие от текстового ввода, карта позволяет выбрать адрес без уточнения дома, хотя такого, вероятно, быть не должно.
Оповещения о запуске доставки
Если доставка по адресу еще недоступна почему бы не предложить клиенту не только выбрать другой адрес, но и подписаться на уведомление о запуске доставки?
Ближайшие пункты самовывоза
При запросе доступа к геолокации сервис поясняет, что покажет ближайшие пункты, если клиент его предоставит. Но почему нельзя отображать их по умолчанию – вопрос.
Закрытие запроса на доступ к геолокации
Если клиент решил не предоставлять доступ к геолокации, закрыть сообщение можно, лишь нажав на кнопку отмены, хотя закрытие через тап по фону также было бы ожидаемо.
Анимация закрытия запроса
Запрос на геолокацию появляется с помощью быстрой, но плавной анимации, в то время как реакция интерфейса на отмену резкая и прерывистая.
Текстовый ввод адреса
Прокрутка списка городов
Область прокрутки со списком городов по умолчанию частично перекрывается экранной клавиатурой. Если вы из Ярославля, выбрать город будет чуть труднее.
Return при выборе города
Если в подсказке есть только одно значение, при нажатии на return ничего не происходит: приходится отдельно тянуться до нее пальцем. Хотя мог бы происходить ее выбор.
Москва и рядом
При выборе подсказки «Москва и рядом» она превращается просто в Москву. Если ты в подмосковном городе, это может смутить.
Уточнение города
При выборе улицы в Подмосковье детализации до города в подписях нет. Так, клиент может получить два Юбилейных проспекта, и какой из них – именно твой, непонятно.
Переключение раскладки при выборе адреса
Если клиент выбрал из подсказки улицу, почему бы в этот момент не переключать клавиатуру на цифровую, чтобы ему не приходилось делать это самому?
Return при выборе улицы
Как и в случае с городом, кнопка return не выполняет никакой функции, хотя могла бы подтверждать выбор, если в подсказке осталось одно значение.
Город при выборе нового адреса
При выборе нового адреса каждый раз нужно выбирать город. Предположу, что большинство новых адресов все же выбирается в том же городе. Почему бы не оставлять город по умолчанию тем же самым, давая возможность его смены?
Точность совпадения города
При выборе города из подсказки над экранной клавиатурой значение подставляется с пробелом в конце, из-за которого клиент получает сообщение о том, что город не найден.
Отработка выбора адреса без дома
При выборе из подсказки улицы без номера дома и нажатии на return ничего не происходит, хотя можно было бы ненавязчиво подсветить, что номер нужно ввести.
Работа с созданными адресами
Прокрутка экрана с адресами
Экран с адресами прокручивается даже тогда, когда контент полностью в него вписывается, и смысла в прокрутке нет.
Ожидание при смене адреса
При выборе другого адреса приходится достаточно долго ждать. При этом сервис не подсказывает, сколько осталось ждать и не скрашивает время ожидания.
Карта при редактировании адреса
На экране адреса вместо реальной карты отображается макет, который не привязан к контексту. Это может вызвать когнитивный диссонанс («почему на карте не мой адрес?»).
Клавиатура при уточнении адреса
При вводе номера подъезда, квартиры, этажа и домофона по открывается буквенная раскладка, которую в большинстве случаев приходится переключать.
Корректировка дома в адресе
Если клиент выбрал адрес на карте и ошибся с номером дома, скорректировать его уже не получится: придется удалять адрес и создавать новый.
Будьте в курсе выхода новых статей – подпишитесь на мой Telegram
Поиск с помощью строки
Наравне с каталогом, поиск с помощью строки – один из ключевых этапов на пути к покупке. Особенно в тех случаях, когда клиент знает, что хочет купить. Итак, какие моменты можно улучшить при работе с поисковой строкой?
Реакция строки на нажатие
В то время как у большинства объектов в интерфейсе реализована приятная реакция на касание (touchdown event), поисковая строка на касание не реагирует.
Центрирование placeholder'а
При активации строки поиска placeholder и курсор не центрированы по вертикали и смещены вверх. Причина такого размещения не совсем понятна.
Клавиатура при прокрутке результатов
Во время просмотра результатов клавиатура по непонятной причине пропадает лишь при повторной прокрутке экрана, хотя имеет смысл прятать ее сразу при первом же скролле.
Расположение поля при прокрутке результатов
При прокрутке результатов поиска поле ввода практически прилипает к границам своего контейнера, хотя, вероятно, отступ должен быть чуть больше, чем 1 пиксель.
Уточняющие подсказки
Если клиент вводит категорию товаров, в поиск можно добавить уточняющие подсказки, которые позволят быстро выбрать подкатегорию. Например, при вводе запроса «сыр» подсказки могут содержать «плавленый», «творожный» и т.д.
Количество категорий
При вводе запроса клиент может столкнуться с большим числом категорий, которое может ввести в ступор. И часто неясно, содержатся в них одни и те же или разные товары.
Поиск по рецептам
Почему бы не интегрировать в поиск рецепты? Так, чтобы клиент мог найти рецепт блюда в поиске, изучить и добавить нужные ингредиенты в 1 касание.
Текст кнопки return
Кнопка return при вводе никак специально не озаглавлена, хотя под поиск у нее есть специальное значение, которое можно было бы задать на уровне среды разработки.
СТА при нулевых результатах
Если ничего по запросу не нашлось, empty state лишь констатирует этот факт, хотя мог бы призывать поискать интересующие товары с помощью каталога.
Реакция клавиатуры на отмену поиска
При отмене поиска клавиатура по непонятной причине на некоторое время появляется заново, перекрывая собой контент главного экрана.
Поиск в быстрых действиях
В Самокате быстрые действия в принципе не реализованы. А быстрый доступ к поиску мог бы хорошо вписаться в их состав.
Гайд: что стоит учитывать при проектировании поисковой строки?
Карточки товаров
Карточки товаров позволяют погрузить клиента в детали предложения. И важно, чтобы они были не только информативными, но и функциональными.
Спектр фотографий
По части товаров отсутствуют фото задней стороны пачки (если клиент хочет посмотреть, что написал производитель) и того, как выглядят товары без упаковки.
Увеличение фото
Если клиент хочет посмотреть, что написано на упаковке товара или присмотреться к деталям, сделать это у него не получится: функция зума не предусмотрена.
Индикация количества по товару
В карточках нет индикатора, который подсвечивал бы, товар в наличии в достаточном количестве или заканчивается. Это повышает риск, что клиент промедлит и не успеет его купить.
Калорийность в порции
Помимо калорийности на 100г, по некоторым продуктам можно также отображать калорийность на порцию. Это позволит легче понять, сколько калорий клиент получит, например, выпив йогурт.
Сроки годности
В карточках скоропортящихся продуктов можно ненавязчиво подсвечивать информацию про процессы контроля качества на сборке, чтобы отработать опасения о том, что клиенту привезут товар с истекающим сроком годности.
Доставка хрупких и замороженных продуктов
При заказе хрупких и замороженных продуктов может быть опасение, что они по дороге побьются или растают. Карточка товара – хорошее место, чтобы его развеять.
Релевантные рецепты
В карточках товарах также можно отображать подборки рецептов, которые могут вдохновить к тому, чтобы приготовить новые блюда – и докупить ингредиентов.
Рейтинг товаров
Сервис уже довольно давно собирает оценки по товарам. Если бы он еще и делился этими оценками с клиентами, было бы замечательно, не так ли?😉
Шеринг товаров
Возможности поделиться ссылкой на товар в карточке нет. Если ты хочешь рассказать о товаре другу, приходится делать скриншот карточки.
Кликабельность производителя
Если клиенту понравился бренд, чтобы найти другие его товары, нужно идти в поиск. Хотя при тапе по производителю можно было бы отображать список всех его товаров.
Кстати, читали большой гайд про проектирование карточек товаров?
Работа с избранным
От того, насколько хорошо спроектирована работа с избранным и насколько функция интегрирована в различные этапу пути клиента, зависят как LTV, так и средний чек.
Избранное vs. авторизация
Если клиент еще не вошел в профиль, кнопки добавления в избранное в принципе отсутствуют, хотя можно было бы дать ему возможность добавлять понравившиеся товары и сохранять данные до момента авторизации.
Видимость кнопок
Более того, даже если в избранное нельзя добавить товары, пока ты не вошел в профиль, кнопки (если бы они отображались) могли бы при тапе предлагать клиенту войти.
Онбординг по избранному
У Самоката есть сторис о том, как добавлять товары и контент в избранное. Почему бы не показывать ее при тапе по placeholder’у избранного, когда в нем еще пусто?
Добавление товаров из листинга
Из листинга добавить понравившийся товар в избранное нельзя. Чтобы это сделать, необходимо отдельно переходить в его карточку. Это может быть неудобно.
Состояние кнопки в сторис
Кнопка избранного выполнена таким образом, что изначально непонятно, нажата она или нет. Такое состояние может ввести в заблуждение, что сторис уже в избранном.
Из корзины – в избранное
Если клиент решил отложить товар, из корзины он может его лишь удалить. Хотя, помимо удаления, в боковые действия можно было бы включить и добавление в избранное.
Избранное как блок допродажи
Если клиенту понравились товары, но он пока их не покупал, почему бы не напомнить о них на этапе корзины?
Точка входа в избранное
Чтобы зайти в избранное, нужно потрудиться: требуется отдельно переходить на главный экран, прокручивать его, а затем и коллекцию с подборками.
Избранное в быстрых действиях
Помимо прочего, точку доступа в избранное можно разместить и в быстрых действиях: оно туда хорошо впишется.
Списки избранного
Товаров в Самокате много, и клиент может добавлять в избранное товары под разные случаи и поводы. Однако возможности создавать списки в избранном нет, и при большом количестве товаров в нем это может усложнить поиск того, что нужно.
Удаление из избранного
Удалить товар напрямую из избранного у клиента не получится: чтобы это сделать, нужно отдельно переходить в его полную карточку.
Видимость товаров после удаления
После удаления товаров из избранного и возврате к списку из карточек они продолжают там отображаться и пропадают только после выхода из избранного.
Полная очистка избранного
Вероятно, это баг, но очистить избранное полностью лично у меня не получилось, так как одна из сторис просто не удалялась.
Проектируем избранное в приложении: 220 гайдлайнов с примерами
To be continued...
Итак, это была вторая часть нашего путешествия по пути клиента Самоката. Сам сервис хорошо проработан, но, как видим, его еще можно докручивать до лучшей версии.
В следующих статьях мы разберем остальные этапы и постепенно покроем весь customer journey Самоката. Ну а если вы ещё не успели прочитать первую статью, она здесь.
Буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
В следующих статьях мы разберем остальные этапы и постепенно покроем весь customer journey Самоката. Ну а если вы ещё не успели прочитать первую статью, она здесь.
Буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce