Упрощаем регистрацию и вход на сайт

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

Форма авторизации на сайте Basecamp

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

Упрощаем форму регистрации

Цель любой веб-формы заключается в том, чтобы пользователь легко и правильно ее заполнил. Если форма слишком длинная и сложная, то впечатление пользователя от сайта может быть испорчено. Ниже представлено несколько приемов, которые помогут сделать так, чтобы пользователи заполняли ваши формы легко и быстро.

.

Спрашивайте имя пользователя уже после регистрации

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

.

Спрашивайте пароль только один раз

Многие формы регистрации предлагают пользователям ввести пароль в два поля. Причины этого вполне понятны — вводимый пароль в форме прячется за маской из соображений безопасности: так люди за спиной не смогут его увидеть. А два поля в этом случае помогают избежать опечаток.

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

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

• Плагин jQuery для скрытия/открытия пароля

Автозаполнение поля «город» на основе почтового индекса

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

• Использование AJAX для получения данных о городе и области из почтового индекса

.

Автоподстановка в поле «страна»

Обычно пользователя просят выбрать страну проживания из длинного выпадающего списка. Однако разумнее будет использовать автоподстановку названия страны по вводимым в поле символам — пользователь сможет выбрать свою страну, напечатав пару символов ее названия.

• AJAX Auto-Complete под jQuery

.

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

В США и других странах пользователь, желая приобрести что-то в сети, должен указать не только адрес доставки товара, но еще и так называемый адрес оплаты (по нему может быть доставлен чек). В большинстве случаев эти адреса совпадают, так почему бы не разрешить пользователям скопировать их из одного в другой? Вы можете включить в форму ссылку «Адрес доставки совпадает с адресом оплаты» — после нажатия на него в поля адреса оплаты будут скопированы данные из соответствующих полей адреса доставки.

• Копирование адреса оплаты и адреса доставки при помощи jQuery
• Копирование введенных данных в другое поле ввода при помощи jQuery

.

Не ставьте по умолчанию галочку в чекбоксе «Подписаться на рассылку», предлагайте сначала посмотреть превью письма

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

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

.

Боритесь со спамом, пряча при помощи JavaScript текстовое поле, вместо использования капчи

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

• Влияние капчи на уровень конверсии
• На**й капчу

Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь. Такой способ достаточно прост и эффективен, и при этом он не раздражает пользователя. Единственный его недостаток в том, что использование JS в некоторых случаях может быть проблемным.

Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.

Упрощаем формы входа на сайт

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

.

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

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

.

Авторизируйте пользователя так, чтобы он оставался на той же странице

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

Существует два пути реализации такого процесса: выпадающая форма и модальное окно.

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

• Простая и эффективная выпадающая форма авторизации для jQuery
• Выпадающая AJAX форма авторизации для jQuery

Модальное окно также не уносит пользователя с текущей страницы — оно разворачивается по центру страницы, концентрируя внимание полностью на форме авторизации. Этот вариант дает возможность разместить в форме дополнительную информацию.

• Как внедрить AJAX форму авторизации для jQuery в модальное всплывающее окно
• Туториал по созданию простого модального окна для jQuery

.

Автоматически устанавливайте курсор в первое поле формы

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

.

Позвольте пользователям видеть их пароли

Эта опция полезна при авторизации точно так же, как и при регистрации. Если пользователи не видят символов в поле, они легко могут опечататься, после чего им придется вводить пароль заново до тех пор, пока они не введут его правильно.

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

• Перестаньте скрывать пароли

.

Используйте иконку вопроса в качестве ссылки для восстановления пароля

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

.

Делайте кнопку «Подтвердить» такой же ширины, что и поля ввода

Кнопка подтверждения создана не просто для того, чтобы сделать возможным действие — она еще показывает какое именно действие пользователь сейчас совершит. Маленький размер кнопки означает слабую подсказку к манипулированию, из-за чего пользователь может сомневаться в нужности данного действия.

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

.

Разрешите пользователям логиниться с аккаунтов в Facebook, Twitter или с помощью OpenID

Сейчас почти все имеют аккаунты в Facebook и Twitter или пользуются OpenID. Разрешите пользователям логиниться с их помощью, и они смогут заходить на сайт практически мгновенно, без необходимости возиться с формой авторизации. А еще они будут избавлены от нужды хранить десятки логинов и паролей для посещаемых сайтов.

Разумеется, вы можете пойти дальше и использовать Facebook Connect для автоматического сбора и сохранения необходимых данных. Например, на сервисе Friend.ly — приложении для Facebook — в процессе регистрации пользователям достаточно просто нажать на кнопку «Регистрация» — вся информация о пользователе собирается автоматически. Такой подход сразу рождает много беспокойств по поводу приватности, поэтому, пожалуй, его использовать не стоит.

Заключение

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

Представляю вашему вниманию перевод статьи под названием “Innovative Techniques To Simplify Sign-Ups and Log-Ins” от Anthony T. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂