Дизайн веб-форм

Как сделать заполнение форм простым, интуитивным и безболезненным занятием.

Дизайн форм. Упрощение.

Идея: пользователь должен быть сфокусирован на задаче, которую он должен закончить. Любые отвлекающие элементы встают на пути пользователя и поэтому должны быть удалены.

использование кнопки “отменить” может заставить ваших пользователей дважды подумать о том, что они заполняют.

Дизайн форм. Упрощение.

Дополнительная информация?

Преимущества регистрации представлены на форме.41% форм представляют информацию о преимуществах регистрации (MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com) Наличие мотивирующей информации на странице заказа товаров/услуг – тоже немаловажный фактор для повышения конверсии сайта. Не используйте стандартный текст “Submit” (отправить)

28% не предлагают вообще никакой дополнительной информации и представляют только чистую форму подписки (Pownce, DeviantArt, Dailymotion)

11% информируют посетителей сколько времени придется затратить (Threadless, Newsvine, Wordpress).

Одна или несколько?

93% форм содержат только одну страницу.

Выделение подписей

62% форм подписки используют жирное выделение

20% форм подписки используют цвет и 18% используют простой текст

20% форм подписки используют цвет и 18% используют простой текст

Выравнивание подписи

Выравнивание подписи

Согласно исследованию Matteo Penzo (1996) и обозрению Luke Wroblewski (pdf), выведенные сверху подписи могут значительно уменьшить время заполнения форм так как они требуют меньшей фиксации глаз. Если вы желаете достигнуть тех же целей, но у вас есть ограничения экрана по вертикали, то правое выравнивание подписей работает лучше. А в случае, когда ваша форма требует от посетителей просмотра подписей для того, чтобы узнать что требуется вводить (необычные или дополнительные данные), то выровненные влево подписи работают лучше.

Обязательные поля

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

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

Число опциональных полей

Большинство сайтов избегают опциональных полей и просят вводить опциональную информацию после процесса регистрации. 62% форм не имели опциональных полей вообще, и 98% форм содержали менее 5 таких полей.

Вертикальное или горизонтальное выравнивание полей?

Есть явный тренд вертикального выравнивания полей с чистым вертикальным путем заполнения. 86% веб-сайтовсодержат поля ввода, выведенные вертикально. 15% из них содержат красивый и привлекательный дизайн для того, чтобы привлечь предполагаемого посетители и позволить ему чувствовать себя более комфортно во время заполнения форм.

Вертикальное или горизонтальное выравнивание полей?

Hover, active, focus Чистые, точно выраженные и простые веб-формы. Визуально

выделяйте заполняемые поля, чтобы пользователь не потерялся

Пояснения

Если подсказки и помощь присутствуют, то они расположены:ниже поля ввода (57%);

с правой стороны поля ввода (26%);

над полем ввода (13%);

слева от поля ввода (4%).

Если ваша веб-форма объемная и состоит из нескольких страниц (или имеет несколько шагов), убедитесь что пользователь постоянно получает сведения о ходе выполняемых действий, о том, сколько еще времени может ему понадобиться для заполнения. Такое часто встречается в случаях онлайн-опроса (исследования) с множеством вопросов или в процессе оформления заказа в интернет магазине.Все что нужно, это писать “Шаг 4 из 5” или что-то в этом роде. Если пользователи будут продолжают нажимать кнопку “продолжить”, четко не понимая когда будет последний шаг, то они прекратят заполнение формы раньше, чем вы можете предположить.

Дизайн сообщений об ошибках а) Сообщения об ошибках после нажатия на кнопку submit и/или

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

Есть ли необходимость подтверждать e-mail?

Только в 18% случаев присутствует необходимость подтверждать свой e-mail . Пользователи видят, что они ввели, потому что поле ввода e-mail не закрыто звездочками

Есть ли необходимость подтверждать пароль? Только в 18% случаев

присутствует необходимость подтверждать свой e-mail . Пользователи видят, что они ввели, потому что поле ввода e-mail не закрыто звездочками

Однако, многие крупные сайты, такие как Facebook, Friendster, LinkedIn, Stumbleupon, Pownce и Twitterне требуют подтверждения пароля.

Дизайн формы комментариев на блоге

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

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

Форма компактная, нет висячих строк, аккуратная.