как работает форма регистрации на сайте
8 способов создания идеальной формы регистрации
Перевод статьи Карлоса Соузы
Как только бизнес начал переходить в интернет и воспринимать веб серьезно, формы регистрации стали жизненно важной частью сайтов и приложений. Это первый барьер на пути пользователя, решившего совершить онлайн покупку, а значит — ключевой фактор для поддержания стабильных отношений с целевой аудиторией.
Почему, если формы регистрации важны, они зачастую столь плохо спроектированы? С этой мыслью в голове я составил список ключевых факторов, которые стоит учесть при их создании.
1. Придайте регистрации ценность
Почему пользователь должен зарегистрироваться? Вы должны понимать, ради чего тратить несколько драгоценных минут своего времени, и уметь убедить клиента в важности этого шага.
Покажите преимущества регистрации. В этом случае пользователи более охотно оставляют личные данные. Они как бы обменивают их на ваше щедрое предложение.
Ниже — несколько примеров, как показать эту выгоду:
2. Откажитесь от обязательных полей
Обязательные поля — возможно самая распространенная ошибка. Не слушайте коллег из отделов IT и маркетинга. Их аргументы — из 90-х, когда все было непонятно и сложно. Мы живем в XXI веке, и сейчас возможно действительно все.
Главная причина большого количества полей в формах — стремление получить как можно больше данных для рекламных компаний. Однако существует много других путей, чтобы сделать это.
При регистрации запрашивайте минимум изначально необходимой информации. Все остальное вы всегда успеете узнать после. Если ваша цель — качество, а не количество, то сфокусируйтесь на анализе данных и качестве выводов.
Откажитесь от подтверждения почты и пароля —это улучшит UX. Нужно избежать ошибок и опечаток? — вместо прямой проверки совпадений используйте альтернативные решения. Например такое, предложенное Крисом Джексоном:
Чтобы не заставлять пользователя подтверждать пароль, предусмотрите возможность увидеть его. Одно это увеличит количество завершенных регистраций.
О регистрации на сайтах
Мы часто выполняем на многих сайтах действие, которое постоянно эволюционирует и улучшается (а иногда наоборот). Это регистрация. Именно о разных способах и особенностях регистраций на сайтах я бы хотел с вами поговорить. Это не громоздкое исследование, а просто небольшие и (надеюсь) полезные выдержки из моего опыта дизайнера интерфейсов.
Пример удачной регистрации на сайте Tumblr.
Начну с определения самого понятия «регистрация», с ним всё не так просто, как может казаться. В результате полевых исследований нашей компании оказалось, что разные люди (клиенты, посетители и мы сами) нередко воспринимают это слово по-разному. Для того, чтобы избежать непонимания, опишу то, как я сам вижу регистрацию.
Что такое регистрация?
Регистрация — это способ сообщить сайту данные о себе и в обмен получить доступ к дополнительным возможностям (например, добавление чего-либо в избранное) или ресурсам (к примеру, файлам) на сайте, которые недоступны гостям.
Регистрация неразделима без авторизации. Фактически, регистрация — это способ получить возможность войти на сайт.
Нередко регистрацию делают обязательной для доступа к сайту. Часто это происходит в социальных сетях, где возможности гостей ограничены по определению.
Но так ли нужна регистрация на сайте для большинства проектов?
Зачем нужна регистрация?
Обычная регистрация
Под «обычной» я понимаю регистрацию на сайте, в обмен на которую получаю логин и пароль, который сам же и ввёл. При этом логином здесь может быть всё что угодно.
Стандартный способ регистрации на сайте StartupPoint.
Регистрация с помощью сторонних сайтов
Под этим определением я понимаю регистрацию с помощью аккаунта в социальных сетях, через идентификатор OpenID (почти мёртвая технология для масс) и, отдельно, регистрация с аккаунтом больших систем вроде Google, Яндекс и других. Да, иногда это тоже OpenID внутри, но для стороннего человека само определение «OpenID» — филькина грамота.
Регистрация с помощью сторонних сервисов на сайте Кинобаза.
Пример диалога с просьбой о доступе к данным на сайте Twitter.
Мягкая регистрация
Так мы называем регистрацию, которая не выглядит как отдельный процесс и происходит по мере выполнения важных действий. Обычно, для мягкой регистрации нужен только адрес электронной почты, чтобы отправить на неё пароль и приглашение войти на сайт. Если человеку это не нужно, то он просто удалит это письмо или проигнорирует его, однако для сомневающихся это создаст ещё один путь входа на сайт, что достаточно сильно влияет на эффективность регистрации.
Пример мягкой регистрации на сайте SoundCloud.
Мы часто применяем мягкую регистрацию как основной способ интеграции человека как раз благодаря тому, что он не смущает посетителей и позволяет пользователю быстро войти на сайт.
В качестве примера можно привести мягкую регистрацию в процессе оформления заказа на сайте интернет-магазина. Магазин неизбежно спрашивает человека его электронный адрес для того, чтобы можно было с ним связаться и подтвердить заказ. Так почему бы не использовать его для мягкой регистрации? Если посетитель ранее не вводил эту почту на сайте, то ему придёт сразу пароль для доступа к его личному кабинету с массой дополнительных полезных возможностей, а если вводил, то просто напоминание о том, что аккаунт с такой электронной почтой уже существут и можно привязать заказ к нему.
Регистрация во время оформления заказа на сайте интернет-магазина Розетка.
Главное — не давить. Мягкой эта регистрация называется из-за того, что помогает человеку сделать выбор и упрощает ему жизнь, а не навязывается.
Этот способ позволяет вовлечь человека в процесс регистрации так, что он ему понравится, даже если он его заметит. А постепенное вовлечение — сильная штука, гораздо более эффективная, если сравнивать с обычной формой регистрации.
Нужна ли регистрация вообще
Если вы ответили «Да» хотя бы на два вопроса, то регистрацию вам применять всё-таки стоит 🙂
Какой способ регистрации использовать
Почему бы не все? Почти во всех проектах можно реализовать обычный способ регистрации наряду с возможностью получить аккаунт через социальные сети и большие проекты. А мягкая регистрация может применятся во время первого важного действия на сайте или через завлекательную функцию (об этом в другой раз).
Два пути регистрации на сайте Dribbble.
PPS от автора: Надеюсь, вам понравилась статья. Буду рад, если вы укажете на ошибки, чтобы я мог их оперативно исправить. Пишите мне в личку, пожалуйста 🙂
Упрощаем регистрацию и вход на сайт
Представляю вашему вниманию перевод статьи под названием «Innovative Techniques To Simplify Sign-Ups and Log-Ins» от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.
Существует множество различных способов создания форм регистрации и авторизации. Большинство дизайнеров знакомы с традиционными способами.
Однако, зная и используя некоторые инновационные техники, можно сделать формы понятнее и легче для заполнения.
Форма авторизации на сайте Basecamp
В этой статье мы представляем несколько идей, которые могли бы оказаться полезными для ваших проектов. Но, собираясь использовать их, пожалуйста убедитесь в том, что правильно понимаете контекст, в котором их следует применять. А еще мы будем рады увидеть результаты юзабилити-тестирований, подтверждающие или опровеграющие советы, изложенные ниже.
Упрощаем форму регистрации
Цель любой веб-формы заключается в том, чтобы пользователь легко и правильно ее заполнил. Если форма слишком длинная и сложная, то впечатление пользователя от сайта может быть испорчено. Ниже представлено несколько приемов, которые помогут сделать так, чтобы пользователи заполняли ваши формы легко и быстро.
Спрашивайте имя пользователя уже после регистрации
Во время заполнения формы регистрации от пользователя требуется придумать и ввести уникальное имя. И если пользователь придумывает и вводит уже кем-то занятое имя, ему приходится думать еще, он тратит свое время и терпение. Вместо того чтобы требовать у посетителей имя в процессе регистрации, вы вполне можете спросить его сразу после этого процесса. В таком случае вы не будете тормозить процесс регистрации пользователя необходимостью придумать оригинальное имя только для того, чтобы удовлетворить ненавистную форму.
Спрашивайте пароль только один раз
Многие формы регистрации предлагают пользователям ввести пароль в два поля. Причины этого вполне понятны — вводимый пароль в форме прячется за маской из соображений безопасности: так люди за спиной не смогут его увидеть. А два поля в этом случае помогают избежать опечаток.
Однако на практике это приводит к еще большему количеству ошибок, потому что пользователю приходится печатать больше. Он не видит, какие символы вводит, и каждый раз при вводе пароля не уверен в том, что печатает правильный пароль.
Автозаполнение поля «город» на основе почтового индекса
Автоподстановка в поле «страна»
Позволяйте пользователям скопировать платежный адрес из адреса доставки
Не ставьте по умолчанию галочку в чекбоксе «Подписаться на рассылку», предлагайте сначала посмотреть превью письма
Большинство веб-сайтов по умолчанию подписывают своих свежезарегистрированных посетителей в надежде получить побольше подписчиков своей корпоративной рассылки. Да, такой прием иногда срабатывает, однако подписка бессмысленна, если пользователь просто не заметил опцию ее отключения или не понял назначения этой опции. Если пользователю неинтересно будет получать вашу рассылку, он все равно отпишется от нее, и в долгосрочной перспективе такой метод вам не поможет. А еще рассылка писем пользователям, не подозревавшим о наличии рассылки, легко может оттолкнуть их от вас.
Более эффективным подходом было бы продемонстрировать превью или отрывок письма из рассылки. В таком случае пользователи смогут наглядно представить что они потеряют, если не подпишутся. А еще вы будете спать спокойно, зная, что вашу рассылку получают только те, кто точно в ней заинтересован.
Боритесь со спамом, пряча при помощи JavaScript текстовое поле, вместо использования капчи
Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.
Упрощаем формы входа на сайт
Задача любой формы авторизации — пустить пользователя в его аккаунт. Не смотря на такую простую задачу, одни формы авторизации решают ее лучше других. Вот вам несколько простых способов того, как помочь пользователям входить в свой аккаунт легче и быстрее.
Дайте возможность использовать адреса электронной почты в качестве логина
Запомнить адрес электронной почты гораздо легче (мы пользуемся им постоянно), чем запомнить логин (который придуман для конкретного сайта). Дайте пользователям возможность авторизоваться, используя и имя пользователя, и свою электронную почту. В случае, если пользователь забудет свой логин, он всегда сможет войти под своей электропочтой.
Авторизируйте пользователя так, чтобы он оставался на той же странице
Авторизация на сайте — это важная функция, и пользователи захотят иметь возможность авторизоваться с любой странички на сайте. Так что не забудьте сделать так, чтобы после входа на сайт пользователь попал на ту же страничку, с которой он авторизовывался. Это сделает процесс проще и поможет пользователю сразу приступить к решению своей задачи на сайте.
Существует два пути реализации такого процесса: выпадающая форма и модальное окно.
Автоматически устанавливайте курсор в первое поле формы
Как только пользователи увидят перед собой форму авторизации, они будут готовы к тому, чтобы войти на сайт. Вы можете облегчить им задачу, размещая курсор в первом поле ввода. Тогда пользователям не придется наводить мышку на поле и кликать по нему. Они смогут держать руки на клавиатуре и сразу же начать вводить необходимые данные. При авто-фокусировке поле должно отчетливо подсвечиваться — это поможет пользователю понять что уже можно начинать печатать.
Позвольте пользователям видеть их пароли
Эта опция полезна при авторизации точно так же, как и при регистрации. Если пользователи не видят символов в поле, они легко могут опечататься, после чего им придется вводить пароль заново до тех пор, пока они не введут его правильно.
Используйте иконку вопроса в качестве ссылки для восстановления пароля
Пользователи не должны испытывть проблем с поиском ссылки восстановления пароля в форме. Вместо того, чтобы использовать слова «Забыли пароль?» в качестве ссылки, достаточно сделать ссылкой маленькую иконку в виде знака вопроса, которая не потеряется среди других ссылок и не занимает много места. Знак вопроса это понятный всем значок помощи, так что пользователи поймут куда им нужно идти для того, чтобы восстановить забытый пароль.
Делайте кнопку «Подтвердить» такой же ширины, что и поля ввода
Кнопка подтверждения создана не просто для того, чтобы сделать возможным действие — она еще показывает какое именно действие пользователь сейчас совершит. Маленький размер кнопки означает слабую подсказку к манипулированию, из-за чего пользователь может сомневаться в нужности данного действия.
Широкая кнопка придает уверенности, и её трудно не заметить. Название кнопки также становится заметнее, поэтому пользователь лучше понимает действие, которое собирается совершить.
Разрешите пользователям логиниться с аккаунтов в Facebook, Twitter или с помощью OpenID
Сейчас почти все имеют аккаунты в Facebook и Twitter или пользуются OpenID. Разрешите пользователям логиниться с их помощью, и они смогут заходить на сайт практически мгновенно, без необходимости возиться с формой авторизации. А еще они будут избавлены от нужды хранить десятки логинов и паролей для посещаемых сайтов.
Разумеется, вы можете пойти дальше и использовать Facebook Connect для автоматического сбора и сохранения необходимых данных. Например, на сервисе Friend.ly — приложении для Facebook — в процессе регистрации пользователям достаточно просто нажать на кнопку «Регистрация» — вся информация о пользователе собирается автоматически. Такой подход сразу рождает много беспокойств по поводу приватности, поэтому, пожалуй, его использовать не стоит.
Заключение
Ваши формы регистрации и авторизации не должны усложнять жизнь пользователям, ведь заполнение форм — это то еще развлечение. Наши советы помогут вам сделать формы проще и эффективнее, так что путь ваших пользователей к содержимому сайта будет короче и приятней.
.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂
Создание форм регистрации и авторизации на PHP
Система регистрации и авторизации необходима для любого сайта, который хранит информацию о своих пользователях. Такие системы используются на сайтах самой разнообразной тематики – от образовательных платформ, которые хранят сведения о прохождении обучающих курсов и оценках, до онлайн-магазинов, которые сохраняют историю покупок и адреса пользователей. В этом руководстве мы научим вас создавать формы регистрации и авторизации с нуля.
Разработка форм регистрации и авторизации
Мы рассмотрим процесс создания простых форм для регистрации и авторизации пользователей. Регистрационная форма будет содержать поля для ввода имени, пароля и адреса электронной почты. Имя пользователя и адрес электронной почты при этом должны быть уникальными для каждого конкретного пользователя. В случае попытки регистрации второй учетной записи с таким же именем пользователя (или электронной почтой) будет выводиться сообщение об ошибке с пояснением о том, что такие данные уже используются в системе.
Код регистрационной формы
Ниже приведен HTML-код необходимый для создания формы регистрации. Сохраните его вфайле register.php.
Несмотря на простоту данной формы, для проведения простейшей валидации данных в ней используется HTML5. К примеру, использование type=»email» обеспечит уведомление пользователя о том, что он неправильно ввел адрес электронной почты. Кроме того, применение pattern позволит провести проверку имени пользователя – логин может состоять только из латинских букв и цифр.
Наиболее продвинутый способ валидации данных подразумевает использование jQuery – в этом случае разработчик получает полный контроль над показом, расположением и внешним видом сообщений об ошибках ввода. Подробнее о валидации на стороне клиента с использованием jQuery рассказывается в этой статье.
Исходный код страницы авторизации
CSS-стили для оформления форм
Для улучшения внешнего вида форм примените к ним следующие CSS-стили:
В коде, приведенном выше, предусмотрено оформление заголовков и сообщений об ошибках валидации. Фрагменты HTML и CSS кода, рассмотренные выше, могут использоваться в качестве основы, поскольку ваш собственный проект может нуждаться в другом стиле оформления, а также в дополнительных полях ввода.
Создание таблицы с учетными данными и подключение к базе данных
Следующий шаг – создание таблицы базы данных, содержащей учетные данные пользователей. В нашем случае таблица состоит всего из четырех столбцов:
Для быстрого создания таблицы базы данных можно использовать следующий SQL-запрос:
Теперь создайте файл config.php и сохраните в нем приведенный далее код для подключения к базе данных:
В приведенном выше коде замените название базы данных на то, которое вы используете для своего собственного сайта.
Исходный код для регистрации пользователей
Теперь пришла очередь написать код для регистрации пользователей. Главная функция этого кода – проверить, не зарегистрирован ли уже аналогичный адрес электронной почты в базе данных. Если нет, новое имя пользователя вместе с адресом его электронной почты и паролем передаются для сохранения в базе данных.
Сохраните приведенный далее код в начале файла registration.php :
На первом этапе выполнения кода включается config.php, начинается сессия. Так мы получаем возможность сохранить любую информацию для дальнейшего использования на всех страницах сайта.
После этого мы проверяем, существует ли предоставленный пользователем адрес электронной почты в базе данных. Если это так, пользователь получит соответствующее сообщение. Если же такого email-адреса в базе данных, используемой сайтом, нет, вся введенная информация сохраняется в базе данных и пользователь видит сообщение об успешной регистрации.
Функция авторизации
На предыдущем этапе мы уже сохранили код для формы авторизации пользователей в системе. На этом этапе мы будем проверять, соответствуют ли введенные пользователем данные учетной записи, сохраненной в базе.
Приведенный далее код должен располагаться в начале файла login.php:
Важно отметить, что мы не проверяем правильность имени и пароля одновременно. Поскольку пароль сохранен в хэшированном виде, сначала необходимо запросить хэш с помощью предоставленного имени пользователя. Когда мы получим хэш, можно будет проверить предоставленный пользователем пароль на соответствие хэшированному – с помощью функции password_verify().
Ограничение доступа к страницам
На большинстве сайтов, запрашивающих учетные данные посетителей, есть страницы, на которых зарегистрированные пользователи хранят свою личную информацию. Для защиты подобных страниц от несанкционированного доступа можно использовать переменные сессии. Если переменная сессии не создана, пользователь перенаправляется на страницу авторизации. Если переменная сессии создана, пользователь видит содержимое страницы:
Все, что нужно сделать для ограничения или предоставления доступа – это использовать в начале приведенного выше скрипта строку session_start().
Типичные ошибки и способы их решения
При использовании скрипта для ограничения доступа неавторизованных пользователей обычно возникают три типа ошибок.
Некорректное имя переменной
«Заголовки уже отправлены»
Переменные сессии не сохраняются при переходах между страницами
Разбор формы регистрации на сайте
Авторизация и аутентификация, в чем разница?
Для начала мы уменьшим количество заполняемых полей до минимума, то есть запросим только те данные, которые просто необходимы для минимальной персонализации пользователя. В итоге у нас получилось всего три поля: email адрес, пароль и имя пользователя. Да, всего три, email и пароль для идентификации пользователя, а имя пользователя для его персонализации среди других пользователей.
(Примеры форм регистрации/аутентификации)
Я пересмотрел десятки разных вариаций на данную тему и ни одно меня не устроило. Самые распространенные варианты были: две кнопки рядом, вход и регистрация, которые выводили две разные формы; одна большая кнопка регистрации на лендинге и маленькая кнопка входа где-то в верхнем правом углу; модальное окно с двумя переключателями/вкладками форм регистрации и входа. Больше всего мне не хотелось делать две формы, так как у такого подхода всегда будет один лишний шаг что-бы сменить одну форму на другую.
(Примеры формы регистрации/аутентификации)
Собираем готовую форму
Один мой знакомый подсказал, что у них на сервисе (в компании в которой он работает) регистрация/аутентификация реализована следующим способом: Есть одно поле для ввода email адреса. Мы вводим свою почту, нажимаем продолжить, если такой адрес найден в базе, то открывается форма входа, если адрес не найден, то открывается форма регистрации. Такой подход избавляет пользователя от промежуточного шага выбора нужной формы, но не избавляет общий процесс регистрации/входа от двух шагов, даже с автоматическим выбором формы, что ненамного облегчает задачу.
Основная мысль этой идеи мне понравилась, но я решил более автоматизировать и упростить задачу. Страшное название «регистрация» я заменил на более приветливую фразу «мой профиль». В итоге была реализована форма с тремя полями (email, пароль, имя пользователя) и одной кнопкой («создать | войти»). Причем поле «имя пользователя» изначально заблокировано для ввода. Пользователь вводит свой email и как только переключается на поле пароля (поле email теряет фокус), отправляется запрос в базу данных с введенным email адресом по которому идет поиск среди пользователей. Если совпадение найдено, мы получаем его имя и отдаем клиенту. На стороне клиента имя вставляем в поле «имя пользователя», а кнопка меняет название на «войти». Если же пользователь с таким email адресом не найден в базе, то мы разблокируем поле ввода «имя пользователя» и меняем кнопку на «создать».
Так же я не забыл про пользователей, которые используют для входа соц. сети и другие популярные сервисы. Под формой регистрации располагается блок с социальными кнопками для входа. И ещё одна маленькая, но важная деталь, небольшой переключатель видимости пароля, который показывает/скрывает пароль для более точного ввода.
(Итоговая форма регистрации/аутентификации)
По моему у нас вышла отличная форма регистрации/входа. Весь процесс занимает заполнение трех, а если пользователь уже имеет профиль, то двух полей и нажатие на одну кнопку. В следующей статье мы рассмотрим архитектуру RESTfull и её реализацию на сервисе (с точки зрения пользователя).