Павел Шерер описал идеальную схему регистрации (через электронную почту и соцсети), логина и восстановления пароля.
Например, в ней учтены:
— Временные профили, у которых не подтверждены адреса электронной почты;
— Ограничение срока действия ссылки для подтверждения профиля;
— Ситуация, когда соцсеть при регистрации не сообщила почту пользователя;
— Объединение профилей при регистрации и логине через разные соцсети;
— Восстановление пароля, если пользователь регистрировался через соцсеть;
— Деактивация ссылки на восстановление пароля после того, как пользователь восстановил пароль по этой ссылке;
— Автоматический вход в профиль после перехода по ссылке для восстановления пароля;
— Возвращение пользователя после авторизации на страницу, с которой он перешёл к авторизации;
— Подсказка о том, через какую соцсеть пользователь входил раньше.
«Кто из нас не сталкивался с тем, что тупит перед формой входа, не помня, как именно он регался на этом сервисе: через почту или какую-то из соцсетей? И таких примеров тьма. Но самое грустное в том, что мы сами считаем это нормой, и чаще всего виним себя и свою забывчивость, тогда как чаще всего виноват в этом именно сервис».
#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, СберМегаМаркет и Яндекс. Маркет: выделили лучшие практики и разобрали ошибки.
Тесс Гэдд написала о входе в систему.
— SSO — технология единого входа, когда используются внешние системы вроде Google. Так входить намного быстрее, чем с помощью логина и пароля (если, конечно, пользователь не использует «Связку ключей» или аналоги);
— Шаблоны входа: а) поля для ввода имейла и пароля, б) кнопки для входа через SSO и почту, в) гибридный с полями и кнопками, г) пошаговый, когда пользователь сначала вводит имейл, д) отправка на почту ссылки для входа, е) окно с предложением войти;
— В идеале должно быть менее 3 вариантов входа через SSO. Не стоит полностью отказываться от входа через почту, так как не все доверяют SSO;
— Гибридный вариант обычно выглядит перегруженным;
— В пошаговом варианте система может запоминать имейл пользователя и сразу показывать поле для ввода пароля;
— Окно с предложением войти через свой гугл-профиль отображается, если пользователь входил так на сайт раньше. Так не надо даже открывать форму входа;
— Если формы входа и регистрации скомпонованы одинаково, людям будет проще разобраться с входом. Но они могут отличаться. Например, регистрация может быть полностраничной и включать список причин, почему надо зарегистрироваться. А вход — отображаться в модальном окне, чтобы сохранялся контекст текущего сценария (например, если надо авторизоваться для перехода к оплате);
— Предварительная обратная связь отображается до отправки данных. Так можно подсказать, что пароль недостаточно надёжен или имейл введён не полностью;
— В последующей обратной связи сообщают об ошибках входа. Безопаснее не говорить, в чём конкретно проблема: неправильном пароле или имейле;
— Не используйте контрольные вопросы. Люди забывают ответы на них, а хакеры находят нужную информацию в соцсетях и выведывают у жертв;
— При входе из другой локации или браузера, отправляйте письмо с уведомлением, чтобы предупредить пользователя.
In English. #log_in
— SSO — технология единого входа, когда используются внешние системы вроде Google. Так входить намного быстрее, чем с помощью логина и пароля (если, конечно, пользователь не использует «Связку ключей» или аналоги);
— Шаблоны входа: а) поля для ввода имейла и пароля, б) кнопки для входа через SSO и почту, в) гибридный с полями и кнопками, г) пошаговый, когда пользователь сначала вводит имейл, д) отправка на почту ссылки для входа, е) окно с предложением войти;
— В идеале должно быть менее 3 вариантов входа через SSO. Не стоит полностью отказываться от входа через почту, так как не все доверяют SSO;
— Гибридный вариант обычно выглядит перегруженным;
— В пошаговом варианте система может запоминать имейл пользователя и сразу показывать поле для ввода пароля;
— Окно с предложением войти через свой гугл-профиль отображается, если пользователь входил так на сайт раньше. Так не надо даже открывать форму входа;
— Если формы входа и регистрации скомпонованы одинаково, людям будет проще разобраться с входом. Но они могут отличаться. Например, регистрация может быть полностраничной и включать список причин, почему надо зарегистрироваться. А вход — отображаться в модальном окне, чтобы сохранялся контекст текущего сценария (например, если надо авторизоваться для перехода к оплате);
— Предварительная обратная связь отображается до отправки данных. Так можно подсказать, что пароль недостаточно надёжен или имейл введён не полностью;
— В последующей обратной связи сообщают об ошибках входа. Безопаснее не говорить, в чём конкретно проблема: неправильном пароле или имейле;
— Не используйте контрольные вопросы. Люди забывают ответы на них, а хакеры находят нужную информацию в соцсетях и выведывают у жертв;
— При входе из другой локации или браузера, отправляйте письмо с уведомлением, чтобы предупредить пользователя.
In English. #log_in
www.uprock.ru
Вход в систему: популярные UX-паттерны — читайте на UPROCK
Форма регистрации / входа — неотъемлемый элемент многих сайтов и приложений. От ее простоты и удобства во многом зависит, захотят ли пользователи возвращаться снова и снова или же уйдут к вашим конкурентам.: читайте полезные статьи о дизайне в блоге UPROCK
Ярослав Александров написал, как усложнить жизнь злоумышленникам и сохранить удобство входа.
— Это две противоположные цели: 1) Упрощать прохождение воронки регистрации и авторизации; 2) Снижать число попыток несанкционированного доступа к пользовательским профилям;
— Метрики удобства: процент авторизованных пользователей, общее количество покупателей и сделок, ключевые конверсии, ключевые действия на площадке (покупка, контакт);
— Проверяйте все сценарии UX-тестами;
— Отслеживая обращения пользователей, объединяйте жалобы с данными, чтобы видеть общую картину, так как часто нарушители нагружают поддержку, маскируясь под недовольных пользователей;
— Слабые пароли — одна из главных точек приложения усилий взломщиков. Формальные требования к паролям не работают. Пароль P@ssword1 так же легко подобрать, как и password;
— Внедряйте более сложные требования к паролям и одновременно рассказывайте, как легко создать и запомнить по-настоящему сложный пароль. Например, использовать как пароль 3 случайных слова на английском или русском (транслитом);
— Люди включают 2-факторную авторизацию, когда а) их где-нибудь взломали, б) профиль стал ценным, в) прочитали, что к профилю может получить доступ посторонний. Они не хотят, чтобы от их имени кого-то обманули;
— Большинство способов 2-факторной авторизации портят пользовательский опыт. Есть метод Risk Based Authentication, когда такая авторизация нужна только если система подозревает взлом;
— Способы 2FA: смс, пуш, звонок (продиктовать код, ввести последние 4 цифры номера, с которого звонили, пользователь должен сам позвонить), TOTP, QR-код (отсканировать из приложения), имейл (код или ссылка в письме), внутренний мессенджер продукта, биометрия, список одноразовых паролей, физические ключи, пин-код.
#log_in
— Это две противоположные цели: 1) Упрощать прохождение воронки регистрации и авторизации; 2) Снижать число попыток несанкционированного доступа к пользовательским профилям;
— Метрики удобства: процент авторизованных пользователей, общее количество покупателей и сделок, ключевые конверсии, ключевые действия на площадке (покупка, контакт);
— Проверяйте все сценарии UX-тестами;
— Отслеживая обращения пользователей, объединяйте жалобы с данными, чтобы видеть общую картину, так как часто нарушители нагружают поддержку, маскируясь под недовольных пользователей;
— Слабые пароли — одна из главных точек приложения усилий взломщиков. Формальные требования к паролям не работают. Пароль P@ssword1 так же легко подобрать, как и password;
— Внедряйте более сложные требования к паролям и одновременно рассказывайте, как легко создать и запомнить по-настоящему сложный пароль. Например, использовать как пароль 3 случайных слова на английском или русском (транслитом);
— Люди включают 2-факторную авторизацию, когда а) их где-нибудь взломали, б) профиль стал ценным, в) прочитали, что к профилю может получить доступ посторонний. Они не хотят, чтобы от их имени кого-то обманули;
— Большинство способов 2-факторной авторизации портят пользовательский опыт. Есть метод Risk Based Authentication, когда такая авторизация нужна только если система подозревает взлом;
— Способы 2FA: смс, пуш, звонок (продиктовать код, ввести последние 4 цифры номера, с которого звонили, пользователь должен сам позвонить), TOTP, QR-код (отсканировать из приложения), имейл (код или ссылка в письме), внутренний мессенджер продукта, биометрия, список одноразовых паролей, физические ключи, пин-код.
#log_in
Блог ProductSense
Безопасность или удобство? Опыт команды авторизации и регистрации Авито
Работа над безопасной регистрацией и входом в продукт — это непрерывный поиск баланса между удобством для пользователя и усложнением процесса аутентификации. Более жесткие требования к паролям или …
Пользователь Хабра xenon написал, как дизайн формы восстановления доступа к Госуслугам помогает злоумышленникам и что с этим можно сделать.
— Хакер звонит и представляется сотрудником мобильного оператора. Просит подтвердить через Госуслуги личность владельца номера телефона и получает от жертвы код из смс;
— С кодом он захватывает профиль жертвы на Госуслугах и прямо по телефону сообщает об этом;
— Пароль жертвы больше не подходит. На экране восстановления пароля отображается сообщение о заморозке учётной записи из-за подозрительной активности и номер телефона для экстренной связи;
— Фишка в том, что это не системное сообщение, а текст контрольного вопроса, который прописал хакер, войдя в профиль жертвы. Жертва доверяет этому номеру, и после звонка по нему начинается основной развод;
— Вывод: даже сайт без технических уязвимостей можно использовать для атаки на пользователя методом социальной инженерии;
— Стоит проанализировать пользовательский путь в ситуации, когда доступом к его профилю завладел хакер. Особенно, если ваш сервис критически важен;
— Конкретно в этом случае на странице восстановления доступа можно выделить, что отображается именно контрольный вопрос, а его текст оформить так, чтобы он выглядел менее системным и более пользовательским;
— Не прячьте официальный номер телефона (хотя бы в рамках этого пользовательского пути). Например, чтобы найти его на Госуслугах, надо сделать очень много кликов;
— Также можно ввести ограничения для текста пользовательского контрольного вопроса.
#log_in
— Хакер звонит и представляется сотрудником мобильного оператора. Просит подтвердить через Госуслуги личность владельца номера телефона и получает от жертвы код из смс;
— С кодом он захватывает профиль жертвы на Госуслугах и прямо по телефону сообщает об этом;
— Пароль жертвы больше не подходит. На экране восстановления пароля отображается сообщение о заморозке учётной записи из-за подозрительной активности и номер телефона для экстренной связи;
— Фишка в том, что это не системное сообщение, а текст контрольного вопроса, который прописал хакер, войдя в профиль жертвы. Жертва доверяет этому номеру, и после звонка по нему начинается основной развод;
— Вывод: даже сайт без технических уязвимостей можно использовать для атаки на пользователя методом социальной инженерии;
— Стоит проанализировать пользовательский путь в ситуации, когда доступом к его профилю завладел хакер. Особенно, если ваш сервис критически важен;
— Конкретно в этом случае на странице восстановления доступа можно выделить, что отображается именно контрольный вопрос, а его текст оформить так, чтобы он выглядел менее системным и более пользовательским;
— Не прячьте официальный номер телефона (хотя бы в рамках этого пользовательского пути). Например, чтобы найти его на Госуслугах, надо сделать очень много кликов;
— Также можно ввести ограничения для текста пользовательского контрольного вопроса.
#log_in
Хабр
Может ли быть уязвимость в дизайне, контенте и CSS и разбор такой уязвимости(?) на Госуслугах
Кажется, что уязвимость - штука техническая, но на Госуслугах есть интересная комбинация уязвимостей (ну или, скажем, черт, особенностей) в сфере CSS, дизайна, юзабилити, которые мошенники используют...
Алексей Тюрин написал, как обезопасить ввод пинкода на телевизоре, когда экран видят другие люди.
— Пинкод закрывает детям и сожителям доступ к настройкам телевизора, подпискам и покупкам, платёжным данным. Особенно актуально, если телевизор находится в публичном месте;
— Также им можно ограничить детей от взрослого контента;
— Люди могут использовать тот же пинкод, например, в банковском приложении, что повышает ставки, если кто-то подсмотрит его во время ввода на телевизоре;
— Раньше не было проблемы ввести код, не выбирая цифры на экране, так как цифры были на пультах;
— Проблему легко решили на приставках (PlayStation, Steam): на контроллере много кнопок, которые можно нажимать вместо цифр;
— В Android TV, Sony Bravia, Samsung Tizen есть безопасный ввод: стрелками ↑ и ↓ на пульте пользователь выбирает на экране группу цифр (1-2-3, 4-5-6, 7-8-9), а кнопками ←, OK, → незаметно для стороннего наблюдателя выбирает левую, правую или центральную цифру в группе;
— Коды иногда используют для отключения родительского контроля. Если ребёнок дошкольного возраста, вместо пинкода для разблокировки взрослого контента можно просто просить ввести решение несложного математического выражения (3×8=?) или цифры, написанные на экране словами (Zero, One, Zero, Two);
— Стоит ожидать появления разблокировки отпечатком пальца или лицом через встроенные в пульт сенсоры.
#tv #log_in
— Пинкод закрывает детям и сожителям доступ к настройкам телевизора, подпискам и покупкам, платёжным данным. Особенно актуально, если телевизор находится в публичном месте;
— Также им можно ограничить детей от взрослого контента;
— Люди могут использовать тот же пинкод, например, в банковском приложении, что повышает ставки, если кто-то подсмотрит его во время ввода на телевизоре;
— Раньше не было проблемы ввести код, не выбирая цифры на экране, так как цифры были на пультах;
— Проблему легко решили на приставках (PlayStation, Steam): на контроллере много кнопок, которые можно нажимать вместо цифр;
— В Android TV, Sony Bravia, Samsung Tizen есть безопасный ввод: стрелками ↑ и ↓ на пульте пользователь выбирает на экране группу цифр (1-2-3, 4-5-6, 7-8-9), а кнопками ←, OK, → незаметно для стороннего наблюдателя выбирает левую, правую или центральную цифру в группе;
— Коды иногда используют для отключения родительского контроля. Если ребёнок дошкольного возраста, вместо пинкода для разблокировки взрослого контента можно просто просить ввести решение несложного математического выражения (3×8=?) или цифры, написанные на экране словами (Zero, One, Zero, Two);
— Стоит ожидать появления разблокировки отпечатком пальца или лицом через встроенные в пульт сенсоры.
#tv #log_in
Оди. О дизайне
Ввод ПИН-кода на ТВ: как сделать его безопасным — Оди. О дизайне
Согласно российскому законодательству при запуске всех онлайн-кинотеатров требуется ввод пин-кода. Я решил изучить эту проблему глубже и выяснить: какие типы ПИН-кодов бывают, всегда ли нужно запоминать ПИН-код, есть ли альтернативы и, самое главное, что…
Станислав Хрусталёв написал о входе в приложение по номеру телефона.
— Объедините вход и регистрацию. При вводе номера проверяйте, есть ли такой пользователь, и ведите на нужный сценарий;
— Вынесите ввод номера на отдельный экран. Не смешивайте с другими элементами неавторизованной зоны, чтобы не размывать фокус;
— Заголовок формы должен быть достаточно большим и содержать призыв к действию;
— Добавьте пояснение, что произойдёт дальше («Отправим сообщение с кодом»), чтобы управлять ожиданиями пользователя. Можно подчеркнуть ответственное отношение к приватности («Обещаем хранить его в тайне») или скорость входа («Займёт всего минуту»);
— Не дублируйте заголовок в плейсхолдере поля. Покажите в нём формат номера телефона, чтобы смысл поля был понятен с первого взгляда. Цифры лучше показать нулями или девятками;
— Активируйте поле автоматически при открытии экрана, отображайте цифровую раскладку клавиатуры (без возможности её поменять);
— Если принимаете только российские номера, +7 можно отобазить по умолчанию;
— Если пользователь вышел, но не удалил приложение, его номер можно сохранить и предложить при повторном входе. Если удалил приложение, номер можно запомнить по Device ID;
— Поле ввода можно промаркировать как phone number, чтобы пользователь мог подставить сохранённый на устройстве номер;
— Чтобы снизить количество ошибок, форматируйте введённый номер и ограничивайте количество символов (в зависимости от кода страны);
— При удалении номера по символам, автоматически удаляйте символы форматирования;
— Переходить к подтверждению лучше по нажатию на кнопку. Разместите её в нижней части экрана, не перекрывайте клавиатурой. Иногда кнопку «Получить код» размещают в кастомизированном меню над клавиатурой;
— Код по смс удобнее звонка, так как с автоподстановкой его можно ввести одним нажатием. Пуш ещё удобнее — приложение само может его обработать;
— На экране подтверждения стоит написать, что смс отправлено (и на какой номер). Но это сообщение должно быть визуально вторичным;
— Отправитель смс — название бренда. Код — в начале сообщения, чтобы не надо было его открывать. В текст добавьте пояснение, что это за код и что его не надо никому сообщать;
— Проверять код можно автоматически при вводе нужного количества символов.
#log_in #sign_up
— Объедините вход и регистрацию. При вводе номера проверяйте, есть ли такой пользователь, и ведите на нужный сценарий;
— Вынесите ввод номера на отдельный экран. Не смешивайте с другими элементами неавторизованной зоны, чтобы не размывать фокус;
— Заголовок формы должен быть достаточно большим и содержать призыв к действию;
— Добавьте пояснение, что произойдёт дальше («Отправим сообщение с кодом»), чтобы управлять ожиданиями пользователя. Можно подчеркнуть ответственное отношение к приватности («Обещаем хранить его в тайне») или скорость входа («Займёт всего минуту»);
— Не дублируйте заголовок в плейсхолдере поля. Покажите в нём формат номера телефона, чтобы смысл поля был понятен с первого взгляда. Цифры лучше показать нулями или девятками;
— Активируйте поле автоматически при открытии экрана, отображайте цифровую раскладку клавиатуры (без возможности её поменять);
— Если принимаете только российские номера, +7 можно отобазить по умолчанию;
— Если пользователь вышел, но не удалил приложение, его номер можно сохранить и предложить при повторном входе. Если удалил приложение, номер можно запомнить по Device ID;
— Поле ввода можно промаркировать как phone number, чтобы пользователь мог подставить сохранённый на устройстве номер;
— Чтобы снизить количество ошибок, форматируйте введённый номер и ограничивайте количество символов (в зависимости от кода страны);
— При удалении номера по символам, автоматически удаляйте символы форматирования;
— Переходить к подтверждению лучше по нажатию на кнопку. Разместите её в нижней части экрана, не перекрывайте клавиатурой. Иногда кнопку «Получить код» размещают в кастомизированном меню над клавиатурой;
— Код по смс удобнее звонка, так как с автоподстановкой его можно ввести одним нажатием. Пуш ещё удобнее — приложение само может его обработать;
— На экране подтверждения стоит написать, что смс отправлено (и на какой номер). Но это сообщение должно быть визуально вторичным;
— Отправитель смс — название бренда. Код — в начале сообщения, чтобы не надо было его открывать. В текст добавьте пояснение, что это за код и что его не надо никому сообщать;
— Проверять код можно автоматически при вводе нужного количества символов.
#log_in #sign_up
Hardclient
Проектируем авторизацию по номеру телефона в приложении: 180 гайдлайнов
Лучшие практики UX/UI в мобильном e-commerce