Улучшаем регистрационную форму на сайте

Дизайн
03.01.2020
574

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

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

Внимание на вопросы безопасности!

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

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

Неплохо реализована идея защиты данных и в проекте Mint.com. Кнопка «Sign Up» с замочком дает уверенность в том, что процесс пользования сайтом защищен. Нажатие на кнопку ведет к попадению на страницу, где нужно указать адрес электронной почты, номер телефона и пароль. После этого остается нажать на иконку «Создать аккаунт» (здесь, к слову, также присутствует изображение замочка).

Пояснения для пользователя

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

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

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

«Нет» множеству полей!

Хороший дизайн формы регистрации не должен быть перегружен полями. Здесь работает правило «меньше – лучше», ведь большое количество полей требуется, как правило, для получения сведений для маркетинговых компаний.  Например, взять систему Ebay с ее простой онлайн-формой для регистрации.

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

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

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

Упрощение процесса регистрации часто предполагает указание в качестве пароля адреса электронной почты. Другой вариант – возможность регистрации и входа в аккаунт через учетные записи в соцсетях. Это – более интересно и удобно с точки зрения UI/UX дизайна. Возможность залогиниться в один клик по достоинству оценена миллионами пользователей – им не приходится сохранять множество паролей.

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

Еще одна полезная фишка – «социальное доказательство», которое часто встречается при создании лендингов. В регистрационных формах можно добавлять отзывы об услуге или продукте, демонстрируя популярность и успешность их использования.

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку