Веб-шаблоны Дизайн формы: формы подписки

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

Если у вас есть какие-то революционные идеи, чтобы произвести впечатление на посетителей, на первый взгляд, не достаточно просто дать пользователям возможность зарегистрироваться на вашем сайте.Чтобы сделать это возможным для обслуживания для достижения максимального воздействия мы, дизайнеры, необходимо предоставить пользователям с хорошим опытом пользователей.Нам нужно, чтобы пригласить их, описывать их, как работает сервис, объяснить им, почему они должны заполнить форму, и предлагает преимущества they’ получу взамен.И, конечно, мы должны также сделать его очень легко для них, чтобы participate.

Тем не менее, разработки эффективных веб-форм isn’ T легко.И она имеет одной простой причине: никто не любит заполнять формы — ни форума, ни в Интернете.Поэтому, как дизайнеры, мы должны выяснить, звук дизайнерские решения, чтобы сделать заполнение формы легкого, интуитивного и painless.

Но как именно мы можем понять эти решения?Где ссылка на форму поместить в макет?Как мы должны конструировать его?Как мы должны выделить этикетки и как мы должны привести их в соответствие?Как веб-шаблоны дизайна формы выглядеть в современных веб-сайтов?Именно эти вопросы we’ нас спросили себя.И, чтобы получить ответы we’ ве провел survey.

Ниже мы приводим Данные нашего исследования текущего дизайна веб-форм patterns — Результаты анализа 100 популярных веб-сайтах, где веб-форм (должны) значения.Мы решили начать с формы подписки в первую очередь.Мы представляем первую часть наших выводов ниже; вторая часть результатов опроса будут опубликованы в следующем week.

Update: вторая часть результатов исследования в настоящее время также опубликовано: Веб-шаблоны форм. Исполнение: Sign-Up является частью 2

Регистрационную форму Дизайн Survey

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

Мы выбрали 100 крупных сайтов, на которых веб-формы (должны) matter.Для выбора этих сайтов мы рассмотрели Technorati, Alexa, а также популярность в поисковых системах и различных рейтингах.Мы использовали эту популярность в качестве индикатора для сайтов, где веб-форм имеет значения, так как они непосредственно влияют на бизнес-целей и, следовательно, нужно было дать высокий приоритет в процессе проектирования.В частности, регистрационные формы имеют решающее значение для социальных приложений, которая объясняет, почему многие из рассмотренных форм из социальных сетей sites.

Мы сосредоточили свое внимание на формы подписки, как мыхотелось рассмотреть вопрос о дальнейшем важную формы (например, проверка формы) отдельно.Aftewards we’ ве прошли через всех и каждого регистрационную форму на отдельных участках и проанализированы подходы к проектированию осуществляются в этих forms.

Мы заполнили каждую из этих форм с помощью специальных учетных записей электронной почты и специального имени пользователя.Для того чтобы сделать обследование как можно более полно мы определили 29 различных задач проектирования и questions которые могут возникнуть при разработке веб-forms.

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

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

1.Размещение forms

1.1.Как ссылка на регистрационную форму под названием

Пользователи знают, что они должны зарегистрироваться, зарегистрироваться, присоединиться, стать членом или зарегистрироваться, поэтому они ищут именно эти фразы, когда они хотят участвовать.Очевидно, что пользователи ожидают, что связь с одной из этих ссылок ведет на форму регистрации.К сожалению, that’ Не всегда case.

Web Form Design Patterns

Самое популярное название было “ Вход up” (40%), далее следуют “ Join” (18%), “ Register” (18%) и “ Создать account” (17%).Мы наблюдали менее крупные, громкие и блестящие “ Начало here”-кнопки, как we’ видели их на протяжении последних лет.Видимо, дизайнеры стараются передавать информацию Ратен, чем дизайн и подчеркнуть функциональность service.

1.2.Где ссылка на регистрационную форму помещают

Когда пользователь посещает сайт в первый раз, они пытаются выяснить, что отдельные блоки макета стоят.Движений глаз прыгают “ всего place” и пользователи пытаются понять, какие области являются более важными и где содержание он или она ищет, вероятно, размещен.Для удовлетворения users’ ожиданиями дизайнеры должны помочь пользователям интуитивно предвидеть то, что требуется, чтобы начать использовать service.

Если пользователь can’ т найти ссылку, которая ведет к регистрационную форму, он также won’ т иметь возможность подписаться на услугу.Поэтому очень важно сделать ссылку как видимые и так очевидно, как это возможно.Где дизайнер место “ подписаться up”-ссылке, чтобы сделать это? более доступным

По данным нашего опроса, знак-вверх link

  • Находится в header на 59% участков (76% из них имеют “ вход up”-ссылка помещается в правом верхнем углу),
  • Занимает видное место на главной странице на 21% участков (ссылка или сама форма размещена на главной странице)
  • Скрывается за “ Login”-ссылку в заголовке в 9% случаев (например, Craigslist).

Не то, что удивительным является тот факт, что знак-вверх ссылка редко помещается в боковой панели (7% – Propeller Xing).Тем не менее, 4% сайтов впервые предложил пользователям напрямую воспользоваться услугами и требуют регистрацию только тогда, когда это требовалось для сохранения settings.

2.Дизайн forms

2.1.Является ли регистрационную форму макета упрощенной

Так как пользователь нажал на знак-вверх-связь, которую он, вероятно, решил подписаться на услугу вы предлагаете.Более того, он имеет not нажал на ссылку, чтобы исследовать дальнейшие возможности навигации и привлекательные мигает advertisements.

Следовательно, дизайнеры, как правило, убрать все лишнее details и отвлекающих которые don’ т помочь пользователю заполнить форму.Часто только логотип и сама форма представлена ​​без возможности навигации или дополнительной информации.Идея: пользователь должен быть в состоянии сосредоточиться на задаче, которую он должен выполнить.Любые отвлечения стоять в user’ с пути и, следовательно, должны быть removed.

Web Form Design Patterns

Так как пользователи хотят, что лежит на другой стороне формы процесса заполнении формы должна быть очевидной и как можно более простым.Поэтому дизайнеры часто используют “ minimized” макеты для формы подписки.По данным нашего опроса, 61% веб-форм упрощены по сравнению с общей компоновки страницы (например, MovableType Livejournal Amazon Yandex.ru).

Web Form Design Patterns

Рассмотрим форму регистрации на Yahoo.Посетителям предоставляются только с формой, которую требуется создать учетную запись.Существует ничего, следовательно, нет никаких отвлечений, а также.Обратите внимание, что тон и язык являются разговорные и привлекательным.That’ с простым, легким и интуитивно friendly.

Web Form Design Patterns

Web Form Design Patterns

Flixster Вероятно, наш любимый пример переполненных фор …

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

Comments are closed.