Как сделать страницу регистрации для сайта?
Недавно я столкнулся с интересным случаем. Коллега прислала пример регистрации на сервисе, который они разработали в крупной российской компании со множеством реализованных и работающих продуктов. Казалось бы, что могло пойти не так? Оказалось, что все… буквально – все.
Множество мелких недочетов сливаются в одну крупную проблему. Вот один из них: если пользователь не заполнил, казалось бы, второстепенное поле в форме, то возникает ошибка, не совместимая с завершением регистрации. А указание на ошибку провалено чуть больше, чем полностью: во-первых, система не обозначает место проблемы; во-вторых, не дает даже намека на то, что она связана с ошибкой ввода. В итоге пользователь знатно подвисает.
В этой статье мы поговорим о простых правилах, которые позволят улучшить регистрационную форму сайта. Почему это важно? Хотя бы потому, что во многих случаях ценность интернет-сервиса прямо пропорциональна количеству пользователей. Это означает, что любое препятствие на пути регистрации пользователя вредно.
Иногда, как в случае с Wikipedia, это не имеет значения, потому что от регистрации можно отказаться, но в большинстве крупных сервисов регистрация необходима. Поэтому возникает задача – создать такую страницу регистрации, которая будет понятна и незатратна для будущего пользователя.
В основе этой статьи – анализ 50-ти наиболее посещаемых сайтов в мировом интернете: google.com, facebook.com*, amazon.com, youtube.com, reddit.com, tiktok.com и др.
* Facebook принадлежит компании Meta Inc., которая признана экстремистской на территории РФ.
Критерии оценки
В основной части данной статьи мы будем рассматривать ситуацию, когда сервис стремится к тому, чтобы привлечь как можно больше пользователей. При этом в заключительном пункте кратко затронем случай, когда часть аудитории необходимо отсеять на этапе регистрации.
Если цель сервиса – набрать как можно больше пользователей, то страницу регистрации можно считать хорошей при следующих условиях:
- она не требует от пользователя большого количества действий, чтобы завершить регистрацию;
- она не провоцирует пользователя на ошибочные действия;
- в случае, если пользователь совершил неверное действие, она ясно дает понять, как исправить допущенную ошибку.
Далее мы подробно раскроем каждый из этих пунктов и сформулируем простые правила, которых необходимо придерживаться при создании страницы регистрации.
Минимизация действий
Правило #1. Анкета регистрации должна запрашивать у пользователя только необходимую информацию.
Страница регистрации должна запрашивать у пользователя только необходимую информацию – то есть, такую, без которой использование сервиса не представляется возможным. Это в частности означает, что все «необязательные» поля должны быть удалены.
Идеальный вариант по незатратности – регистрация в одно действие.
Хороший пример – регистрация только по номеру телефона как это сделано в VK. Пользователь вводит свой номер телефона, который ему отлично известен (дополнительный плюс!), подтверждает правильность введенных данных через смс-код или автозвонок и без лишних сложностей завершает процесс регистрации.
Еще один незатратный вариант, близкий по эффективности к предыдущему, – регистрация посредством стороннего сервиса, где пользователь уже имеет учетную запись. В этом случае передача необходимых данных переносится на плечи автоматики.
Неочевидным ходом для этого случая может быть различие регистрационных данных при заполнении вручную и через сторонний сервис. То есть, запрашивается минимальное количество данных при самостоятельной регистрации и максимальное – при автоматизированной. Например, Instagram* предлагает использовать для входа данные аккаунта Facebook*, формально обходя процесс регистрации стороной.
* Facebook и Instagram принадлежат компании Meta Inc., которая признана экстремистской на территории РФ.
Правило #2. Чтобы уменьшить форму регистрации, сбор некоторых данных можно перенести на период использования сервиса, то есть, после регистрации.
Что делать, если при регистрации данных о пользователе нужно больше, чем номер телефона или адрес электронной почты, но при этом хочется сохранить максимальную простоту формы? Этот вопрос содержит явное противоречие: данных нужно много, но запрашивать много данных – вредно.
Максимально удачный вариант разрешения этого противоречия – собрать недостающие данные в процессе использования сервиса. В этом случае пользователю предоставляется доступ к сервису, но:
- часть полезных, но не ключевых функций ограничивается до того момента, пока пользователь не восполнит недостающую информацию, или
- пользователю предоставляется полный доступ, а через время часть функций закрывается до момента внесения необходимой информации
Например, регистрационная форма на портале Amazon не содержит платежной информации, несмотря на то, что пользователь не сможет совершить покупку, пока не предоставит ее сервису. Он вводит эти данные непосредственно перед покупкой – в тот момент, когда вероятность отказа предоставить данные минимальна. Пользователь уже набрал продуктов в корзину и мысленно готов потратить несколько минут на предоставление платежных данных, чтобы успешно завершить покупку.
Менее удачный вариант действий – раздробить регистрацию на несколько шагов, на каждом из которых собирается небольшое количество данных. Вариант, при котором 20 пунктов разбиты на 5 шагов по 4 пункта, лучше, чем одна «простыня» из 20 полей, хотя бы потому, что четыре пункта теоретически можно уместить на одном экране. Тем не менее, дробление – это лишь видимость упрощения и ускорения регистрации при их фактическом отсутствии. Этот подход используется (или использовался, в зависимости от того, когда вы читаете эту статью) при регистрации в Twitter.
Если вы все же решили делать регистрационную анкету «по классике», то есть, состоящую из 5-6 и более пунктов на одной странице (возможно с прокруткой), то стоит учесть правила #3 и #4.
Правило #3. Если часть запрашиваемой информации известна достоверно или с большой вероятностью, то соответствующий пункт анкеты можно заполнить вместо пользователя полностью или частично.
Логика данного решения крайне проста. Если мы знаем, что будет вводить пользователь, то почему бы не сделать это за него, сэкономив тем самым время на заполнение анкеты и и одновременно уменьшив вероятность ошибки ввода? Такой подход часто используется при регистрации электронного адреса в почтовых сервисах. Например, в Gmail домен почтового сервиса (@gmail.com) введен по умолчанию.
Правило #4. Если в регистрационной анкете есть взаимозаменяемые пункты, их нужно совместить.
Наиболее распространенный вариант – это единое поле для номера телефона или адреса электронной почты. Было бы нелогично усложнять форму за счет присутствия обоих. При всех интерфейсных неурядицах Facebook*, этот пункт в форме регистрации сделан верно. Подробнее об интерфейсных проблемах крупнейшей в мире социальной сети читайте в статье «Почему с крупнейшей в мире социальной сетью неудобно работать?»
* Facebook принадлежит компании Meta Inc., которая признана экстремистской на территории РФ.
Менее удачный вариант – позволить пользователю переключаться между взаимозаменяемыми вариантами. Это хуже уже потому, что часть пользователей воспользуется этой возможностью и потеряет дополнительное время. Другими словами, дизайн с переключением провоцирует большие затраты со стороны пользователя. Подобное решение реализовано в TikTok.
Как предотвращать ошибки пользователей
Главное, что стоит знать об ошибках пользователей, – они однотипны. Это означает, что в результате юзабилити-теста можно получить ясное представление о том, что нужно сделать, чтобы обезопасить пользователя.
Правило #5. Чтобы предотвратить ошибку, пользователю необходимо сообщить о ней в момент ввода данных.
Классический пример – цветовая индикация сложности пароля в момент его создания. Она привлекает внимание за счет контраста и динамики. Можно написать требования к паролю и текстом, но это решение значительно слабее, потому что пользователи не читают инструкции, а действуют интуитивно и импульсивно. Они заполнили не один десяток регистрационных форм и предполагают, что эта форма работает так же, как и все предыдущие.
Хороший пример следования этому правилу демонстрирует регистрационная форма Яндекса. Дополнительное позитивное решение – подтверждение верности заполнения пункта через маркировку зеленой галочкой.
Еще один частый пример предотвращения ошибки – мгновенное предупреждение пользователя о несовпадении данных в поле пароля и поле его подтверждения. Классическое дополнение к индикации при заполнении – функция явного отображения. Обычно используется иконка глаза, но бывают и альтернативные варианты, как при регистрации аккаунта в Google.
Правило #6. Потенциально ошибочное действие должно блокироваться, пока предварительные действия не будут выполнены верно.
Еще один подход к предотвращению ошибки – сделать ошибочное действие невозможным. Так, встречаются примеры, когда продолжить регистрацию невозможно потому, что кнопка продолжения заблокирована. Разблокировка происходит только после того, как выполнено правильное действие.
При использовании этого подхода важно дать понять пользователю, что именно от него требуется для продолжения:
- либо явно об этом написать;
- либо целевое действие должно быть только одно, чтобы не оставлять возможностей для интерпретаций со стороны пользователя, как это сделано в Twitter.
Как исправлять ошибки пользователей
Чем длиннее форма регистрации и чем меньше внимания дизайнеры уделили предотвращению ошибок, тем чаще они будут случаться и тем чаще придется объяснять пользователю, в чем дело.
Правило #7. Если пользователь допустил ошибку, то необходимо привлечь его внимание к тому пункту, где это произошло.
С привлечением внимания все достаточно просто – пункт с ошибкой выделяется цветом, как правило, красным. Например, так это сделано при регистрации на Yahoo. (Подробнее о методах привлечения внимания при разработке интерфейсов можно узнать из моей книги «UX/UI дизайн: практическое руководство».)
Правило #8. Инструкция по устранению проблемы должна описывать не возникшую проблему, а действие, которое нужно совершить для ее устранения.
С инструкциями по решению проблемы также все несложно, но встречается множество примеров, когда они недостаточно доходчивы. Основное правило: комментарий об ошибке должен описывать не ошибку, а действия пользователя, которые необходимо совершить, чтобы ее исправить.
Инструкция вроде «Введите правильный адрес электронной почты» (см. скриншот от Twitter) подсвечивает наличие ошибки, но не говорит, что именно нужно сделать. В данном случае стоило указать, что отсутствует имя почтового сервиса: «Добавьте в адрес имя почтового сервиса: например, @abcd.com».
Положительный пример демонстрирует регистрационная форма Google, она предлагает альтернативные варианты имен для нового аккаунта, которые гарантированно свободны.
Инструкции относительно содержимого текстового поля обычно размещаются в непосредственной близости к нему или даже внутри. В последнем случае при активации поля инструкцию полезно сохранять.
Когда усложнение оправдано
В начале статьи мы говорили, что упрощение формы регистрации требуется, когда цель – собрать максимальное количество пользователей. Но есть и иные задачи, которые могут изменить дизайн в противоположную сторону.
Правило #9. Усложнение регистрации оправдано, когда нужно отсечь часть нецелевой аудитории.
Обычно привлечение пользователей считается благом для сервиса. Однако в некоторых случаях уместно или даже необходимо выставить барьеры, чтобы отсечь нецелевую аудиторию. При таком сценарии рекомендуется увеличить количество действий для прохождения регистрации, а также усложнить их.
Выше мы упоминали про отсутствие сбора платежной информации при регистрации на Amazon. Netflix использует иную политику. Стриминговому сервису нет смысла привлекать пользователей, не готовых платить за подписку. Поэтому предоставление платежной информации служит дополнительным барьером для тех, кто «пришел просто посмотреть». Примечательно, что номер банковской карты запрашивается на последнем этапе. То есть, прежде чем получить ключевую информацию, пользователя «готовят», позволяют ему совершить предварительные действия, чтобы уменьшить вероятность отказа в самом конце.
Еще один пример барьера перед пользователями показывает сайт Pornhub. Причины очевидны и в дополнительном пояснении не нуждаются. К слову, ближайший конкурент Pornhub, XVideos, не просит авторизоваться через аккаунт в социальной сети, а удовлетворяется формальным выставлением возраста самим пользователем, лишь предупреждая, что он должен попадать в возрастную группу 18+.
Стилизация страницы регистрации
В завершение скажем несколько слов относительно стилизации страницы регистрации.
• Если регистрация является препятствием на пути к использованию сервиса – то есть, сервисом нельзя воспользоваться до регистрации, – то уместно обойтись логотипом и минимальным описанием без всего, что может отвлечь пользователя от главной задачи, прохождения регистрации.
В качестве примера см. нейтральный фон при регистрации в Outlook.
• Если регистрация является лишь дополнением, то любая стилизация будет уместна, так как она не вредит использованию. Упомянутый XVideos вполне резонно не стесняется стилизовать страницу в полном соответствии с содержимым сайта. В качестве упражнения любопытный читатель может поискать, какие из описанных в статье правил реализованы в данной форме.
Кратко подытожим, повторив правила, описанные выше
Минимизация действий
- Правило #1. Анкета регистрации должна запрашивать у пользователя только необходимую информацию.
- Правило #2. Чтобы уменьшить форму регистрации, сбор некоторых данных можно перенести на период использования сервиса, то есть, после регистрации.
- Правило #3. Если часть запрашиваемой информации известна достоверно или с большой вероятностью, то соответствующий пункт анкеты можно заполнить вместо пользователя полностью или частично.
- Правило #4. Если в регистрационной анкете есть взаимозаменяемые пункты, их нужно совместить.
Как предотвращать ошибки пользователей
- Правило #5. Чтобы предотвратить ошибку, пользователю необходимо сообщить о ней в момент ввода данных.
- Правило #6. Потенциально ошибочное действие должно блокироваться, пока предварительные действия не будут выполнены верно.
Как исправлять ошибки пользователей
- Правило #7. Если пользователь допустил ошибку, то необходимо привлечь его внимание к тому пункту, где это произошло.
- Правило #8. Инструкция по устранению проблемы должна описывать не возникшую проблему, а действие, которое нужно совершить для ее устранения.
Когда усложнение оправдано
- Правило #9. Усложнение регистрации оправдано, когда нужно отсечь часть нецелевой аудитории.
Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь.
Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com
ЧТО ТАКОЕ БАЗА ЗНАНИЙ?
Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний.
Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь.
Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.
📎 База знаний издательства LIVREZON – только полезные материалы.