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