I am ready for a long road flight for work with a week- or months-long projects.
АВТОРИЗАЦИЯ ПО НОМЕРУ ТЕЛЕФОНА
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
130
ГАЙДЛАЙНОВ
Сегодня мы погрузимся в микро-мир и разберем процесс авторизации по номеру телефона. Казалось бы, что может быть проще? Ввел номер – ввел код – успех? Не тут-то было. Хороший customer experience от плохого отделяет множество нюансов и тонкостей.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. ИНТЕРФЕЙС ВВОДА НОМЕРА
Интерфейс не перегружен
Если от клиента требуется лишь ввести номер телефона и проверочный код, не стоит перегружать интерфейс какими-либо сторонними элементами.
Мобильная оптимизация
Оптимизируйте интерфейс авторизации под доступ с мобильных устройств. В противном случае клиент вам спасибо точно не скажет.
Призыв в заголовке
Вместо просто существительного реализуйте заголовок страницы в формате призыва к действию, чтобы он более гармонично вписывался в интерфейс.
Highlight преимуществ
Повысить вероятность регистрации можно за счет подсвечивания преимуществ, которыми обладают авторизованные пользователи.
Регистрация + авторизация
Совместите функционал регистрации и авторизации по номеру телефона в одном интерфейсе – это сократит ошибки ввода данных не в ту форму.
Без пароля
При авторизации по номеру телефона по возможности используйте именно проверочный код, а не пароль: и более безопасно, и пароль запоминать не потребуется.
Без фоновой прокрутки
Если вы используете всплывающее окно для авторизации, отключайте в этот момент прокрутку фоновой страницы – она там будет совсем не к месту:
Локализация
Если у вашего сервиса есть иностранные клиенты, будет хорошо, если вы дадите им возможность переключения языка интерфейса при авторизации.
Управление ожиданиями
Рядом с полем ввода номера можно разместить текст о том, что на вводимый номер будет выслан код. Это позволит лучше управлять ожиданиями клиента.
Без указания обязательности
Используйте звездочки только там, где они имеют смысл. Помечать звездочками 2 поля на экране – телефон и проверочный код – излишне:
Без reCaptcha
Не заставляйте клиента страдать, доказывая, что он не робот: уберите reCaptcha с экрана авторизации. Другие же как-то без этого живут.
Без внутренней кухни
Какая часть клиентов у вас авторизуется многократно за 1 час? А какая часть столкнется с ненужным им блоком текста? Внутреннюю кухню с ограничениями лучше не показывать.
Чужой компьютер
Если клиент заходит в личный кабинет с чужого ПК, дайте ему возможность указать это, чтобы данные не сохранялись в браузере.
Призыв к режиму инкогнито
В некоторых случаях клиенту в окне авторизации можно отдельно подсказать, что на чужом ПК авторизовываться лучше, переведя браузер в режим инкогнито.
Визуальное сопровождение
В некоторых сервисах ввод данных можно дополнять лаконичной визуализацией. И выглядит симпатично, и интерфейс особо не перегружает.
Альтернативные способы
Если клиенту по какой-то причине не удобно авторизоваться с помощью телефона, дайте ему возможность сделать это другими способами.
2. ВВОД НОМЕРА ТЕЛЕФОНА
Адекватный размер поля
Спроектируйте поле ввода так, чтобы его размер соотносился с вводимыми данными. Иначе смотреться будет достаточно неуклюже:
Реакция на наведение
Сделайте так, чтобы поле ввода номера телефона ненавязчиво реагировало на наведение курсора, давая тем самым визуальную обратную связь.
Активация по умолчанию
Если ввод номера телефона – единственное целевое действие, поле ввода можно активировать по умолчанию. Сэкономите клиенту 1 клик.
Highlight активного поля
Когда поле активировано, его можно выделить, чтобы дать визуальную обратную связь и побудить клиента к вводу данных номера телефона.
Без совмещения типов данных
Иногда ввести в одно поле предлагают или телефон, или email. В итоге все возможности авто-подстановки упускаются, и приходится вводить данные вручную.
Авто-подстановка из браузера
Промаркируйте поле ввода как Phone и сделайте доступной авто-подстановку номера телефона сохраненными данными из браузера в 1 клик.
Корректная маркировка
Если клиент находится в процессе ввода номера телефона и хочет воспользоваться авто-подстановкой, он не ожидает, что ему предложат вставить что-то еще.
Сохраненные номера
Если клиент уже авторизовывался и данные сохранены в кэше браузера, ему можно предложить их выбрать в 1-2 клика.
Данные вставляются корректно
Убедитесь, что авто-подстановка работает корректно. Иначе, помимо ввода, клиенту еще и придется вручную стирать номер, вставленный с ошибкой.
Код страны
Отображайте код страны по умолчанию, чтобы клиенту не приходилось его вводить. Корректно обрабатывайте ввод номера и с кодом страны, и без него.
Форматирование ввода
При вводе номера телефона форматируйте его автоматически в общепринятой форме, чтобы клиенту легче было его проверить. Например, за счет пробелов:
Форматирование vs. backspace
Стирайте символы форматирования автоматически при нажатии на backspace. Не заставляйте клиента стирать их самому, если он хочет скорректировать номер.
Быстрая очистка
Если клиент передумал и решил изменить номер, который он, например, подставил из авто-подсказки, дайте ему возможность быстро стереть введенные данные.
Очистка не видна, если поле пустое
При этом сама кнопка очистки поля должна пропадать, если поле пустое, т.к. в таком случае в ее отображении просто не будет смысла.
Ввод не прерывается запросами
Процесс авторизации не должен прерываться какими-либо навязчивыми запросами. В данном случае ввод был прерван запросом геолокации. Спасибо. Очень удобно.
Ввод vs. popup'ы
Отключайте все маркетинговые сообщения в процессе авторизации. В этом случае popup появился прямо во время ввода и перекрыл собой все поле:
Highlight корректного ввода
Если клиент ввел номер телефона корректно, это можно дополнительно подсветить – например, за счет появления галочки рядом с номером.
Переход нажатием на Return
Настройте переход к вводу кода, если клиент ввел номер телефона и нажал на Return – это достаточно распространенный паттерн подтверждения ввода.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. ОГРАНИЧЕНИЕ ВВОДА НОМЕРА
Только числа
Дайте клиенту вводить лишь числовые значения. При нажатии на клавиши символов ничего не должно происходить.
Количество цифр в номере
Номера можно ограничивать по числу символов в зависимости от кода страны. Это также позволит оградить клиента от случайной ошибки.
Числовая раскладка по умолчанию
При вводе номера телефона на мобильных устройствах по умолчанию отображайте числовую раскладку, не заставляйте клиента переключаться на нее.
Фиксация клавиатуры
Нет смысла в том, чтобы клиент мог при вводе номера на смартфоне переключаться на символьную раскладку. Фиксируйте ее на числовом вводе.
4. ОБРАБОТКА ОШИБОК
Проверка при деактивации поля
Не стоит проверять данные слишком рано – когда клиент еще только их вводит. Реализуйте проверку в момент, когда поле деактивируется.
Выделение поля
Если номер введен с ошибками или не введен в принципе, выделите его красным цветом. К этому можно добавить, например, анимацию дрожания поля.
Поле активируется
Не забываем: на экране у нас лишь одно ключевое поле с ошибкой. Поэтому его можно активировать по умолчанию при попытке нажатия на кнопку отправки.
Сообщение об ошибке есть
Снабдите highlight поля с ошибкой текстом, который в явной форме будет пояснять, что что-то пошло не так.
Сообщение рядом с полем
Разместите сообщение об ошибке рядом с полем, чтобы визуально они легче ассоциировались друг с другом.
Верстка при ошибке корректна
Предусмотрите место под текст об ошибке в стандартном виде интерфейса, чтобы форма не видоизменялась из-за того, что текст в нее не помещается.
Текст ошибки выделяется
По аналогии с самим текстовым полем, сделайте так, чтобы текст сообщения об ошибке привлекал внимание, выделив его красным цветом.
Иконка ошибки
Текст ошибки можно снабдить иконкой, чтобы облегчить восприятие информации клиентам с дальтонизмом.
Текст содержательный
В сообщении об ошибке поясните, в чем именно она заключается. Не ограничивайтесь просто тем, что есть ошибка.
Причина ошибки понятна
Проектируя тексты ошибок, убедитесь, что они понятны для целевой аудитории. О чем, например, говорит мне вот такая ошибка, если я ввожу номер в форму впервые?
Текст ошибки корректен
Распознавайте ошибку правильно, иначе легко можно ввести клиента в заблуждение. Пример того, как делать не стоит:
Призыв к действию
Вместо того чтобы просто констатировать факт ошибки, разместите в сообщении призыв скорректировать ее.
Текст виден на мобильных
Убедитесь, что в мобильной версии текст ошибки виден клиенту и, например, не перекрывается экранной клавиатурой.
Корректная верстка текста
Если в случае ошибочного ввода элементы видоизменяются, проверьте, что все эти изменения корректны, и вот такого не случается:
Пропадает при корректировке
Если клиент заново активировал поле и начал корректировать ввод, а ошибка не пропадает, это может ввести его в заблуждение.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
5. КНОПКА ПОЛУЧЕНИЯ КОДА
Контрастна
Кнопка должна быть достаточно контрастной, чтобы лучше привлекать внимание клиента и чтобы он не был вынужден ее искать на экране.
Достаточно большая
Сделайте кнопку достаточно большой, чтобы на нее легко было нажать – особенно на мобильных устройствах.
Целевое действие
Лучше, если в кнопке перехода к следующему экрану будет не существительное, а текст целевого действия клиента.
Текст содержательный
Текст кнопки должен пояснять целевое действие: например, «Получить код», а не просто «Далее».
Размещение на мобильных
В мобильной версии разместите кнопку так, чтобы она была доступна в любой момент, и до нее не приходилось слишком далеко тянуться пальцем.
Неактивна, если номер не введен
Делая кнопку неактивной, если поле номера пустое, вы можете дополнительно сфокусировать внимание клиента на вводе данных.
Клик по неактивной кнопке
Если клиент кликнул по неактивной кнопке, отображайте сообщение с ошибкой, чтобы не оставлять у него вопросов и сделать дальнейшие шаги более понятными.
Активация поля при ошибке
Когда поле ввода всего одно, при клике по неактивной кнопке (в случае ошибки) его можно активировать по умолчанию.
Реакция на наведение
Сделайте кнопку интерактивной, чтобы она реагировала на наведение курсора и давала визуальную обратную связь.
Реакция на клик
Помимо изменения вида при наведении, в кнопку также можно добавить и анимацию нажатия при клике. Это сделает взаимодействие более приятным.
Без задержек при нажатии
Обработка запроса при нажатии на кнопку должна происходить мгновенно. Система не должна проверять номер клиента более 10 секунд, как в этом примере:
Изменение текста кнопки
Кнопка получения кода может быть лучше погружена в контекст: если код уже был запрошен, при возврате к первому экрану ее текст может изменяться:
А нужна ли кнопка?
igooods вовсе отказался от кнопки: триггеры срабатывают сразу при вводе номера и кода – никаких кликов не требуется. Как вам такое? Напишите в комментариях.
6. СОГЛАСИЕ С ПОЛИТИКАМИ
Визуально вторично
Текст согласия с политиками – вторичный элемент, поэтому он не должен привлекать к себе много внимания и слишком сильно бросаться в глаза.
Под кнопкой перехода
Текст лучше разместить под кнопкой перехода к следующему шагу. Так он не будет отвлекать на себя основной фокус внимания.
Не требует действий
Лучше, если согласие с политикой будет выполнено просто в виде текста «Я соглашаюсь с…», чем в виде чекбокса, который нужно отдельно нажимать.
Небольшой объем текста
Сократите текст согласия до минимума. Для клиента нет никакой пользы в том, что вы разместите 10 строк технического текста в форме и перегрузите интерфейс.
Ссылки выделяются
Ссылки на политики точно не должны «кричать», но если они будут визуально ненавязчиво отличаться от основного текста согласия, хуже не будет.
Ссылки в новой вкладке
Открывайте ссылки в новой вкладке, чтобы они при нажатии не уводили клиента из процесса авторизации полностью.
Без чекбоксов-спутников
Некоторые размещают рядом с политиками галочки согласия на рассылку, активированные по умолчанию. Помогает потом «Догнать клиента»? Да. Но это пример dark pattern'а.
Без объединения с рассылками
Еще больший dark pattern заключается в том, что клиенту в принципе не дают возможности не подписываться на рассылку, объединяя подписку и согласие с политиками.
Название кнопки в тексте
Иногда кнопка может называться по-одному, а ее название в тексте согласия с политиками звучит иначе. Поэтому лучше в нем не привязываться к ее названию.
7. КАНАЛЫ ДОСТАВКИ КОДА
Не звонок (последние цифры)
Входящий звонок отрывает клиента от процесса. Часто номер не виден полностью, и приходится ждать, пока он прокрутится. Символы придется вводить вручную.
Не звонок (голосовое сообщение)
Голосовое сообщение может быть неудобным, т.к. клиент далеко не всегда может принять входящий звонок.
Не email
Если вы используете подтверждение по email, есть риск, что сообщение попадет в спам. Также при получении email авто-подстановка кода в браузере не сработает.
SMS-сообщение
В отличие от email и звонка, код из SMS на смартфонах можно вставить в 1 касание без перехода в другие приложения. Вероятность доставки у SMS выше, чем у email.
Без дублирования
Если клиент ожидает получить SMS-сообщение, отправьте ему именно SMS. Не плодите рассылку сразу на несколько каналов. Кто будет потом чистить его inbox?
Определенность с каналами
«Мы пришлем вам код так-то или так-то» – очень странное управление ожиданиями. Определитесь и обозначьте один канал доставки:
Push-уведомления
Нестандартный и пока редкий метод: push-уведомления от оператора работают даже тогда, когда у меня нет ни приложения, ни карты в wallet и я не давал согласия на них.
8. SMS С КОДОМ
Код доставляется
Базовый момент: код в принципе должен доставляться на телефон клиента. Без каких-либо ошибок и сбоев.
Доставка быстрая
Убедитесь, что сервис, выбранный для доставки, оптимизирован под высокую нагрузку, и клиент сможет получить код в моменте (а не «в течение 5 минут»).
Отправитель – бренд
В качестве отправителя укажите название бренда. Это позволит клиенту быстрее понять, что это именно то сообщение, которое вы отослали, и повысит доверие к его контенту.
Название бренда корректно
По возможности не заставляйте клиента додумывать: в названии отправителя укажите название своего бренда полностью.
Отправитель верхним регистром
Выполните название отправителя SMS в CAPS LOCK. Кричаще выглядеть не будет, но клиенту легче будет его прочитать.
Текст на языке клиента
По возможности отсылайте сообщения на языке, понятном клиенту. От транслитерации лучше воздержаться.
Текст релевантен
Текст не должен становиться сюрпризом для клиента. Если он авторизуется в профиле на сайте, не стоит присылать ему текст о входе в приложение.
Код в контексте
Хорошей практикой будет, если вы в тексте не просто пропишите код, но и уточните, для чего он требуется.
Без специальных сокращений
Если вы работаете с массовой аудиторией, по возможности воздержитесь от сокращений, не являющихся общепринятыми.
Без дублирования кода
В дублировании проверочного кода в одном и том же SMS-сообщении, по-моему, особого смысла нет. Если есть, напишите, пожалуйста, в комментариях.
Форматирование кода
Если вы работаете с длинными кодами, их можно форматировать. Например, разбивая на части дефисом. Так легче будет проверять правильность ввода.
Без ссылок на сайт
Ссылки на сайт в таких SMS могут быть излишними и оттягивать на себя фокус внимания. Важно помнить про контекст: у клиента в этот момент и так открыта ваша страница.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
9. ВВОД КОДА
Отдельный экран под ввод кода
Реализуйте ввод кода на отдельном экране. В противном случае фокус внимания размывается, а кнопка запроса кода просто теряется на фоне других элементов.
Поле в виде слотов
Если число символов в коде фиксировано, вместо текстового поля можно использовать более визуально приятный формат из Х слотов по 1 символу.
Автоматическая активация
Ввод кода на данном шаге – основное действие. Поэтому не заставляйте клиента отдельно кликать по полю – активируйте его автоматически при загрузке страницы.
Переключение между слотами
При вводе символа курсор должен автоматически переходить в следующий слот. При нажатии на backspace – в предыдущий.
Highlight активного слота
Выделяйте активный слот на фоне остальных. Это сделает ввод цифр кода более удобным для клиента.
Авто-подстановка доступна
Промаркируйте поле ввода соответственно, чтобы на смартфоне при получении SMS код можно было вставить в 1 касание.
Без авто-подстановки на ПК
В мобильной версии подстановка кода идет из SMS. Но что мы собрались подставлять в это поле в версии для ПК? Учитывая, что код одноразовый?
Без маркировки при звонке
Если вы проверяете номер входящим звонком, не маркируйте поле ввода на мобильных, как code – будут подтянуты не те данные, а клиент получит отказ.
Символы кода видны
Не стоит скрывать символы кода – он ведь и так одноразовый. А если символы отображаются, клиент хотя бы сможет проверить, не ошибся ли он при вводе.
Длина кода
Не переусердствуйте с безопасностью: там, где достаточно и 4 цифр, не стоит присылать клиенту код из 6 или 8 цифр, усложняя ему жизнь.
Форматирование кода
Если уж вы решили, что много символов в коде – идеальное решение, жизнь клиента можно облегчить, например, добавив отступ между его частями, чтобы легче было проверить.
Одинаковые символы
А вы замечали, что в проверочных кодах некоторых компаний цифры часто повторяются? Так легче вводить данные, а сложность пароля при этом не снижается.
10. ОГРАНИЧЕНИЕ ВВОДА КОДА
Только числа
Если коды вы присылаете только числовые, зачем давать клиенту вводить в поле кода еще и прочие символы?
Раскладка по умолчанию
Если проверочный код только числовой (будет проще, если он именно числовой), в мобильной версии по умолчанию отображайте числовую раскладку клавиатуры.
Фиксация раскладки
При этом, как и со вводом номера, лучше будет, если при вводе кода раскладка будет фиксирована только в числовом формате без возможности ее изменять.
Количество символов
Ограничьте ввод поля кода в соответствии с его длиной в символах. Если, как в примере, вы присылаете код из 4 цифр, дайте клиенту ввести именно 4 цифры:
11. ПРОВЕРКА КОДА
Проверка при вводе нужной длины
Клиента можно не просить отдельно жать на какую-либо кнопку: проверку кода можно сделать сразу же при вводе нужного количества цифр.
Проверка моментальна
Сделайте проверку кода моментальной. У некоторых и код приходит быстро, и проверка происходит мгновенно. Поэтому вместо оправданий лучше равняться на них.
Базовые моменты
Большинство моментов, которые я описывал по тексту ошибки при вводе номера телефона, применимы и здесь. Повторяться не буду.
Без системных сообщений
Лучше воздержаться от системных сообщений об ошибке от браузера (которые отдельно нужно закрывать). Просто разместите текст об ошибке рядом с полем ввода.
Без чрезмерного highlight'а ошибки
Во всем нужно знать меру. Включая сообщения об ошибках. В некоторых случаях чувство меры, вероятно, искажено:
Клиент ошибся? Говорим ему явно
Если клиент ошибся при вводе проверочного кода, не нужно вводить его в заблуждение, говоря, что проблема – на вашей стороне. Лучше предложите ввести код заново.
Очистка слотов при ошибке
В отличие от номера телефона, из-за формата ввода и длины кода его легче стирать полностью, чтобы клиент заново его ввел.
Активация поля при ошибке
При этом хорошей практикой будет сразу же активировать очищенное поле, чтобы клиенту не требовалось делать это самостоятельно.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
12. ТЕЛЕФОН ПРИ ВВОДЕ КОДА
Номер отображается
Отображайте, на какой номер телефона был выслан код, чтобы у клиента была возможность заметить ошибку, если он допустил ее в номере.
Виден полностью
Не скрывайте символы номера на экране ввода кода – дайте клиенту возможность проверить его, если SMS по какой-то причине не дошло.
Номер форматирован
Как и на предыдущем шаге, форматируйте номер телефона, на который был выслан код, чтобы облегчить его восприятие.
Изменение номера
Если клиент заметил, что допустил ошибку в номере, дайте ему возможность вернуться к предыдущему шагу в 1 клик и ввести корректные данные.
13. ПОВТОРНЫЙ ЗАПРОС КОДА
Возможность повторной отправки
Если код по какой-то причине не дошел до клиента, реализуйте возможность его повторной отправки.
Таймер
Если моментальная отправка невозможна, отображайте таймер, чтобы лучше управлять ожиданиями клиента о том, когда код можно будет запросить повторно.
Срок таймера короткий
Если с отправкой SMS возникли какие-то проблемы, не держите клиента в ожидании слишком долго: срок ожидания не должен быть больше минуты.
Форматирование таймера
Не забывайте, что это таймер повторного запроса проверочного кода, и максимальное его значение уж точно будет в минутах. Зачем добавлять еще и часы – большой вопрос:
Корректная обработка запроса
Базовый момент: убедитесь, что после окончания таймера клиент может нажать на кнопку повторного запроса, и запрос этот корректно обрабатывается.
Подтверждение повторной отправки
При повторном запросе отправки кода отображайте подтверждение, что код действительно отправлен.
Коды одинаковые
Если повторный код такой же, как и изначальный, мы исключаем риск того, что с задержкой будут доставлены оба сообщения, и клиент спутает коды.
Что делать, если код не приходит?
В интерфейсе также можно разместить ссылку на небольшой гайд с подсказками о том, что делать, если клиент все-таки не получил проверочный код.
TO BE CONTINUED...
Итак, в этой статье мы разобрали процесс авторизации по номеру телефона. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce