Денис Ермаков
1 июля 2014

Добрый день!

Представим типовую ситуацию: нам нужно пустить пользователя в защищённую паролем персональную часть сайта. А тому пользователю, который ещё не имеет пароля — предложить пройти регистрацию. Назовём страницу, с которой осуществляется такой выбор, «входной».

Многие наши клиенты первым делом просят разместить на входной странице сразу две формы — для авторизации и для регистрации. Изучив поведение пользователей на подобной входной странице через Вебвизор Яндекс.Метрики, я заметил, что пользователи иногда путаются. Например, игнорируют форму регистрации и пытаются вводить свой электронный адрес в форму авторизации (она обычно расположена слева или выше формы авторизации). Телефонные звонки в службу поддержки сайта также подтверждают такую проблему («не могу зарегистрироваться»).

Как бы вы посоветовали спроектировать такую страницу?

На текущий момент мне кажется, что лучшее решение предлагает Амазон (см. скриншот) — для авторизации и регистрации на первом шаге используется одна форма.



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

Улучшение без изменения сценария

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

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

Эти изменения хороши тем, что не требуют никаких изменений на бэкенде.

Следующим шагом можно сделать фокус: научить форму регистрации логинить пользователей. Самое тупое, что может быть, это когда я ввожу в форму регистрации свою почту и пароль, а мне говорят: «Ошибка, такой пользователь уже зарегистрирован». Ёлки, в чём ошибка-то? Мне не следовало регистрироваться? Почему тупая машина не врубается, что это я и есть? Просто залогиньте меня, чтобы я даже не заметил, что ввёл всё не в ту форму.

Альтернативный сценарий

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

Я терпеть не могу регистрацию и пароли на сайтах и уверен, что в подавляющем большинстве случаев это не нужно. Для входа достаточно электронного адреса. После его ввода на почту отправляется ссылка для входа (при этом если пользователя ещё нет в базе, его акаунт незаметно создаётся). При таком варианте на все случаи жизни нужна лишь одна форма с лишь одним полем.

Кстати, если пользователь перешёл на сайт по ссылке из любого письма, отправленного с сайта, то он должен входить автоматически. Самое тупое, что может быть, это когда я перехожу по ссылке из письма-уведомления о каком-нибудь событии, скажем, в соцсети, а соцсеть меня встречает формой входа. Ёлки, зачем ты спрашиваешь, кто я, если ты это прекрасно знаешь? Я же по твоей ссылке захожу, которую ты отправила на мой личный ящик.

Интерфейс — зло

P. S.

Я проведу практический курс «Пользовательский интерфейс и представление информации» 22, 23, 24 и 26 апреля в Москве

 

Запись открыта до ВС 16 апр


Поделиться

Комментарии

Михаил Озорнин
1 июля 2014

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

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

Мне, как пользователю, вариант Амазона категорически не нравится. Правда я допускаю, что я один такой.

Кирилл Латинский
1 июля 2014

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

Андрей Димитров
1 июля 2014

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

Александр Зайцев
1 июля 2014

Не согласен с Ильёй, что при переходе по ссылке из письма соцсети не нужна форма входа. Помню, раньше так и было (на сколько помню, у «Одноклассников»), но от этого отказались: представьте, вы перешли по ссылке на чужом компьютере, тогда нужно будет чистить историю, чтобы другой пользователь не воспользовался этой ссылкой.

Леонид Николаев
1 июля 2014

Илья, хочу оставить замечание по альтернативному сценарию. Существенная часть пользователей (по разным данным около 30%) очень редко проверяет почту. Поэтому при принятии решения об использовании такого варианта необходимо учитывать особенности аудитории.

Миша Графский
6 июля 2014

«Я же по твоей ссылке захожу, которую ты отправила на мой личный ящик.» Но ведь если вы перешлёте такую ссылку другу (к примеру, там информация о какой-нибудь интересной выставке, концерте, продукте) — вы перешлёте её со своим кодом аутентификации. Это недопустимо.

Сергей Тарасов
17 июля 2014

Мы ведь о том, что отображается в браузере говорим, верно? Тогда — вот мои соображения.

Лично мне нравится идея держать на видном месте форму авторизации, а регистрационную форму иметь на отдельной странице, доступной по ссылке «Ещё не зарегистрированы?»: она нужна пользователю один раз, зачем же её таскать от страницы к странице?

Но данный заказчик убеждён, что на одной странице ему нужны обе формы. Предложим «золотую середину»: форма авторизации видна всегда, а по клику на «ещё не зарегистрированы?» она заменяется на форму авторизации, которую мы показываем любым удобным нам способом: ЦСС, Джаваскрипт, заклинанием «экспекто патронум» :-)

Андрей Щербатых
24 июля 2014

Отправка ссылки на почту, равно как и подтверждение почты переходом по ссылке из письма (при этом неподтвержденный аккаунт не даёт залогиниться) — самое плохое, что может быть, т. к. часто бывает что почты под руками нет. Например, у меня нет веб-доступа к почте (точнее я им не пользуюсь), всё в Аутлуке на компе. При этом с телефона, получается, я нигде зарегистрироваться не могу.

Денис Ермаков, мне не очень понятно что такое «входная страница» и зачем она нужна. Обычно есть главная страница с какой-то информацией, и на ней 2 ссылки — «Вход» и «Регистрация». В зависимости от клика — нужная форма всплывает. Это, кстати, де-факто стандарт, т. к. применяется на 99% сайтов.

Встречается вариант одной ссылки «Вход / Регистрация», по которой две формы. Тупость. Потому что, например, на сайте, где я это видел, поля называются одинаково, а отличаются параметром action формы. И браузер не в состоянии правильно запомнить, в какое поле вводить пароль. Поэтому автозаполнение ломится не в ту форму (в обеих формах 2 одинаковых поля — почта и пароль)

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.





Недавно всплыло

1 Как создавался новый сайт бюро. Часть вторая 2 3 Как флексить. Отступить от идеала 2