На прошлой неделе мы представили

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

Мы сосредоточили свое внимание на формы подписки, как мы хотели рассмотреть вопрос о дальнейшем важную формы (например, проверка формы) отдельно.После we’ ве прошли через всех и каждого регистрационную форму на отдельных участках и проанализированы подходы к проектированию осуществляются в этих формах.Ниже мы приводим Вторая часть нашего findings — Результаты нашего исследования среди веб-формы 100 популярных веб-сайтах, где веб-форм (должны) matter.

Пожалуйста, обратите внимание, что этот пост не о формах проверки — that’ SA тема для отдельного разговора, мы можем рассматривать их отдельно в одном из ближайших постов.Мы хотели бы поблагодарить Wufoo за предоставление нам основу для проведения наших survey.

3.Функциональность forms

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

3.1.Hover, активная, сосредоточиться – эффекты в использовании

По-видимому, для улучшения формы завершению цены дизайнеры стараются избегать всеми видами отвлечений и предложить четкую, однозначную и простую веб-форму.По сути, это причина, почему любые визуальные эффекты используются очень умеренно — если они используются на all.

• 84% веб-формах, которые we’ ве отзывы didn’ т у любого наведения, активный или фокус-эффектов,
• 16% используются очень тонкие наведении-effects.

3.2.Помощь, поддержка, подсказки: статический или динамический

?

Иногда метка поля ввода isn’ T достаточно конкретным, однако пользователи должны иметь достаточное понимание информации, которую они должны предоставить.Какие символы допускаются в имени пользователя?Сколько символов должна иметь пароль?Есть ли предоставлена ​​по электронной почте автоматически становятся регистрации, чтобы использовать услугу

Советы и подсказки оказания помощи помогая пользователям свести к минимуму количество входных должны быть пересмотрены.Кроме того, нет ничего более раздражающего, что некоторыеПоле ввода которого doesn’ T принимает user’ с входом хотя это, кажется, совершенно правильно.Чтобы избежать этого, дизайнеры используют (как правило) ненавязчивым и ясно hints.

57% из рассмотренных веб-формах, предусмотренных “ static” помощь | — советов, которые должны объяснить, что ожидается от user’ вход с; эти советы, очевидно, поставить рядом с полем ввода.10% подсказки появляются на спрос – обычно после некоторой помощи, кликните по значку или когда пользователь печатает информацию на входе field.

3.3.? Помощь, подсказку: где они размещены

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

Если советы и помощь появляются, они appear…

• Ниже поля (57%)
• На правой стороне поля (26%)
• Над полем (13%)
• На левой стороне поля (4%)

Мы наблюдаем сильную тенденцию к намеки размещены непосредственно под входной field.Обычно такие намеки имеют немного другой цвет, в большинстве случаев легче, чем основные content.

3.4.Проверка ввода: статическая или Ajax

Несмотря на то, Ajax, кажется, буквально наводнен веб-сайтов с богатой взаимодействия с пользователем в течение последних лет, она все еще hasn’ T удалось достичь критической массы среди популярных веб-сервисов.Удивительно, но мы weren’ T в состоянии определить тенденции к Ajax.“ classic” проверка методов, которые проверять ввод после того, как пользователь нажал на кнопку Submit-более популярны, чем в режиме реального времени проверки с JavaScript.

По данным нашего исследования,

• 30% из форм отображаются только сообщения об ошибке в верхней части формы (без полей ввода были выделены),
• 29% из них подчеркнули поля ввода с соответствующими сообщениями рядом с полем ввода (нет ошибок-сообщений были представлены в верхней части страницы),
• 25% используется как ошибка-сообщений и полей ввода,
• 22% используется в режиме реального времени проверки с Ajax,
• 14% использовали наличие ошибок, предупреждений,
• 1% используется система-сообщение с “ ходу back”-link.

3.5.Дизайн ошибке messages

Как вы можетеПонимаете, мы определили шесть различных типов ошибок validation.Примечательно, что 14% из форм по-прежнему использовать Javascript-ошибка-окна для обсуждения проблем (например, YouSendIt Mail.ru Newsvine Clipmarks Yandex см. скриншотниже), в то время как только 22% имели по крайней мере частичную Ajax проверки (как правило, для проверки доступных имен пользователей).Также стоит отметить, что ни один сайт не имел проверки whatsoever.

Newsvine использует JavaScript-предупреждений об ошибках общаться problems.

Обычно дизайнеры, как правило, сообщают ошибки использовании) сообщения об ошибках, появляющихся после отправки кнопка нажата и / или б) выделение “ incorrect” поля ввода визуально.В первом случае ошибки, как правило, маркированные и представлены в виде списка в верхней части страницы, прежде чем форма.Во втором случае обычно цвет границы “ wrong” поле ввода будет выделено вместе с ярлыком поля (в большинстве случаев с красным цветом текста и красный цвет фона).

Иногда дизайнеры сочетают оба метода, и использование сообщение об ошибке, а также подсветку поля ввода.Например, рассмотрим форму регистрации на Ning (см. рисунок ниже), которая сочетает в себе как techniques.

Как правило, красный используется для указания на ошибки, но это не обязательно так. Tickspot Mixx.com и Furl использовать желтый общаться возникли проблемы при виде completion.

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров