Прокачиваем Самокат: глава первая
Как улучшить путь клиента в сервисе экспресс-доставки
Самокат для многих является эталоном как в плане UX, так и клиентского опыта в целом, а общий рейтинг 4.9 из 5.0 при 842 тысячах оценок лишь подтверждает любовь моих друзей и знакомых к этому сервису.
Я решил присмотреться к Самокату чуть более пристально, чем обычный пользователь, и ответить на вопрос: отточен ли их customer journey во всех деталях или всё же есть, что улучшить? Ответ – в цикле статей. А это – первая из них.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.
Я решил присмотреться к Самокату чуть более пристально, чем обычный пользователь, и ответить на вопрос: отточен ли их customer journey во всех деталях или всё же есть, что улучшить? Ответ – в цикле статей. А это – первая из них.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами.
Структура статьи
В этой статье мы разберем первые 2 важных этапа на пути клиента: взаимодействие со страницей приложения в App Store и процесс входа в приложение. В некоторых пунктах, помимо скриншотов Самоката, также можно будет ознакомиться с референсами из других сервисов.
Страница в App Store
Вход в приложение
Вход в приложение
Страница в App Store
От оформления страницы в App Store зависит не только то, скачает пользователь ваше приложение или нет, но и то, насколько он будет осведомлен о вашем ценностном предложении, и то, как быстро он начнет совершать покупки.
Preview-экраны
Количество экранов
На странице используются лишь 6 из 10 возможных слотов для preview-экранов. Это точно все, о чем можно рассказать новому пользователю? Разберем в следующих пунктах.
Активация первого заказа
Несмотря на то, что в описании говорится о скидке на первые 3 заказа, на экранах об этом не упоминается, хотя просматривают их гораздо чаще, чем текст описания.
Механика размещения welcome бонусов на preview-экранах широко используется на рынке, повышая шансы на скачивание и совершение покупок.
Референс • Перекрёсток
Референс • Перекрёсток
Контентная составляющая
У Самоката, помимо ключевой функции заказа, есть много интересного и полезного контента. Почему бы не рассказать об этом в рамках preview-экранов?
Актуальные предложения
Актуальные акции и предложения, о которых рассказывается в приложении, можно подсвечивать и в preview-экранах. Например, открытие сезона черешни с главного экрана.
Бонусная программа
Несмотря на то, что в Самокате можно накапливать бонусы СберСпасибо, и это элемент ценностного предложения, в презентации он никак не подсвечивается.
Другие сервисы, близкие к Сберу, подсвечивают бонусную программу, как один из ключевых элементов ценностного предложения.
Референс • СберМаркет
Референс • СберМаркет
Спектр категорий товаров
В экранах подсвечивается количество товаров, но не широта категорий товаров. Может возникнуть впечатление, что Самокат – это только про продукты питания.
Если число preview-экранов позволяет это сделать, можно рассказать с их помощью о категориях товаров. Размещать на одном экране можно как одну, так и несколько категорий.
Референс • Впрок
Референс • Впрок
Скорость доставки
В экранах говорится лишь о том, что доставка у Самоката «быстрая», хотя можно было бы подсветить, что она – от 15 минут (highlight скорости на скриншоте менее заметен).
Если скорость доставки – отличительная особенность сервиса, подсвечивать минимальный срок в явной форме можно прямо в заголовках.
Референс • Яндекс Лавка
Референс • Яндекс Лавка
Порядок экранов
Более того, быстрая доставка вынесена на самый последний экран, в то время как на первом экране нам говорят о скидках, которыми уже мало кого удивишь.
Свежесть продукции
То, что тебе положат товары с истекающим сроком годности или побитые фрукты и овощи – частое предубеждение. Но отрабатывается оно лишь в глубине текста описания.
Опасения клиентов можно отрабатывать не только в описании, но и на preview-экранах, которые по статистике просматривают гораздо чаще.
Референс • Перекрёсток
Референс • Перекрёсток
Панорамный дизайн
Панорамный дизайн не учитывает, что в App Store между экранами есть отступы. Из-за этого части элементов на экранах визуально смещены друг относительно друга.
Выделение текста
В отличие от highlight’а бесплатной доставки, скидки выделяются таким образом, что текст прилипает к границам маркера и чуть вписывается в него.
Модель устройства
Интерфейс приложения вписан в устройство позапрошлой модели, потерявшей новизну почти 2 года назад.
Хорошая практика – в preview-экранах не только обновлять интерфейс приложения, но и не забывать актуализировать модель устройства.
Референс • Впрок
Референс • Впрок
Описание приложения
Паритет vs. превосходство
В описании говорится о том, что выбор товаров в Самокате – «как в магазине у дома», хотя 25000+ позиций есть далеко не во всех магазинах такого типа.
Порядок текстовых блоков
Чем ниже блок в тексте описания, тем ниже шансы, что его прочитают. Большой блок с городами идёт третьим, вытесняя блоки о скорости доставки, ассортименте и свежести.
Отступы между блоками
Отступы между текстовыми блоками в описании различаются: где-то это одна строка, где-то – три. Причина такого «разнообразия» не совсем понятна.
Актуальность ссылок
Одна из ссылок в описании знакомит клиента с каналом, который уже почти год как не ведется. От скачивания это не остановит, но общее впечатление может подпортить.
История обновлений
Значимость обновлений
Судя по текстам обновлений, с начала года в приложении не было произведено каких-либо важных улучшений. Интересно, насколько это соответствует реальности?
Детали по обновлениям
В истории часто говорится о том, что «внесли несколько улучшений» и что пользоваться стало удобнее. Но о том, что именно улучшили и как это влияет на удобство, не говорится.
Хорошая практика – рассказывать о том, что именно было сделано в релизе. Это лучше позволяет донести до клиента посыл о том, что команда работает над развитием сервиса.
Референс • ВкусВилл
Референс • ВкусВилл
Призыв к оценке
Рассказывая о том, что приложение стало лучше, время от времени в истории обновлений можно предлагать пользователю оценить труд команды в App Store.
Призыв к фидбэку
В истории обновлений команда лишь рассказывает о том, что было доработано. Возможность запросить обратную связь по приложению не используется.
По аналогии с призывом оценить приложение, пользователей также можно просить дать обратную связь по релизу и продукту в целом.
Референс • Lamoda
Референс • Lamoda
Нетехнические обновления
Текст обновлений фокусируется только на технической стороне. В целом это неплохо. Но только этой информацией можно не ограничиваться.
Рассказывая о технических улучшениях, почему бы не рассказать пользователю еще и том, что в приложении появился новый контент или запущена интересная акция?
Референс • Ozon
Референс • Ozon
Рейтинг и отзывы
Свежесть полезных отзывов
Полезные отзывы, вынесенные на основную страницу приложения, оставлены минимум год назад. Из-за давности их полезность снижается.
Как вывести свежие отзывы в качестве наиболее полезных? Напишите мне, подскажу.
Как вывести свежие отзывы в качестве наиболее полезных? Напишите мне, подскажу.
Контакты поддержки
В некоторых отзывах клиенту просто предлагают связаться с поддержкой в VK или Telegram, но чтобы упросить задачу, лучше сопроводить ответ адресами сообщества и бота.
Отслеживание отзыва
В случае проблемы клиенту можно не только предложить связаться с поддержкой, но и сохранить отзыв в базе, предоставив ID тикета, чтобы ему не пришлось повторять поддержке, что случилось и чем он недоволен.
Подписи в ответах
На отзывы пользователей поддержка отвечает обезличенно. Общение строится больше от лица компании, чем от живого человека на стороне поддержи, который готов помочь.
Ответы на отзывы можно подписывать именами сотрудников службы поддержки, делая общение более персональным и очеловеченным.
Референс • App in the Air
Референс • App in the Air
Прочие аспекты
События в приложении
Акциями и предложениями можно делиться с помощью in-app events. Помимо прочего, это сделает приложение более заметным в поиске по сравнению с остальными.
Custom product pages
Контент страницы можно кастомизировать. Например, создавая страницы под города, где идет активный рост базы, или промо-акции, с которыми сталкивается клиент.
Ссылка на поддержку
Нажав на ссылку "поддержка приложений", клиент переходит на главную страницу Самоката. Но если ему нужна помощь, почему бы не вести его напрямую на страницу поддержки?
Авторские права
Возможно, это какой-то юридический момент, но на дворе уже давно 2024г, и я встречаю много сервисов, которые в этом поле пишут именно текущий год.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Вход в приложение
Основной экран входа
Призыв в заголовке
В заголовке можно отталкиваться не от существительного, а от глагола, призывая ввести номер. Это позволит создать ощущение общения с интерфейсом.
Highlight ценности
Если вывести вход через Сбер за рамки и рассмотреть вход по номеру телефона, может быть не понятно, в чем в принципе заключается ценность авторизации.
Placeholder поля ввода номера
В поле ввода номера placeholder отсутствует. Из-за этого оно выглядит визуально пустым.
Placeholder в поле ввода номера позволит ему не выглядеть визуально слишком пустым и подсветит, в каком формате его нужно ввести.
Референс ● ВкусВилл
Автоактивация поля
Поле ввода номера телефона не активируется по умолчанию, хотя кнопки быстрого входа и текст согласия с условиями можно было бы разместить выше экранной клавиатуры и сделать видимыми даже при его активации.
Расположение поля ввода
Поле ввода расположено в самой верхней части экрана. Из-за этого до него нужно далеко тянуться пальцем.
Маркировка поля ввода номера
Поле ввода номера телефона не промаркировано, как phone number, на уровне среды разработки. Автоподстановка не срабатывает, и его приходится вводить вручную.
Сохранение данных: UserDefaults
Если клиент до этого уже входил в аккаунт на устройстве, при повторном входе подсказок с номером телефона не появляется, т.к. данные не сохраняются.
Номер клиента можно сохранять на устройстве и предлагать его при входе по умолчанию, чтобы его не пришлось вводить повторно.
Референс • Wildberries
Референс • Wildberries
Сохранение данных: DeviceID
Если клиент пользовался сервисом, на какое-то время удалил и затем скачал повторно, данные о его номере не сохраняются: его приходится вводить заново вручную.
Пару "номер телефона – ID устройства" можно запоминать, подставляя номер при входе даже в тех случаях, когда пользователь удалял приложение.
Референс • Ozon
Референс • Ozon
Быстрая очистка номера
Если клиент уже ввел часть номера, но затем передумал и решил ввести другой (или просто допустил ошибку), стирать его придется посимвольно, так как кнопка быстрой очистки ввода не предусмотрена.
Размер номера vs. поля
Поле ввода спроектировано таким образом, что при полном вводе номера половина его остаётся пустой. Как считаете, есть ли более элегантные варианты? Напишите в комментах.
Вход через зарубежные сервисы
Вход с Apple ID с 2025г станет недоступен, и клиент может потерять доступ к аккаунту. Однако его не предупреждают об этом и не предлагают восстановить доступ.
При этом сам вход через Apple ID использовать до 2025г вполне допустимо. Важно именно предупреждать о риске потери доступа к аккаунту.
При этом сам вход через Apple ID использовать до 2025г вполне допустимо. Важно именно предупреждать о риске потери доступа к аккаунту.
Спектр способов быстрого входа
Помимо Apple ID, кроме Сбер ID, нет никаких способов быстрого входа. Логика Сбера понятна. Но для клиента отсутствие альтернатив – это снижение удобства.
Согласие на рассылку
Галочка согласия на рекламу активна по умолчанию. Во времена, когда объем рекламных сообщений становится чрезмерным, это может быть расценено, как серый паттерн.
Передача данных партнерам
Клиенту также по умолчанию предлагают делиться своими данными с партнерами Самоката. Их список в документе по ссылке не приводится, и чтобы понять, куда улетят твои данные, нужно и дальше переходить по ссылкам.
Согласия vs. клавиатура
Галочки согласий размещены так, что полностью скрываются экранной клавиатурой при вводе номера. В момент нажатия на кнопку получения кода не видно, с чем ты соглашаешься.
Верстка документов
В некоторых документах согласий ссылки не вписываются экран. Из-за этого они начинают прокручиваться не только вертикально, но и горизонтально.
Размещение кнопки получения кода
Как и поле ввода, кнопка получения кода расположена в самом верху экрана, и до нее также неудобно тянуться большим пальцем.
Тап по неактивной кнопке
Если кнопка неактивна, при тапе по ней поле с номером деактивируется, и приходится нажимать на него снова, чтобы скорректировать вводимые данные.
Текст кнопки в неактивном состоянии
Если номер еще не введен, кнопка, кроме неактивного состояния, больше никак не видоизменяется.
В неактивном состоянии текст кнопки можно менять таким образом, чтобы он подсказывал, что пользователю требуется сделать, чтобы перейти к следующему шагу.
Референс • Stockmann
Референс • Stockmann
Текст кнопки в активном состоянии
Учитывая, что вход по SMS – не единственный метод (хотя и один из самых удобных), подсвечивая в кнопке, что код придет именно в SMS, можно лучше управлять ожиданиями.
Проверка на наличие оператора
Номер не проверяется на наличие оператора, хотя проверка по 3 первым цифрам номера могла бы проводиться. Ввести можно что угодно.
Форматирование при вводе
При вводе цифр номера перед дефисами они на короткое время отображаются, хотя должны появляться только тогда, когда требуется разделение.
Экран ввода кода
Призыв к действию в заголовке
Заголовок можно оформить в формате призыва к действию: вместо просто "Код из смс", чтобы создать ощущение общения, можно заменить на "Введите код из смс".
Таймер повторного получения кода
Если код не пришел, все 30 секунд нужно оставаться на экране ввода кода: если переключиться в другие приложения, таймер повторной отправки работать не будет.
Размер кода vs. поля
Код состоит всего из 4 символов. Из-за этого при его вводе 90% поля остаются незаполненными. Вариант с 4 слотами в таком случае был бы более подходящим.
Форматирование номера
Формат номера телефона отличается от того, с которым клиент сталкивался на предыдущем экране. Хоть и мелочь, но формат можно сделать более консистентным.
Кнопка повторного получения кода
В случае если код не пришел, кнопка повторного получения может быть воспринята как текст ошибки, от которого она ничем по формату не отличается.
Констатация факта vs. призыв к действию
При некорректно введенном коде текст сообщения об ошибке лишь констатирует факт, но не призывает исправить ее и не подсказывает, как решить проблему.
Причина ошибки
В случае ошибки ее причина может крыться не только в коде, но и в самом номере телефона. Об этом можно упомянуть и в тексте сообщения.
Необходимость кнопки «Продолжить»
При вводе кода происходит его автоматическая проверка. Возникает вопрос: зачем в таком случае на экране нужна кнопка «Продолжить», если клиент не сможет на нее нажать?
Изменение номера
Если клиент допустил ошибку в номере, кнопки, которая позволила бы его изменить, на экране нет. Функция кнопки возврата в данном контексте может быть менее интуитивна.
Связь с поддержкой
Если SMS не приходит даже после повторной отправки, клиент остается с проблемой один-на-один: связаться с поддержкой приложение ему не предлагает.
To be continued...
Как видим, и у Самоката тоже есть моменты, которые можно улучшить. Сегодня мы рассмотрели лишь 2 шага. В следующей статье мы продолжим наш customer journey и пойдем вглубь приложения.
Читая в моих статьях про другие сервисы, не забывайте смотреть, как то, что я подсвечиваю, реализовано у вас: вдруг почерпнете для себя идеи для улучшения?
Буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Читая в моих статьях про другие сервисы, не забывайте смотреть, как то, что я подсвечиваю, реализовано у вас: вдруг почерпнете для себя идеи для улучшения?
Буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce