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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Без пароля

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

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

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

Локализация

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

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

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

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

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

Без reCaptcha

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

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

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

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

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

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

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

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

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

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

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

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 – это достаточно распространенный паттерн подтверждения ввода.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

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

Только числа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контрастна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. СОГЛАСИЕ С ПОЛИТИКАМИ

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

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

Под кнопкой перехода

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

Не требует действий

Лучше, если согласие с политикой будет выполнено просто в виде текста «Я соглашаюсь с…», чем в виде чекбокса, который нужно отдельно нажимать.
hardclient

Небольшой объем текста

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

Ссылки выделяются

Ссылки на политики точно не должны «кричать», но если они будут визуально ненавязчиво отличаться от основного текста согласия, хуже не будет.
hardclient

Ссылки в новой вкладке

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

Без чекбоксов-спутников

Некоторые размещают рядом с политиками галочки согласия на рассылку, активированные по умолчанию. Помогает потом «Догнать клиента»? Да. Но это пример dark pattern'а.
hardclient

Без объединения с рассылками

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

Название кнопки в тексте

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

7. КАНАЛЫ ДОСТАВКИ КОДА

Не звонок (последние цифры)

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

Не звонок (голосовое сообщение)

Голосовое сообщение может быть неудобным, т.к. клиент далеко не всегда может принять входящий звонок.
hardclient

Не email

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

SMS-сообщение

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

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

Если клиент ожидает получить SMS-сообщение, отправьте ему именно SMS. Не плодите рассылку сразу на несколько каналов. Кто будет потом чистить его inbox?

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

«Мы пришлем вам код так-то или так-то» – очень странное управление ожиданиями. Определитесь и обозначьте один канал доставки:
hardclient

Push-уведомления

Нестандартный и пока редкий метод: push-уведомления от оператора работают даже тогда, когда у меня нет ни приложения, ни карты в wallet и я не давал согласия на них.
hardclient

8. SMS С КОДОМ

Код доставляется

Базовый момент: код в принципе должен доставляться на телефон клиента. Без каких-либо ошибок и сбоев.
hardclient

Доставка быстрая

Убедитесь, что сервис, выбранный для доставки, оптимизирован под высокую нагрузку, и клиент сможет получить код в моменте (а не «в течение 5 минут»).
hardclient

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

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

Название бренда корректно

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

Отправитель верхним регистром

Выполните название отправителя SMS в CAPS LOCK. Кричаще выглядеть не будет, но клиенту легче будет его прочитать.

Текст на языке клиента

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

Текст релевантен

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

Код в контексте

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

Без специальных сокращений

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

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

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

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

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

Без ссылок на сайт

Ссылки на сайт в таких SMS могут быть излишними и оттягивать на себя фокус внимания. Важно помнить про контекст: у клиента в этот момент и так открыта ваша страница.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

9. ВВОД КОДА

Отдельный экран под ввод кода

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

Поле в виде слотов

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

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

Ввод кода на данном шаге – основное действие. Поэтому не заставляйте клиента отдельно кликать по полю – активируйте его автоматически при загрузке страницы.

Переключение между слотами

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

Highlight активного слота

Выделяйте активный слот на фоне остальных. Это сделает ввод цифр кода более удобным для клиента.
hardclient

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

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

Без авто-подстановки на ПК

В мобильной версии подстановка кода идет из SMS. Но что мы собрались подставлять в это поле в версии для ПК? Учитывая, что код одноразовый?
hardclient

Без маркировки при звонке

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

Символы кода видны

Не стоит скрывать символы кода – он ведь и так одноразовый. А если символы отображаются, клиент хотя бы сможет проверить, не ошибся ли он при вводе.
hardclient

Длина кода

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

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

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

Одинаковые символы

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

10. ОГРАНИЧЕНИЕ ВВОДА КОДА

Только числа

Если коды вы присылаете только числовые, зачем давать клиенту вводить в поле кода еще и прочие символы?
hardclient

Раскладка по умолчанию

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

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

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

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

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

11. ПРОВЕРКА КОДА

Проверка при вводе нужной длины

Клиента можно не просить отдельно жать на какую-либо кнопку: проверку кода можно сделать сразу же при вводе нужного количества цифр.

Проверка моментальна

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

Базовые моменты

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

Без системных сообщений

Лучше воздержаться от системных сообщений об ошибке от браузера (которые отдельно нужно закрывать). Просто разместите текст об ошибке рядом с полем ввода.
hardclient

Без чрезмерного highlight'а ошибки

Во всем нужно знать меру. Включая сообщения об ошибках. В некоторых случаях чувство меры, вероятно, искажено:
hardclient

Клиент ошибся? Говорим ему явно

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

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

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

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

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

12. ТЕЛЕФОН ПРИ ВВОДЕ КОДА

Номер отображается

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

Виден полностью

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

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

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

Изменение номера

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

13. ПОВТОРНЫЙ ЗАПРОС КОДА

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

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

Таймер

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

Срок таймера короткий

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

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

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

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

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

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

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

Коды одинаковые

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

Что делать, если код не приходит?

В интерфейсе также можно разместить ссылку на небольшой гайд с подсказками о том, что делать, если клиент все-таки не получил проверочный код.
hardclient
TO BE CONTINUED...
Итак, в этой статье мы разобрали процесс авторизации по номеру телефона. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce