Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

Проектируем авторизацию по номеру телефона в приложении

Лучшие практики UX/UI в мобильном e-commerce

180

гайдлайнов

Авторизация по номеру телефона используется в подавляющем большинстве e-com приложений, и через неё проходит основная доля клиентов, совершающих заказ.

Несмотря на кажущуюся простоту, процесс этот отличается от сервиса к сервису, и есть множество деталей, которые стоит учитывать, чтобы клиенту было удобно.

Сегодня мы разберем как хорошие практики, так и грабли, на которые не стоит наступать. Статья основана на анализе 200+ приложений.

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

Статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:

Общие моменты
Заголовок формы ввода номера
Placeholder поля ввода номера
Активация поля с номером
Ввод номера телефона
Кнопка подтверждения номера
Типы проверки номера
Подтверждение отправки sms
SMS с проверочным кодом
Ввод проверочного кода
Валидация и обработка ошибочного ввода
Повторная отправка кода

Общие моменты

5 гайдлайнов

Здесь я собрал несколько пунктов, которые важны, но не вписываются в следующие, более узконаправленные разделы.

Авторизация не блокирующая

Хотя авторизация и улучшает опыт клиента, дайте возможность тем, кто не хочет этого делать, пользоваться приложением и совершить покупку без нее.

Пример • Кофемания

Единый процесс авторизации

Объедините процессы регистрации и входа на шаге ввода номера, проверяйте клиента в базе и ведите в нужный flow. Пусть он не вспоминает, регистрировался он у вас или нет.

Пример • Wildberries

Без лишнего шума

Лучше вывести процесс ввода номера на отдельный экран. Не размещайте поле ввода наравне с прочими элементами неавторизованной зоны: это может размыть фокус внимания.

Пример • Lamoda

Без captcha

По возможности откажитесь от необходимости ввода captcha и reCaptcha. Как минимум в случаях, когда клиент не демонстрирует какое-то странное поведение.

Пример • Sela

Альтернативные способы авторизации

Хорошей практикой будет, помимо входа по номеру, также предоставить клиенту и возможность войти другими способами: через соцсети, почтовые сервисы, Apple ID и т.д.

Пример • SimpleWine

Заголовок формы ввода номера

10 гайдлайнов

Достаточно большой

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

Пример • Baon

Содержит призыв к действию

Базовый момент: в заголовке экрана ввода номера телефона лучше разместить призыв целевому действию: ввести номер.

Пример • ВкусВилл

Подсвечивает ценность

Кроме призыва к действию, нелишним также будет еще и подсветить, что авторизация даст клиенту, какую ценность он получит, зарегистрировавшись или войдя в профиль.

Пример • Додо Пицца

Конкретизация ценности

Если вы мотивируете клиента авторизоваться с помощью бонусов, хорошо, если вы подсветите не абстрактные "бонусы", а конкретное их число, которое он получит.

Пример • Эльдорадо

Сопровождается пояснением

Хорошей практикой будет дополнить заголовок пояснением о следующих шагах в рамках процесса авторизации, чтобы лучше управлять ожиданиями клиента.

Пример • Ecomarket

Отталкивается от позитива

В заголовке и пояснении лучше отталкиваться от позитива и подсвечивать, что клиент получит от авторизации, чем то, чем он не сможет воспользоваться, если этого не сделает.

Пример • Baon

Highlight приватности

В наши дни, когда персональные данные клиентов часто утекают в сеть, подсветить, что сервис ответственно относится к вопросу приватности, может быть нелишним.

Пример • Broniboy

Highlight скорости процесса

Если процесс авторизации в вашем приложении простой и не займёт много времени, подсветить этот факт заранее также может быть полезно.

Пример • Улыбка Радуги

Без дублирования посыла

Если вы уже призвали клиента ввести номер телефона в заголовке, дублировать эту информацию в пояснении не имеет особого смысла.

Пример • Магнолия Доставка

Консистентная тональность

Заголовок с призывом к вводу номера телефона лучше выполнить в той же тональности, что и во всех остальных частях приложения.

Пример • Rostic's

Placeholder поля ввода номера

11 гайдлайнов

Добавлен в поле

Для облегчения понимания placeholder в поле ввода номера телефона все же лучше добавить.

Пример • igooods

Не дублирует заголовок

Если в заголовке вы уже призвали пользователя ввести номер телефона, дублировать этот посыл в placeholder'е может быть излишне.

Пример • TSUM Collect

Отличается от вводимого текста

Текст placeholder'а должен отличаться от вводимого текста, чтобы не ввести пользователя в заблуждение. Чаще всего для этого его делают полувыцветшим.

Пример • Маркет Деливери

Выровнен по вертикали

Базовый момент: placeholder будет более гармонично смотреться, если он будет выровнен по вертикали и не будет прилипать к верхней либо нижней границам поля.

Пример • Street Beat

В формате номера телефона

Хорошая практика – подсветить в placeholder'е формат ввода номера: это позволит сделать интерфейс более интуитивным.

Пример • Каталог КБ

Цифры в номере placeholder'а

Часто после +7 в качестве символов на российском рынке можно встретить нули либо девятки.

Пример • Дикси

Цифры единообразны

Лучше если номер в placeholder'е будет состоять из одних и тех же цифр, чтобы не создавать дополнительной когнитивной нагрузки на пользователя.

Пример • Шаверма по-питерски

Использование прочих символов в номере

Это может быть воспринято, как вкусовщина, и это мое личное мнение. Но символы Х вместо цифр в номере телефона визуально смотрятся менее выигрышно.

Пример • Baon

Placeholder – только маска?

Встречаются кейсы, когда вместо номера в placeholder'е оставляют только маску форматирования. Что думаете по этому поводу? Плюсы/минусы? Жду в комментах.

Пример • Буше

Без хайлайта обязательности

Если на экране у вас есть лишь одно поле, которое нужно заполнить, подсвечивать факт обязательности в placeholder'е с помощью звездочки – излишне.

Пример • Столплит

Постепенное исчезновение placeholder'а

Если в качестве placeholder'а используется номер телефона, интересная механика – отображать оставшиеся символы placeholder'а по мере ввода номера пользователем.

Пример • ВкусВилл

Активация поля с номером

6 гайдлайнов

Автоактивация

Поле ввода номера телефона при переходе к экрану можно активировать автоматически, чтобы клиенту не приходилось делать это самому.

Пример • М.Видео

Код страны введен по умолчанию

Если вы поддерживаете только российские номера, +7 можно отображать по умолчанию – это упростит задачу ввода данных для клиента.

Пример • МегаМаркет

Хайлайт страны флагом

Некоторые сервисы дополнительно подсвечивают код страны с помощью флага. Это позволяет облегчить восприятие для пользователя.

Пример • No One

Наличие первой девятки?

Пункт дискуссионный: хотя первая 9 и есть во всех российских номерах, начать ввод с 916 может быть более привычно, чем с 16.

Пример • Утконос

Поле выделяется

При активации поле можно ненавязчиво подсветить, сместив на него фокус внимания пользователя.

Пример • Детский мир

Поле не выглядит неактивным

И уж точно поле не должно выглядеть так, будто оно неактивно и не поддерживает ввод данных.

Пример • Бронницкий Ювелир

Ввод номера телефона

16 гайдлайнов

Без повторного ввода: UserDefaults

Если клиент вышел из аккаунта и решил зайти снова (при этом не удаляя приложение), его номер можно сохранять на устройстве и предлагать его при повторной авторизации.

Пример • Wildberries

Без повторного ввода: Device ID

Даже если клиент удалил приложение, его можно запоминать по Device ID и вставлять номер по умолчанию при повторной установке и попытке входа.

Пример • Ozon

Без переключения раскладки

Не отображайте символьную раскладку при вводе номера телефона. Не заставляйте пользователя отдельно переключать ее.

Пример • Буквоед

Фиксация раскладки

Лучше всего при вводе номера телефона зафиксировать раскладку клавиатуры на числовой без возможности ее менять. Другие раскладки все равно не понадобятся.

Пример • Яндекс.Маркет

Автоподстановка сохраненных данных

Промаркируйте поле ввода, как phone number, на уровне среды разработки, чтобы клиент мог вставить сохраненный на девайсе номер телефона в 1 касание.

Пример • Burger King

Без разных типов данных

Лучше не объединять ввод номера телефона, email’а, номера карты лояльности и т.д. в одном поле: это делает его автозаполнение невозможным.

Пример • Lamoda

Тип данных корректен

Убедитесь, что поле ввода промаркировано именно как номер телефона. Подстановка других типов данных будет бесполезной.

Пример • Лента

Использование меню над клавиатурой

Меню над клавиатурой лучше использовать именно для вставки сохраненного номера телефона. Другие варианты его использования будут гораздо менее полезны.

Пример • Flor2U

Код страны vs. вставка номера

Если код страны отображается по умолчанию, реализуйте корректную обработку вставки сохраненного номера, чтобы код удалялся из вставляемого текста.

Пример • Sunlight

Форматирование ввода

Хорошая практика – форматировать введенный номер телефона, чтобы клиенту его легче было проверить. Это снизит вероятность ошибочного ввода.

Пример • belle you

Ограничение по числу символов

В зависимости от кода страны можно ограничивать ввод по количеству символов. Это также позволит сократить шансы на ошибку.

Пример • Rendez-Vous

Курсор отображается при вводе

Базовый момент: отображайте курсор при вводе номера телефона. Его отсутствие может дезориентировать пользователя.

Пример • KDV Online

Быстрая очистка поля

Если клиент по ошибке ввел не тот номер, реализуйте возможность быстрой очистки поля, чтобы ему не пришлось стирать текст символ за символом.

Пример • РИВ ГОШ

Видимость кнопки очистки

Кнопка очистки должна появляться, только если поле заполнено. В противном случае в ее наличии не будет смысла.

Пример • Зоозавр

Кнопка очистки визуально вторична

Функция кнопки очистки ввода номера телефона вторична относительно целевого действия. Это должно отражаться и в том, как она выглядит.

Пример • Sunlight

Стирание символов форматирования

При стирании номера вручную символы форматирования лучше удалять автоматически, чтобы не создавать лишних действий для клиента.

Пример • Галамарт

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

Кнопка подтверждения номера

17 гайдлайнов

Проверка при нажатии на кнопку

Лучше не высылать код сразу же при вводе нужного числа символов в номере: у клиента должна быть возможность проверить его и подтвердить действие, нажав на кнопку.

Пример • METRO

Достаточно большая

Сделайте кнопку достаточно большой, чтобы клиент не испытывал затруднений, пытаясь нажать на нее.

Пример • Буше

Легко дотянуться

Разместите кнопку в нижней части экрана, чтобы клиенту не приходилось далеко тянуться до нее пальцем.

Пример • SimpleWine

Активна по умолчанию?

Как считаете, стоит ли делать кнопку активной по умолчанию, когда номер еще не введен? Поделитесь своим мнением в комментах.

Пример • СберМаркет

Без общего текста

Лучше избегать общих формулировок в тексте кнопки (продолжить, далее и т.д.). Есть и более полезные альтернативы.

Пример • Утконос

Целевое действие понятно

Убедитесь, что целевое действие из текста кнопки будет понятно клиенту и не будет вызывать каких-либо вопросов.

Пример • Духи.рф

Управление ожиданиями в тексте

В тексте кнопки можно подсветить следующий шаг: что произойдет после того, как клиент нажмет на нее?

Пример • SimpleWine

Highlight типа проверки

Хорошей практикой будет не просто рассказать про следующий шаг, а еще и подсветить тип проверки: будет это SMS или входящий звонок.

Пример • FlowWow

Текст vs. следующий шаг

Управление ожиданиями должно быть корректным: после ввода номера мы еще не входим в личный кабинет, а лишь переходим ко вводу проверочного кода.

Пример • ЦЕХ85

Подсказка, если номер не введен

Если номер телефона еще не введен, текст кнопки может содержать призыв это сделать.

Пример • Stockmann

Размер текста vs. кнопки

Спроектируйте кнопку так, чтобы текст соотносился по размеру с контейнером: не был слишком мелким или слишком крупным.

Пример • ВсеИнструменты.ру

Кнопка не перекрывается клавиатурой

Если кнопка перекрывается экранной клавиатурой при вводе, для перехода к следующему шагу придется отдельно ее скрывать. А это лишнее действие для клиента.

Пример • Иль де Ботэ

Кнопка – часть клавиатуры

Встречаются кейсы, когда меню над клавиатурой кастомизируют, добавляя в него кнопку перехода к следующему шагу. Решение неплохое.

Пример • Эльдорадо

Без дублирования кнопки

При этом нет особого смысла в том, чтобы добавлять кнопку в меню над клавиатурой, когда основная кнопка и так видна.

Пример • Магнит

Вход vs. регистрация

Вместо того чтобы заставлять клиента вспоминать, есть у него учетная запись или нет, лучше обойтись одной кнопкой, проверять номер «под капотом» и вести его по нужному flow.

Пример • Яндекс.Маркет

Кнопка – отдельный объект

Кнопку на экране лучше реализовать в виде отдельного объекта. Лучше если она не будет прилипать и не будет являться составной частью поля ввода.

Пример • Холодильник.ру

Выбор типа проверки номера

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

Пример • Gipfel

В статье я обошел вниманием согласие с политикой конфиденциальности. Но о всех нюансах, с ней связанных, есть отдельный большой материал.

Типы проверки номера

7 вариантов

Получение кода по sms

Хотя это и может быть дороже для бизнеса, для клиента более удобно получить код именно по sms, так как работает автоподстановка и ввести его можно в 1 касание.

Пример • М.Видео

Получение кода через push

Способ даже удобнее, чем sms, т.к. приложение может само обрабатывать входящий push, вставлять его и проводить проверку: клиенту вообще не требуется ничего делать.

Пример • Мой Ашан

Проверка через Telegram

Некоторые сервисы проверяют подлинность номера через Telegram: нужно лишь активировать бота и поделиться контактами в 1 тап.

Пример • Шаверма по-питерски

Использование FaceID

Авторизацию можно упростить за счет биометрии: подключив FaceID, клиенту при входе в аккаунт не потребуется вводить номер: достаточно будет лишь взглянуть на смартфон.

Пример • Ozon

Последние цифры номера при входящем звонке

Этот метод менее удобен: звонок более заметен, чем sms (а это часто может быть неудобно), клиенту приходится запоминать цифры номера и вводить их вручную.

Пример • AliExpress

Проверка через код от автоответчика

Этот способ еще менее удобен, так как приходится не только запоминать код, но и отвечать на звонок. А это удобно далеко не во всех случаях.

Пример • FARFOR

Вход по паролю

Это устаревающая и менее удобная практика. Часто пароль длиннее, чем код, его легко можно забыть и шанс того, что он будет сохранен в KeyChain у клиента – далеко не 100%.

Пример • Авито

Подтверждение отправки sms

14 гайдлайнов

Предусмотрено

Базовый момент: при переходе к шагу ввода кода имеет смысл подсветить, факт того, что sms было отправлено.

Пример • Gipfel

Визуально вторично

Текст подтверждения – не ключевой элемент экрана, поэтому не должен визуально «кричать».

Пример • Духи.рф

Однозначно

Лучше указывать, какой именно способ проверки кода будет применен: не оставляйте клиента в неведении.

Пример • Улыбка Радуги

Содержит номер телефона

В подтверждение также можно добавить номер телефона, на который был отправлен код. Это позволит клиенту лишний раз его проверить.

Пример • Леонардо

Номер выделен

Ненавязчиво выделяя номер телефона в тексте подтверждения, вы повышаете его заметность и упрощаете проверку.

Пример • DNS

Номер форматирован

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

Пример • Askona

Номер не разбит на части

Спроектируйте текст подтверждения так, чтобы номер не переносился на новую строку и не разбивался на части. Это усложнит его проверку.

Пример • Adamas

Номер не скрыт

Скрывать номер телефона, на который отправлен код, не совсем целесообразно, так как клиент не сможет его проверить.

Пример • Бронницкий Ювелир

Возможность изменить номер

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

Пример • СберМаркет

Иллюстрация

Текст подтверждения отправки sms можно дополнительно иллюстрировать, подсветив формат сообщения.

Пример • Sunlight

Highlight срока доставки

Если sms может быть доставлена с задержкой, это можно подсветить, чтобы клиент не подумал раньше времени, что произошла ошибка.

Пример • Henderson

Без срока действия кода

Использовать срок действия кода и добавлять в текст таймер. Его легко спутать с таймером повторной отправки и сам по себе он может отвлечь внимание клиента.

Пример • Novex

Без указания числа символов

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

Пример • Uzum Market

Без лишних слов

Чем меньше текста, тем лучше. Если клиент и так уже ввел свой номер, слово «телефона» в подтверждении можно опустить.

Пример • Кофемания

SMS с проверочным кодом

18 гайдлайнов

Сообщение приходит быстро

Отправка sms по возможности должна осуществляться моментально, без каких-либо значимых задержек для пользователя.

Пример • СберМаркет

Отправитель понятен клиенту

Выбирая имя отправителя, убедитесь, что оно не будет создавать дополнительной когнитивной нагрузки.

Пример • Вкусно – и точка

Отправитель – название бренда

Чтобы избежать проблем с восприятием, в качестве отправителя sms лучше указать название бренда.

Пример • Sunlight

Код в начале текста sms

Код лучше разместить в начале текста, чтобы он был виден в уведомлении, когда sms будет получено, и клиент смог увидеть его без необходимости открывать сообщение.

Пример • Мой Ашан

Код корректно распознается

Базовый момент: код должен распознаваться операционной системой именно как проверочный код, а не данные другого типа.

Пример • Триал-Спорт

Пояснение к коду

Хорошей практикой будет сопроводить код из пояснением, для чего именно он нужен. Как минимум число символов в одном sms позволяет это сделать.

Пример • Магнолия

Без транслитерации

Хотя транслитерация и позволяет увеличить число символов в сообщении, лучше отправлять sms с более кратким текстом, но на языке клиента. Это позволит облегчить восприятие.

Пример • Wildberries

Без специфических терминов

В тексте лучше не употреблять терминов, которые могут быть непонятны части клиентов. Как видим в примере, компания со временем делает текст более понятным для большинства.

Пример • Золотое Яблоко

Без сокращений

Как и в случае с терминами, которые могут быть непонятны широкой аудитории, от сокращений в тексте SMS также лучше воздержаться, чтобы облегчить восприятие.

Пример • IDOL

Адаптация под контекст целевого действия

Имеет смысл подсветить не только что это проверочный код, но и контекст целевого действия: для чего именно он используется.

Пример • BAON

Адаптация под контекст источника запроса

Текст sms лучше адаптировать под источник запроса и пояснять, для входа куда именно используется код.

Пример • Sokolov

Адаптация под стадию customer journey

Также текст в sms должен учитывать, на какой стадии пути находится клиент. Если я уже являюсь клиентом, не стоит присылать мне код для регистрации в личном кабинете.

Пример • Flor2U

Без дублирования названия сервиса

Название сервиса имеет смысл дублировать только если оно транслитерировано в названии отправителя. Дублировать его в тексте один-в-один нет смысла.

Пример • Магнит

Без перехода на сайт

Если клиент запросил код в приложении, добавлять ссылку на сайт имеет смысл, только если deep link перекинет его именно в приложение, а не в мобильную версию сайта.

Пример ● Cozy Home

Аспект безопасности

При отправке кода нелишним будет подсветить, что в целях безопасности лучше никому его не сообщать.

Пример • М.Видео

Сообщение о безопасности вторично

При этом сообщение о безопасности не стоит выносить, как основной посыл в тексте. Оно должно лишь дополнять основной посыл.

Пример • Мой SPAR

Без согласия с политикой

Редко в sms также можно встретить и согласие с условиями программы лояльности. Текст этот более уместно разместить на первом шаге процесса авторизации.

Пример ● Подружка

Highlight срока действия?

Как считаете, насколько ценно и полезно будет клиенту узнать в sms, в течение какого срока будет действовать проверочный код? Поделитесь мнением в комментах.

Пример • FlowWow

Ввод проверочного кода

27 гайдлайнов

На отдельном экране

Ввод кода – отдельный шаг, и лучше выделить под него отдельный экран. В противном случае можно перегрузить интерфейс.

Пример • Respect

Полноэкранный интерфейс

Ввод кода лучше реализовать в формате полного экрана, чтобы не отвлекать клиента от ввода фоновыми элементами, как в случае с попапом.

Пример • ЦУМ

Призыв к действию в заголовке

Заголовок можно выполнить в формате призыва к действию – вводу проверочного кода.

Пример • Спортмастер

Без дублирования заголовка

Базовый момент: в том, чтобы дублировать один и тот же посыл в 2 смежных label’ах, смысла особого нет.

Пример • Л'Этуаль

Код числовой

Код лучше сделать именно числовым. Делая его буквенным, еще и сообщая его во входящем звонке, мы рискуем, что у клиента возникнут проблемы.

Пример • Жизньмарт

Автоактивация поля

Ввод кода – ключевое действие на данном шаге. Поэтому поле можно активировать автоматически: избавим клиента от необходимости совершать лишнее действие.

Пример • Пятёрочка

Автоподстановка кода

Поле должно быть промаркировано, как one-time code, на уровне среды разработки. Это позволит клиенту ввести код в 1 тап из автоподсказки при получении sms.

Пример • Спортмастер

Цифровая раскладка клавиатуры

Как и в случае с номером телефона, лучше фиксировать клавиатуру при вводе кода именно на цифровой раскладке: остальные раскладки будут нерелевантны.

Пример • Буквоед

Стандартное текстовое поле?

В случае с вводом кода лучше не использовать стандартное текстовое поле: интерфейс будет смотреться слишком скомкано.

Пример • 12STOREEZ

Слоты для ввода кода

Гораздо чаще для задачи ввода кода используются слоты: они и глазу более приятны, и подсвечивают своим видом, сколько символов будет в коде.

Пример • Flor2U

Размер слотов

Свободного пространства при вводе кода много, поэтому можно не мельчить и сделать слоты достаточно большими. 50-70% пространства по ширине будет вполне нормально.

Пример • Burger King

Поле выглядит активным

Базовый момент: спроектируйте дизайн поля так, чтобы оно не воспринималось, как неактивное, вводя клиента в заблуждение.

Пример • Леонардо

Без счетчика символов

Количество слотов и так уже говорит за себя. Отдельно отображать, сколько символов осталось ввести, будет излишне.

Пример • Sokolov

Количество символов в коде

По возможности не мучайте клиента необходимостью вводить длинный проверочный код. 4 символов будет вполне достаточно.

Пример • Юла

Горизонтальное центрирование

Так как на этом шаге в интерфейсе элементов немного, ключевое поле лучше центрировать по горизонтали. В противном случае смотреться оно будет неидеально.

Пример • Fitness Formula

До поля легко дотянуться пальцем

В случае, если автоактивация поля по какой-то причине не предусмотрена, как минимум разместите его на экране так, чтобы до него было легко дотянуться пальцем.

Пример • Леонардо

Размер поля vs. контента

Спроектируйте поле так, чтобы его размер соответствовал размеру контента, который в него вводится. Большие пустые области будут смотреться не лучшим образом.

Пример • Самокат

Наличие курсора

При активации поля должен появляться курсор. Иначе есть риск, что клиент не поймет, что оно активировано.

Пример • МегаМаркет

Позиция курсора по умолчанию

При активации поля курсор должен находиться на первом слоте. Иначе можно ввести клиента в заблуждение.

Пример • Sokolov

Текущий слот выделяется

Текущий слот лучше специально выделить на фоне остальных, чтобы клиент понимал, на каком этапе ввода он находится в данный конкретный момент.

Пример • Бристоль

Видимость введенных символов

Как считаете, насколько обоснованно скрытие символов проверочного кода при авторизации? Какие у этого есть плюсы и минусы? Напишите в комментах.

Пример • Poison Drop

Автоматическая проверка

В отличие от телефона, который перед отправкой кода имеет смысл проверить, проверку кода лучше осуществлять автоматически при вводе нужного числа символов.

Пример • Спортмастер

Согласие на обработку данных?

Как считаете, есть ли смысл размещать согласие на обработку персональных данных именно при вводе кода? Напишите в комментах.

Пример • ЦУМ

Сообщение о безопасности?

Как считаете, стоит ли в интерфейсе ввода кода сообщать о том, чтобы клиент никому его не сообщал? Важный момент или перебор? Обсудим в комментах?

Пример • Burger King

Возврат через кнопку «назад»

Предусмотрите возможность вернуться с шага ввода кода к экрану ввода номера телефона. Чаще всего это реализуется за счет кнопки «назад».

Пример • BUNGLY

Возврат через edge swipe

Также нередко можно встретить поддержку левого бокового свайпа для возврата на 1 шаг назад.

Пример • Утконос

Возврат через кнопку смены номера

Кроме того, возможность возврата можно предусмотреть за счет добавления кнопки смены номера, если пользователь заметил, что ошибся.

Пример • igooods

Валидация и обработка ошибочного ввода

34 гайдлайна

Проверка кода осуществляется

Базовый момент: проверка кода должна осуществляться корректно. У всех она работает? Нет, не у всех.

Пример • Respect

Скорость проверки кода

Проверка должна осуществляться моментально, без какой-либо значимой задержки для клиента.

Пример • Яндекс.Еда

Анимация во время проверки

Если проверка все же занимает какое-то время, ожидание можно скрасить ненавязчивой анимацией.

Пример • KDV Online

Без сбоев в процессе авторизации

Еще один базовый момент, но и он встречается: если код неверный, процесс не должен вылетать полностью. Клиент не должен начинать все с первого шага.

Пример • INCITY

Сообщение об ошибке присутствует

Если пользователь допустил ошибку при вводе кода, хорошо бы не просто стереть его, но и сообщить ему о том, что ошибка произошла. Не так ли?

Пример • Впрок

Цветовая индикация ошибки

В случае ввода неверного кода желательно, чтобы в интерфейсе появлялся красный цвет, который лучше всего ассоциируется с ошибкой.

Пример • Sokolov

Highlight поля

Первый пример цветовой индикации – выделение поля ввода красным цветом. Чаще всего выделяется обводка.

Пример • Burger King

Highlight символов

Можно выделять и сами символы. Это позволит хорошо привлечь внимание к выеденным данным.

Пример • Яндекс.Еда

Highlight текста ошибки

Очень часто встречающаяся практика – выделить сообщение об ошибке красным цветом, привлекая внимание именно к нему.

Пример • FlowWow

Иконка в сообщении об ошибке

Часть клиентов могут испытывать проблемы с различением цветов. В этом случае помочь привлечь внимание может небольшая иконка, добавленная в сообщение.

Пример • Бристоль

Иконка релевантна контексту

При этом лучше выбрать иконку, которая соответствует ошибке или предупреждению (крестик или восклицательный знак). Иконка информации ( i ) в данном контексте будет менее уместной.

Пример • BUNGLY

Изменение иллюстрации

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

Пример • Ярче Плюс

Анимация ошибки

Восприятие также можно улучшить, дополнив изменение цвета анимацией (например, дрожанием символов).

Пример • SUNLIGHT

Констатация факта ошибки

Первое, что должно быть в сообщении – констатация факта, что произошла ошибка.

Пример • O'STIN

Конкретизация проблемы

Не стоит делать текст слишком общим. Вместо того, чтобы сказать, что «что-то пошло не так», уточните, в чем именно заключается проблема.

Пример • Novex

Призыв к действию

Помимо того, чтобы просто констатировать факт ошибки, клиенту можно предложить ее решение, подсказав, как ее скорректировать.

Пример • МегаМаркет

На языке клиента

Убедитесь, что сообщение отображается на том же языке, что и остальной интерфейс приложения. Иначе это может вызвать проблемы с восприятием.

Пример • Линии любви

Текст понятен широкому кругу клиентов

Используйте общепринятые формулировки. "Введен некорректный код" будет понятно более широкому кругу клиентов, чем "не валидные данные".

Пример • IDOL

Соответствует Tone-of-Voice сервиса

Сообщение об ошибке в коде должно соответствовать по тональности всего сервиса. Если вы в целом общаетесь с клиентом на "ты", то и здесь можно покреативить.

Пример • Достаевский

Без системного текста

И уж точно что не должно встречаться в текстах ошибок – это кусок системного кода, который 99% пользователей разобрать не смогут.

Пример • Золото 585

Широкий спектр ошибок

Если пара номер-код не срабатывает, проблема может крыться не только в коде, но и в том, что номер указан с ошибкой. И то, и то можно отразить в тексте сообщения.

Пример • Сантехника-Онлайн

Текст ошибки рядом с полем ввода

Если текст ошибки – часть основного экрана, лучше разместить его рядом с полем, в котором она допущена.

Пример • Акушерство

Текст ошибки не прилипает к полю

При этом не стоит располагать текст максимально близко к полю ввода – так, что он начинает визуально "прилипать" к нему.

Пример • Cozy Home

Текст ошибки не дублируется

Как считаете, уместно ли дублировать текст ошибки в рамках одного экрана. Я считаю, что нет, но рад буду услышать ваше мнение в комментах.

Пример • СберМаркет

Текст ошибки легко читается

Убедитесь, что текст ошибки располагается на однотонном контрастном фоне и выполнен в достаточно большом размере шрифта, чтобы облегчить восприятие при чтении.

Пример • Flor2U

Фокус на поле ввода при ошибке

При ошибочном вводе поле не должно деактивироваться: лучше, если у клиента будет возможность сразу продолжить ввод.

Пример • Азбука Вкуса

Очистка поля ввода при ошибке

В отличие от номера телефона, поле ввода кода в случае ошибки лучше очищать. Особенно если символы скрыты.

Пример • ADAMAS

Кнопка очистки поля?

Хотя кнопка очистки поля и полезна в полях с большим количеством символов, при вводе короткого кода такая кнопка может быть излишней. Встречается очень редко.

Пример • Cozy Home

Текст ошибки исчезает при начале корректировки

После того как некорректные данные уже стерты и клиент начал ввод нового кода, текст ошибки лучше скрывать, чтобы не вводить его в заблуждение.

Пример • Эльдорадо

Ошибка исчезает со временем

Если используется всплывающая плашка с сообщением поверх основного экрана, она может пропадать сама через несколько секунд.

Пример • Бетховен

Визуальный таймер исчезновения ошибки

Плашку сообщения с ошибкой также можно снабдить progress bar’ом, который ненавязчиво подскажет, когда оно исчезнет.

Пример • igooods

Сообщение не блокирует экран

Несмотря на то, что сообщение об ошибке должно привлекать внимание, оно не должно блокировать интерфейс и перекрывать собой другие его ключевые элементы.

Пример • BUNGLY

Сообщение не требует лишних действий

Более того, сообщение об ошибке не должно вынуждать клиента совершать лишние действия и не должно требовать закрытия.

Пример • Бронницкий Ювелир

Количество оставшихся попыток?

Некоторые сервисы в случае ошибки подсвечивают, сколько у клиента осталось попыток. Как считаете, это больше плюс, чем минус или наоборот? Поделитесь мыслями в комментах.

Пример • Мой SPAR

Повторная отправка кода

15 гайдлайнов

Возможность предусмотрена

Если клиент по какой-то причине не получил SMS с кодом, дайте ему возможность запросить повторную отправку.

Пример • Wildberries

Функция визуально вторична

Действие заказа повторной отправки SMS все же вторично при вводе кода, поэтому и соответствующие элементы интерфейса могут быть визуально вторичны.

Пример • SimpleWine

Текст корректен

Базовый момент: текст о повторной отправке кода должен быть корректен, и его части должны быть согласованы между собой.

Пример • М.Видео

Длительность таймера

Не заставляйте клиента ждать возможности повторной отправки слишком долго. 30 секунд будет достаточно, чтобы SMS дошло.

Пример • Галамарт

Таймер работает всегда

Также не стоит заставлять клиента находиться именно на экране авторизации. У него должна быть возможность переключиться на другие приложения, и таймер должен идти.

Пример • Мой Ашан

Визуализация таймера

Таймер в текстовом формате также можно визуализировать. Это позволит улучшить восприятие.

Пример • Азбука Вкуса

Контакты поддержки

Если клиент повторно запрашивает SMS, а оно всё не приходит, не стоит оставлять его с проблемой один-на-один: дайте ему возможность связаться с поддержкой.

Пример • Азбука Вкуса

Часы работы поддержки

Если служба поддержки работает не круглосуточно, также можно ненавязчиво подсветить часы ее работы. Это позволит лучше управлять ожиданиями клиента.

Пример • O'STIN

Поддержка в контуре приложения

Отдельно стоит заметить, что хорошей практикой будет дать клиенту возможность решить свой вопрос, не покидая контур приложения.

Пример • ВкусВилл

Видимость кнопки повторной отправки

Раз уж на кнопку повторной отправки во время ожидания таймера нельзя нажать, можно ее и не отображать. Это позволит разгрузить интерфейс.

Пример • Сантехника-Онлайн

Таймер в кнопке

Если кнопка все же отображается, ее можно объединить с таймером. Это позволит оптимизировать пространство.

Пример • МегаМаркет

Таймер не оторван от текста

Основной текст и таймер повторной отправки должны восприниматься как единое целое. Не стоит разбивать их визуально на 2 отдельных элемента.

Пример • Кофемания

Highlight таймера

Таймер в тексте можно специально выделить: это позволит облегчить восприятие информации.

Пример • КуулКлевер

Формат таймера при длительном сроке

Если таймер обнуляется в течение нескольких минут, лучше реализовать его в формате мм:сс. Ожидать 4:59 субъективно менее болезненно, чем 299 сек.

Пример • Улыбка Радуги

Повторная отправка в WhatsApp

Если sms по каким-то причинам не приходит, некоторые сервисы также позволяют клиенту запросить код через WhatsApp. Это повышает шансы на успешную авторизацию.

Пример • Ecomarket

To be continued...

Как видим, в процессе авторизации по номеру телефона есть множество нюансов, которые стоит учитывать. И именно нюансы зачастую становятся причинами успехов и фэйлов.

Надеюсь, эта статья поможет вам почерпнуть хороших идей для улучшения интерфейса и развить свою насмотренность.

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

Все статьи по e-commerce