Регистрация вверх тормашками

[timurkar]

вообще интересно
а по юзабилити: нет кнопки "Отмена", если кнопка регистрация вверху страницы (проскроллил кто-нибудь так) - то саму форму юзер не увидит нормально, много ограничений в использовании

[misha_kvakin]

Насчёт «отмены» — поподробнее, если можно.
А насчёт проскроливших — форма выскакивает по нажатию на кнопку, и фокусируется. Я думаю это привлечёт достаточно внимания и пользователь не ускролит никуда, если уж нажал.

[timurkar]

а что насчет "отмены" ? я её просто не увидел на картинках. Что человек должен нажать если передумал регистрироваться увидев форму и хочет убрать её с экрана ?
в общем и целом идея интересная, но, как я уже говорил, достаточно ограничена в применении

[misha_kvakin]

Правда ваша, отмену нужно прикрутить.
Как-нибудь так:

[timurkar]

да, вот как-нибудь так :) очень приятно смотрится

[NaFigator]

Есть пара улучшений:
1. "Пароль (х2)" лучше исправить на "Пароль (повтор)" - недосоаточно искушенные пользователи могут подумать, что нужно ввести либо два разных пароля, либо вообще два раза ввести один и тот же в одном поле :)
2. Справа от полей есть квадратики, которые не выполняют никакой функции - их можно использовать. Пока форма не заполнена, в них можно отображать необходимость обязательного заполнения тех или иных полей. Когда поле заполняется, в квадратик можно ставить галочку для соответствующей индикации.

[misha_kvakin]

Первое принимается с умеренным ликованием:

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

[NaFigator]

Красный никак не ассоциируется с "до заполнения" - лучше делать его красным при ошибочном заполнении, если такая проверка есть.
До заполнения квадратики можно оставить без цвета, а при успешном заполнении - зелёным.

[maroc]

так ведь красные звездочки после обязательных полей уже привыклись (даже на хабре)

[lego1as]

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

[misha_kvakin]

«Галочки-с-крестиком» это как-то негламурно совсем, это для вебдваноль проектов первой волны.

[lego1as]

так сделайте гламурные «Галочки-с-крестиком» :) я имел в виду идею вообще.

[misha_kvakin]

Вот идея-то мне и не нравится. Ничего не могу с собой поделать. Не лежит душа.

[wazd]

1) Убрать квадратики, сделать красный и зеленый отсвет на самом поле.
2) ИМХО названия полей надо сделать все же слева, так будет много нагляднее.
3) К нику должно быть пояснение, какими символами его вводить.
4) Крестик сверху не достаточно интуитивен имхо, при такой огромной кнопке ОК.

[misha_kvakin]

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

[BmW]

Кстати, о названиях полей — может придвинуть надпись на пару пикселей поближе к тому полю, к которому она относится?

[misha_kvakin]

Помучаю верстальщика.

[rossomachin]

Эээ так это у вас в HTML верстаться будет? JavaScript стало быть. Будет ли регистрация работать с отключенным JavaScript? Вообще зачем такие сложности? Почему бы не сделать обычную форму, в которой сразу видно все поля?

Кстати, не лучше ли поле для никнейма сделать самым первым? А поле Пароль (повтор) именовать сообразно человеческому языку: Повторите пароль?

[misha_kvakin]

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

[BmW]

О, красивше стало ;) только появляется непроизвольное желание нажать на прямоугольники, которые справа от полей.

PS хых, краудсорсинг ;)

[lovermann]

Согласен! Верно подмечено.

[wazd]

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

[misha_kvakin]

Все мнения мне очень важны в любом случае.

[wazd]

Это очень хорошо :)

[wazd]

Ну вкратце я себе это как-то так представляю.
http://rb.foto.radikal.ru/0707/f8/bf60b1f9cf29.jpg
Ваше оформление копировать лень было :) Ну я думаю вы можете представить как это будет выглядеть.

[Len_in]

«Отмена» такая большая, красная и притягательная… На нее так хочется нажать!
Особенно под впечатлением от остальной части картины…

[misha_kvakin]

Ну это уже не по делу. Человек для примера намалевал, зачем его гнобить?

[FanXFire]

Супер! Эх, была бы такая регистрация на всех сайтах.. :)

[misha_kvakin]

Лиха беда начало.

[FanXFire]

Кстати, Стрелочку на кнопке "регистрация" (на первом рисунке) я бы сделал не вверх, а вправо. НО это мое личное мнение :)

[misha_kvakin]

Там присутствует игра с антонимией этого «вверх» и «вниз».

[timaktaev]

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

[misha_kvakin]

Так, что-ли?

[timaktaev]

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

Но мне кстати, вариант wazd'а (тот что ниже) больше нравится - без кубиков.

Кстати, а нужна ли вторая стрелочка внутри большой? Лишняя, видно же.
Удачи!

[rossomachin]

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

Эти ваши светло-зелёные штуки выглядят не как маркеры, а как какие-то маленькие кнопки.

[wazd]

Доработаная версия (для особо впечатлительных ;-) )
http://rc.foto.radikal.ru/0707/e8/bcc27773277e.jpg

Что скажете?)

[misha_kvakin]

Недурно. Радует.

[timaktaev]

ага, хорошо. Только ШЛЁМ читается все равно как ШЛЕМ.

[wazd]

Я вообще хотел написать "Поехали!" :-)

[rossomachin]

Вот две важных ссылки, касающиеся дизайна форм:
http://www.habrahabr.ru/blog/ui_design_a…
http://www.habrahabr.ru/blog/ui_design_a…

[misha_kvakin]

Ну это просто роскошь. Спасибо.

[rossomachin]

Наздоровье.

[wazd]

Кстати, я дико извиняюсь, просто в целях общего развития, как вы вставляете сюда картинки? Мне сказали что тут работают HTML теги, но как тока я пытаюсь что-нить замутить, типа ссылки или картинки, то оно просто не отображается. Что я делаю не так?(

[misha_kvakin]

Поэкспериментируем с вашей картиночкой?

[FanXFire]

Что-то мне подсказывает, что дело в Вашей карме.. Почитайте ХабраВики.

[wazd]

Спасибо за объяснение. Я даже как-то и не смотрел что это такое... Ну придется без тегов, раз минус...

[misha_kvakin]

Карма — дело поправимое.

[rouss]

Мне кажется, что лучше использовать стандартный вид всех input'ов. Если вы собрались делать "веб-два-ноль-первой-волны", посмотрите сначала на дизайн настоящих сайтов первой величины, того же фликера, например. И вы увидете, что там не используются эти "псевдогламурные" контролы. Вообще, я вижу тенденцию уменьшения лишней графики на сайте. К тому же, если вы действительно сделаете нечто первой величины, вы будете ломать голову над быстродействием. А та совершенно ненужная графика и js-код вам здорово насолят еще.

[misha_kvakin]

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

[rouss]

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

[wazd]

Ну можно например сбалансировать между нездоровым аскетизмом и аляповатостью :) То есть сделать гламурную форму стандартными методами :) Собственно там особо нестандартного разве только сабмит, да отсвет на полях. Отсвет впринципе можно заменить на рамки, будет конечно менее нестандартно,... зато более стандартно :D Сабмит я бы все же оставил таким какой есть. Кода там будут не километры, а меню приобретет свой шарм.

[misha_kvakin]

Я пошутил, конечно, а вы всё так близко к серцу. Майспэйсом (с точки зрения эстетики ресурса) быть не хочется.

[wazd]

Ну а теперь самое время дочитать обсуждение до конца, а не первые 2 строчки, вам не кажется? :)

[illureal]

А почему эта форма должна мне диктовать как мне заполнять форму. Я как особо ленивый индивид заполнив одно поле, нажимаю tab и перехожу к следующему. И в итоге нажимаю enter. Почему зная что я заполнил все формы правильно я должен после каждой ждать заветного зеленого цвета? А вот дальше более интересно: нажав кнопку "отправить", появилась бы новая страница на который бы мне сказали молодец, а если я сделал ошибку, например ввел 2 разных пароля, мне бы это сказали, при этом все валидные поля были бы удалены, как заполненые.
З.Ы. Не знаюможно ли сделать в вэбе2.0, но хочецца )

[redhummer]

Может имеет смысл показывать тоьлко одно поле, а на кнопке выводить NEXT?
Над полем ввода можно вывести например "2/4", что означает второй шаг из четырёх.

[redhummer]

А вообще... Вы уверены, что это тот случай, когда стоит "умничать"? =)

[zencd]

Зачем выводить подсказку "введите емейл" в статусной строке, когда у нас уже есть лейбл "Е-Ммейл", почему прямо там и не обозначить подсказки и прочии пожелания а не заставлять человека скакать глазами вверх-вниз? Однако это противоречит вашему изначальному замыслу, должен сказать (-:

/*Попутно родилась идея добавить функционала самой кнопке, выводя на ней подсказки*/

Не думаю однако что стоит крепко него/неё держаться.

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

Плюс квадратики-прямоугольнички дублируют этого подсказчика внизу - все они говорят об одном и том же.

Что касается ника: поле для него - в самом низу; лично я хотел бы видеть его на самом верху чтобы сперва подобрать ник (может быть занят), а уж потом заполнять анкету. Проверка ника на занятость тоже не помешает, лучше автоматическая.

[zencd]

а кстати, что у вас за сайт? я бы глянул..