Дизайн веб-форм: формы регистрации Sign-Up Формы
Если вы желаете получить максимальный доход от ваших услуг, предоставляемых на сайте или максимизировать продажи товаров, вам необходимо усовершенствовать и сделать более удобными веб-формы, используемые на сайте. Возможно, у вас есть какие-то продвинутые идеи, чтоб произвести на посетителя впечатление, но этого недостаточно для того, чтоб дать посетителям возможность просто зарегистрироваться на сайте. Клиент должен остаться довольным от посещения сайта, чтоб вернуться на него вновь и воспользоваться его услугами еще не раз. Поэтому разработчики должны использовать весь свой опыт интернет-пользователей, который поможет пригласить и рассказать посетителям о том, как работает служба, объяснить почему они должны заполнить бланк и какие льготы и бонусы они получат, если зарегистрируются. И, конечно, разработчики должны сделать так, чтоб заполнение регистрационной формы было очень легко и понятно.
Именно поэтому разработки эффективных веб-форм являются непростым делом. И эта сложность объясняется одной простой причиной: никто не любит заполнять формы – ни в офлайне, ни в Интернете. Поэтому, разработчикам необходимо использовать звуковое решение дизайна формы, чтоб облегчить регистрацию легко, интуитивно и безболезненно.
Но как же точно выяснить наиболее эффективное решение для регистрационной формы? Где поместить ссылку на регистрацию? Как спроектировать форму для регистрации? Какими должны быть кнопки для регистрации и как их разместить? Какие есть примеры дизайна веб-форм в современных веб-сайтах? Обычно такие возникают вопросы при моделировании веб-форм. Чтоб получить ответы на эти вопросы компания Smashingmagazine провела исследование.
Ниже представлены результаты опроса по использованию моделей текущих веб-форм – результаты анализа 100 популярных веб-сайтов, на которых использование веб-форм является важным. В первую очередь описаны выводы по использованию форм регистрации. Вторая часть будет опубликована на следующей неделе.
Sign-up формы для регистрации и залогинивания
Основная цель исследования состояла в том, чтоб увидеть какие веб-формы используются в настоящее время и насколько эффективно, для того, чтоб выделить руководящие принципы для того, чтоб сделать форму для регистрации более удобной.
Были выбраны 100 больших вебсайтов, где используются веб-формы и где они важны. Для того, чтоб найти эти сайты были рассмотрены Technorati, Alexa, а также популярность в поисковых системах и различные рейтинги. Популярность использовалась в качестве индикаторов для сайта, где веб-формы имеют значение, поскольку они непосредственно влияют на бизнес-результаты и, следовательно, этим формам должны давать высокий приоритет в ходе процесса проектирования. В частности, регистрационные формы имеют ключевое значение для социальных приложений, которое объясняет, почему многие из рассмотренных форм были с социальных сайтов.
Сосредоточенность на регистрационных формах объясняется тем, что в дальнейшем будут рассматриваться другие формы (например, форма оформления заказа) в отдельности. При изучении была пройдена регистрация через каждую форму на всех сайтах и проведен анализ методов, внедренных в эти формы.
При заполнении в каждой из этих форм были использованы специальные учетные записи электронной почты и специальное имя пользователя. Чтобы сделать исследование как можно более всеобъемлющий были выделены 29 различных проблемы и вопроса в дизайне, которые могут возникнуть при разработке веб-форм.
Они были сгруппированы по категориям и найдены сходства в дизайне и разработке идей. В этой статье были использованы как хорошие, так и плохие примеры веб-форм, показанные с точки зрения юзабилити.
1. Размещение форм регистрации
1.1. Какое название дать ссылке для регистрации?
Здесь приводятся данные зарубежных компаний (у нас, к сожалению, такие исследования не проводятся, а если и проводятся, то их результаты нигде не публикуются. Поэтому будем учиться у зарубежных коллег).
Пользователи знают, что они должны залогиниться (sign-up), зарегистрироваться (register), присоединиться (join), стать членом (become a member) или создать аккаунт (create an account) и именно поэтому они ищут именно эти фразы, когда они хотят стать зарегистрированным пользователем на сайте. Очевидно, что пользователи ожидают, что одна из этих ссылок приводит к регистрационной форме. К сожалению, это не всегда так.
Наиболее популярные названия “Зарегистрироваться”(sign-up) (40%), затем “Join” (18%), “Register” (18%) и “Создание учетной записи” (Create account) (17%). Мы наблюдаем менее крупные, громкие и блестящие “начать здесь” (“start here”) – кнопки, так же как видели их в течение последних лет. Видимо, дизайнеры пытаются сообщить информацию точнее, чем разработкчики и подчеркнуть функциональность этого сервиса.
1.2. Где должна находиться ссылка для регистрации?
Когда посетители приходят на сайт в первый раз, они пытаются угадать единый формат для постоянных блоков. Глаза двигаются «по всей поверхности окна», пытаясь понять, какие области являются более важными, и где то содержание, которое ищет он или она, может находится вероятнее всего. Для удовлетворения ожиданий пользователей разработчики при помощи дизайна интерфейса должны помочь пользователям интуитивно предположить то, что ему требуется.
Если пользователь не может найти ссылку, которая приводит к регистрации, то соответственно, он также не сможет зарегистрироваться на вашем сайте. Поэтому исключительно важно сделать ссылку в видном месте. Где следуем дизайнерам и разработчикам размещать ссылку “зарегистрироваться”, чтоб сделать ее более доступной?
По результатам нашего исследования, ссылку “зарегистрироваться” размещают:
*Расположенна в header (верхней части – шапке сайта) на 59% сайтов (76% из них ссылка “зарегистрироваться” находится в правом верхнем углу),
* занимает видные позиции на главной странице на 21% сайтов (ссылка или сама форма находится на главной странице)
* спрятана за ссылку “Логин” в хедере в 9% случаев (например, Craigslist).
Не удивительно, что фактом является то, что ссылка «зарегистрироваться» редко помещается в боковой панели (7% - Propeller, Xing). Тем не менее, 4% сайтов первой предложила пользователям возможность напрямую использовать сервисы и требуют регистрации, только когда она требуется для сохранения настроек.
2. Дизайн формы
2.1. Стоит ли упрощать форму для регистрации?
Если пользователь нажал на ссылку «Регистрация», вероятнее всего он решил зарегистрироваться на сайте. Более важно то, что он нажал на ссылку для дальнейшего изучения навигации, а не привлекательные мигающую рекламу.
Соответственно, разработчики, как правило, устраняют все ненужные детали, которые отвлекают и не дают посетителю заполнить форму. Очень часто мы можем увидеть только логотип и форму регистрации без каких-либо вариантов навигации или дополнительной информации. Идея в том, что пользователь должен сосредоточить внимание на задаче, которую он должен выполнить. Следовательно, любые отвлекающие элементы на пути пользователя должны быть устранены.
Поскольку пользователи хотят узнать, что будет после заполнения формы, то сам процесс заполнения должен быть очевидным и как можно более простым. Часто разработчики минимизируют количество полей для заполнения в процессе регистрации. По результатам опроса, 61% веб-форм являются упрощенными, по сравнению с общим макетом страницы (например, MovableType, Livejournal, Amazon, Yandex.ru).
Рассмотрим форму для регистрации на Yahoo. Посетителям предлагается заполнить только поля, которые необходимы для создания учетной записи. Нет больше ничего, следовательно, это нет ничего, что могло бы отвлечь от процесса заполнения. Заметьте, что обращение и тон к посетителю разговорный и привлекательный (в начале формы написано: «Мы будем рады, если вы зарегистрируетесь на Yahoo! Три простых шага! Вам нужно ответить на несколько простых вопросов, выбрать логин и пароль и вы зарегистрированы»). Это просто, легко и удобно.
Flixster, вероятно, лучший пример, где переполнены формы, который фактически не уважает своих посетителей. Страница регистрации позволяет получать все возможные опции навигации сразу. И на странице залогинивания слишком много рекламы рядом с регистрационной формой. Это неудобно для пользователей. Второй вариант переполненной страницы для регистрации, можно увидеть на Photobucket.
2.2. Нужна ли дополнительная информация на страницах регистрации?
На самом деле многие разработчики пытаются стимулировать посетителей, заполнить форму для регистрации путем предоставления дополнительной информации, такой как помощь, требуемая информацию или даже отказ от авторских прав. Она отличается от сайта к сайту, однако в большинстве случаев выгоды и бонусы после регистрации представлены в следующих формах:
* 41% после регистрации прелагает бонусы (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
* 28% не дают никакой дополнительной информации на всех и предлагают только чистую форму регистрации (Pownce, DeviantArt, Dailymotion)
* 11% информируют посетителей о том, как много времени это требует
(Threadless, Newsvine, Wordpress)
Лишь немногие сайты сразу обращают внимание на то, какая информация необходима во время регистрации (6%), какие будут следующие шаки (8%), или предостерегают от ошибок, неточностей и т.д. (6%, например, 37signals, Bloglines).
2.3. Одна страница формы регистрации против нескольких страниц
93% сайтов используют одну страницу для заполнения регистрационной формы. Видимо, разработчики пытаются помочь посетителям упростить и ускорить этот процесс. Некоторые сайты используют несколько страниц, пытаясь совместить страницу залогинивания с формой регистрации для получения других данных о пользователе.
Например, Meebo совмещает форму залогинивания с полной регистрацией и предлагает пользователям помощника во всплывающем окне. Форма состоит из 6 страниц, где пользователи должны вводить свои данные от имени до предоставления дополнительной информации о своих предпочтениях.
2.4. Как выделять поля для ввода информации?
62% регистрационных форм используют жирный шрифт для выделения названия поля для ввода. Это удивительно, что ни один сайт, не использует курсив для достижения того же эффекта. Чтобы сделать названия более заметными 20% для регистрационных форм используют другие цвета и 18% используют простой текст.
2.5. Выравнивание названий полей
По правде говоря, ожидалась сильная тенденция к одному из возможных выравниваний. Однако, по нашему мнению, нет сильных тенденцией по выравниванию названий:
* названия, выровненные по правом краю используют 41% исследуемых сайтов
(YouTube, Facebook, Metacafe)
* 30% регистрации форм размещают названия полей сверху самих полей
(Behance.net, Wufoo, Tickspot, DZone)
* 29% используют левое выравнивание
(Digg, Ning, Wykop.pl, 43things, StudiVZ).
Согласно Matteo Penzo’s label placement research (1996) и Luke Wroblewski’s findings (pdf), использование названий над полем может резко сократить время регистрации, поскольку такое расположение облегчает нагрузку на глаза – приходится делать меньше движений глазами. Если вы хотите добиться того же эффекта при расположении названия поля на одном уровне, то выравнивание по правому краю будет лучше. Но в том случае, если форма требует от людей заполнения полей с незнакомыми названиями, чтобы узнать, какую информацию требуется заполнить (незнакомые или расширенные данные), левое выравнивание для названий будет восприниматься лучше всего.
2.6. Сколько должно быть обязательных полей?
Когда проводилось исследование наблюдалась сильная тенденция использовать небольшое количество обязательных полей. Несколько лет назад разработчики предлагали посетителям вводить такую информацию о себе, как : имя, фамилия, адрес, страну и личные интересы. Теперь логин, пароль и подтверждение пароля вполне достаточно.
Мы выяснили, что в 54% форм регистрации обязательными являются 5 полей (в 6% случаев регистрация не требуется вообще для того, чтоб использовать данный сервис). 34% формы – 6-8 полей, в то время как 12%, рискуя терпением пользователей, требуют заполнить более, чем 9 обязательных полей.
2.7. Сколько должно быть необязательных полей?
Точно так же как и обязательные поля, можно заметить, что большинство сайтов предлагают пользователям необязательные поля и просят предоставить необязательную информацию после регистрации, когда процесс регистрации уже завершен. 62% сайтов не имеют дополнительных полей вообще и 98% - предлагают менее 5 необязательных полей.
2.8. Вертикальное или горизонтальное расположение полей?
В этом смысле в большинстве формы для регистрации используют вертикальную структуру, где все поля от начала до конца расположены вертикально. 86% веб-сайтов имеют поля, расположенные вертикально. Помимо этого, 15% сайтов используют красивый и привлекательный дизайн, которым предполагается привлечь посетителей и сделать заполнение регистрационной формы проще.
Box.net предлагает простую форму регистрации с вертикально расположенными полями. Когда посетители вводят в них данные, глаз устанавливается на вертикальной оси от заполненного поля.
У Mint регистрационная форма с горизонтально расположенными полями. Когда посетители вводят в них данных, глаз должен переходить от одной области к другой.
Другие выводы:
* 18% сайтов имеют форму для регистрации или ссылку на регистрацию, размещенную в видном месте (например, YouTube, Reddit, Digg, Лулу, Metacafe);
* 78% не используют звездочки для выделения обязательных полей, а в большинстве случаев ни звездочек, ни любые другие способов для обозначения обязательных полей не используется.
* 9% используют индикатор, показывающий пользователям, где они находятся в настоящее время и какие необходимы действия, чтобы завершить регистрацию.
* 85% сайтов не используют легенды и fieldset, предлагающие заполнить простую веб-формус несколькими полями для ввода.
* Поля, как правило, группируются и разделены пробелами (69%), границы для формы также используют (22%), разные цвета для фона используют в 9% случаев.
Подведем итоги:
* ссылка “sign up” ( “зарегистрироваться”) используется в 40% случаев и помещены в правом верхнем углу,
* формы регистрации в упрощенной форме, чтоб не отвлекать пользователей ни на что другое (61%),
* форма регистрации размещена на одной странице (93%),
* формы регистрации, которые для привлечения посетителей разъясняют их преимущества после регистрации (41%),
* названия поля выделены жирным (62%)
* нет какой-либо зависимости от выравнивания названий полей,
* разработчики, как правило, использовать несколько обязательных полей,
* разработчики, как правило, использовать несколько необязательных полей,
* вертикально расположенные поля предпочтительнее, чем расположенные по горизонтали (86%).
