10 принципов идеальной формы авторизации и регистрации
Авторизация и регистрация – одни из важнейших функций любого сайта, во многом определяющие лицо ресурса. От доступности и простоты регистрации напрямую зависит количество пользователей в вашей базе, а легкость авторизации кардинальным образом влияет на UX и наличие у пользователя желания продолжать с вами взаимоотношения. Также простые, понятные и безупречно функционирующие формы избавят вас от шквала писем в техническую поддержку, которые непременно станут для вас головной болью в случае, если процесс регистрации и авторизации на вашем сайте остается проблемным и сложным при достаточно большом количестве пользователей.
По этой причине мы уже не раз обсуждали вопрос о формах регистрации/авторизации, причем как в общих чертах, так и в контексте детских сайтов.
В сегодняшнем материале мы обсудим 10 важных и актуальных подходов, комплексное использование которых позволит создавать формы с высокими показателями юзабилити и, что немаловажно, accessibility. Для читателей, сталкивающихся с этим термином впервые, поясним – аксессибилити есть степень доступности сервиса или сайта для людей с ограниченными возможностями, начиная с пользователей, имеющих нарушенное восприятие цвета, и заканчивая теми, кто не вполне хорошо и точно может управлять мышкой. Кстати, одна из следующих статей будет всецело посвящена теме аксессибилити, так как пользователи, веб-разработчики и оптимизаторы в рунете пока еще плохо знакомы с этим понятием и сопутствующими подходами, а в свете тенденций развития русскоязычного сегмента сети, вопрос о доступности сайтов для людей с ограниченными возможностями становится острым и актуальным.
1. Лучший способ авторизации – это ее отсутствие.
Да, наш первый тезис является банальной и основной истиной UX – чем меньше действий требуется от пользователя, тем лучше. Зачастую, пользуясь некоторыми сайтами, у меня возникает вопрос: «Почему я должен регистрироваться здесь ради того, чтобы разово воспользоваться определенной услугой?». И хотя подобных сайтов, обязывающих вас регистрироваться при отсутствии на то весомых причин, становится меньше, на многих eCommerce сайтах до сих пор можно встретить регистрацию, единственная задача которой заключается в том, чтобы осложнить пользователю жизнь. Это, в первую очередь, относится к разнообразным онлайн-магазинам, требующим от вас регистрации даже для разового приобретения какой-то сущей мелочи.
Итак, для начала убедитесь, что вам действительно нужна регистрация пользователя для того, чтобы обеспечить ему подобающий сервис и полную функциональность. Если это так, то в первую очередь рассмотрите наиболее простой и быстрый способ авторизации, а именно использование модулей социальных сетей, повсеместно распространенных в сети на данный момент и обеспечивающих аутентификацию пользователя в один клик. И если еще несколько лет назад в ответ на предложение использовать модули социальных сетей можно было возразить, что еще не все пользователи ушли в социальные сети и сервисы, то сейчас абсолютное, подавляющее большинство пользователей имеют аккаунт в том или ином сервисе.
Существует большое количество крайне популярных сервисов, охватывающих миллионы пользователей по всему миру. Есть очень большая вероятность, что у вашего среднестатистического пользователя есть аккаунт по меньшей мере в одном из всех представленных сервисов. А представить вы можете действительно много: начиная от традиционного Facebook и заканчивая Yahoo, Amazon и GitHub.
Второе устойчивое возражение против социальных модулей, ранее встречавшееся в процессе веб-разработки, заключалось в опасениях пользователей относительно соблюдения сайтом конфиденциальности и безопасности личных данных, которые пользователь сообщает сайту автоматически, идентифицируя свою личность через один из аккаунтов соцсети. На данный момент, вместе с распространением и беспрецедентной интеграцией социальных сервисов в нашу повседневную жизнь, подобные страхи среди пользователей встречаются все реже, в то время как практически автоматическое кликанье по кнопкам авторизации через социальные сети стало постоянной практикой.
2. Электронная почта должна быть альтернативой любому другому идентификатору пользователя.
В отличие от различных имен и никнеймов, которые часто пользователями забываются, свою почту в большинстве случаев человек помнит всегда. Признаться, мне всегда поднимает настроение сайт, который не слишком требователен ко мне и который готов принять как мое уникальное имя, указанное при регистрации, так и указанную при регистрации почту. В целом, это просто замечательная идея – дать возможность пользователю авторизироваться как с помощью почты, так и с помощью уникального имени. Большой плюс такого подхода во многом связан с тем, что электронная почта и пароль – это крепкая связка, живущая в сознании пользователя. К ней он обращается каждый раз при регистрации на очередном сайте, так почему бы не развить это логичное сочетание и не дать возможность воспользоваться им и при авторизации?
Возможность ввести свою почту в поле user – самое красноречивое проявление заботы о пользователе на этапе авторизации.
Кроме того, с электронной почтой пользователя также связан еще один важный момент – во время процедуры восстановления доступа к сайту при забытом пароле, не делайте обязательным указание уникального имени пользователя – в отличие от почты, оно действительно очень часто забывается.
3. Возможность быстрого переключения между формами авторизации и регистрации.
Достаточно логичным будет расположение форм ввода регистрации и авторизации рядом друг с другом. И хотя они обладают разными функциями и алгоритмом действий, между ними все-таки есть определенная концептуальная схожесть. Компактно расположив формы регистрации и авторизации рядом, а также обеспечив легкий переход между ними (в один клик) вы ощутимо улучшите юзабилити сайта. Кроме того, хорошим способом реализации будет размещение двух кнопок «Регистрация» и «Вход» рядом друг с другом, при клике по которым основная форма будет отображаться либо в форме всплывающего окна, либо выдвигающейся панели.
Максимально компактное и близкое расположение форм регистрации и входа на сайте журнала The Verge.
4. Простой и лаконичный язык.
Несмотря на то, что с используемой терминологией в рунете в последнее время все стало значительно лучше, неясные формулировки и неоднозначные слова все еще можно встретить на кнопках, обозначающих такие простые и тривиальные вещи, как регистрация и авторизация.
Так или иначе, существует несколько разных подходов к выбору надписей на кнопках. Определенно, в большинстве случаев наиболее оправданным является использование лаконичных и однозначных надписей, таких как «Вход», «Войти», «Создать», «Присоединиться» и «Зарегистрироваться». Однако если вы стремитесь создать определенный эффект, то вполне допустимо уходить от лаконичных формулировок к более красочным, таким как «Стать участником», «Войти в мир» и так далее.
Стоит заметить, что при наличии времени и ресурсов проведение A\B тестирования всегда будет полезным.
В качестве примера того, как формируются и меняются пользовательские предпочтения, можно привести опрос Джефа Атвуда, демонстрирующий популярность различных способов обозначения кнопки авторизации в Соединенных Штатах и Великобритании. Надеемся, что скоро подобная аналитика станет привычной и для рунета.
«Sign In» все чаще используется вместо любых других формулировок.
5. Совместимость форм авторизации с менеджерами паролей различных браузеров.
Менеджеры паролей, интегрированные в браузеры – великое изобретение, колоссально облегчающее использование интернета. Они стали настолько привычной частью нашей повседневной жизни, что мы давно перестали думать о них как о таковых. Мы просто воспринимаем как должное тот факт, что после единичной авторизации на каком-либо сайте нам не придется делать это повторно, мы привыкли видеть формы, заполненные автоматически, и мы начинаем чувствовать себя очень некомфортно, когда обнаруживаем, что форма на сайте, на котором мы уже авторизовывались, оказывается пустой.
Учитывая все это, тестирование формы авторизации с менеджерами паролей различных браузеров – необходимость, которой нельзя пренебрегать. Конечно, кроме интегрированных в браузер менеджеров пользователи вполне могут пользоваться и сторонними менеджерами, но, как правило, при условии, что ваша форма корректно взаимодействует со всеми широко распространенными браузерами, она будет корректно заполняться и сторонним менеджером паролей.
6. Предупреждение и автоматическое исправление ошибок ввода.
Пользователи очень часто делают ошибки при заполнении форм. Характерно, что часто ошибки, сделанные пользователем, являются для него неочевидными, даже если это банальный ввод с неправильной раскладкой или пропущенная буква в пароле. Работать с пользовательскими ошибками мы должны сразу в двух направлениях – внятно оповещать пользователя, обозначая ошибки, и автоматически исправлять то, что возможно исправить.
Что касается оповещений, то набор из предупреждения о включенном Caps Lock, неправильной раскладке или недопустимых символах является базовым – пренебрегать им никак нельзя, ради обеспечения комфорта пользователя вы должны указывать на все без исключения ошибки.
Исправление опечаток и ошибок ввода в автоматическом режиме – достаточно неоднозначная и спорная тема. Наиболее корректно автоматическое исправление в формах может работать с опечатками при указании пользователем электронной почты. Пропущенные буквы в домене или отсутствие точки вполне можно исправлять при помощи автоматического алгоритма, не опасаясь исправить что-либо, введенное пользователем правильно.
7. Стоит ли принуждать пользователей к выбору “подходящего” пароля?
Это еще один вопрос, вызывающий споры среди веб-разработчиков. Для начала следует признать, что, несмотря на все предупреждения, средний пользователь по-прежнему не придает должного значения придумыванию устойчивого и сложного пароля. Как быть с этим фактом – команда каждого сайта решает сама. Можно наблюдать, как по-разному ведут себя формы регистрации на различных сайтах, когда вопрос заходит о вводе пароля. Какие-то формы абсолютно не требовательны к пользователю и принципиально не обременяют его необходимостью соблюдать какие-либо правила, другие – напротив, делают все, чтобы заставить пользователя придумать действительно надежный пароль.
Выбирать, какой подход вам следует использовать, нужно исходя из характера вашего проекта и того, насколько он связан с хранением личных данных пользователя. Если ваш сайт обладает выраженной развлекательной направленностью и аккаунт пользователя не представляет особой ценности для сторонних лиц, то, соответственно, для вас нет никакой необходимости устанавливать строгие правила ввода пароля.
Если же деятельность вашего сайта связана с хранением личных данных и, вероятно, с осуществлением критически важных действий со стороны пользователя, включая финансовые операции, то в таком случае вам придется в той или иной степени проконтролировать пользователя на стадии ввода пароля.
Существует несколько различных способов контролировать придумывание пользователем пароля. Самый простой – использовать один из алгоритмов, анализирующих сложность пароля и сообщающих пользователю о степени сложности и защищенности придуманной комбинации. В то же время, алгоритм вполне может устанавливать некий критический порог, который пользователь должен преодолеть, иначе пароль будет считаться слишком простым и не будет принят системой. Этот подход широко используется на самых разнообразных сайтах.
Классическое сопровождение ввода цветовой индикацией на примере Яндекс.Почты.
Кроме контроля сложности и ограничения минимального количества символов, применяется также еще один довольно любопытный способ, заключающийся в анализе и сопоставлении пользовательского пароля с базой самый популярных паролей в мире, насчитывающей 10 тысяч комбинаций. В случае если вводимый пользователем пароль не оригинален и является одним из самых распространенных, то пользователь получает соответствующее предупреждение и предложение выбрать другую комбинацию.
«That password is too common» – оповещение на Discourse, сообщающее о том, что выбранный пользователем пароль слишком простой и распространенный.
Тем не менее, обратная сторона все подобных действий, направленных на «воспитание» пользователя – практически гарантированное раздражение от опытных пользователей, трезво оценивающих ситуацию и принимающих самостоятельно решение о том, стоит ли в данном случае обойтись простым, символическим паролем, или же необходимо использовать более сложный. По этой причине, вам необходимо взвешенно и последовательно выстраивать политику оценки пользовательских паролей – крайности в этом вопросе могут обернуться как массовым взломом аккаунтов ваших пользователей (и, как следствие, невероятная нагрузка на вашу службу поддержки), так и раздражением и уходом посетителей, которые устали предлагать вашему алгоритму подходящие пароли.
8. Оставляйте возможность переключаться между полями ввода с помощью клавиши «Tab» и выделяйте элементы при таком переключении.
Да, несмотря ни на что, пользователи, все еще переключающиеся между полями формы при помощи клавиши «Tab», еще живы и вполне активны. К слову, автор этой статьи сам частенько пользуется Tab`ом при заполнении различных форм. И, между прочим, как горячая клавиша, Tab здорово ускоряет работу.
Веб-разработчикам не стоит забывать про наше существование – обязательно тестируйте свои формы на корректный отклик на клавишу Tab. И помните, что кроме того, что такое переключение между формами само по себе должно иметь место, вы также должны позаботиться о достаточном визуальном выделении активных элементов.
Фокусировка при переключении Tab`ом в Firefox и Chrome.
9. Как правильно ограничивать количество попыток авторизации или восстановления доступа к аккаунту.
Рано или поздно, но множественные попытки авторизации или восстановления пароля следует останавливать. Можно снисходительно отнестись к 5 или даже 10 попыткам, однако их настойчивое продолжение должно вас насторожить. С дальнейшими операциями по аутентификации, регистрации или восстановлению аккаунта вы должны работать. Самый очевидный способ – после N-нного количества попыток предложить пользователю (или тому, кто скрывается под маской пользователя) ввести капчу, дабы отсеять ботов. Кроме того, хорошим способом является блокировка аккаунта на определенное время при провале множественных попыток авторизации и всех остальных аналогичных действий. Обратите внимание, что аккуратность в этом подходе относится не только к необходимости дать пользователю возможность ошибиться действительно достаточное количество раз, но и к умеренному времени блокировки. Первая блокировка, которую вы будете вынуждены осуществить, не должна быть слишком длительной – просто предупредите в нужный момент того, кто пытается осуществить действие с аккаунтом, что следующая попытка обернется блокировкой на определенное время. Если по истечению этого времени пользователь, взломщик или бот продолжит делать ошибки, то вы вполне можете последовательно увеличивать временной интервал до внушительных значений.
Стоит заметить, что подобные техники с последовательно увеличивающейся временной блокировкой должны быть привязаны к одному IP – не забывайте, что после безуспешных действий злоумышленника, приведших к блокировке, вашим сайтом вполне может воспользоваться настоящий пользователь, IP которого будет, разумеется, другим.
10. Помните о том, что обозначать ошибки одним лишь цветом может быть недостаточно.
Во многом, вопрос выделения сделанных пользователем ошибок дополнительными средствами, не относящимися к привычному цветовому обозначению, зависит от масштабов вашего проекта и количества существующей и потенциальной аудитории. Дело в том, что расстройства цветового восприятия у пользователей распространены шире, чем мы привыкли о них думать. Уже каждый 12-ый пользователь мужского пола является дальтоником, а каждый 30-ый, вне зависимости от пола, обладает плохим зрением. Вам может показаться, что эти показатели не критичны и таких особенных пользователей у вас должно быть немного, однако при достижении определенного критического количества зарегистрированных посетителей, вы неизбежно будете иметь дело с такими людьми. Будет здорово, если вы уделите им немного внимания и облегчите их задачи.
Говоря о дополнительных средствах, которыми можно обозначить сделанные пользователем ошибки, мы имеем в виду такие простые символы, как треугольник с восклицательным знаком, заметный крест рядом с полем, содержащим ошибку, и другие подобные визуальные обозначения. Для того чтобы получить примерное представление о важности таких обозначений для людей, имеющих нарушенное восприятие цвета, рассмотрим характерный пример:
Регистрационная форма PayPal в черно-белом виде.
При анализе данного скриншота регистрационной формы PayPal, переведенной в ч\б режим, наше внимание приковывает, в первую очередеь, треугольник с восклицательным знаком, размещенный в поле капчи. Судя по общей картине, можно сделать вывод, что пользователь забыл ввести лишь капчу, и что с остальными полями все в порядке (вне зависимости от того, заполнены они или нет).
Регистрационная форма PayPal в полноцветном режиме.
Как мы видим, в полноцветной реальности соответствующим образом обозначены все поля, а не только поле для капчи. Однако, тот самый треугольник, который в любом случае сообщит посетителю с расстройством восприятия цвета об ошибке, находится только в одном поле. Примечательно, что эта неявная, и, казалось бы, совершенно не бросающаяся в глаза ошибка была в дальнейшем устранена оптимизаторами:
Новая регистрационная форма PayPal однозначным образом сообщает пользователю об ошибке вне зависимости от того, способен ли он различать цвета.
Как и подход к дизайну в целом, способы создания современных и актуальных регистрационных форм постоянно претерпевают изменения. Несмотря на то, что такая сфера веб-разработки, как формы авторизации и регистрации, обладает устоявшимися правилами и традициями, сами подходы к созданию этих форм постоянно меняются, так же как меняется сам пользовательский опыт и пользовательское восприятие. Постоянно отслеживая изменения пользовательского поведения и тех тенденций, которые формируют сами веб-разработчики и оптимизаторы, вы всегда сможете сохранять все составные части своего проекта, в том числе и формы регистрации и авторизации, актуальными и легко доступными для пользователя. А мы, в свою очередь, будем продолжать держать вас в курсе самых последних трендов в проектировании и оптимизации сайтов. Желаем вам высоких конверсий и больших пользовательских аудиторий!
Не умничайте с формами для входа / Habr
В последнее время меня начинает сильно раздражать авторизация на сайтах. Поскольку менеджеры паролей становятся более популярными, такие как 1Password (который я использую) и менеджер паролей Chrome (который я тоже использую), веб-сайтам важно учитывать этот факт.Давайте рассмотрим некоторые шаблоны входа в систему, которые на мой взгляд не идеальны. А затем рассмотрим лучшие практики. TL;DR; Это страницы авторизации, которые просты, предсказуемы, на обычных страницах и дружат с менеджерами паролей.
Вот некоторые примеры, которых я бы избегал.
Не помещайте авторизацию в модальные формы
Hertz и куча других сайтов помещают форму входа в модальное окно. У такого подхода две проблемы:
- Дополнительные шаги для пользователя: «1. нажмите на кнопку меню, 2. выберите логин, 3. заполните форму» вместо перехода на страницу авторизации (через поиск, чат поддержки клиентов, закладку, менеджер паролей, напрямую, через основную навигацию) и заполнения формы.
Не скрывайте поля
Сайт Delta скрывает поле «Фамилия». Я так понимаю, чтобы сделать интерфейс чище, введя элементы прогрессивного дизайна. Проблема в том, что поле является обязательным, а менеджеры паролей не могут автоматически его заполнить. Пользователи должны сначала заполнить и выйти из другого поля, чтобы появилось это. Просто одно дополнительное, ненужное препятствие, чтобы человек мог войти в систему.
Экран входа в MacOS таким же образом прячет поле пароля, чтобы «очистить» UI (и я также предполагаю, чтобы подтолкнуть пользователей к входу через TouchID), но эта чистота, на мой взгляд, может запутать людей.
Не шутите с магическими ссылками
Возможно, это началось с Slack, но теперь и другие программы, такие как Notion (который я люблю, кстати), отправляют на электронную почту временный пароль для входа в систему. Могу оценить хитрость этого шаблона, поскольку он избавляет от страданий несчастных пользователей, которым трудно запомнить ещё один пароль, и не нужно создавать всю необходимую инфраструктуру для восстановления забытого пароля. Но.
- Эта схема невероятно утомительна. 1. Ввести email в форму входа. 2. Открыть новую вкладку или переключить программу. 3. Открыть почтовый ящик. 4. Найти сообщение от сервиса (если вы не отвлеклись на другие письма). 5. Открыть сообщение. 6. Скопировать пароль-абракадабру. 7. Вернуться на сайт. 8. Вставить туда абракадабру. 9. Отправить форму. Блин.
- Это вообще не работает с менеджерами паролей, что невероятно раздражает. В дизайне мы много говорим о согласованности. Но речь идёт не только о согласованности в собственной экосистеме, но и со всем остальным интернетом, ёлки-палки.
- Это заставляет пользователей осваивать новое поведение: пользователи выучили определённые шаблоны (вход, проверка, навигация и т. д.), многократно используя их во многих приложениях в течение многих лет. Я не говорю, что никогда не следует вводить новшества. Но важно признать, что пользователи приходят к вашему продукту с грузом заработанных знаний о том, как использовать интернет. Когда мы пытаемся стать слишком умными, то заставляем пользователей изучать новые шаблоны, что тормозит людей (по крайней мере, с самого начала).
Не разделяйте форму входа на несколько страниц
Shopify (ещё один мой любимый сервис) раздражающе разбивает логин на три отдельных экрана. Опять же, я могу понять мотивы: они не хотят сразу перегружать пользователя большим количеством информации. Я согласен с таким шаблоном в определённых случаях (например, в интернет-магазине обычно в несколько этапов вводятся платёжная информация, способ доставки и адрес, информация о кредитной карте и т. д.). Но зачем это делать для формы с тремя полями?
- Для входа в систему добавляются ненужные шаги: это по-прежнему форма с тремя полями, но теперь пользователям приходится пробираться через три экрана. Несомненно, это замедляет людей.
- Не работает с менеджерами паролей: менеджеры паролей могут заполнить только одно поле на странице.
Что же делать веб-дизайнерам? Думаю, что скучная старая форма входа в систему просто прекрасна. Вот Harvest:
А вот WordPress:
Простой, лаконичный, предсказуемый дизайн. Совместим с менеджерами паролей. Всё на месте. Вот некоторые соображения:
- Сделайте отдельную страницу для входа в систему: люди из поддержки смогут направлять клиентов на URL-адрес (domain.com/login), а не излагать кучу инструкций, где найти форму входа. Менеджеры паролей сохранят этот URL, одним нажатием кнопки открывают и автоматически заполняют поля.
- Показывайте все необходимые поля: если для входа нужно ввести фамилию, сразу покажите это поле!
- Поместите все поля на одну страницу: вход должен быть быстрым, а не ненужной канителью, растянутой на несколько страниц.
- Не фантазируйте: может что и есть в этих волшебных ссылках и других изобретательных шаблонах входа, но следует учесть привычки пользователей в интернете. Положитесь на эту скучную, предсказуемую устоявшуюся практику.
Список не исчерпывающий. Я не коснулся таких вещей, как вход через соцсети или двухфакторная аутентификация. Высказывайте свои наблюдения о других неправильных шаблонах, если что-то встречалось.
Юзабилити форм авторизации / Habr
Помните, как обычно выглядят формы для входа на сайт какого-нибудь магазина или сервиса? Вот типичный пример:У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.
Но сначала все же поясню, чем именно так плох классический подход. Тут есть два основных фейл-сценария.
Фейл-сценарий №1. Случайная повторная регистрация
- Захожу на сайт в полной уверенности, что я тут еще не регистрировался
- Ищу кнопку «Регистрация», расстраиваюсь из-за времени, которое предстоит потратить на заполнение полей и отдельно расстраиваюсь из-за капчи:
- Тем не менее, мужественно заполняю все поля. После чего сервис радостно сообщает мне, что я же тут уже регистрировался и что капчу ввел некорректно. В общем, память ни к черту, да еще и невнимательный:
- В итоге — полный провал, 3 минуты жизни безвозвратно потеряны, возвращаюсь на форму входа, повторно(!) ввожу эл. почту и пытаюсь вспомнить пароль.
Фейл-сценарий №2. Повторный вход через другую соц. сеть
Почему-то среди руководителей интернет-проектов бытует мнение, что чем больше иконок соц. сетей будет в авторизации, тем более успешен и популярен будет продукт. Никогда не замечал такой корреляции на своей практике, но это другой вопрос. Вернемся к сценарию провала.
- Я уже пользовался этим сервисом когда-то, и теперь снова хочу войти в свой аккаунт. Кажется, я входил тогда через соц. сеть. Но через какую? У меня их 6 или больше, а тут такой богатый выбор:
- Вроде Вконтакте. Попробую.
- Зашел. Вот черт, мой аккаунт пустой, хотя я точно помню, как заполнял его:
Я-то понимаю, что просто зашел не через ту соц. сеть: придется перепробовать еще 3-4 варианта, потратить еще пять минут, но в итоге я найду свою учетку. А вот среднестатистический пользователь решит, что сервис попросту удалил его данные и скорее всего покинет этот злодейский сайт навсегда.
Попытаюсь сформулировать частичное решение, несколько более дружественный подход, который вроде как подает надежды.
Более дружественный подход
В первую очередь стоит забыть ужасные слова «авторизация» и «регистрация», потому что слова эти относятся к миру разработчика, а не пользователя. Если вы хотите «юзабилити», то для начала нужно хотя бы говорить на языке вашего посетителя. Есть «Вход» на сайт. И все, никаких технических терминов. Остальное — проблемы системы, а не человека. Дальше самое интересное. Просим ввести эл. почту. Это ровно одно поле, не больше:
Жмем «Ввод» или иконку продолжения. Если в базе находится пользователь с такой эл. почтой, просим ввести пароль:
Если эл. почта не находится, значит пользователь скорее всего новый и вместо этого экрана показываем поле «Пожалуйста, придумайте пароль»:
Да, пользователь мог опечататься в почте. Но вероятность допустимо мала: есть визуальный контроль ввода плюс скорее всего этот человек часто вводит свою эл. почту повсюду и научился делать это без ошибок. В случае опечатки в пароле, его можно будет восстановить через ту же почту. Есть ссылки на восстановление пароля и ввод другого адреса.
Боль, связанная с повторным входом не через ту соц. сеть (фейл-сценарий №2) частично лечится довольно топорно: нужно выбрать одну, самую популярную соц. сеть, в которой сидит целевая аудитория сервиса, и оставить вход только через эту соц. сеть. Я сказал «частично», потому что еще остается два способа входа (эл. почта и соц. сеть): пользователь все еще может ошибиться. Но согласитесь, вспомнить способ первичного входа при выборе из двух вариантов гораздо проще, чем при выборе из 8 вариантов (эл. почта и 7 соц. сетей).
Стоит ли говорить, что наилучший вариант — интерфейс с одним способом входа (только эл. почта или только одна соц. сеть). К сожалению, маркетологи, как правило, не готовы на это пойти. Поэтому предложенный дружественный вариант интерфейса дополняется кнопкой входа через соц. сеть:
Заключение
Допускаю, что у предложенного подхода могут быть некоторые существенные недостатки, из-за которых он до сих пор не стал популярен. В комментариях буду рад услышать вашу критику и обсудить эти самые недостатки. Если у кого-то есть возможность быстро протестировать этот паттерн на большой аудитории в режиме A/B-теста, с интересом поучаствую и помогу с дизайном: хотелось бы получить количественное обоснование пригодности подхода на разных аудиториях.
Упрощаем регистрацию и вход на сайт / UXDepot corporate blog / Habr
Представляю вашему вниманию перевод статьи под названием «Innovative Techniques To Simplify Sign-Ups and Log-Ins» от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.
Существует множество различных способов создания форм регистрации и авторизации. Большинство дизайнеров знакомы с традиционными способами.Однако, зная и используя некоторые инновационные техники, можно сделать формы понятнее и легче для заполнения.
Форма авторизации на сайте Basecamp
В этой статье мы представляем несколько идей, которые могли бы оказаться полезными для ваших проектов. Но, собираясь использовать их, пожалуйста убедитесь в том, что правильно понимаете контекст, в котором их следует применять. А еще мы будем рады увидеть результаты юзабилити-тестирований, подтверждающие или опровеграющие советы, изложенные ниже.
Упрощаем форму регистрации
Цель любой веб-формы заключается в том, чтобы пользователь легко и правильно ее заполнил. Если форма слишком длинная и сложная, то впечатление пользователя от сайта может быть испорчено. Ниже представлено несколько приемов, которые помогут сделать так, чтобы пользователи заполняли ваши формы легко и быстро.
.
Спрашивайте имя пользователя уже после регистрации
Во время заполнения формы регистрации от пользователя требуется придумать и ввести уникальное имя. И если пользователь придумывает и вводит уже кем-то занятое имя, ему приходится думать еще, он тратит свое время и терпение. Вместо того чтобы требовать у посетителей имя в процессе регистрации, вы вполне можете спросить его сразу после этого процесса. В таком случае вы не будете тормозить процесс регистрации пользователя необходимостью придумать оригинальное имя только для того, чтобы удовлетворить ненавистную форму.
.
Спрашивайте пароль только один раз
Многие формы регистрации предлагают пользователям ввести пароль в два поля. Причины этого вполне понятны — вводимый пароль в форме прячется за маской из соображений безопасности: так люди за спиной не смогут его увидеть. А два поля в этом случае помогают избежать опечаток.
Однако на практике это приводит к еще большему количеству ошибок, потому что пользователю приходится печатать больше. Он не видит, какие символы вводит, и каждый раз при вводе пароля не уверен в том, что печатает правильный пароль.
Более эффективным подходом было бы просить пользователя заполнить пароль только один раз, и включить в форму чекбокс, галочка в котором снимет маску с поля и позволит пользователю проверить правильность введенного пароля. Такой подход поможет уменьшить количество полей и избавит пользователя от лишней работы.
Автозаполнение поля «город» на основе почтового индекса
Если вы просите пользователя заполнить домашний адрес, то рассмотрите возможность автозаполнения города и области из введенного почтового индекса. В результате этого ваша форма будет эффективнее, так как пользователю не придется тратить время и силы на то, чтобы впечатывать свой город в поле или выбирать его из длинного выпадающего списка.
.
Автоподстановка в поле «страна»
Обычно пользователя просят выбрать страну проживания из длинного выпадающего списка. Однако разумнее будет использовать автоподстановку названия страны по вводимым в поле символам — пользователь сможет выбрать свою страну, напечатав пару символов ее названия.
.
Позволяйте пользователям скопировать платежный адрес из адреса доставки
В США и других странах пользователь, желая приобрести что-то в сети, должен указать не только адрес доставки товара, но еще и так называемый адрес оплаты (по нему может быть доставлен чек). В большинстве случаев эти адреса совпадают, так почему бы не разрешить пользователям скопировать их из одного в другой? Вы можете включить в форму ссылку «Адрес доставки совпадает с адресом оплаты» — после нажатия на него в поля адреса оплаты будут скопированы данные из соответствующих полей адреса доставки.
.
Не ставьте по умолчанию галочку в чекбоксе «Подписаться на рассылку», предлагайте сначала посмотреть превью письма
Большинство веб-сайтов по умолчанию подписывают своих свежезарегистрированных посетителей в надежде получить побольше подписчиков своей корпоративной рассылки. Да, такой прием иногда срабатывает, однако подписка бессмысленна, если пользователь просто не заметил опцию ее отключения или не понял назначения этой опции. Если пользователю неинтересно будет получать вашу рассылку, он все равно отпишется от нее, и в долгосрочной перспективе такой метод вам не поможет. А еще рассылка писем пользователям, не подозревавшим о наличии рассылки, легко может оттолкнуть их от вас.
Более эффективным подходом было бы продемонстрировать превью или отрывок письма из рассылки. В таком случае пользователи смогут наглядно представить что они потеряют, если не подпишутся. А еще вы будете спать спокойно, зная, что вашу рассылку получают только те, кто точно в ней заинтересован.
.
Боритесь со спамом, пряча при помощи JavaScript текстовое поле, вместо использования капчи
Если вы страдаете от обилия спама, вам совсем не обязательно использовать капчу. При использовании капчи в ее традиционном виде пользователю предлагается ввести в поле искаженные символы с картинки. Наличие капчи, к сожалению, негативно сказывается на конверсии, ведь ее заполнение — это дополнительное усилие, затрачиваемое пользователем.Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь. Такой способ достаточно прост и эффективен, и при этом он не раздражает пользователя. Единственный его недостаток в том, что использование JS в некоторых случаях может быть проблемным.
Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.
Упрощаем формы входа на сайт
Задача любой формы авторизации — пустить пользователя в его аккаунт. Не смотря на такую простую задачу, одни формы авторизации решают ее лучше других. Вот вам несколько простых способов того, как помочь пользователям входить в свой аккаунт легче и быстрее.
.
Дайте возможность использовать адреса электронной почты в качестве логина
Запомнить адрес электронной почты гораздо легче (мы пользуемся им постоянно), чем запомнить логин (который придуман для конкретного сайта). Дайте пользователям возможность авторизоваться, используя и имя пользователя, и свою электронную почту. В случае, если пользователь забудет свой логин, он всегда сможет войти под своей электропочтой.
.
Авторизируйте пользователя так, чтобы он оставался на той же странице
Авторизация на сайте — это важная функция, и пользователи захотят иметь возможность авторизоваться с любой странички на сайте. Так что не забудьте сделать так, чтобы после входа на сайт пользователь попал на ту же страничку, с которой он авторизовывался. Это сделает процесс проще и поможет пользователю сразу приступить к решению своей задачи на сайте.
Существует два пути реализации такого процесса: выпадающая форма и модальное окно.
Выпадающая форма открывается, не унося пользователя с текущей страницы. Она занимает только небольшую область на странице, что позволяет сделать форму в таком варианте быстрым и ненагруженным решением.
Модальное окно также не уносит пользователя с текущей страницы — оно разворачивается по центру страницы, концентрируя внимание полностью на форме авторизации. Этот вариант дает возможность разместить в форме дополнительную информацию.
.
Автоматически устанавливайте курсор в первое поле формы
Как только пользователи увидят перед собой форму авторизации, они будут готовы к тому, чтобы войти на сайт. Вы можете облегчить им задачу, размещая курсор в первом поле ввода. Тогда пользователям не придется наводить мышку на поле и кликать по нему. Они смогут держать руки на клавиатуре и сразу же начать вводить необходимые данные. При авто-фокусировке поле должно отчетливо подсвечиваться — это поможет пользователю понять что уже можно начинать печатать.
.
Позвольте пользователям видеть их пароли
Эта опция полезна при авторизации точно так же, как и при регистрации. Если пользователи не видят символов в поле, они легко могут опечататься, после чего им придется вводить пароль заново до тех пор, пока они не введут его правильно.
Проблема состоит в том, что пользователь не знает, какой именно символ он ввел неправильно, и не может исправить ошибку с первого раза. Это требует больше усилий, и замедляет пользователя. От этой проблемы можно избавиться, включив в форму чекбокс «показать пароль».
.
Используйте иконку вопроса в качестве ссылки для восстановления пароля
Пользователи не должны испытывть проблем с поиском ссылки восстановления пароля в форме. Вместо того, чтобы использовать слова «Забыли пароль?» в качестве ссылки, достаточно сделать ссылкой маленькую иконку в виде знака вопроса, которая не потеряется среди других ссылок и не занимает много места. Знак вопроса это понятный всем значок помощи, так что пользователи поймут куда им нужно идти для того, чтобы восстановить забытый пароль.
.
Делайте кнопку «Подтвердить» такой же ширины, что и поля ввода
Кнопка подтверждения создана не просто для того, чтобы сделать возможным действие — она еще показывает какое именно действие пользователь сейчас совершит. Маленький размер кнопки означает слабую подсказку к манипулированию, из-за чего пользователь может сомневаться в нужности данного действия.
Широкая кнопка придает уверенности, и её трудно не заметить. Название кнопки также становится заметнее, поэтому пользователь лучше понимает действие, которое собирается совершить.
.
Разрешите пользователям логиниться с аккаунтов в Facebook, Twitter или с помощью OpenID
Сейчас почти все имеют аккаунты в Facebook и Twitter или пользуются OpenID. Разрешите пользователям логиниться с их помощью, и они смогут заходить на сайт практически мгновенно, без необходимости возиться с формой авторизации. А еще они будут избавлены от нужды хранить десятки логинов и паролей для посещаемых сайтов.
Разумеется, вы можете пойти дальше и использовать Facebook Connect для автоматического сбора и сохранения необходимых данных. Например, на сервисе Friend.ly — приложении для Facebook — в процессе регистрации пользователям достаточно просто нажать на кнопку «Регистрация» — вся информация о пользователе собирается автоматически. Такой подход сразу рождает много беспокойств по поводу приватности, поэтому, пожалуй, его использовать не стоит.
Заключение
Ваши формы регистрации и авторизации не должны усложнять жизнь пользователям, ведь заполнение форм — это то еще развлечение. Наши советы помогут вам сделать формы проще и эффективнее, так что путь ваших пользователей к содержимому сайта будет короче и приятней.
.
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂
Как создать форму авторизации с Bootstrap
На каждом сайте есть форма авторизации пользователей, сегодня мы хотим рассказать как создать достаточно простую и стильную форму авторизации на сайте с использованием инструментов Bootstrap с минимальным количеством кода. Которую легко редактировать и установить себе на сайт, кроме этого вы можете легко добавить новые поля для ввода данных. Для данной реализации нам потребуется немного HTML и CSS кода. Думаю такая форма станет полезным тем, кто хочет создать стильную и простую форму авторизации.
Если вы хотите воспользоваться готовыми шаблонами которые легко установить к себе на сайт, тогда обратите внимание на предложения наших партнеров, там есть премиум предложения с помощью в настройках, а также бесплатные шаблоны:
Шаг 1. HTML
Для начала вам необходимо подключить библиотеки к вашему документу, вставьте следующий код в шапке страницы где будет находиться форма авторизации:
<link rel=»stylesheet» href=»/css/bootstrap.min.css»> <script src=»/jquery.min.js»></script> <script src=»/js/bootstrap.min.js»></script> |
Затем мы создаем саму разметку, которая будет содержать в себе контейнер с элементами формы авторизации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <body> <main> <div> <img src=»1.png» alt=»Scanfcode»> <h2>Введите свои данные</h2> <form action=»#»> <div> <div> <span><i></i></span> <input type=»text» placeholder=»Ваш логин»> </div> </div>
<hr>
<div> <div> <span><i></i></span> <input type=»password» placeholder=»Ваш суперпароль»> </div> </div>
<button type=»submit»>ВОЙТИ НА САЙТ</button> <div> <h6>или войдите с помощью</h6> <ul> <li><a href=»#»><i></i></a></li> <li><a href=»#»><i></i></a></li> <li><a href=»#»><i></i></a></li> </ul> </div>
</form> </div>
<div> <p>Еще нету аккаунта? <a href=»user-login.html»><font color=#29aafe>Регистрируйся</font></a></p> </div>
</main>
</body> |
Также не забывайте указать правильный путь к скриптам, кроме этого вы можете легко добавить новые поля в форму авторизации.
Шаг 2. CSS
Для начала нам необходимо стилизировать наш контейнер, где будут располагаться элементы формы авторизации:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .login-block { background-color:#fff; padding:60px; -webkit-box-shadow:0 3px 50px 0 rgba(0,0,0,.1); box-shadow:0 3px 50px 0 rgba(0,0,0,.1); text-align:center; border-radius:5px } .login-block h2,.login-block h6 { font-family:Open Sans,sans-serif; color:#96a2b2; letter-spacing:1px } .login-block h2 { font-size:22px; margin-bottom:60px; margin-top:40px } |
Далее придаем немного красоты для иконок и кнопок в форме:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .login-block .input-group-addon { color:#29aafe; font-size:19px; opacity:.5 } .login-block .btn-block { margin-top:30px; padding:15px; background:#29aafe; border-color:#29aafe; } .login-block .hr-xs { margin-top:5px; margin-bottom:5px } |
Теперь добавляем социальные иконки и анимацию к ним:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .social-icons a:active,.social-icons a:focus,.social-icons a:hover { color:#fff; background-color:#29aafe } .social-icons.size-sm a { line-height:34px; height:34px; width:34px; font-size:14px } .social-icons a.facebook:hover { background-color:#3b5998 } .social-icons a.rss:hover { background-color:#f26522 } .social-icons a.google-plus:hover { background-color:#dd4b39 } .social-icons a.twitter:hover { background-color:#00aced } .social-icons a.linkedin:hover { background-color:#007bb6 } |
Надеемся данная форма станет вам полезной. Большую часть работы выполняет bootstrap, интеграция в систему не должна вызвать у вас проблем.