Как прокачать X5ID?
25 идей по улучшению процесса и интерфейса авторизации пользователей
Общий опыт клиента часто складывается из того, какой опыт он получает на каждом из этапов customer journey, и помимо взгляда на общую картину, время от времени стоит «брать увеличительное стекло» и рассматривать каждый из шагов в деталях.
Сегодня мы с вами погрузимся в один из таких этапов, который проходят миллионы клиентов X5 Retail Group – авторизацию пользователей X5ID – и обсудим, как сделать её более удобной.
Казалось бы, что улучшать в авторизации? Ввели номер телефона – получили код – ввели этот код – и вы вошли. Но даже на таком коротком участке пути есть что поправить. А в этой статье – 20+ идей для улучшения.
Как всегда, если есть что добавить – добро пожаловать в комменты. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Сегодня мы с вами погрузимся в один из таких этапов, который проходят миллионы клиентов X5 Retail Group – авторизацию пользователей X5ID – и обсудим, как сделать её более удобной.
Казалось бы, что улучшать в авторизации? Ввели номер телефона – получили код – ввели этот код – и вы вошли. Но даже на таком коротком участке пути есть что поправить. А в этой статье – 20+ идей для улучшения.
Как всегда, если есть что добавить – добро пожаловать в комменты. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с коллегами, которым материал может быть полезен.
Единая авторизация
Как ни странно, начнем с Яндекса. Вы замечали, что при установке новых его приложений вход в профиль происходит автоматически, если вы уже авторизованы в другом приложении компании?
Это пример использования единой авторизации через App Groups в iOS, которая позволяет передавать между приложениями одного разработчика данные о том, что вы – это вы.
Учитывая, что сервисов в X5ID много, почему бы не воспользоваться такой возможностью? Например, если вы уже вошли в Перекрёсток, а затем скачали Впрок, вход может происходить автоматически.
Это пример использования единой авторизации через App Groups в iOS, которая позволяет передавать между приложениями одного разработчика данные о том, что вы – это вы.
Учитывая, что сервисов в X5ID много, почему бы не воспользоваться такой возможностью? Например, если вы уже вошли в Перекрёсток, а затем скачали Впрок, вход может происходить автоматически.
Согласие на обработку данных
В отличие, например, от Впрок, при авторизации в Перекрёстке нет текстов согласия на обработку данных: ни перед входом, ни при вводе номера телефона, ни при вводе кода. А добавить бы стоило.
Согласие на рекламу
Зато Впрок помогает клиентам не совершать лишних действий, нажимая переключатель получения рекламных сообщений за них. Маркетинг счастлив. Интересно, что при этом думает клиент?
Передача данных сайту
При попытке входа (нажатии на кнопку «Войти» в интерфейсе) открывается системный запрос на согласие использовать x5.ru для входа. И лишь после согласия мы переходим ко вводу телефона.
Для клиента это по сути лишний шаг, которого можно было бы избежать, перенеся интерфейс авторизации с сайта в контур приложения.
Для клиента это по сути лишний шаг, которого можно было бы избежать, перенеся интерфейс авторизации с сайта в контур приложения.
Активация ввода номера телефона
При переходе на страницу авторизации поле ввода телефона автоматически не активируется, хотя по сути это ключевое действие в рамках интерфейса. Это еще 1 лишний шаг на пути клиента.
Телефон vs. пароли
Нажав на поле ввода номера телефона появляется автоподсказка, позволяющая ввести сохраненный пароль – и не имеющая смысла в данном контексте.
Подстановка номера телефона
А вот что напрашивается на этом шаге вместо паролей, так это возможность подставить свой номер телефона в 1 касание и не вводить его вручную (10 тапов по клавиатуре).
Быстрая очистка введенного номера
Может быть так, что аккаунт у вас привязан к одному номеру, а вы по ошибке ввели другой и вспомнили об этом уже после того, как ввели его.
В таком случае в поле ввода не помешает наличие кнопки очистки номера, которая появлялась бы при вводе данных. Интерфейс она точно не перегрузит.
В таком случае в поле ввода не помешает наличие кнопки очистки номера, которая появлялась бы при вводе данных. Интерфейс она точно не перегрузит.
Кнопки переключения полей
При вводе номера телефона появляются кнопки переключения между полями ввода, которые продолжают оставаться неактивными и никакой функции не выполняют. Почему бы их не убрать?
Сохранение сеанса
Если клиент ранее уже входил в аккаунт в приложении, при повторном входе проверочный код вводить уже не требуется: вход происходит автоматически. Удобно.
Но повторный вход можно сделать ещё проще: запоминая сеанс, так чтобы клиенту не пришлось вводить и номер телефона. Пример реализации можно подсмотреть в Wildberries.
Но повторный вход можно сделать ещё проще: запоминая сеанс, так чтобы клиенту не пришлось вводить и номер телефона. Пример реализации можно подсмотреть в Wildberries.
Секретная помощь
Если у клиента возникли проблемы со входом, компания предлагает помочь. Вот только в Food.ru, несмотря на то, что половина экрана пуста, кнопка помощи доступна лишь при скролле.
Входящий vs. исходящий вызов
В описании X5ID говорится о том, что, помимо SMS-сообщения, авторизация в ряде случаев может проходить и с помощью входящего звонка.
Что это предполагает? Звонок, который перекрывает интерфейс. Необходимость запомнить минимум 4 цифры номера (иногда – 6), сбросить вызов и ввести их вручную в приложении.
В качестве альтернативы можно реализовать вход по исходящему звонку: нажимаешь на предложенный номер, подтверждаешь звонок, тебя сбрасывают – ты вошел. Итого всего 2-3 тапа для клиента.
Что это предполагает? Звонок, который перекрывает интерфейс. Необходимость запомнить минимум 4 цифры номера (иногда – 6), сбросить вызов и ввести их вручную в приложении.
В качестве альтернативы можно реализовать вход по исходящему звонку: нажимаешь на предложенный номер, подтверждаешь звонок, тебя сбрасывают – ты вошел. Итого всего 2-3 тапа для клиента.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
Визуализация сервисов
На странице с описанием X5ID сервисы можно представить не только в текстовом формате, но и снабдить их иконками, чтобы оживить интерфейс.
Активные ссылки в описании
А вот делать активными ссылки на другие сервисы, пожалуй, не стоит: так как это может увести клиента от того, что он изначально планировал сделать.
Все-таки в этот момент он пытается войти в Перекрёсток, а не посмотреть рецепты или мобильную версию сайта Vprok во встроенном в приложение Перекрёстка WebView.
Все-таки в этот момент он пытается войти в Перекрёсток, а не посмотреть рецепты или мобильную версию сайта Vprok во встроенном в приложение Перекрёстка WebView.
Мистическая звезда
Это, конечно, мелочь, но всё же: хоть кнопка закрытия карточки с описанием и гласит «Понятно», что означает звездочка после названий сервисов, непонятно – расшифровка отсутствует.
Закрытие страницы помощи
Если клиент решил закрыть страницу помощи, нажав не на ту кнопку «Назад», он закроет не её, а завершит весь процесс, включая очистку уже введенного номера телефона.
Написать vs. позвонить
Если возникли проблемы, можно связаться со службой поддержки. Само по себе это хорошо. Вот только клиенту предлагают написать, а вторая опция – это звонок.
Почтовый клиент
При попытке связаться по почте сервис открывает нативный почтовый клиент iOS, который у многих вызывает вопросы и который часто просто удаляют с девайса.
В качестве альтернативы, можно было бы реализовать перебор попыток открыть более часто используемые приложения (Gmail, Яндекс Почта, Mail и прочие) через URL-схемы.
Так клиент с большей вероятностью мог бы перейти в почтовое приложение, которое он использует, а если никакие из популярных приложений не установлены, открывался бы нативный клиент.
В качестве альтернативы, можно было бы реализовать перебор попыток открыть более часто используемые приложения (Gmail, Яндекс Почта, Mail и прочие) через URL-схемы.
Так клиент с большей вероятностью мог бы перейти в почтовое приложение, которое он использует, а если никакие из популярных приложений не установлены, открывался бы нативный клиент.
Переход в Telegram
При попытке связаться с поддержкой через Telegram сначала открывается мобильная версия сайта и лишь потом клиенту предлагают открыть его в приложении.
Учитывая, что приложение Telegram установлено уже у большинства клиентов, можно использовать прямую URL-схему перехода в Telegram в обход сайта: window.location.href = "tg://..."
Учитывая, что приложение Telegram установлено уже у большинства клиентов, можно использовать прямую URL-схему перехода в Telegram в обход сайта: window.location.href = "tg://..."
Помощь временно недоступна
Хорошо, что в других сервисах помощь в принципе получить можно. В вот в Food.ru при попытке связаться с компанией в принципе ничего не происходит. Хорошо хоть, что кнопка «назад» работает.
Подсветка при нажатии
В интерфейсе используется подсветка элементов при нажатии (tap highlight color), которая играет роль accessibility фичи, но, судя по фидбэку в сети, многих раздражает.
Эту реакцию интерфейса можно убрать, задав tap-highlight-color: transparent в CSS, и заменить на более приятные глазу реакции: например, анимированное вдавливание кнопок при нажатии.
Эту реакцию интерфейса можно убрать, задав tap-highlight-color: transparent в CSS, и заменить на более приятные глазу реакции: например, анимированное вдавливание кнопок при нажатии.
Ожидай в приложении
Если проверочный код по каким-то причинам не приходит, не беда: можно заказать его повторную отправку. Причем ждать нужно всего 30 секунд – и это плюс.
А минус в том, что переключиться куда-либо, пока ты ожидаешь обновления таймера с обратным отсчетом, не получится: он работает, только когда ты в приложении.
А минус в том, что переключиться куда-либо, пока ты ожидаешь обновления таймера с обратным отсчетом, не получится: он работает, только когда ты в приложении.
Активация поля с кодом
Как и в случае с полем ввода номера телефона, при переходе ко вводу кода поле не активируется по умолчанию, и клиенту требуется делать это вручную.
Окончания
В кнопке повторного запроса кода окончания слова «секунд» никак не меняются в зависимости от числа перед ними, хотя что-то мне подсказывает, что починить это возможно, и это не особо сложно.
Телефончик-то не твой
А вот если вы решили ввести чужой номер телефона – например, авторизовавшись в аккаунте близкого человека, чтобы добавить товары в общий заказ, или если у вас просто 2 телефона...
То вам предложат ввести свой номер телефона, но в поле ввода проверочного кода. Причем такая подсказка появляется именно здесь – вопрос. Если знаете причину, напишите в комментах.
То вам предложат ввести свой номер телефона, но в поле ввода проверочного кода. Причем такая подсказка появляется именно здесь – вопрос. Если знаете причину, напишите в комментах.
To be continued...
Как видим, даже гигантам рынка есть к чему стремиться. И это круто: делая свой большой, но пока неидеальный продукт ещё лучше, ты можешь позитивно повлиять на опыт миллионов людей.
Часто с разными коллегами мы спорим про казалось бы «мелочи». Но одно небольшое неудобство – здесь, другое – там. Третье, четвертое, пятое... десятое... И опыт уже сильно отличается от wow.
Поэтому, дорогие друзья, не устаю повторять мантру «small things can make a big difference». В погоне за стратегическими инициативами не забывайте и про детали.
Как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Часто с разными коллегами мы спорим про казалось бы «мелочи». Но одно небольшое неудобство – здесь, другое – там. Третье, четвертое, пятое... десятое... И опыт уже сильно отличается от wow.
Поэтому, дорогие друзья, не устаю повторять мантру «small things can make a big difference». В погоне за стратегическими инициативами не забывайте и про детали.
Как всегда, не забудьте поделиться этим постом с коллегами, которым материал может быть полезен. Всего наилучшего и до связи в следующих статьях.
Все статьи по e-commerce