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 поля с ошибкой текстом, который в явной форме будет пояснять, что что-то пошло не так.
Сообщение рядом с полем
Разместите сообщение об ошибке рядом с полем, чтобы визуально они легче ассоциировались друг с другом.
Верстка при ошибке корректна
Предусмотрите место под текст об ошибке в стандартном виде интерфейса, чтобы форма не видоизменялась из-за того, что текст в нее не помещается.
Текст ошибки выделяется
По аналогии с самим текстовым полем, сделайте так, чтобы текст сообщения об ошибке привлекал внимание, выделив его красным цветом.
Иконка ошибки
Текст ошибки можно снабдить иконкой, чтобы облегчить восприятие информации клиентам с дальтонизмом.
Текст содержательный
В сообщении об ошибке поясните, в чем именно она заключается. Не ограничивайтесь просто тем, что есть ошибка.
Причина ошибки понятна
Проектируя тексты ошибок, убедитесь, что они понятны для целевой аудитории. О чем, например, говорит мне вот такая ошибка, если я ввожу номер в форму впервые?
Текст ошибки корректен
Распознавайте ошибку правильно, иначе легко можно ввести клиента в заблуждение. Пример того, как делать не стоит:
Призыв к действию
Вместо того чтобы просто констатировать факт ошибки, разместите в сообщении призыв скорректировать ее.
Текст виден на мобильных
Убедитесь, что в мобильной версии текст ошибки виден клиенту и, например, не перекрывается экранной клавиатурой.
Корректная верстка текста
Если в случае ошибочного ввода элементы видоизменяются, проверьте, что все эти изменения корректны, и вот такого не случается:
