АВТОРИЗАЦИЯ ПО НОМЕРУ ТЕЛЕФОНА

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
130
ГАЙДЛАЙНОВ
Сегодня мы погрузимся в микро-мир и разберем процесс авторизации по номеру телефона. Казалось бы, что может быть проще? Ввел номер – ввел код – успех? Не тут-то было. Хороший customer experience от плохого отделяет множество нюансов и тонкостей.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами по цеху.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
Это один из 18 больших чек-листов по eCommerce. Остальные – в моем Telegram.

1. ИНТЕРФЕЙС ВВОДА НОМЕРА

Интерфейс не перегружен

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

Мобильная оптимизация

Оптимизируйте интерфейс авторизации под доступ с мобильных устройств. В противном случае клиент вам спасибо точно не скажет.

Призыв в заголовке

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

Highlight преимуществ

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

Регистрация + авторизация

Совместите функционал регистрации и авторизации по номеру телефона в одном интерфейсе – это сократит ошибки ввода данных не в ту форму.

Без пароля

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

Без фоновой прокрутки

Если вы используете всплывающее окно для авторизации, отключайте в этот момент прокрутку фоновой страницы – она там будет совсем не к месту:

Локализация

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

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

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

Без указания обязательности

Используйте звездочки только там, где они имеют смысл. Помечать звездочками 2 поля на экране – телефон и проверочный код – излишне:
hardclient

Без reCaptcha

Не заставляйте клиента страдать, доказывая, что он не робот: уберите reCaptcha с экрана авторизации. Другие же как-то без этого живут.
hardclient

Без внутренней кухни

Какая часть клиентов у вас авторизуется многократно за 1 час? А какая часть столкнется с ненужным им блоком текста? Внутреннюю кухню с ограничениями лучше не показывать.
hardclient

Чужой компьютер

Если клиент заходит в личный кабинет с чужого ПК, дайте ему возможность указать это, чтобы данные не сохранялись в браузере.
hardclient

Призыв к режиму инкогнито

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

Визуальное сопровождение

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

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

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

2. ВВОД НОМЕРА ТЕЛЕФОНА

Адекватный размер поля

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

Реакция на наведение

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

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

Если ввод номера телефона – единственное целевое действие, поле ввода можно активировать по умолчанию. Сэкономите клиенту 1 клик.

Highlight активного поля

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

Без совмещения типов данных

Иногда ввести в одно поле предлагают или телефон, или email. В итоге все возможности авто-подстановки упускаются, и приходится вводить данные вручную.
hardclient

Авто-подстановка из браузера

Промаркируйте поле ввода как Phone и сделайте доступной авто-подстановку номера телефона сохраненными данными из браузера в 1 клик.
hardclient

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

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

Сохраненные номера

Если клиент уже авторизовывался и данные сохранены в кэше браузера, ему можно предложить их выбрать в 1-2 клика.
hardclient

Данные вставляются корректно

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

Код страны

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

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

При вводе номера телефона форматируйте его автоматически в общепринятой форме, чтобы клиенту легче было его проверить. Например, за счет пробелов:
hardclient

Форматирование vs. backspace

Стирайте символы форматирования автоматически при нажатии на backspace. Не заставляйте клиента стирать их самому, если он хочет скорректировать номер.

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

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

Очистка не видна, если поле пустое

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

Ввод не прерывается запросами

Процесс авторизации не должен прерываться какими-либо навязчивыми запросами. В данном случае ввод был прерван запросом геолокации. Спасибо. Очень удобно.
hardclient

Ввод vs. popup'ы

Отключайте все маркетинговые сообщения в процессе авторизации. В этом случае popup появился прямо во время ввода и перекрыл собой все поле:
hardclient

Highlight корректного ввода

Если клиент ввел номер телефона корректно, это можно дополнительно подсветить – например, за счет появления галочки рядом с номером.
hardclient

Переход нажатием на Return

Настройте переход к вводу кода, если клиент ввел номер телефона и нажал на Return – это достаточно распространенный паттерн подтверждения ввода.

3. ОГРАНИЧЕНИЕ ВВОДА НОМЕРА

Только числа

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

Количество цифр в номере

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

Числовая раскладка по умолчанию

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

Фиксация клавиатуры

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

4. ОБРАБОТКА ОШИБОК

Проверка при деактивации поля

Не стоит проверять данные слишком рано – когда клиент еще только их вводит. Реализуйте проверку в момент, когда поле деактивируется.

Выделение поля

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

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

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

Сообщение об ошибке есть

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

Сообщение рядом с полем

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

Верстка при ошибке корректна

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

Текст ошибки выделяется

По аналогии с самим текстовым полем, сделайте так, чтобы текст сообщения об ошибке привлекал внимание, выделив его красным цветом.
hardclient

Иконка ошибки

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

Текст содержательный

В сообщении об ошибке поясните, в чем именно она заключается. Не ограничивайтесь просто тем, что есть ошибка.
hardclient

Причина ошибки понятна

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

Текст ошибки корректен

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

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

Вместо того чтобы просто констатировать факт ошибки, разместите в сообщении призыв скорректировать ее.
hardclient

Текст виден на мобильных

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

Корректная верстка текста

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

Пропадает при корректировке

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

5. КНОПКА ПОЛУЧЕНИЯ КОДА

Контрастна

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

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

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

Целевое действие

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

Текст содержательный

Текст кнопки должен пояснять целевое действие: например, «Получить код», а не просто «Далее».
hardclient

Размещение на мобильных

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

Неактивна, если номер не введен

Делая кнопку неактивной, если поле номера пустое, вы можете дополнительно сфокусировать внимание клиента на вводе данных.
hardclient

Клик по неактивной кнопке

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

Активация поля при ошибке

Когда поле ввода всего одно, при клике по неактивной кнопке (в случае ошибки) его можно активировать по умолчанию.

Реакция на наведение

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

Реакция на клик

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

Без задержек при нажатии

Обработка запроса при нажатии на кнопку должна происходить мгновенно. Система не должна проверять номер клиента более 10 секунд, как в этом примере:

Изменение текста кнопки

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

А нужна ли кнопка?

igooods вовсе отказался от кнопки: триггеры срабатывают сразу при вводе номера и кода – никаких кликов не требуется. Как вам такое? Напишите в комментариях.