jQuery. Как создать всплывающие окна авторизации

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

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

Не требуйте регистрацию

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

Например, при заказе на сайте 966.ua пользователь может выбрать Быструю покупку или Заполнить подробную форму

Также стоит избегать таких формулировок, как «Регистрация» и «Авторизация», замените их на «Войти», «Личный кабинет», «Новый клиент» и т.д.

Размещайте вход в личный кабинет в привычном месте

Это и есть UX — опыт использования и взаимодействия с сайтом. Многие привыкли к тому, что кабинет и корзина находятся в правом верхнем углу. Поэтому не нарушайте устоявшиеся паттерны. Постоянные пользователи будут искать вход в систему на привычном месте и, если не найдут его там, то могут растеряться и покинуть сайт, что повлияет на конверсию.

. Не предъявляйте слишком строгие требования к паролю

Чрезмерно строгие требования к паролям могут стать серьезным препятствием к авторизации во время оформления заказа.

По данным Baymard Institute,18,75% пользователей, которые делают покупку на сайте повторно, не завершают заказ из-за того, что не могут вспомнить сложный пароль. Обычно они пробуют несколько комбинаций, затем сбрасывают пароль и ждут письма с возможностью поменять его. На этом этапе могут возникнуть проблемы — задержка письма, попадание в спам — вероятность отказа от покупки очень высока.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если преимущества регистрации клиентов очевидны для бизнеса, то покупателю может быть непонятно для чего ему это. Организуйте систему лояльности с бонусами, личными скидками и промокодами. Так вы выстроите взаимоотношения с клиентами, повысите LTV пользователя и увеличите доход интернет-магазина, помните, что ARРU лояльных пользователей в 3 раза выше, чем новых.

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

• История заказов с возможностью повторить их;
• Проверка статуса заказа;
• Сохранение адресов доставки, контактов получателей, способов оплаты и т.д.;
• Начисление бонусов за покупки, программа лояльности, личная скидка;
• Сохранение понравившихся товаров в «Избранное»;
• История просмотров;
• Участия в закрытых акциях;
• Получение рассылки со специальными и эксклюзивными предложениями, информацией о распродажах, акциях, скидках на интересующие их товары, и прочее.

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

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

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

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

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

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

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

Предложите авторизацию по номеру телефона

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

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

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

Сделайте фоновую регистрацию

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

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

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

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

Сделайте акцент на эксклюзивности

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

Пример реализации сообщества в детском интернет-магазине Антошка

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

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

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

Минимизируйте количество полей

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

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

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

Сохраняйте внесенные данные при ошибке

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

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

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

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

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

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

Пишите понятные заголовки в рассылке

Если пользователь забыл пароль, первое, что он попробует сделать — это найти приветственное письмо со всеми регистрационными данными. Облегчите задачу пользователю, сделав понятную тему письма с указанием названия интернет-магазина и пометкой о чем email. Например: «Регистрационные данные в …». Используйте название вашего интернет-магазина в поле отправителя.

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

• Сделать регистрацию необязательной или фоновой;
• Реализовать регистрацию и авторизацию в одно окно;
• Внедрить регистрацию по номеру телефона с одноразовым кодом-паролем;
• Предложить регистрацию и авторизацию через соцсети.

Jquery. как создать всплывающие окна авторизации

Как делать

Что же делать веб-дизайнерам? Думаю, что скучная старая форма входа в систему просто прекрасна. Вот

А вот WordPress:

Простой, лаконичный, предсказуемый дизайн. Совместим с менеджерами паролей. Всё на месте. Вот некоторые соображения:

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

Какие ошибки часто допускают веб-дизайнеры и верстальщики

Самая распространенная ошибка в пользовательском интерфейсе — это спрятанная форма авторизации. Обычно ее вставляют по ссылке в окне регистрации. Например, чтобы ввести свои данные и открыть личный кабинет пользователю приходится искать форму ввода, переходить по гиперссылке (совершать 2-3 действия вместо 1).

Какой должна быть идеальная форма для авторизации

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

Не помещайте авторизацию в модальные формы

Hertz и куча других сайтов помещают форму входа в модальное окно. У такого подхода две проблемы:

Не разделяйте форму входа на несколько страниц

Не скрывайте поля

Сайт Delta скрывает поле «Фамилия». Я так понимаю, чтобы сделать интерфейс чище, введя элементы прогрессивного дизайна. Проблема в том, что поле является обязательным, а менеджеры паролей не могут автоматически его заполнить. Пользователи должны сначала заполнить и выйти из другого поля, чтобы появилось это. Просто одно дополнительное, ненужное препятствие, чтобы человек мог войти в систему.

Экран входа в MacOS таким же образом прячет поле пароля, чтобы «очистить» UI (и я также предполагаю, чтобы подтолкнуть пользователей к входу через TouchID), но эта чистота, на мой взгляд, может запутать людей.

Не шутите с магическими ссылками

Возможно, это началось с Slack, но теперь и другие программы, такие как Notion (который я люблю, кстати), отправляют на электронную почту временный пароль для входа в систему. Могу оценить хитрость этого шаблона, поскольку он избавляет от страданий несчастных пользователей, которым трудно запомнить ещё один пароль, и не нужно создавать всю необходимую инфраструктуру для восстановления забытого пароля. Но.

• Эта схема невероятно утомительна. 1. Ввести email в форму входа. 2. Открыть новую вкладку или переключить программу. 3. Открыть почтовый ящик. 4. Найти сообщение от сервиса (если вы не отвлеклись на другие письма). 5. Открыть сообщение. 6. Скопировать пароль-абракадабру. 7. Вернуться на сайт. 8. Вставить туда абракадабру. 9. Отправить форму. Блин.
• Это вообще не работает с менеджерами паролей, что невероятно раздражает. В дизайне мы много говорим о согласованности. Но речь идёт не только о согласованности в собственной экосистеме, но и со всем остальным интернетом, ёлки-палки.
• Это заставляет пользователей осваивать новое поведение: пользователи выучили определённые шаблоны (вход, проверка, навигация и т. д.), многократно используя их во многих приложениях в течение многих лет. Я не говорю, что никогда не следует вводить новшества. Но важно признать, что пользователи приходят к вашему продукту с грузом заработанных знаний о том, как использовать интернет. Когда мы пытаемся стать слишком умными, то заставляем пользователей изучать новые шаблоны, что тормозит людей (по крайней мере, с самого начала).

Создание форм регистрации и авторизации на php

<?php
    session_start();
    include('config.php');
    if (isset($_POST['register'])) {
        $username = $_POST['username'];
        $email = $_POST['email'];
        $password = $_POST['password'];
        $password_hash = password_hash($password, PASSWORD_BCRYPT);
        $query = $connection->prepare("SELECT * FROM users WHERE email=:email");
        $query->bindParam("email", $email, PDO::PARAM_STR);
        $query->execute();
        if ($query->rowCount() > 0) {
            echo '<p class="error">Этот адрес уже зарегистрирован!</p>';
        }
        if ($query->rowCount() == 0) {
            $query = $connection->prepare("INSERT INTO users(username,password,email) VALUES (:username,:password_hash,:email)");
            $query->bindParam("username", $username, PDO::PARAM_STR);
            $query->bindParam("password_hash", $password_hash, PDO::PARAM_STR);
            $query->bindParam("email", $email, PDO::PARAM_STR);
            $result = $query->execute();
            if ($result) {
                echo '<p class="success">Регистрация прошла успешно!</p>';
            } else {
                echo '<p class="error">Неверные данные!</p>';
            }
        }
    }
?>

Чего не надо делать

Вот некоторые примеры, которых я бы избегал.

Заключение

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