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

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

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

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

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

Авторизируйте пользователя так, чтобы он оставался на той же странице

Авторизация на сайте — это важная функция, и пользователи захотят иметь возможность авторизоваться с любой странички на сайте. Так что не забудьте сделать так, чтобы после входа на сайт пользователь попал на ту же страничку, с которой он авторизовывался. Это сделает процесс проще и поможет пользователю сразу приступить к решению своей задачи на сайте.

Существует два пути реализации такого процесса: выпадающая форма и модальное окно.

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

Модальное окно также не уносит пользователя с текущей страницы — оно разворачивается по центру страницы, концентрируя внимание полностью на форме авторизации. Этот вариант дает возможность разместить в форме дополнительную информацию.

Автозаполнение поля «город» на основе почтового индекса

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

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

Когда пользователь забывает пароль, то зачастую пытается найти письмо с паролем. Облегчите задачу, отразив суть письма в теме. Вместо «Поздравляем!» или «Добро пожаловать!» используйте тему вроде «Данные учетной записи в таком-то интернет-магазине». В качестве отправителя также должно быть название ресурса.

Делайте кнопку «подтвердить» такой же ширины, что и поля ввода

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

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

Покажите, что бонусы за регистрацию — только начало

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

Размещайте форму авторизации на сайте в привычном месте

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

Сделайте регистрацию необязательной

Согласно исследованиям Baymard Institute, 37% пользователей откажутся от оформления заказа из-за необходимости создавать учетную запись. Зачастую пользователям проще сделать заказ в другом интернет-магазине, чем регистрироваться. Есть категория покупателей, которые сознательно выбирают магазины с необязательной регистрацией. Чтобы не терять клиентов, дайте им право выбора — регистрироваться или нет.

. Используйте фоновую регистрацию

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

. Не используйте капчу

Исследователи из Baymard Institute не рекомендуют использовать капчу — даже при условии хорошей реализации она приводит к потере покупателей. Если же капча настолько нечитаема, как в примере ниже, вероятность отказа очень высока.

По результатам исследований, около 8,66% всех пользователей ошибаются при первой попытке. Если капча чувствительна к регистру, ошибутся 29,45%. Только 66% с первой попытки правильно ввели капчу. Если пользователи неправильно введут капчу два раза подряд, то скорее всего покинут сайт.

Если без капчи не обойтись, опирайтесь на следующие правила:

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

. Не блокируйте учетную запись при неправильном введении пароля

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

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

. Не очищайте данные формы при ошибке

Не удаляйте все введенные пользователем данные при одной ошибке — не заставляйте вводить все заново.

. Не требуйте активации учетной записи

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

Расскажите о преимуществах регистрации

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

Упростите авторизацию и регистрацию на сайте

Baymard Institute предлагает несколько решений:

Внедрите авторизацию через телефон

Всё меньше пользователей хотят использовать авторизацию через email, отдавая предпочтение авторизации через телефон:

Важно учитывать эти тенденции, если вы работаете преимущественно в b2c-сегменте.

Единственный недостаток внедрения авторизации через телефон — дополнительные издержки на оплату SMS рассылки.

Используйте сильные стимулы

Чтобы стимулировать пользователя зарегистрироваться, можно использовать:

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

Предложите стать избранным

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

Например, на сайте онлайн-винотек Grape можно вступить в закрытый клуб и получить доступ к специальным скидкам и акциям.

Сохраняйте положение пользователя при авторизации

Пользователи могут авторизоваться на разных этапах взаимодействия с интернет-магазином:

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

Сообщите, если учетная запись занята

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

Дайте понять, какие поля обязательны для заполнения

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

В исследовании Baymard Institute 32% пользователей не заполняли часть обязательных полей в формах, в которых были отмечены только необязательные поля. Пользователям не очевидно значение отсутствия маркировки поля. И вместо того, чтобы заполнять поля без маркировки, пользователи тратят время на раздумья, обязательны ли они. Отсутствие пометки «обязательное поле» увеличивает время заполнения формы и количество ошибок

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

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

Автоматически устанавливайте курсор в первое поле формы

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

Автоподстановка в поле «страна»

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

Авторизация с помощью подключенного устройства

Авторизация с помощью подключенного устройства — это идентификация через Bluetooth (или нечто подобное), то есть присоединение одного устройства к другому, которое уже идентифицировало пользователя.

Например, для Mac OS X есть приложение KeyTouch, позволяющее авторизоваться на компьютере со сканом отпечатков пальцев со своего iPhone. Есть еще и Knock, который позволяет кликнуть по телефону, чтобы разблокировать компьютер.

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

Приложение Tether для iPhone

В домашнем офисе я использую приложение Mac OS X и iOS под названием Tether («связка»). После однократной синхронизации компьютера и телефона компьютер блокируется и разблокируется — в зависимости от близости телефона к компьютеру.

Tether сэкономил мне массу времени. Набор моего пароля с заглавными буквами, цифрами и символами может занять всего три или четыре секунды, но много раз повторять это каждый день, неделю и месяц — это уже слишком. Благодаря идентификации подключенного устройства к тому времени, когда я сажусь в кресло, мой компьютер уже разблокирован. Еще один пример — ключи от машины с Bluetooth.

Беспарольная авторизация

Беспарольная авторизация — это двухфакторная идентификация без первого шага. Нужно помнить свое имя пользователя, адрес электронной почты или номер телефона, после чего пользователь получает уникальный код для завершения входа. Он не создает пароль и не вводит его.

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

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

Авторизация в Slack

У Slack есть очень хороший пример беспарольной идентификации. На разных этапах входа в систему и процессов сброса пароля сервис использует «волшебную ссылку» (magic link) для идентификации пользователей. Уникальный URL отправляется на электронный адрес пользователя, и этот URL открывает приложение и позволяет ему войти.

Примечательна сама презентация этой модели взаимодействия: она представляет контакт пользователя с системой как «магию», упрощая его и успокаивая пользователя (вероятно, придумавший «двухфакторную идентификацию» неправильно понял ее брендинг).

Биометрическая идентификация

Отпечатки пальцев, сканы сетчатки глаза, распознавание лица, голоса и многое другое — все это биометрическая авторизация.

Наиболее распространенный пример — Touch ID компании Apple. Такие вещи действительно восхищают. Биология — наша истинная идентичность, она всегда с нами. Мы знаем об идее разблокирования телефонов или планшетов при помощи отпечатка пальца. Тем не менее биометрическая идентификация используется и в других местах (и с другими параметрами).

Windows Hello — это перспективная система идентификации для Windows 10, соединяющая камеры с датчиками (на компьютерах и устройствах) для распознавания лица, радужки глаз или отпечатков пальцев. Нужно просто открыть компьютер и заниматься своими делами, не жертвуя при этом безопасностью. Этот тип идентификации был до недавнего времени невозможен, особенно в масштабе Windows 10.

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

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

Биометрическая идентификация только начинает развиваться, но некоторые API и библиотеки позволяют нам пользоваться биометрической идентификацией уже сегодня. К ним относятся BioID Web Service, KeyLemon, Authentify и Windows Biometric Framework API (на котором, как мне кажется, построена Hello).

Боритесь со спамом, пряча при помощи javascript текстовое поле, вместо использования капчи

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

Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь.

Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.

Двухфакторная авторизация

Двухфакторная идентификация — это еще одно расширение традиционной идентификации при помощи пароля. После проверки комбинации имени пользователя и пароля уникальный код или URL пересылается по электронной почте либо отправляется SMS-сообщением владельцу аккаунта, который пытается войти в систему.

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

Авторизация в приложении Google

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

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

Google хорошо справляется с идентификацией. Компания используют правило «Доверять этому устройству 30 дней». Кроме того, она предлагает опцию двухфакторной аутентификации как один из вариантов и поощряет его применение, ни к чему не принуждая пользователей.

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

Значение функционала авторизации и регистрации в интернет-магазине

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

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

При этом многие пользователи не хотят выполнять лишние действия, связанные с регистрацией и авторизацией в интернет-магазине. И если функционал реализован неграмотно и усложняет процесс покупки, это обязательно скажется на конверсии. Дальнейшие рекомендации помогут сделать авторизацию и регистрацию выгодной для пользователей, а сами процедуры — максимально простыми.

Используйте иконку вопроса в качестве ссылки для восстановления пароля

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

Как авторизоваться на сайте

Какие плюсы у авторизации?

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

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

Кодовая фраза

Секретные фразы безопаснее паролей, их легче запомнить. Об этом пишут уже больше десяти лет: от статьи «
Пароли-слова против паролей-фраз» в 2005 году до «Почему секретные фразы удобнее для пользователей, чем пароли» в 2022-м.

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

Хотите доказательств?
Zxcvbn — это проект Dropbox, определяющий надежность пароля. Другие сайты могут использовать Zxcvbn как определитель надежности пароля с открытым исходным кодом. В этой статье Dropbox есть статистика и сведения об истинной надежности различных паролей.

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

Впервые я использовал пароли-фразы с компанией интернет-банкинга
Simple, которая приветствует эксперименты и новые технологии, и они показали себя прекрасно. Мою фразу-пароль просто запомнить и легко набрать — особенно на мобильном телефоне.

Конкретизировать сообщение об ошибках ввода

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

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

Напоминать пользователю о правилах

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

Авторизация на cайте BrowserStack

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

Позволяйте пользователям скопировать платежный адрес из адреса доставки

В США и других странах пользователь, желая приобрести что-то в сети, должен указать не только адрес доставки товара, но еще и так называемый адрес оплаты (по нему может быть доставлен чек). В большинстве случаев эти адреса совпадают, так почему бы не разрешить пользователям скопировать их из одного в другой?

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

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

Если кто-то использует функцию общего доступа к экрану или проводит презентацию, можно спрятать символы при вводе пароля, но таких пользователей единицы. Всем остальным удобнее видеть, какой пароль они набирают. Такой метод успешно применяют Yahoo и Sprint — это убедительно доказывает, что нам больше не нужно маскировать пароли.

Подсказки Люка Вроблевски

Люк Вроблевски написал отличный
обзор идей, как можно «открыть» пароль, и описал, как лучше интегрировать их. Он утверждает, что маскирование паролей — устаревшая практика.

Социальный вход

Социальный вход или вход через авторитетный проверенный сайт — популярный и удобный способ идентификации. Он предназначен не только для входа в систему. У American Express есть Amex Express Checkout, откуда вы входите на свой Amex-аккаунт, чтобы безопасно оплачивать товары на сторонних сайтах. Вы идентифицированы, и уже не нужно отправлять данные кредитной карты продавцу.

Спрашивайте имя пользователя уже после регистрации

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

Спрашивайте пароль только один раз

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

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

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

Упрощаем форму регистрации

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

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

Упрощаем формы входа на сайт

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

Шаг 8

И последний штрих. Мы можем ограничивать доступ не только к странице админки, но и к любой другой. Для этого достаточно открыть сессию и проверить наличие метки в ней. Чтобы не копировать на каждую новую страницу эти блоки кода — мы их можем вынести в отдельный файл (auth.php) и затем просто подключать этот файл на страницах, к которым нужно ограничить доступ по паролю. Содержимое файла auth.php будет таким:

Заключение

На этом наш урок завершен, мы выполнили поставленную в уроке задачу — написали свою простенькую систему авторизации. Конечно, как говорилось выше, для серьезных проектов такая система авторизации мало подходит, поскольку пользователей у нас может быть больше одного и хранить их нужно в БД.

Да и шифрование пароля функцией md5() часто также бывает неэффективно, поскольку существуют сервисы с базами хешей… но для нас главное было понять принцип построения системы авторизации, а строится она именно по такому принципу. Итак, урок окончен. До новых встреч.