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

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

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

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

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

Автор hardclient.com
Структура статьи
В этой статье мы разберем первые 2 важных этапа на пути клиента: взаимодействие со страницей приложения в App Store и процесс входа в приложение. В некоторых пунктах, помимо скриншотов Самоката, также можно будет ознакомиться с референсами из других сервисов.

Страница в App Store

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

Preview-экраны

Количество экранов
На странице используются лишь 6 из 10 возможных слотов для preview-экранов. Это точно все, о чем можно рассказать новому пользователю? Разберем в следующих пунктах.
hardclient
Активация первого заказа
Несмотря на то, что в описании говорится о скидке на первые 3 заказа, на экранах об этом не упоминается, хотя просматривают их гораздо чаще, чем текст описания.
hardclient
Механика размещения welcome бонусов на preview-экранах широко используется на рынке, повышая шансы на скачивание и совершение покупок.

Референс Перекрёсток
hardclient
Контентная составляющая
У Самоката, помимо ключевой функции заказа, есть много интересного и полезного контента. Почему бы не рассказать об этом в рамках preview-экранов?
hardclient
Актуальные предложения
Актуальные акции и предложения, о которых рассказывается в приложении, можно подсвечивать и в preview-экранах. Например, открытие сезона черешни с главного экрана.
hardclient
Бонусная программа
Несмотря на то, что в Самокате можно накапливать бонусы СберСпасибо, и это элемент ценностного предложения, в презентации он никак не подсвечивается.
hardclient
Другие сервисы, близкие к Сберу, подсвечивают бонусную программу, как один из ключевых элементов ценностного предложения.

Референс СберМаркет
hardclient
Спектр категорий товаров
В экранах подсвечивается количество товаров, но не широта категорий товаров. Может возникнуть впечатление, что Самокат – это только про продукты питания.
hardclient
Если число preview-экранов позволяет это сделать, можно рассказать с их помощью о категориях товаров. Размещать на одном экране можно как одну, так и несколько категорий.

Референс Впрок
hardclient
Скорость доставки
В экранах говорится лишь о том, что доставка у Самоката «быстрая», хотя можно было бы подсветить, что она – от 15 минут (highlight скорости на скриншоте менее заметен).
hardclient
Если скорость доставки – отличительная особенность сервиса, подсвечивать минимальный срок в явной форме можно прямо в заголовках.

Референс Яндекс Лавка
hardclient
Порядок экранов
Более того, быстрая доставка вынесена на самый последний экран, в то время как на первом экране нам говорят о скидках, которыми уже мало кого удивишь.
hardclient
Свежесть продукции
То, что тебе положат товары с истекающим сроком годности или побитые фрукты и овощи – частое предубеждение. Но отрабатывается оно лишь в глубине текста описания.
hardclient
Опасения клиентов можно отрабатывать не только в описании, но и на preview-экранах, которые по статистике просматривают гораздо чаще.

Референс Перекрёсток
hardclient
Панорамный дизайн
Панорамный дизайн не учитывает, что в App Store между экранами есть отступы. Из-за этого части элементов на экранах визуально смещены друг относительно друга.
hardclient
Выделение текста
В отличие от highlight’а бесплатной доставки, скидки выделяются таким образом, что текст прилипает к границам маркера и чуть вписывается в него.
hardclient
Модель устройства
Интерфейс приложения вписан в устройство позапрошлой модели, потерявшей новизну почти 2 года назад.
hardclient
Хорошая практика – в preview-экранах не только обновлять интерфейс приложения, но и не забывать актуализировать модель устройства.

Референс Впрок
hardclient

Описание приложения

Паритет vs. превосходство
В описании говорится о том, что выбор товаров в Самокате – «как в магазине у дома», хотя 25000+ позиций есть далеко не во всех магазинах такого типа.
hardclient
Порядок текстовых блоков
Чем ниже блок в тексте описания, тем ниже шансы, что его прочитают. Большой блок с городами идёт третьим, вытесняя блоки о скорости доставки, ассортименте и свежести.
hardclient
Отступы между блоками
Отступы между текстовыми блоками в описании различаются: где-то это одна строка, где-то – три. Причина такого «разнообразия» не совсем понятна.
hardclient
Актуальность ссылок
Одна из ссылок в описании знакомит клиента с каналом, который уже почти год как не ведется. От скачивания это не остановит, но общее впечатление может подпортить.
hardclient

История обновлений

Значимость обновлений
Судя по текстам обновлений, с начала года в приложении не было произведено каких-либо важных улучшений. Интересно, насколько это соответствует реальности?
hardclient
Детали по обновлениям
В истории часто говорится о том, что «внесли несколько улучшений» и что пользоваться стало удобнее. Но о том, что именно улучшили и как это влияет на удобство, не говорится.
hardclient
Хорошая практика – рассказывать о том, что именно было сделано в релизе. Это лучше позволяет донести до клиента посыл о том, что команда работает над развитием сервиса.

Референс ВкусВилл
hardclient
Призыв к оценке
Рассказывая о том, что приложение стало лучше, время от времени в истории обновлений можно предлагать пользователю оценить труд команды в App Store.
hardclient
Призыв к фидбэку
В истории обновлений команда лишь рассказывает о том, что было доработано. Возможность запросить обратную связь по приложению не используется.
hardclient
По аналогии с призывом оценить приложение, пользователей также можно просить дать обратную связь по релизу и продукту в целом.

Референс Lamoda
hardclient
Нетехнические обновления
Текст обновлений фокусируется только на технической стороне. В целом это неплохо. Но только этой информацией можно не ограничиваться.
hardclient
Рассказывая о технических улучшениях, почему бы не рассказать пользователю еще и том, что в приложении появился новый контент или запущена интересная акция?

Референс Ozon
hardclient

Рейтинг и отзывы

Свежесть полезных отзывов
Полезные отзывы, вынесенные на основную страницу приложения, оставлены минимум год назад. Из-за давности их полезность снижается.

Как вывести свежие отзывы в качестве наиболее полезных? Напишите мне, подскажу.
hardclient
Контакты поддержки
В некоторых отзывах клиенту просто предлагают связаться с поддержкой в VK или Telegram, но чтобы упросить задачу, лучше сопроводить ответ адресами сообщества и бота.
hardclient
Отслеживание отзыва
В случае проблемы клиенту можно не только предложить связаться с поддержкой, но и сохранить отзыв в базе, предоставив ID тикета, чтобы ему не пришлось повторять поддержке, что случилось и чем он недоволен.
hardclient
Подписи в ответах
На отзывы пользователей поддержка отвечает обезличенно. Общение строится больше от лица компании, чем от живого человека на стороне поддержи, который готов помочь.
hardclient
Ответы на отзывы можно подписывать именами сотрудников службы поддержки, делая общение более персональным и очеловеченным.

Референс App in the Air
hardclient

Прочие аспекты

События в приложении
Акциями и предложениями можно делиться с помощью in-app events. Помимо прочего, это сделает приложение более заметным в поиске по сравнению с остальными.
hardclient
Custom product pages
Контент страницы можно кастомизировать. Например, создавая страницы под города, где идет активный рост базы, или промо-акции, с которыми сталкивается клиент.
hardclient
Ссылка на поддержку
Нажав на ссылку "поддержка приложений", клиент переходит на главную страницу Самоката. Но если ему нужна помощь, почему бы не вести его напрямую на страницу поддержки?
hardclient
Авторские права
Возможно, это какой-то юридический момент, но на дворе уже давно 2024г, и я встречаю много сервисов, которые в этом поле пишут именно текущий год.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

Вход в приложение

Основной экран входа

Призыв в заголовке
В заголовке можно отталкиваться не от существительного, а от глагола, призывая ввести номер. Это позволит создать ощущение общения с интерфейсом.
hardclient
Highlight ценности
Если вывести вход через Сбер за рамки и рассмотреть вход по номеру телефона, может быть не понятно, в чем в принципе заключается ценность авторизации.
hardclient
Placeholder поля ввода номера
В поле ввода номера placeholder отсутствует. Из-за этого оно выглядит визуально пустым.
hardclient
Placeholder в поле ввода номера позволит ему не выглядеть визуально слишком пустым и подсветит, в каком формате его нужно ввести.

Референс ВкусВилл
hardclient
Автоактивация поля
Поле ввода номера телефона не активируется по умолчанию, хотя кнопки быстрого входа и текст согласия с условиями можно было бы разместить выше экранной клавиатуры и сделать видимыми даже при его активации.
hardclient
Расположение поля ввода
Поле ввода расположено в самой верхней части экрана. Из-за этого до него нужно далеко тянуться пальцем.
hardclient
Маркировка поля ввода номера
Поле ввода номера телефона не промаркировано, как phone number, на уровне среды разработки. Автоподстановка не срабатывает, и его приходится вводить вручную.
hardclient
Сохранение данных: UserDefaults
Если клиент до этого уже входил в аккаунт на устройстве, при повторном входе подсказок с номером телефона не появляется, т.к. данные не сохраняются.
hardclient
Номер клиента можно сохранять на устройстве и предлагать его при входе по умолчанию, чтобы его не пришлось вводить повторно.

Референс Wildberries
hardclient
Сохранение данных: DeviceID
Если клиент пользовался сервисом, на какое-то время удалил и затем скачал повторно, данные о его номере не сохраняются: его приходится вводить заново вручную.
hardclient
Пару "номер телефона – ID устройства" можно запоминать, подставляя номер при входе даже в тех случаях, когда пользователь удалял приложение.

Референс Ozon
hardclient
Быстрая очистка номера
Если клиент уже ввел часть номера, но затем передумал и решил ввести другой (или просто допустил ошибку), стирать его придется посимвольно, так как кнопка быстрой очистки ввода не предусмотрена.
hardclient
Размер номера vs. поля
Поле ввода спроектировано таким образом, что при полном вводе номера половина его остаётся пустой. Как считаете, есть ли более элегантные варианты? Напишите в комментах.
hardclient
Вход через зарубежные сервисы
Вход с Apple ID с 2025г станет недоступен, и клиент может потерять доступ к аккаунту. Однако его не предупреждают об этом и не предлагают восстановить доступ.

При этом сам вход через Apple ID использовать до 2025г вполне допустимо. Важно именно предупреждать о риске потери доступа к аккаунту.
hardclient
Спектр способов быстрого входа
Помимо Apple ID, кроме Сбер ID, нет никаких способов быстрого входа. Логика Сбера понятна. Но для клиента отсутствие альтернатив – это снижение удобства.
hardclient
Согласие на рассылку
Галочка согласия на рекламу активна по умолчанию. Во времена, когда объем рекламных сообщений становится чрезмерным, это может быть расценено, как серый паттерн.
hardclient
Передача данных партнерам
Клиенту также по умолчанию предлагают делиться своими данными с партнерами Самоката. Их список в документе по ссылке не приводится, и чтобы понять, куда улетят твои данные, нужно и дальше переходить по ссылкам.
hardclient
Согласия vs. клавиатура
Галочки согласий размещены так, что полностью скрываются экранной клавиатурой при вводе номера. В момент нажатия на кнопку получения кода не видно, с чем ты соглашаешься.
hardclient
Верстка документов
В некоторых документах согласий ссылки не вписываются экран. Из-за этого они начинают прокручиваться не только вертикально, но и горизонтально.
hardclient
Размещение кнопки получения кода
Как и поле ввода, кнопка получения кода расположена в самом верху экрана, и до нее также неудобно тянуться большим пальцем.
hardclient
Тап по неактивной кнопке
Если кнопка неактивна, при тапе по ней поле с номером деактивируется, и приходится нажимать на него снова, чтобы скорректировать вводимые данные.
hardclient
Текст кнопки в неактивном состоянии
Если номер еще не введен, кнопка, кроме неактивного состояния, больше никак не видоизменяется.
hardclient
В неактивном состоянии текст кнопки можно менять таким образом, чтобы он подсказывал, что пользователю требуется сделать, чтобы перейти к следующему шагу.

Референс Stockmann
hardclient
Текст кнопки в активном состоянии
Учитывая, что вход по SMS – не единственный метод (хотя и один из самых удобных), подсвечивая в кнопке, что код придет именно в SMS, можно лучше управлять ожиданиями.
hardclient
Проверка на наличие оператора
Номер не проверяется на наличие оператора, хотя проверка по 3 первым цифрам номера могла бы проводиться. Ввести можно что угодно.
hardclient
Форматирование при вводе
При вводе цифр номера перед дефисами они на короткое время отображаются, хотя должны появляться только тогда, когда требуется разделение.
hardclient

Экран ввода кода

Призыв к действию в заголовке
Заголовок можно оформить в формате призыва к действию: вместо просто "Код из смс", чтобы создать ощущение общения, можно заменить на "Введите код из смс".
hardclient
Таймер повторного получения кода
Если код не пришел, все 30 секунд нужно оставаться на экране ввода кода: если переключиться в другие приложения, таймер повторной отправки работать не будет.
hardclient
Размер кода vs. поля
Код состоит всего из 4 символов. Из-за этого при его вводе 90% поля остаются незаполненными. Вариант с 4 слотами в таком случае был бы более подходящим.
hardclient
Форматирование номера
Формат номера телефона отличается от того, с которым клиент сталкивался на предыдущем экране. Хоть и мелочь, но формат можно сделать более консистентным.
hardclient
Кнопка повторного получения кода
В случае если код не пришел, кнопка повторного получения может быть воспринята как текст ошибки, от которого она ничем по формату не отличается.
hardclient
Констатация факта vs. призыв к действию
При некорректно введенном коде текст сообщения об ошибке лишь констатирует факт, но не призывает исправить ее и не подсказывает, как решить проблему.
hardclient
Причина ошибки
В случае ошибки ее причина может крыться не только в коде, но и в самом номере телефона. Об этом можно упомянуть и в тексте сообщения.
hardclient
Необходимость кнопки «Продолжить»
При вводе кода происходит его автоматическая проверка. Возникает вопрос: зачем в таком случае на экране нужна кнопка «Продолжить», если клиент не сможет на нее нажать?
hardclient
Изменение номера
Если клиент допустил ошибку в номере, кнопки, которая позволила бы его изменить, на экране нет. Функция кнопки возврата в данном контексте может быть менее интуитивна.
hardclient
Связь с поддержкой
Если SMS не приходит даже после повторной отправки, клиент остается с проблемой один-на-один: связаться с поддержкой приложение ему не предлагает.
hardclient
To be continued...
Как видим, и у Самоката тоже есть моменты, которые можно улучшить. Сегодня мы рассмотрели лишь 2 шага. В следующей статье мы продолжим наш customer journey и пойдем вглубь приложения.

Читая в моих статьях про другие сервисы, не забывайте смотреть, как то, что я подсвечиваю, реализовано у вас: вдруг почерпнете для себя идеи для улучшения?

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