В этой статье мы рассмотрим для чего же нужна разработка юзабилити сайта. Особенно, что касается правил регистрационных форм. Зачастую владельцы сайтов хотят получить максимум информации о новых пользователях уже на этапе их регистрации, и поэтому добавляют в регистрационную форму множество полей для заполнения. А это очень неудобно для посетителей, не нужно им и, в общем-то, очень раздражает. Посетителю всегда проще уйти с сайта, чем пройти скучную и кропотливую процедуру регистрации. Все эти правила необходимо учитывать при создании сайта.
Содержание статьи
- Разработка юзабилити сайта. 5 юзабилити-правил для форм регистрации пользователей
- 1. Размер формы должен быть минимальным
- 2. Используйте адаптивные плейсхолдеры
- 3. Регистрация через аккаунты в соцсетях в один клик
- 4. Используйте цветовые индикаторы для подтверждения правильности совершенного действия
- 5. Мгновенный доступ к сайту
Разработка юзабилити сайта. 5 юзабилити-правил для форм регистрации пользователей
Так как люди вообще не склонны рассказывать о себе все подряд просто так, то прежде чем запросить любую дополнительную информацию о пользователях, им нужно объяснить, что они за это получат, и сделать это максимально кратко. Например, вы можете пообещать им бонус (скидку или бонусную услугу) или доступ к эксклюзивным материалам. Если преимущества регистрации не перевесят утомительный труд по заполнению регистрационной формы, то посетитель просто продолжит просматривать ваш сайт без регистрации (в лучшем случае).
Разработка юзабилити сайта. Примеры регистрационных форм, описанных в статье.
1. Размер формы должен быть минимальным
Сегодня существует куча способов, как заполучить информацию о ваших пользователях, так что не обязательно вставлять в форму поля на все случаи жизни. Сократите количество полей до идеального минимума в 2-3 штуки: имя, email и пароль. Причем не нужно просить пользователя повторно вводить адрес электронной почты или пароль. Если вам потребуется более детальная информация, вы всегда сможете запросить ее позже. Twitter является отличным примером сайта, который предлагает зарегистрироваться, заполнив всего три поля регистрационной формы. И одно из этих полей позволяет пользователю ввести адрес электронной почты или номер телефона.
Регистрационная форма Twitter (Источник изображения: Twitter)
А есть и другие примеры сайтов (например, Yahoo), которые запрашивают в два раза больше информации.
Уже доказано, что меньшее количество полей приводит к большему количеству посетителей, а, следовательно, и к большему годовому доходу. Это очень важно учитывать не только при создании сайта-визитки, но и при создании лендинга. После того, как сайт Expedia убрал из формы регистрации всего лишь одно поле, их продажи просто взлетели, и получилось, что всего одно это лишнее поле стоило им 12 миллионов долларов в год. Согласно сайту marketingtechblog.com, ваша конверсия может вырасти на 50%, если вы сократите число полей до 2-3 штук. И да, это означает, что вы теряете примерно половину продаж из-за слишком длинной регистрационной формы. Вы можете себе такое позволить? Скорее всего, нет.
2. Используйте адаптивные плейсхолдеры
В регистрационных формах очень часто используют плавающие метки: они просты, элегантны и очень удобны для пользователя. Их преимущество состоит в том, что они сочетают в себе преимущества простого плейсхолдера и текста, появляющегося в верхнем левом углу поля. При клике на соответствующее поле, текст плейсхолдера исчезает и перемещается в левый верхний угол этого поля. Таким образом, пользователь никогда не запутается, какую именно информацию он должен ввести в конкретное поле формы.
Однако эксперты в области разработки юзабилити долгое время утверждали, что даже кратковременное исчезновение такой метки перегружает кратковременную память пользователя и затрудняет проверку пользователем назначения поля перед его заполнением (например, при заполнении полей имя и фамилия, их часто путают). В то же самое время они придерживаются того мнения, что это правило не распространяется на формы входа на сайт, так как они, как правило, содержат всего два поля. Исходя из этого, вы вполне можете применять плавающие метки, если ваша форма для регистрации простая и краткая.
Сегодня плавающие метки заменили на адаптивные плейсхолдеры. Они похожи на метки, но при клике на поле не исчезают, а смещаются вверх. В качестве примера можно привести сайт Walmart. Адаптивные плейсхолдеры выполняют функцию меток, но в то же время экономят место, что просто идеально для мобильных устройств. Этот прием можно часто встретить при создании интернет-магазина.
3. Регистрация через аккаунты в соцсетях в один клик
В наше время множества аккаунтов, пользователи очень благодарны за возможность использовать одну и ту же комбинацию логина и пароля на нескольких сайтах. Единственным исключением здесь является регулярный вход на один и тот же сайт или в приложение (или хранение логина и пароля в браузере).
И лучшим решением в этом случае будет предоставить пользователям возможность зарегистрироваться или войти в свой аккаунт на вашем сайте через стороннюю платформу. Согласно данным газеты the Washington Post, на Facebook зарегистрированы 1.35 миллиард человек и 20% из них заходят в Facebook по крайней мере раз в месяц. Если на вашем сайте будет предусмотрена кнопка «Войти через Facebook», она значительно улучшит юзабилити сайта и, одновременно, будет служить формой регистрации, так как нет ничего проще, чем войти на сайт в один клик.
И, кроме того, если пользователь принимает условие предоставить о себе определенные данные (а это всегда запрашивается при появлении окна регистрации через социальную сеть), то вы сможете получить дополнительные данные о ваших клиентах, которые сами они вряд ли вам сообщили. Как уже говорилось, чем меньше полей для заполнения, тем выше конверсия. А такая кнопка входа на сайт может сотворить чудеса маркетинга и продаж.
К минусам такого решения можно отнести возможность того, что обращение к третьему сайту для аутентификации может занять больше времени и, соответственно, увеличить число отказов от регистрации. Также некоторые пользователи могут просто не захотеть делиться с вами информацией своих страниц в соцсетях. В этом случае нужно предложить пользователям заполнить краткую регистрационную форму или войти через другую социальную сеть. Вот как поступает сайт Spotify (см. картинку в начале статьи)
4. Используйте цветовые индикаторы для подтверждения правильности совершенного действия
В дизайне регистрационной формы цвета играют одну из ключевых ролей. И основное правило здесь – не выходить за пределы использования трех цветов. Это очень поможет вашим клиентам не запутаться, потому что пользователи знают, что красный цвет обозначает проблему или сообщение об ошибке; желтый – это цвет предупреждения, а зеленый означает правильно выполненное действие. Разработка юзабилити сайта – инструмент с тонкими настройками, особенно, когда речь заходит про цвет. Многие эксперты в области разработки юзабилити не рекомендуют использовать красный цвет, потому как он слишком тревожный и может отпугнуть пользователя. Однако желтый цвет не всегда воспринимается пользователями как ошибка и может привести к замешательству. Наряду с цветами хорошо использовать сообщения и иконки, которые показывают правильность заполнения формы. Такая комбинация гарантирует наилучшую юзабилити формы для регистрации.
Пример сайта с проработанными call to action.
5. Мгновенный доступ к сайту
Иногда этим пунктом пренебрегают. Если пользователь зарегистрировался на вашем сайте, не принуждайте его подтверждать адрес электронной почты только для того, чтобы войти на сайт. Просто предоставьте доступ на сайт, а затем, чуть позже, напомните ему, что требуется подтвердить email. И позвольте пользователю работать на сайте под вновь созданным аккаунтом сразу же после регистрации, а не перенаправляйте его обратно к форме входа на сайт, где ему придется заново вводить логин и пароль. Если пользователь зарегистрировался, он должен автоматически войти на сайт под своим логином.
Удачи в бизнесе, ваш mindrepublic.ru
