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

UPD: Опубликована вторая часть статьи habrahabr.ru/blogs/ui_design_and_usability/45680/

Когда вы хотите увеличить доход вашего сервиса вы должны увеличить количество заполнений ваших веб-форм. Даже, если, на первый взгляд, у вас есть какие-то революционные идеи для того чтобы удивить посетителей, недостаточно просто добавить возможность регистрации на вашем сайте. Для того, чтобы сервис достиг максимальных посещений мы, дизайнеры, должны предоставить пользователю хорошие решения (good user experience). Мы должны завлечь их, описать им, как работает сервис, объяснить им, почему стоит заполнить форму и описать выгоду, которую они от этого получат. И, конечно, мы должны сделать их участие максимально простым.

Тем не менее, разработка дизайна веб-форм — это не простое дело. И здесь есть одна простая причина: никто не любит заполнять формы — ни в оффлайне ни в онлайне. Следовательно, как дизайнеры, мы обязаны найти дизайнерские решения, чтобы сделать заполнение форм делом простым, интуитивным и безболезненным.

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

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

Обозрение дизайна форм регистрации

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

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

Мы сфокусировались на формах подписки (sign-up) так как хотим в дальнейшем обсудить ключевые формы (например, формы помещения в корзину) по-отдельности. Мы прошли через все и каждую форму подписки выбранных сайтов и анализировали подход к дизайну реализованный в этих формах.

Для каждой из форм мы использовали специальные e-mail и имя пользователя. Чтобы сделать обозрение как можно всеобъемлющим мы определили 29 различных дизайнерских проблем и вопросов, которые возникают во время дизайна веб-форм.

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

Пожалуйста, имейте в виду, что эта статья не о формах заполнения корзины (checkout forms) — это тема для отдельного обсуждения, мы хотим обсудить ее отдельно в следующих статьях. Мы хотели бы поблагодарить Wufoo за предоставление нам инструмента для проведения нашего обозрения.

Расположение форм

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

Пользователи думают, что когда они предполагают подписаться (sign-up), присоединиться (join), стать членом (become a member) или создать учетную запись (create account) они должны искать именно такие фразы, чтобы произвести действие. Очевидно, пользователи ожидают что одна из таких ссылок ведет на форму регистрации. К несчастью, это не всегда так.



Наиболее популярная фраза «подписаться» (Sign up) 40%, за ней следуют «присоединиться» (Join) 18%, «зарегистрироваться» (Register) 18% и «создать учетную запись» (Create Account) 17%. Гораздо реже мы наблюдали звучную и яркую «начните здесь» (start here), которая несколько лет назад попадалась чаще. Очевидно, дизайнеры предпочитают сообщение информации дизайну и придают особое значение функциональности сервиса.

Где расположена ссылка на форму подписки?

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

Если пользователь не может найти ссылку, которая ведет на форму подписки, он не сможет подписаться на ваш сервис. Поэтому, очень важно сделать ссылку (на форму) настолько видимой и очевидной насколько это возможно. Где дизайнер должен располагать ссылку подписки чтобы сделать ее более доступной?

Исходя из нашего обозрения такая ссылка:

• помещена в заголовок на 59% сайтов (76% из них размещают ссылку в верхнем правом углу)
• имеет заметное размещение на главной странице на 21% сайтов (ссылка или сама форма расположена на главной странице)
• скрыта позади ссылки «Логин» (Login) в заголовке в 9% случаев (например, Craigslist)

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

Дизайн форм

Упрощены ли формы подписки?

Когда пользователь нажал на ссылку подписки (sign-up-link) можно считать, что он решил подписаться на сервис, который вы предоставляете. Что важнее, он может не нажать на ссылку из-за того, что воспользовался навигацией или перешел по заманчивой мигающей рекламе.

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



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



Рассмотрим форму Yahoo. Посетители заполняют только форму, которая необходима для создания учетной записи. Здесь ничего лишнего, следовательно, внимание не отвлекается. Обратите внимание на тон и разговорный и трогательный язык. Это просто, легко и дружелюбно.




Flixster — это, вероятно, наш любимый пример переполненной формы, которая на самом деле не уважает своих посетителей. Страница регистрации предлагает всевозможную навигацию. А страница логина содержит неуместную рекламу справа. Это не дружелюбно. Другая задерживающая (busiest) веб-форма, которую мы встретили, принадлежит Photobucket.

Предлагается ли дополнительная информация?

Многие дизайнеры пытаются поощрять посетителей заполнять информацию в формах, предлагая дополнительную информацию такую как: помощь, требуемая информация или даже определение прав на копирование(copyright disclaimer). От сайта к сайту это меняется. Тем не менее, в большинстве случаев преимущества регистрации представлены на форме.

• 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)

Форма с одной страницей против многостраничной формы

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

Как исключение, Meebo совмещает форму подписки с полной регистрацией и предлагает пользователям помощника подписки во всплывающем окне. Форма содержит 6 страниц, на которых пользователи в своей учетной записи предоставляют информацию по дополнительным деталям.

Как выделены подписи к полям ввода?

62% форм подписки используют жирное выделение, чтобы подсветить подпись для поля ввода. Что интересно, ни один сайт не использует наклонное начертание (italics) для достижения того же эффекта. Чтобы сделать эти подписи более заметными 20% форм подписки используют цвет и 18% используют простой текст (plain text).

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

Если честно, мы ожидали более значительного перевеса одного из возможных выравниваний. Тем не менее, в нашем случае не было замечено значительного перевеса в выравнивании подписи.

• подписи с правым выравниванием используются на 41% рассмотренных сайтов (YouTube, Facebook, Metacafe)
• 30% форм подписки используют выведенные сверху подписи (Behance.net, Wufoo, Tickspot, DZone)
• 29% используют выравненные влево подписи (Digg, Ning, Wykop.pl, 43things, StudiVZ).

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

Как много обязательных полей?

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



Мы обнаружили, что 54% форм требует от пользователя заполнить как минимум 5 полей (в 6% случаев регистрация не требовалась для начала пользования сервисом). 34% форм используют 6-8 полей, а еще 12% рискуют спокойствием пользователя предлагая заполнить 9 обязательных полей.

Как много опциональных полей?

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

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

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



Box.net предлагает простую форму с вертикальным расположение полей ввода. Когда посетители вводят данные, их глаза фиксируются по вертикальной оси слева от поля ввода.



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

Другие исследования

• 18% содержат форму входа или ссылку которая показывает ее (например, YouTube, Reddit, Digg, Lulu, Metacafe)
• 78% не содержат сиволы "*" чтобы подсветить требуемые к заполнению поля; в большинстве случаев ни "*", ни какая другая форма подсветки не используется
• 9% используют индикатор прогресса чтобы показать где пользователь сейчас и сколько шагов требуется для того, чтобы закончить регистрацию
• 85% сайтов не используют legend и fieldset и предпочитают простую веб-форму с как можно меньшим набором полей
• поля обычно сгруппированы и разделены пробелами (69%), границы так же используются (22%), разные цвета фона используются в 9% случаев

Заключение

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

• ссылка на регистрацию названа «подписаться» (sign up, 40%) и расположена в правом верхнем углу
• формы подписки содержат упрощенную разметку, чтобы избежать отвлечения внимания пользователя (61%)
• формы подписки состоят из одной страницы (93%)
• формы подписки привлекают посетителей объяснением преимуществ регистрации (41%)
• подписи к полям ввода выделены жирным (bold, 62%)
• не обнаружено одного существенного тренда в выравнивании подписей
• дизайнеры стараются использовать малое число обязательных полей
• дизайнеры стараются использовать малое число опциональных полей
• вертикально расположенные поля ввода предпочтительнее горизонтально расположенных (86%)

Пожалуйста, оставайтесь с нами, мы представим вам вторую часть наших исследований.

_________
Текст подготовлен в ХабраРедакторе