Для многих Самокат — эталон как в плане UX, так и клиентского опыта в целом. А общий рейтинг 4.9 из 5.0 при 833 тысячах оценок лишь подтверждает любовь моих друзей и знакомых к этому сервису.
Структура статьи
В этой статье мы разберём два первых важных этапа на пути клиента: взаимодействие со страницей приложения в 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
Нетехнические обновления
Текст обновлений фокусируется только на технической стороне. В целом это неплохо. Но только этой информацией можно не ограничиваться.
Рассказывая о технических улучшениях, почему бы не информировать пользователя ещё и том, что в приложении появился новый контент или запущена интересная акция?
Референс ✅ Ozon
Рейтинг и отзывы
Свежесть полезных отзывов
Полезные отзывы, вынесенные на основную страницу приложения, оставлены минимум год назад. Из-за давности их полезность снижается.
Контакты поддержки
В некоторых отзывах клиенту просто предлагают связаться с поддержкой в VK или Telegram, но чтобы упросить задачу, лучше сопроводить ответ адресами сообщества и бота.
Отслеживание отзыва
В случае проблемы клиенту можно не только предложить связаться с поддержкой, но и сохранить отзыв в базе, предоставив ID тикета, чтобы ему не пришлось повторять поддержке, что случилось и чем он недоволен.
Подписи в ответах
На отзывы пользователей поддержка отвечает обезличенно. Общение строится больше от лица компании, чем от живого человека на стороне поддержи, который готов помочь.
Ответы на отзывы можно подписывать именами сотрудников службы поддержки, делая общение более персональным и очеловеченным.
Референс ✅ App in the Air
Прочие аспекты
События в приложении
Акциями и предложениями можно делиться с помощью in-app events. Помимо прочего, это сделает приложение более заметным в поиске по сравнению с остальными.
Custom product pages
Контент страницы можно кастомизировать. Например, создавая страницы под города, где идёт активный рост базы, или промоакции, с которыми сталкивается клиент.
Ссылка на поддержку
Нажав на ссылку «поддержка приложений», клиент переходит на главную страницу Самоката. Но если ему нужна помощь, почему бы не вести его напрямую на страницу поддержки?
Авторские права
Возможно, это какой-то юридический момент, но на дворе уже 2024 год, и я встречаю много сервисов, которые в этом поле пишут именно текущий год.
Вход в приложение
Основной экран входа
Призыв в заголовке
В заголовке можно отталкиваться не от существительного, а от глагола, призывая ввести номер. Это позволит создать ощущение общения с интерфейсом.
Highlight ценности
Если вывести вход через Сбер за рамки и рассмотреть вход по номеру телефона, может быть непонятно, в чём в принципе заключается ценность авторизации.
Placeholder поля ввода номера
В поле ввода номера placeholder отсутствует. Из-за этого оно выглядит визуально пустым.
Placeholder в поле ввода номера позволит ему не выглядеть визуально слишком пустым и подсветит, в каком формате его нужно ввести.
Референс ✅ ВкусВилл
Автоактивация поля
Поле ввода номера телефона не активируется по умолчанию, хотя кнопки быстрого входа и текст согласия с условиями можно было бы разместить выше экранной клавиатуры и сделать видимыми даже при его активации.
Расположение поля ввода
Поле ввода расположено в самой верхней части экрана. Из-за этого до него нужно тянуться пальцем.
Маркировка поля ввода номера
Поле ввода номера телефона не промаркировано, как phone number, на уровне среды разработки. Автоподстановка не срабатывает, и его приходится вводить вручную.
Сохранение данных: UserDefaults
Если клиент до этого уже входил в аккаунт на устройстве, при повторном входе подсказок с номером телефона не появляется, потому что данные не сохраняются.
Номер клиента можно сохранять на устройстве и предлагать его при входе по умолчанию, чтобы его не пришлось вводить повторно.
Референс ✅ Wildberries
Сохранение данных: DeviceID
Если клиент пользовался сервисом, на какое-то время удалил и затем скачал повторно, данные о его номере не сохраняются: его приходится вводить заново вручную.
Пару «номер телефона — ID устройства» можно запоминать, подставляя номер при входе даже в тех случаях, когда пользователь удалял приложение.
Референс ✅ Ozon
Быстрая очистка номера
Если клиент уже ввёл часть номера, но затем передумал и решил ввести другой (или просто допустил ошибку), стирать его придётся посимвольно, так как кнопка быстрой очистки ввода не предусмотрена.
Размер номера vs. поля
Поле ввода спроектировано таким образом, что при полном вводе номера половина его остаётся пустой. Как считаете, есть ли более элегантные варианты?
Вход через зарубежные сервисы
Вход с Apple ID с 2025 года станет недоступен, и клиент может потерять доступ к аккаунту. Однако его не предупреждают об этом и не предлагают восстановить доступ.
При этом сам вход через Apple ID использовать до 2025 года вполне допустимо. Важно именно предупреждать о риске потери доступа к аккаунту.
Спектр способов быстрого входа
Помимо Apple ID, кроме Сбер ID, нет никаких способов быстрого входа. Логика Сбера понятна. Но для клиента отсутствие альтернатив снижает удобство.
Согласие на рассылку
Галочка согласия на рекламу активна по умолчанию. Во времена, когда объём рекламных сообщений становится чрезмерным, это может быть расценено, как серый паттерн.
Передача данных партнерам
Клиенту также по умолчанию предлагают делиться своими данными с партнерами Самоката. Их список в документе по ссылке не приводится, и чтобы понять, куда улетят твои данные, нужно и дальше переходить по ссылкам.
Согласия vs. клавиатура
Галочки согласий размещены так, что полностью скрываются экранной клавиатурой при вводе номера. В момент нажатия на кнопку получения кода не видно, с чем ты соглашаешься.
Вёрстка документов
В некоторых документах согласий ссылки не вписываются экран. Из-за этого они начинают прокручиваться не только вертикально, но и горизонтально.
Размещение кнопки получения кода
Как и поле ввода, кнопка получения кода расположена в самом верху экрана, и до неё также неудобно тянуться большим пальцем.
Тап по неактивной кнопке
Если кнопка неактивна, при тапе по ней поле с номером деактивируется, и приходится нажимать на него снова, чтобы скорректировать вводимые данные.
Текст кнопки в неактивном состоянии
Если номер ещё не введён, кнопка, кроме неактивного состояния, больше никак не видоизменяется.
В неактивном состоянии текст кнопки можно менять таким образом, чтобы он подсказывал, что пользователю требуется сделать, чтобы перейти к следующему шагу.
Референс ✅ Stockmann
Текст кнопки в активном состоянии
Учитывая, что вход по SMS — не единственный метод (хотя и один из самых удобных), подсвечивая в кнопке, что код придёт именно в SMS, можно лучше управлять ожиданиями.
Проверка на наличие оператора
Номер не проверяется на наличие оператора, хотя проверка по первым трём цифрам номера могла бы проводиться. Ввести можно что угодно.
Форматирование при вводе
При вводе цифр номера перед дефисами они на короткое время отображаются, хотя должны появляться только тогда, когда требуется разделение.
Экран ввода кода
Призыв к действию в заголовке
Заголовок можно оформить в формате призыва к действию: вместо просто «Код из смс», чтобы создать ощущение общения, можно заменить на «Введите код из смс».
Таймер повторного получения кода
Если код не пришёл, все 30 секунд нужно оставаться на экране ввода кода: если переключиться в другие приложения, таймер повторной отправки работать не будет.
Размер кода vs. поля
Код состоит всего из 4 символов. Из-за этого при его вводе 90% поля остаются незаполненными. Вариант с 4 слотами в таком случае был бы более подходящим.
Форматирование номера
Формат номера телефона отличается от того, с которым клиент сталкивался на предыдущем экране. Хоть и мелочь, но формат можно сделать более консистентным.
Кнопка повторного получения кода
В случае если код не пришел, кнопка повторного получения может быть воспринята как текст ошибки, от которого она ничем по формату не отличается.
Констатация факта vs. призыв к действию
При некорректно введённом коде текст сообщения об ошибке лишь констатирует факт, но не призывает исправить её и не подсказывает, как решить проблему.
Причина ошибки
В случае ошибки её причина может скрываться не только в коде, но и в самом номере телефона. Об этом можно упомянуть и в тексте сообщения.
Необходимость кнопки «Продолжить»
При вводе кода происходит его автоматическая проверка. Возникает вопрос: зачем в таком случае на экране нужна кнопка «Продолжить», если клиент не сможет на неё нажать?
Изменение номера
Если клиент допустил ошибку в номере, кнопки, которая позволила бы его изменить, на экране нет. Функция кнопки возврата в данном контексте может быть менее интуитивна.
Связь с поддержкой
Если SMS не приходит даже после повторной отправки, клиент остается с проблемой один-на-один: связаться с поддержкой приложение ему не предлагает.
To be continued…
Как видим, и у Самоката есть моменты, которые можно улучшить. Сегодня мы рассмотрели лишь два шага. В следующей статье мы продолжим наш customer journey и пойдем вглубь приложения.
Следующие статьи будут с таким же уровнем детализации. Свои новые материалы я анонсирую в Телеграм-канале. Подписывайтесь, если не хотите их пропускать. На связи.
Обсуждение