Интерфейсы

индекс
44,19

Формы авторизации и регистрации

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

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

Сегодня у меня появилась идея создания некого фрэймворка, но только не для разработок в PHP или C, а для разработок пользовательских интерфейсов.

UPD: Данный пост, по большей части создан для того чтоб усреднить значения потребностей, и разработать универсальную форму, а не как многие подумали для того, чтоб продемонстрировать работу.
2UPD: Изначально была выложена как показала критика пользователей сообщества не корректная версия формы, сейчас частично ввёл исправления и обсуждение предыдущих двух не учитываются. Форма вотсановления пароля будет чуть-чуть позже.
3UPD: Всем огромное спасибо за критику, предложения и просто хороший рабочий и жизненный момент(:
Исправленная форма регистрации и авторизации

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

Но сколько не шерстя интернет на наличие «сборной солянки» ничего не нашлось (Кстати возможно у меня врождёное рукожопие и это стало основной причиной отсутствия каких либо положительных результатов), а по этому я решил начать делать всё самому объединяя чужие знания, практику, плачевный опыт и успехи. Кстати буду безумно рад, если на это пока что скользкой дорожке буду идти не один и со временем присоединятся такие же заинтересованы люди, потому что WEB GUI возможно будет оптимизировать затраты времени на уровне создания макета будущего WEB приложения.

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

Форма авторизации

А если пользователь ещё не зарегистрирован, то нажав на синюю кнопку «Регистрация на сайте» ему будет показано вот это окно:

Форма регистрации

Сразу бы хотел оговориться, что при выработке принципов построения элементов управления для пользователей в рамках WEB бесспорно должна использоваться технология AJAX.

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

Всем спасибо за внимание (:
+20
14 января 2009, 10:25
64

комментарии (68)

+1
zayceslav #
А где правила и условия, с которыми предлагается согласиться пользователю?
И «запомнить на 2 недели» я бы сделал чекбоксом — так привычнее, мне кажется.
НЛО прилетело и опубликовало эту надпись здесь
+4
Auru #
Про 2 недели лучше сделать чекбоксом — так понятнее. Цветные кнопки сбивают с толку, когда их значения меняются по нажатию, тем более, что кнопка там только одна — синяя, зеленая вообще не кнопка. Их вообще сделать лучше табами.
0
kenoko #
Ну под надписью на кнопке и её нажатию по ней подразумевается, что Вы соглашаетесь со всеми условиями и т.д. и т.п., то есть не вводить в интерфейс чекбокс.
Почему я исключил чек бокс: для того, чтоб расширить функциональность предоставляется чекбокс (Галочка. Множественный выбор) или радиобутон (Круглешок. Единичный выбор), а в случае с одним единственным выбором чекбокс исключается, потому что чтоб активировать его функциональность надо нажать на него, а потом на кнопку входа(2 действия), а если есть кнопка входа на 2 недели, то её нажатие — это 1 действие.
+12
tenshi #
почему табы делают рокировку при переключении? что мешало сделать голубую стрелку влево и не взрывать посетителям моск?
почему нет уведомлений от валидатора форм?
зачем такой гигантский шрифт в полях ввода? чтобы люди с другого конца офиса могли разглядеть мой е-мыл?
по ентеру какая кнопка нажмётся? как пользователь это поймёт?
где текст «правил и условий» или, хотябы, ссылка на них?
где макет для формы восстановления пароля?
0
kenoko #
>>почему табы делают рокировку при переключении?
Рокировку как печальный опыт устраню. Спасибо (:
>>почему нет уведомлений от валидатора форм?
Имеется ввиду скажем галочка что пароли совпадают и крестик, если не совпадает?
>>зачем такой гигантский шрифт в полях ввода?
Какой размер шрифта можно в данном стучае считать оптимальным?
>>по ентеру какая кнопка нажмётся? как пользователь это поймёт?
Надо подумать
где текст «правил и условий» или, хотябы, ссылка на них?
>>где макет для формы восстановления пароля?
«Относительно планов на будущее, хотелось бы по возможности, если не буду сильно занят рассмотреть форму востановления пароля и форму поиска...»
+1
tenshi #
> Имеется ввиду скажем галочка что пароли совпадают и крестик, если не совпадает?

а также проверка на корректность мыла

> Какой размер шрифта можно в данном стучае считать оптимальным?

почему бы не воспользоваться размером по умолчанию?

0
kenoko #
Большое спасибо. Записал в свой todo (:
0
VolCh #
>Имеется ввиду скажем галочка что пароли совпадают и крестик, если не совпадает?

И текстовое сообщение об этом (хотя бы о не совпадении)

+2
NamelessOne #
Хотя вы нигде в явном виде не говорите, что интерфейс придуман вами, по смыслу это подразумевается.

Мне кажется, некрасиво это: можно было бы дать ссылку на первоисточник, и обсуждать его, а копию, сделанную вами.

Спасибо
0
kenoko #
«решил начать делать всё самому объединяя чужие знания, практику, плачевный опыт и успехи.»
+1
Aiii #
все равно оба решения не совершенны
все зависит от случая, я например для себя нашел решение еще проще
просто сделать все в одной форме и эта идея мне уже встречалась и раньше
0
tenshi #
и ещё, в динамически генерируемых формах не работает автозаполнение как минимум в лисице. так что надо либо пихать эту форму в сорц каждой страницы, либо подгружать во фрейме.
НЛО прилетело и опубликовало эту надпись здесь
0
VolCh #
Видимо имелось в виду DHTML :)
+1
abdalAziz #
лучше кнопки РЕГИСТРАЦИЯ и ВХОД местами не менять.
не надо путать посетителя. а то не разберешься, где вход, а где регистрация
0
kenoko #
Спасибо, уже принял к сведению.
+1
homm #
И цвет им не менять ни в коем случае.
0
VolCh #
>Сразу бы хотел оговориться, что при выработке принципов построения элементов управления для пользователей в рамках WEB бесспорно должна использоваться технология AJAX.

И бесспорно должен предусматриваться случай, когда поддержки JS нет.
0
kenoko #
Сейчас всё рассматривается на уровне обычного макета. То есть верстаться и программироваться оно будет только после того как будет идеальный вариант (:
Большое спасибо за напоминание того что вылетело из головы, а именно про поддержку когда JS отключен.
0
AlexeyK #
«Войти на один раз» и «Войти и пусть меня помнят 2 недели» одному мне напоминает быстрый или незабываемый секс? :)
+2
wdk #
Да.
0
kenoko #
:D поправил этот момент. Убрал возможность запоминания или не запоминания. Мне кажется это рудиментом, а до этого нарисовал вторую кнопку по привычке, но с попыткой проявления творчества.
0
JerryJJ #
Возможность запоминания/незапоминания все-таки нужна.
+1
sashmash #
Я бы назвал вторую вкладку таким образом, чтобы пользователю было понятно что это именно регистрация нового пользователя, а не что-то иное.
Возможно, сделал бы выбор уже после ввода имени. Рукожопие не позволяет рисовать, но что-то вроде
«Тут мое имя»
Вкладка «я пользователь и хочу войти» — в ней вводится пароль
«я новый и хочу зарегистрироваться» — в ней пароль, повтор пароля.
0
kenoko #
Тут надо учесть понятность и краткость. Это как у Лебедева: Ремень и фары!!!
0
sashmash #
Вот как раз «регистрация» — непонятно… «Я тут новенький» — понятнее
0
JerryJJ #
«Я тут новенький» — это фамильярность какая-то и на то, что зарегистрироваться предложат — никакого намека. Тогда уж написать «Зарегистрироваться»
0
sashmash #
Согласен, я имел ввиду общее развитие идеи, а не конкретику.
«Зарегестрироваться чтобы покупать», например. или "… чтобы ответить"
0
kenoko #
Учту. Сейчас подготавливаю всё относительно регистрации и авторизации на обсуждение. Чувствую тут меня после всего этого будут ненавидеть :D
+1
RayZ #
А где показаны результаты (результат) валидации? В чем причина отказа входа/регистрации?
0
kenoko #
Дорабатываю. Спасибо (:
+1
ooprizrakoo #
Часть новых пользователей в форме авторизации будет вводить логин, пароль, и нажимать на «Регистрация на сайте» (думая, что это регистрация и есть), в результате они будут перескакивать на форму регистрации, где с них будут требовать ввести то же самое (только пароль два раза)
+1
kenoko #
Уже выше обсудили относительно этого. Чёткость формулирования того что делает элемент необходима, тоже дорабатываю (:
+1
hlomzik #
Уж конечно меня извините, но мне кажется, что вы мало думали… Минусы вам уже и так описали фактически все.
«Восстановить пароль» тоже нужно сделать кнопкой — мы же никуда не перейдём. Сообщения валидатора обязательно надо выводить. Пользуясь вашим же примером Лебедева, это будет щит всего с одним жирным красным восклицательным знаком — и пусть водитель догадается, что он там ещё не сделал.

Я делал такую форму. Как доберусь домой, постараюсь её проверить и выложить — она компактна для использования как виджет в уголке сайта и полностью функциональна.
0
kenoko #
Буду очень признателен. Скажу честно, что сейчас сижу и привожу всё в порядок (:
Во втором посте из это серии всё выложу, но это уже не сегодня.
0
romabr #
Я думаю, что так лучше не компоновать форму:
— кнопки на баре очень плохо читаются и неявно переключаются,
— формы очень сильно похожи друг на друга (при беглом взгляде одно и тоже),
— если на странице рядом будут баннеры, то пользователь вообще может не заметит переключения.
Итого:
— люди будут очень часто путаться формы и сильно раздражаться,
— некоторые не смогут найти форму регистрации и уйдут с сайта.

Лучше разносить авторизацию и регистрацию на странице (или на 2 страницы) или более явно дать понять что-где (разная заливка или анимация переключения форм).
0
kenoko #
Предполагается что эта форма будет показываться посредством jquery, а именно всплывать по середине экрана с затемнение всего остального.
Спасибо за конструктивную критику и предложения (:
0
taliban #
а я хочу знать что я не так ввел при ошибке, потому как вариантов много:
1 — неправильные мыло
2 — мыло существует
2 — пароли не совпадают
3 — пароли содержат недопустимые знаки

зачем тыкаться наугад пытаясь угадать в чем ошибка? допустим при опечатке в паролях, я не увижу правильно ли я их ввел
0
kenoko #
Относительно сигнальных элементов валидации я сейчас обдумываю. Спасибо pf все готовые возможные варианты? того что может быть не так при проверки формы (:
0
VolCh #
длина мыла слишком большая (маленькая), то же и про пароли. Причем нужно не просто выводить сообщение об ошибке («пароль слишком короткий»), но и писать, например, пароль должен быть не менее 6 символов. А еще лучше, раз уж форма динамическая, когда пользователь переключает фокус на поле ввода пароля должен появляться тип с сообщением вроде «длина пароля от 6 до 32 символов, допустимы буквы, цифры и знаки препинания»
+2
RayZ #
Что бы создать удобную форму для пользователей/посетителей сайта надо:

Задаться вопросами — а зачем мне форма?
Что должен пользователь знать, что бы воспользоваться формой (перечень контролов и информации)
Какой должен получится результат?

Поэтому нафиг отбрасываем дизайн и делаем тупой макет того, как это должно действовать.

У каждого поля формы должно быть обозначение. Очень хорошо, когда это обозначение одновременно является <label>.

Для каждого поля должно быть описание взаимодействия. Требования к полю, примерный результат и т.д. и т.п.

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

Желательно, что бы пользователь не путался в том, где что вводить. Задумываемся об авторитетности полей, значений, и расставляем так, что бы мысль во время взаимодействия и реализация совпадали в своей последовательности и были линейными.

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

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

При использовании многосложных форм вспоминаем про такой замечательный параметр, как tabindex.

Ajax? И нет подтверждений после регистрации? Автоматически авторизируем пользователя после запроса.

Рисуйте поля так, что бы обозначения полей соответствали их полям, и не липли к другим. Помните об отступах. Между полями, между ячейками полей, между описанием поля, ошибкой и всем остальным.
+10
RayZ #
0
almarz #
Вам пост писать нужно :)
+1
RayZ #
Тогда ждите. Обязательно напишу.
0
RayZ #
Попытка объять необъятное
rayz.habrahabr.ru/blog/49326/
0
Kens #
По моему отличный вариант, да еще и юморком. Только вот при проверке имейла нужно продумать развитую логику — если строго вводится не имейл (например нет собак и точек), то выводить ту фразу что на макете, если же точка и собака есть, но в общем не валидно, то что-то менее дерзкое, типа «ой, вы где-то ошиблись в имейле»

ну и форму неудачной авторизации нужно сделать с попыткой ввести пароль еще раз (думаю стоит вставлять ранее введенный имейл) и ссылками на восстановление
0
kenoko #
Огромное спасибо гиперконструктивный и раскладывающий по полочкам ответ (:
А так же спасибо за макет-схему.
0
Warlock2 #
Как по мне, очень даже не плохо, то что нужно дорабатывать, написано сверху в самых разных вариантах, ну а от себя хотелось бы просто пожелать разработчику удачи и выдержки перед критикой.
0
Stepler #
надо добавить силналы валидности вводимой инфы
0
namata #
openid как альтернативный вход (третья вкладка)?
0
kenoko #
Об этом я вообще не думал ещё ):
0
apple_fan #
Кстати, если ресурс ориентирован на западного пользователя, можно подумать и о Facebook connect
0
russlobachev #
Повтор пароля — лишний. Ошибаются в вводе пароля не так часто и его, что самое главное, всегда можно восстановить с помощью почты.
0
RayZ #
Иногда он не лишний. Совсем не лишний. Я бы даже добавил — полезный. Возможно у вас все прекрасно с памятью. А вот у меня не совсем ;) А повторение, мать,…
+1
kenoko #
мать учения и мало кто знает как продолжается эта поговорка, но всё же: и для лентяя отрада (:
И всё же я за то, чтоб поля для повторного введения пароля была. Кому нужен геморрой" с восстановлением пароля сразу после регистрации?
0
VolCh #
А есть статистика о частоте ошибок пароля? Да и, как правило, для хранения пароля используется хеширование и обычно не восстанавливают забытый пароль, а получают новый, который потом надо еще и заменить
0
russlobachev #
Что ж, против аргумента про хеширование мне нечего сказать. Тут вы правы.
0
sergei #
«Войти на один раз» — многие пользователи не поймут. Вернее поймут, что эту кнопку надо нажимать, если не захочешь на этот сайт больше возвращаться.
0
garex #
1. «Ваш» пишется с большой буквы.
2. Вторая картинка, где написано «пример с отрицательной валидацией» д.б. «с положительной»
3. Нее, это все-таки не то, дорабатывайте напильником.
0
kenoko #
Сейчас перечитываю всё и доработки напильником оставил на завтра. Первые блины всегда комом (:
0
tenshi #
ilyabirman.ru/meanwhile/2009/01/03/1/comments/
0
VolCh #
1. Спорно, лучше избегать неопределенности и или вообще отказываться от слова «ваш», либо переносить его в начало предложения.
+1
Kens #
Интересный пост, автору респект.

По вкладкам: называть их стоит, по моему разумнее всего по обозначению действия, более того я бы сделал 3 вкладки:

Войти | Зарегистрироваться | Напомнить пароль

хотя последнее меня смущает, думаю нужно использовать устоявшуюся фразу «забыл пароль» но тогда она выбивается из войти и зарегистрироваться. Можно даже «вспомнить пароль».

А идея 3-х вкладок в том, что в каждой вкладке есть своя форма, вполне определенное действие и лишать функционал восстановления пароля своей вкладки, ИМХО не стоит.
0
kenoko #
Практика показала, что функция востановления пароля должна быть на панели где пользователь вводит свои учётный данные, то есть на панели войти (:, а третью вкладку мне кажется можно определять под OpenID (:
Сейчас уже подготавливаю финальный вариант и скоро выложу.
0
Kens #
Ссылка восстановления пароля будет видна (так же как и регистрации) в дефолтном состоянии (т.е. в режиме войти), при чем обычно ссылки регистрация и восстановление пароля находятся рядом, иногда, правда, восстановление пароля показывается только в тот момент как пользователь не смог пройти авторизации и получил ошибку, но мне кажется это не всегда удобным. Если я в принципе не помню пароля, то первым делом ищу ссылку на восстановление, а если ее не нахожу, могу подумать, что такого функционала нет и просто регистрирую новый ник, и только в момент регистрации, когда ввел свой имейл узнаю, что такой имейл есть в базе, пытаюсь найти форму восстановления второй раз и с N-ой попытки узнаю, что нужно сначала ошибиться прежде чем восстановить пароль.

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

Опять же это ИМХО, но все равно, жду 2-ой вариант с нетерпением :)
0
kenoko #
Я думаю что получится его выложить уже сверстанным и функционально готовым, но время покажет (:
Спасибо за участие (:
0
namata #
Тут есть одна проблема: на предложение ввести e-mail и пароль неопытные пользователи введут свой e-mail и пароль от него. Да да, именно так. Через некторое время они могут воспринять сервис как мошеннический. Зачем разборки себе предполагать.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.