Егор Камелев поделился чеклистом и серией видео о проектировании регистрации.
— Чеклист — список вопросов, которые можно задать при проектировании формы регистрации пользователей. Среди них:
— Будет ли регистрация отличаться для разных пользовательских ролей?
— Что делаем в сценариях, когда пользователь всё-таки ввёл свои данные неверно (например, ввёл адрес электронной почты с опечаткой или вообще чужой)?
— Нужна ли верификация аккаунта при регистрации? Будет ли набор функций в системе отличаться для верифицированных и неверифицированных пользователей?
— Помешает ли регистрация целевому действию? Не окажется ли пользователь далеко от своей цели после всех процедур? Нужно ли ему авторизоваться после регистрации или это произойдёт автоматически?
Смотрите также статью Павла Шерера об идеальной схеме регистрации, логина и восстановления пароля. #sign_up
— Чеклист — список вопросов, которые можно задать при проектировании формы регистрации пользователей. Среди них:
— Будет ли регистрация отличаться для разных пользовательских ролей?
— Что делаем в сценариях, когда пользователь всё-таки ввёл свои данные неверно (например, ввёл адрес электронной почты с опечаткой или вообще чужой)?
— Нужна ли верификация аккаунта при регистрации? Будет ли набор функций в системе отличаться для верифицированных и неверифицированных пользователей?
— Помешает ли регистрация целевому действию? Не окажется ли пользователь далеко от своей цели после всех процедур? Нужно ли ему авторизоваться после регистрации или это произойдёт автоматически?
Смотрите также статью Павла Шерера об идеальной схеме регистрации, логина и восстановления пароля. #sign_up
Хабр
Чек-лист по проектированию регистрации
В проектировании сложно давать универсальные советы. Сколько задач, контекстов и целевых аудиторий — столько и решений. Поэтому вместо чек-листа с рекомендациями предлагаю вашему вниманию чек-лист с...
Павел Шерер описал идеальную схему регистрации (через электронную почту и соцсети), логина и восстановления пароля.
Например, в ней учтены:
— Временные профили, у которых не подтверждены адреса электронной почты;
— Ограничение срока действия ссылки для подтверждения профиля;
— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;
— Объединение профилей при регистрации и логине через разные соцсети;
— Восстановление пароля, если пользователь регистрировался через соцсеть;
— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;
— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;
— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;
— Подсказка о том, через какую соцсеть пользователь входил раньше.
«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».
#sign_up #log_in
Например, в ней учтены:
— Временные профили, у которых не подтверждены адреса электронной почты;
— Ограничение срока действия ссылки для подтверждения профиля;
— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;
— Объединение профилей при регистрации и логине через разные соцсети;
— Восстановление пароля, если пользователь регистрировался через соцсеть;
— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;
— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;
— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;
— Подсказка о том, через какую соцсеть пользователь входил раньше.
«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».
#sign_up #log_in
vc.ru
Инструкция: как написать идеальную регистрацию — Разработка на vc.ru
Pavel Sherer Разработка10.09.2020
В Antro написали о лучших практиках входа и регистрации в интернет-магазинах.
— Пользователи входят не только для того, чтобы что-то купить. Они могут проверять статус заказа, искать сделанную ранее покупку, чтобы порекомендовать её и так далее;
— Располагайте кнопку входа в правом верхнем углу страницы;
— При наведении на неё курсора можно рассказывать о преимуществах личного кабинета;
— Показывайте, что пользователь авторизован. СберМегаМаркет отображает только количество баллов, Озон — имя пользователя, Яндекс Маркет — фото. Это удобно, если одним устройством пользуются несколько человек;
— Совмещайте вход и регистрацию;
— Не давайте в одно и то же поле вводить номер телефона, логин и адрес электронной почты. Такое поле нельзя автоматически заполнить, не получится установить подходящий тип клавиатуры для мобильных, нельзя использовать маски, подсказки и сообщения об ошибках будут громоздкими;
— Для входа отправляйте код — вместо входа по паролю. 78% пользователей запрашивают восстановление пароля в течение 90 дней;
— Не деактивируйте кнопки, если какие-то поля не заполнены. Не все люди знают, что в вебе так бывает (в офлайне кнопки обычно не перестают нажиматься, даже если нажатие ни к чему не приводит). Лучше при нажатии отображайте сообщения об ошибках для некорректно заполненных полей;
— Предлагайте несколько способов входа и регистрации. Если телефон разряжен или сейчас стоит другая симкарта, пользователю может быть удобен вход через электронную почту;
— Маркируйте поле для автозаполнения, чтобы можно было подставить номер телефона или имейл;
— Давайте очищать поле одним нажатием.
#sign_up #log_in #ecommerce
— Пользователи входят не только для того, чтобы что-то купить. Они могут проверять статус заказа, искать сделанную ранее покупку, чтобы порекомендовать её и так далее;
— Располагайте кнопку входа в правом верхнем углу страницы;
— При наведении на неё курсора можно рассказывать о преимуществах личного кабинета;
— Показывайте, что пользователь авторизован. СберМегаМаркет отображает только количество баллов, Озон — имя пользователя, Яндекс Маркет — фото. Это удобно, если одним устройством пользуются несколько человек;
— Совмещайте вход и регистрацию;
— Не давайте в одно и то же поле вводить номер телефона, логин и адрес электронной почты. Такое поле нельзя автоматически заполнить, не получится установить подходящий тип клавиатуры для мобильных, нельзя использовать маски, подсказки и сообщения об ошибках будут громоздкими;
— Для входа отправляйте код — вместо входа по паролю. 78% пользователей запрашивают восстановление пароля в течение 90 дней;
— Не деактивируйте кнопки, если какие-то поля не заполнены. Не все люди знают, что в вебе так бывает (в офлайне кнопки обычно не перестают нажиматься, даже если нажатие ни к чему не приводит). Лучше при нажатии отображайте сообщения об ошибках для некорректно заполненных полей;
— Предлагайте несколько способов входа и регистрации. Если телефон разряжен или сейчас стоит другая симкарта, пользователю может быть удобен вход через электронную почту;
— Маркируйте поле для автозаполнения, чтобы можно было подставить номер телефона или имейл;
— Давайте очищать поле одним нажатием.
#sign_up #log_in #ecommerce
vc.ru
Как не потерять покупателя в начале пути. Разобрали вход и регистрацию в интернет-магазинах — Маркетинг на vc.ru
Чтобы клиенты покупали, интерфейс должен помогать этому на всех этапах. Мы в Antro проанализировали авторизацию AliExpress, OZON, Wildberries, СберМегаМаркет и Яндекс. Маркет: выделили лучшие практики и разобрали ошибки.
Станислав Хрусталёв написал о входе в приложение по номеру телефона.
— Объедините вход и регистрацию. При вводе номера проверяйте, есть ли такой пользователь, и ведите на нужный сценарий;
— Вынесите ввод номера на отдельный экран. Не смешивайте с другими элементами неавторизованной зоны, чтобы не размывать фокус;
— Заголовок формы должен быть достаточно большим и содержать призыв к действию;
— Добавьте пояснение, что произойдёт дальше («Отправим сообщение с кодом»), чтобы управлять ожиданиями пользователя. Можно подчеркнуть ответственное отношение к приватности («Обещаем хранить его в тайне») или скорость входа («Займёт всего минуту»);
— Не дублируйте заголовок в плейсхолдере поля. Покажите в нём формат номера телефона, чтобы смысл поля был понятен с первого взгляда. Цифры лучше показать нулями или девятками;
— Активируйте поле автоматически при открытии экрана, отображайте цифровую раскладку клавиатуры (без возможности её поменять);
— Если принимаете только российские номера, +7 можно отобазить по умолчанию;
— Если пользователь вышел, но не удалил приложение, его номер можно сохранить и предложить при повторном входе. Если удалил приложение, номер можно запомнить по Device ID;
— Поле ввода можно промаркировать как phone number, чтобы пользователь мог подставить сохранённый на устройстве номер;
— Чтобы снизить количество ошибок, форматируйте введённый номер и ограничивайте количество символов (в зависимости от кода страны);
— При удалении номера по символам, автоматически удаляйте символы форматирования;
— Переходить к подтверждению лучше по нажатию на кнопку. Разместите её в нижней части экрана, не перекрывайте клавиатурой. Иногда кнопку «Получить код» размещают в кастомизированном меню над клавиатурой;
— Код по смс удобнее звонка, так как с автоподстановкой его можно ввести одним нажатием. Пуш ещё удобнее — приложение само может его обработать;
— На экране подтверждения стоит написать, что смс отправлено (и на какой номер). Но это сообщение должно быть визуально вторичным;
— Отправитель смс — название бренда. Код — в начале сообщения, чтобы не надо было его открывать. В текст добавьте пояснение, что это за код и что его не надо никому сообщать;
— Проверять код можно автоматически при вводе нужного количества символов.
#log_in #sign_up
— Объедините вход и регистрацию. При вводе номера проверяйте, есть ли такой пользователь, и ведите на нужный сценарий;
— Вынесите ввод номера на отдельный экран. Не смешивайте с другими элементами неавторизованной зоны, чтобы не размывать фокус;
— Заголовок формы должен быть достаточно большим и содержать призыв к действию;
— Добавьте пояснение, что произойдёт дальше («Отправим сообщение с кодом»), чтобы управлять ожиданиями пользователя. Можно подчеркнуть ответственное отношение к приватности («Обещаем хранить его в тайне») или скорость входа («Займёт всего минуту»);
— Не дублируйте заголовок в плейсхолдере поля. Покажите в нём формат номера телефона, чтобы смысл поля был понятен с первого взгляда. Цифры лучше показать нулями или девятками;
— Активируйте поле автоматически при открытии экрана, отображайте цифровую раскладку клавиатуры (без возможности её поменять);
— Если принимаете только российские номера, +7 можно отобазить по умолчанию;
— Если пользователь вышел, но не удалил приложение, его номер можно сохранить и предложить при повторном входе. Если удалил приложение, номер можно запомнить по Device ID;
— Поле ввода можно промаркировать как phone number, чтобы пользователь мог подставить сохранённый на устройстве номер;
— Чтобы снизить количество ошибок, форматируйте введённый номер и ограничивайте количество символов (в зависимости от кода страны);
— При удалении номера по символам, автоматически удаляйте символы форматирования;
— Переходить к подтверждению лучше по нажатию на кнопку. Разместите её в нижней части экрана, не перекрывайте клавиатурой. Иногда кнопку «Получить код» размещают в кастомизированном меню над клавиатурой;
— Код по смс удобнее звонка, так как с автоподстановкой его можно ввести одним нажатием. Пуш ещё удобнее — приложение само может его обработать;
— На экране подтверждения стоит написать, что смс отправлено (и на какой номер). Но это сообщение должно быть визуально вторичным;
— Отправитель смс — название бренда. Код — в начале сообщения, чтобы не надо было его открывать. В текст добавьте пояснение, что это за код и что его не надо никому сообщать;
— Проверять код можно автоматически при вводе нужного количества символов.
#log_in #sign_up
Hardclient
Проектируем авторизацию по номеру телефона в приложении: 180 гайдлайнов
Лучшие практики UX/UI в мобильном e-commerce