Логотип

Разработка сайтов

Ольга Сбоева

«Трилан»,

Ведущий дизайнер

Испытание регистрацией

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

Аккаунт используют 90 % ресурсов в Интернете, поддерживающих систему регистрации/авторизации. Он обеспечивает пользователю конфиденциальность и контроль за его учётными данными. Однако зачастую пользователю важно просто попасть в систему, чтобы воспользоваться тем или иным сервисом. В таких случаях регистрация и авторизация для многих представляет собой неизбежное зло. Сделать этот барьер практически незаметным возможно, следуя нескольким принципам. Давайте посмотрим на то, какие правила могут быть применены к форме регистрации.

1Не заставляйте пользователя гадать

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

Поясняйте любые требования до момента ввода необходимой информации

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

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

Если имена пользователей автоматически устанавливаются системой, сообщайте об этом. Своевременное пояснение значительно уменьшить количество ошибок и исключит повторное заполнение полей.

Amazon не объясняет свои требования к паролям до тех пор, пока вы не отправите заполненную форму. Подсказка  «чувствительны к регистру, минимум 6 символов»  под первым полем ввода пароля сэкономила бы ваше время:
Форма регистрации Livejournal, наоборот, предоставляет однозначные инструкции о том, в каком формате ожидаются вводимые данные:

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

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

aeroflot.ru подсказывает нам, что «Пароль должен содержать не менее 8 символов», однако, если вы не кликнете по иконке, то не узнаете о других ограничениях для всё того же пароля.

Понятно и деликатно сообщайте об ошибках

Если всё-таки в процесс заполнения формы вкралась ошибка, пользователь должен быть уведомлен об этом. При этом сайт должен сохранять все верно заполненные поля и подсвечивать или выделять поле, заполненное с ошибкой. Уведомления об ошибках в полях должны быть понятными и конкретными. Сообщения «Поле заполнено неверно» без объяснения, какие именно ошибки были допущены, скорее всего, вызовет замешательство. Важно так же деликатно уведомлять об ошибке:не шокируйте пользователя кричащими сообщениями, делайте их аккуратными.

Сайт «Аэрофлота» не объясняет, в чём заключается ошибка. Остается только гадать.

Проверяйте заполнение полей по мере ввода в них информации

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

Проект Yahoo в режиме реального времени проверяет правильность заполнения форм и выводит сообщение об ошибке ещё до отправки формы:

2Пусть форма будет простой

Регистрация — это своего рода фильтр. На вход подаются 100 посетителей, на выходе остаются только 25 или 75. Остальных отсеяли сложности процедуры входа на сайт.

Запрашивайте только необходимую информацию

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

Не стоит испытывать терпение пользователя требованиями от него дополнительной информации.

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

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

Исключите повторяющиеся поля

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

Двойные поля для электронной почты и пароля у H&M
альтернатива чекбоксу на Livejournal:

3Баланс безопасности и удобства

Завышенные требования к безопасности могут поставить под угрозу процедуру регистрации

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

Не создавайте искусственных ограничений

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

Требования из пяти пунктов к паролю в Живом журнале:

Дайте возможность использовать адреса электронной почты в качестве логина

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

Разрешайте, но не настаивайте на возможности входа через социальные сети

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

Last.fm предлагает вход посредством Facebook , но не настаивает на этом. А также использует подсказки, чтобы убедить пользователя приложить чуть больше усилий при создании пароля:
Живой журнал описывает все преимущества авторизации через соцсети, но тоже не настаивает:

4Форма должна вызывать доверие

Вопрос надёжности очень важен, потому что от него сильно зависит доверие людей.

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

5Мотивируйте к заполнению формы

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

Вот пример подобного описания в магазине victoriassecret:

Удерживайте внимание пользователя

Есть два способа предложить пользователю создать аккаунт.

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

Сообщайте об успешном заполнении формы

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

Оригинал: https://cmsmagazine.ru/library/items/graphical_design/test_registration/