В последнее время много внимания уделю вопросам usability. Поэтому на adne.info появилась соответствующая рубрика. В этом посте, как следует из названия, поговорим о формах регистрации. Точнее: о подписях к полям (label).
Как я убедился, этот — с виду не самый значительный элемент — может серьёзно повлиять на количество регистраций. Особенно заметно на большом трафике. Хотя в каждом случае свои нюансы, есть всё же некоторые тенденции.
Сложилось мнение, что наиболее удобно размещать подписи слева от поля ввода информации. Для стран, которые читают слева на право — такое расположение логично кажется наиболее удобным.
Здесь возникает вопрос, как выравнивать подписи — по левому или по правому краю? Что лучше? Спросим у популярных сервисов: Вконтакте против Одноклассников:
Дела у Вконтакте идут несколько получше, выравнивание — по правому краю. Идём дальше: сравним Яндекс и Рамблер:
Яндекс ставит правое выравнивание и выигрывает. В тоже время у Гугла — выравнивание по левому краю…
А как насчёт сервисов знакомств: Мамба и Лавплэнет:
На мамбе левое выравнивание и 12,016,405 пользователей, на Лавплэнете — правое выравнивание и 18,293,478 пользователей.
Однозначно, правое выравнивание выигрывает (Гугл не в счёт). Подтверждает это и Твиттер — сильно выросший за последнее время.
При выравнивании по левому краю пользователь проходит глазами более значительные расстояния и чаще путается в полях. Выравнивание по правому краю минимизирует количество движений глаз и упорядочивает процесс:
Подпись также можно поставить снизу или сверху поля ввода информации.
Что будет если подпись поставим снизу? Пробегая глазами страницу, пользователь видит поле, ниже подпись к нему. Следовательно, надо сделать дополнительное движение, чтобы вернуться к полю (как и с размещением подписи справа). Не рационально. Стало быть в этом варианте лучше размещать подписи над полями.
Кстати, изучая зарубежные ресурсы по usability обнаружил что большинство рекомендует именно верхние подписи к формам. Так например сделано у популярнейшего блог-движка WordPress:
Сверу, слева — может быть что-то идеальнее? По мнению специалистов — может. Подписи надо выделить «жирным» — тегом <b> или <strong>. Так сделано у Tumblr:
Впрочем, для рунета всё же лучше ориентироваться на наши ресурсы,а здесь, как показало моё небольшое исследование — правое выравнивание с левой стороны от поля — выигрывает.
Даже не думал, что казалось бы такие мелочи так сильно влияют на юзабилити сайта. Спасибо за информацию
Ага, а вот я например иногда не одеваю контактные линзы, и вот собственно на этом блоге сегодня для меня было внапряг вписывать и попадать в поля чтоб ввести мыло и сообщение. И думаю таких немало. С другой стороны, в вордпрессе поля крупные и мне совсем не лень заполнять их когда пишу в блог, а без этого никак не обойтись при написании статьи, дело не в форме регистрации, а вообще в выравниваниях подписей к полям. У гугла хоть и правое выравнивание, но зато поля не мелкие. а вообще да, лучше сверху делать подписи, гемора меньше
Да, регистрация конечно что надо)))))))))))))))
Я бы сказал, что идеальная форма регистрации (и комментирования — это OpenID или ему подобный сервис, который вяжется с тви, фб или жж.
Да работает же такой вариант,люди же регистрируются но можно было бы сделать проще все,не то некоторые просто не могут разобраться как это сделать!
мне кажеца то как выглядит оформление регистрации на количество зарегестрировавшихся или отказавшихся от регестрации никаким образом не влияет,достаточно сделать простенькую,приятную для глаза и интуитивно понятную регистрацию…
Думаю место для ввода информации не должно быть слишком большим. С точки зрения психологии, человек обращает внимание на расцветку, на отвлекающие знаки. А вот регистрация для него должна пройти незаметно, и всё удовольствие от сайта он должен получать не благодаря регистрации на нём и не от выравнивания. Так что, поля для регистрации необходимо делать более менее узкими.))))
Чесно мне все равно как выравниваються поля при регистрации, но вот допустим в Вконтакте неудобно как то с лева, выплывают. И что теперь не регистрироваться? Нет если мне надо я зарегистрируюсь, и точка)))
Очень интересная тема, а главное на злобу дня) Ведь действительно очень важно,как оказалось, правильно выравнить подпись к полю для заполнения. Хоть я и не считаю, что это сильно большая проблема, но все же больше склоняюсь к варианту выравнивания как на сайте «В контакте» или «Love Planet». Можно еще рассмотреть вариант заполнения непосредственно в самом поле почти прозрачными буквами))
довольно интересная тема, ведь люди в основном читают слева направо и пустое пространство перед полем регистрации на инстинктивном уровне заставляет искать что же еще забыл добавить вебмастер
Хорошая статья! а главное ставит все точки над по поводу регистрации!!!
Теперь я буду задумываться над этим вопросом при регистрации!!! СПАСИБО БОЛЬШОЕ АВТОРУ
Очень интересная статья! раньше даже не замечал и не задумывался об этом=))) Даешь выравнивание по правой стороне и безопасная и легкая регистрация без лишних заморочек!=))
Мне кажется, что форма регистрации не столь важна… главное чтоб было поменьше запрашиваемой информации и никаких подтверждений на E-mail.
Представлен интересный анализ,много полезной информации для создателей сайтов, но ещё стоило бы уделить внимание количеству информации запрашиваемой при регистрации,и её систематизации.
По-моему,вариант с WordPress`ом более или менее нормален.Читать удобнее когда надписи сверху.Спасибо автору за интересное исследование!
Иногда заходишь на какой-нибудь интересный сайт, начинаешь регистрироваться… И потихоньку говорить некультурные слова про создателей сайта.
Хочется что бы разработчики не забывали читали такой материал перед созданием сайтов
Спасибо за информацию, меня например не устраивает в регистрации, на большинстве сайтов, слишком много вводимой информации, котарая как иногда выясняется не приносит ни какой пользы, даже забытый пароль порой восстановить нельзя.
Самая лутчая форма регестрации ето безопасная регестрация. Тоисть что б при регистрации был запрос на мобильний телефон, на который будет приходить код активации!
Интересная статья!! Я вот ,например, раньше не придавал значения тому где и как расположены подписи относительно окна ввода информации)) А если подумать, то на многие сайты заходить не хочешь только из-за неудобной регистрации.
На мой взглад регистрация в первую очередь должна быть интуитивно понятной, чтобы не сидеть по три часа и не гадать:»Куда что нажать и куда какое сообщение отправить, чтобы получить потом код, который непонятно куда нужно ввести))))». Ну, конечно с настолько запущеной картиной я не встречался, но непонятные моменты, то там, то тут все равно возникают.:-))) Во вторых я считаю, что регистрация не обязательно должна быть короткой и состоять только из указания e-mail и пароля. Для каждого ресурса регистрация должна быть оптимальной. И еще очень хотелось бы, чтобы регистрация все-таки оставалась бесплатной, ну хотя-бы на социальных сайтах, а то уж больно скучно бывает на работе))))
А я так вообще путаю где лево, а где право. Не знаю с чем это связано, может потому что я в чём-то левша, а в чём-то правша. Но очень не люблю регистрацию с заморочками. Особенно, где вообще нет слов «вход/регистрация». Сиди потом и ломай себе голову, что нажать, чтобы зарегистрироваться. А когда найдёшь, то тут уже не до анализа правое там выравнивание или левое.
Статейка очень даже хорошая, но не для меня я в интернете уже 5 лет работаю, но если б я почитал бы ее лет 5-4 назад, то помогло б а так все кто с интернетом на вы читайте.
ПС: для меня идеальная форма на ЯНДЕКСЕ!
Интересное исследование, никогда на это не обращала внимания.
Идеальная форма регистрации — это чем проще, тем лучше. Если у человека не получается с первого раза зарегистрироваться, то есть вариант, что он просто не станет мучиться и бросит это дело. Необходимо, чтоб защитный код был разборчив и не требовалось сложных комбинаций пароля. А левое выравнивание, или правое для меня не существенно. Главное чтоб регистрация не отнимала много времени.
Статья конечно интересная, но мне кажется что выводы слегка надуманы — выборка слишком мала, да и наверняка большинство людей даже не обращают внимание на выравнивание.
Никогда не задумывалась над выравниванием полей в формах регистрации на сайтах. Очень интересная статья. Получается, что на посетителя сайта при регистрации действует что-то похожее на «правило золотой полки» у мерчендайзеров в торговых сетях. Т.е. лучше продаются те товары, которые находятся на уровне глаз покупателя (больше регистраций на сайтах с более удобной для зрительного восприятия регистрационной формой). Мое мнение — очень удобно, когда подписи находятся сверху формы.
Статья очень познавательная. Что-то я раньше никогда не обращала на это внимания. Конечно, многие люди проводят огромное количество времени в интернете, и я думаю, это замечательно, что находятся люди, которые начинают думать о нашем здоровье и удобстве.
Вполне занятное сравнение. По своему опыту могу судить, что выравнивание справа более комфортабельно и вызывает немного больше положительных эмоций у посетителей.
Регистрация должны быть понятной. Паутина сети идет в провинцию и часто регистрируются люди впервые попавшие в интернет. Логин и пароль с лева, а справа комментарии. Фон не должен резать глаза, не нужно чтобы пестрила лишняя информация.
Первоначальная регистрция-чем меньше полей тем лучше.оптимально 5-6.остальное в профиле,если есть желание!
Весьма полезная информация. Спасибо.
Хотелось бы узнать еще и как не нужно делать регистрацию. Например, Skype или Yahoo. На мой взгляд чрезвычайно неудачно. Перемудрили явно с системой безопасности. Хотя, может это и необходимо?
Никогда не обращал на это внимания, на мой взгляд, по левому краю выглядит более эргономично, а чтобы глаза не путались можно точки поставить или фоновые полоски
Статья интересная, действительно раньше об этом не задумывалась.
На самом деле е так важно по какому краю выровнена регистрация, а что бы ресурс был интересен. Тогда точно мало кто испугается сложной регистрации.
Спасибо за исследование. Статья очень понравилась, раньше я как-то не обращала внимания по какому краю выравнивание. Приведение статистики зарегистрировавшихся считаю не совсем целесообразной, по скольку количество зарегистрировавшихся зачастую не зависит от формы регистрации.
Дааа, сколько тонкостей, как говорится, век живи, век учись, только, что-то мне уже кажется, что во всем этом, я не разберусь и до конца своих лет, потому,что такой объем информации просто не реально обуять))))
Очень грамотное обсуждение формы регистрации. Почему-то не освещаете вопрос ввода капчи. Это приходится делать при любой регистрации. Интересно было бы знать какое количество символов при вводе будет оптимальным. У многих с этим явно перебор — заставляют целые предложения вписывать.
А я как-то никогда не обращаю внимание на то, в каком углу находится форма для регистрации — правом или левом, для меня это неважно. Очень удобно, когда регистрация простая — только адрес и пароль!
Вроде статья простая, но узнала о том, на что внимания даже не обращала!Оказывается мне тоже нравится выравнивание по правому краю;))) А вообще, мне все таки кажется удобны верхние подписи к формам.
Статья довольно таки интересная.
Хмм, раньше даже не задумывался над этим, а сейчас начиная анализировать данный текст, получаются вот такие выводы: выравнивание по правому краю удобнее и я доказал это сам себе. Вы спросите как??? Сейчас расскажу, у меня есть учетная запись Вконтакте(правый край), меня нет в Одноклассниках (левый край), у меня есть ящик на Яндексе(правый край), у меня нет ящика на Рамблере (левый край). Причем регистрировалось всё это очень давно.
да,что правда то правда)
зачастую бывают настолько неудобные регистрации на сайтах что начинаешь заполнять форму,путаешься и уходишь восвояси
Статейка конечно полезная, но скорее всего только для людей, первый раз зашедших в интернет, ибо любой человек, хоть раз заполнявший форму регистрации пользователя, сделает это в следующий раз без проблем.Тем более, большинство форм однотипно, а для иностранных сайтов всегда есть возможность использовать переводчики вроде Google..
Это очень интересная и полезная информация. Лично у меня довольно часто при регистрации на различных форумах возникали трудности. Но я с этим справлялась, а есть люди которым такие статьи просто необходимо прочесть.
Мне было очень полезно узнать эту информацию, так как у меня есть свой сайт! А интересно, если подписи находятся по центру, то как читатель реагирует?
По мне хоть слева,хоть справа, хоть по середине. Регистрируюсь на разных сайтах очень часто, и где располагается форма регистрации для меня не имеет особого значения. Главное чтобы результат был положительный.
Что еще примечательно, что те сайты, у которых больше зарегистрированных пользователей или выше популярность — у них и весь дизайн в комплекте продуманней и уровнем повыше. Не только оформление формы. А статья хороша — толковые мысли вслух.
По-моему нет никакой разницы в расположении. Все должно быть просто и понятно, а если регистрироваться на полях, то экономится место.
Специалистам, конечно, лучше знать какой способ выравнивания при регистрации выигрывает. Лично мне все равно. Если нужно зарегестрироваться, я это сделаю, пусть хоть поля будут разбросаны по всей странице. А если мне не нужна регистрация, я и 2 две строчки рядом не заполню… вот так…
А мне больше понравилась форма «Вконтакте». Хотя я думаю дело не только в выравнивании. Например, для юзабилити важны и промежутки между самими полями формы и их названиями. Также важенн и шрифт написания.
Очень приятно, когда регистрация простая. И совсем плохо, когда из-за недоработок, регистрация выдает ошибки. На такой сайд даже заходить потом не хочется. Не столь важно как выравнивать подписи – по левому или по правому краю, важно, что бы как можно меньше возникало проблем с регистрацией.
Автору канечно спасибо, по по большому счету об этом мало кто задумываеться, все принимают как еться я имею ввиду пользователей а вот разработчикам нужно брать во внимание, а они как правило мало интересуеться такими вещами
Очень интересная статья, автору спасибо! Я согласна, что при регистрации намного удобней, когда подписи находятся слева.
Спасибо за статью. Раньше при регистрации не обращал внимания на то как выровняны подписи. я тоже считаю что правое выравнивание с левой стороны от поля лучше. Хотя на в кус и цвет товарищей нет.
Согласна, подпись слева все-таки удобная вещь. А насчет выравнивания мне вообще все равно. Какая разница, по какому краю? За компьютером слепые не сидят). А статья, конечно, полезная. Мне импонирует.
Спасибо за выложенную информацию,подчеркнул для себя много нового,отличная рубрика, буду в дальнейшем следить за поступлением новых материалов.
Идеальная форма, это конечно замечательно. Но не меньшее значение имеет общий вид оформления сайта. Как это видно на представленных иллюстраций, визуально левая колонка выигрывает у правой как за счет верно подобранных параметров выравнивания, так и за счет других не менее верно подобранных элементов: читаемость текста, удобство заполнения полей (выпадающие списки для д.р.), «правильные» капчи.
Конечно, предполагается Жаваскрипт. Но есть НО. JS включён почти у всех пользователей, а те, у кого не включён, сами себе делают неудобство и всего лишь сотрут надписи в полях собственноручно. (Они их увидят в любом случае. Никто же не выводит жаваскриптом надписи. Это было бы точно глупо)
Да я не говорил, что метод универсален. Это одно из решений, и оно очень неплохо работает, несмотря на выработанные стереотипы.
Такой способ не универсален — он работает только при включенном яваскрипте. И в случае если по каким-то причинам он отключен у пользователя — он вообще не поймёт что это за поля, либо ему придётся вручную стирать эти названия(по щелчку поле не будет само очищаться)
Я придерживаюсь мнения что если форма горизонтальная, как в вашем примере — подпили должны быть слева от поле ввода, но максимально близко к нему, если большая форма с вертикальным расположением полей — то подписи непосредственно над полями ввода и всегда их немного выделять жирным
Сверху лучше, когда полей немного. А так да, по правому привычней.
Автор,
Самое правильное и единственно полезное что вы можете сделать это поставить на одном сайте с неизменно стабильным трафиком последовательно несколько разных форм. Например, в течение недели каждую. А потом опубликовать результаты по трафику и регистрациям.
По поводу категоричного требования табличной верстке.
Действительно, таблица категорично не требуется, но, при изменении длины подписи (подпись просто изменяется с одной на другую), придется редактировать стили. В случае применения таблицы, этого не нужно, табличка сама растянется.
Не в первую очередь — это верно, но всё же влияет и весьма серьёзно. Поэтому лучше в своих проектах делать всё качественно, вплоть до таких мелочей как выравнивание подписей.
На аватарке — обезьяна
На картинке всё верно — Рамблер, а Гугл упомянут дополнительно.
Думаю юзабилити формы регистрации как раз количеством регистраций и надо мерять, точнее соотношению ушедшего на регистрацию трафика к количеству зарегистрировавшихся. Это реальный и адекватный показатель того, насколько хороша форма.
рафик исправил, спасибо.
Относительно количества полей, имхо, для формы регистрации — чем меньше — тем лучше, а дальше — задача заполнить полный профиль, но уже после регистрации, это моё имхо.
Форма регистрации — не панацея, но сильно упрощает задачу, да и тенденции на лицо, хорошая рубрика, буду следить
Заинтересовали, пробежался по популярным сайтам. У дига, как и у тумблогера — лэйблы сверху над полями, выделены жирным.
Майспэйс — левое выравнивание — как у Гугла, похоже что нашим сервисам более подходит правое выравнивание, а «ихним» левое
> Особенно заметно на большом рафике
«Рафик» – это такой микроавтобус. Они как правило стандартного трупоизмещения :).
Статья – ей-богу! – вкусная и полезная, только показатели имхо выбраны некорректно. «Вконтакте vs. Одноклассники», «Яндекс versus Rambler», еще «Барби против Годзиллы» для полноты картины. И с Гуглем вы это, того… ну как-то не к месту ввернули, хоть бы картинку добавили :). Это ж глазам пришлось дополнительные движения делать: вместо сверху-вниз – сверху-вниз, потом снизу-вверх, и снова сверху-вниз. А некоторые даже и не поняли (см. коммент №5 от Ильи).
1. По поводу размещения надписи над полем. Это действительно кажется удобным, но! кто-нибудь обратил внимание на количество полей в таких формах?
2. За что всегда хотелось руки оторвать проектировщикам форм – так это за неиспользование тега label с атрибутом for для надписей. Особенно бурно проявляется в случае с чекбоксами и радио-контролами. Но про это уже говорилось.
Андрей, по поводу пункта 2 (кстати, отличный комментарий!) – ни первый, ни второй вариант так категорично не требуют табличной верстки.
P.S. А вот в «Идеальной форме комментариев» однозначно должна присутствовать кнопка «Предпросмотр» либо другая возможность предварительного просмотра текста перед отправкой.
Да, очень сомнительные выводы. Я не думаю что у котакта столько пользователей из за выравнивания
Интересное наблюдение. Я и не вдавался даже в такие мелочи. Как оказалось напрасно.
На мой взгляд очень смешное сравнение было произведено. Вы сравниваете совершенно разные показатели в данной статье (я сейчас про ее первую часть).
На мой взгляд для стран где читают слева направо подписи должны располагаться либо слева либо вверху. При этом нужно учитывать размер и цвет этих подписей. Кроме этого обязательно должны быть указаны обязательные поля и правила заполнения полей если таковые имеются (например, можно ли использовать русские символы в пароле). Кроме того при неудачном заполнении одного из полей ни одно поле не должно обнуляться, даже пароль.
Извиняюсь, Андрей, а не Алексей.
Алексей,
Привычка видеть подписи рядом с полей действительно спорный вопрос. Человек с более менее гибким мышлением нормально воспримет такое расположение, опять же имхо. Тестов я никаких не проводил.
Можно вообще без жаваскриптов. JS это просто красивость. Просто нужно будет удалить название поля перед введением данных, что в принципе несёт ненужное действие, поэтому применён js. Такие простые скрипты имхо не зло. Кому помешает 1 строка.
Перемещаясь табом… С этим согласен. Как-то даже и не подумал, что кто-то может бегать по форме не задумываясь о том, что нужно вводить. Такие уникалы несомненно есть. Можно дополнить информативность выпадающей подсказкой, в принципе, но это лишний код. Хз, можно не убирать подпись жаваскриптом.
Имхо, не только место экономится. Ещё и упрощается сама форма для восприятия. Пользователь точно знает куда и что ему вводить. Кстати, действительно, приведённая ной форма очень проста, однако найдётся немало форм, где экономия места не помешает.
На счёт тега label полностью согласен
Часто используют просто текст возле поля.
Так, прошу пардону, в комментах подрезает теги HTML (как обычно забыл).
В самом конце я рекомендую использовать тег. Так вот, этот тег label.
Спасибо за внимание.
Есть еще один вариант расположения подписей к строкам, он реализован в форме отправки комментариев к этой записи (подписи находятся справа от полей и выравнены по левому краю). К сожалению, этого варианта в обзоре нет, а мне он кажется очень интересным.
Хочу обратить внимание на кое-какие моменты.
1. Подписи слева от полей, выравнивание по левому краю. Подписи смотрятся более опрятно, т.к. нет забора слева. Но переменное расстояние до полей ввода все портит. Поэтому лучшим оказывается второй вариант.
2. Подписи слева от полей и выравнены по правому краю. Не смотря на забор слева, лучше выполняют свои функции, т.к. точно ассоциируются с полями.
Первый и второй вариант требуют табличной верстки, т.к. верста блоками может привести к серьезным мучениям при желании выровнять поля ввода строго один под другой. А таблица — это лишние теги, стили ну и т.д.
3. Подписи над полями ввода. В этом случае подписи идеально выполняют свои функции (читаем-то мы сверху вниз) и верстать блоками данную конструкцию не составит никакого труда.
4. Подписи справа от полей ввода. Позволяют впихнуть название полей в блок div, в котором расположен input, а, значит, сэкономить на одном контейнере (хотя, этот плюс совершенно не впечатляет). Такой вариант расположения подписей подходит для формы, содержащей только обязательные поля. Все равно нужно кликать в поле ввода, а уж потом читать подпись, т.к. заполнять придется в любом случае. Все-таки, мне кажется, этот вариант проигрывает предыдущему. Какое ваше мнение, товарищи?
5. Подписи находятся внутри полей ввода и исчезают при клике мышью. Мне кажется — это полный отстой. Never Lex, да-да, мне не нравится этот вариант. Сейчас поясню почему:
* Подписи к полям должны находится рядом с полями, а не в них — это же подписи, мы так привыкли. Но этот момент, конечно спорный. Продолжаем.
* Ненужный JavaScript, от которого можно легко отказаться, вытащив подписи из полей.
* Перемещаясь по форме (например, быстрое перемещение tab-ом) я могу не успеть прочитать название поля, а уже попаду в него, инициировав скрипт, который уберет подпись.
Never Lex, кому нужна эта экономия места ценой введения JavaScrit-ов? В приведенном Вами примере свободного места предостаточно.
6. Есть еще один вариант. Подписи, вместе с полями, находятся в одном контейнере и все это выровнено по левому краю. Очень часто встречается на новичковых сайтах. Тогда поля, находящиеся друг под другом, не выровнены относительно вертикали, что рождает жуткую картину забора.
Также, уважаемый новички, хочу заметить, что для подписей к полям ввода хорошо использовать именно тег и связывать его с полем ввода. Это даст возможность кликать по подписи и соответствующее поле будет получать фокус ввода.
Отличная статья. Люблю всякие заметки по юзабилити. Правда не очень согласен когда приводятся кол-во зарегистрировавшихся пользователей как аргумент, на эту цифру форма регистрации влияет далеко не в первую очередь.
Спасибо за интересную информацию. Здесь, конечно, хорошо бы оценивать юзабилити не по количеству регистраций, а, например, по количеству неудачных регистраций. Равняться безусловно надо на больших игроков.
Так там не google, а рамблер на картинке.
Что-то тут не так 
Кто накосячил?
Хорошая статья, но все это мы уже проходили
Спасибо, очень правильная статья.
@hodinar идеальная форма регистрации на boomboomroom.ru
@hodinar на вашей автарке я вижу кеглю или грустного пингвина, супруга видит обезьяну. Что там на самом деле?