Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Рисунок 6.9. Регистрационная форма Facebook с подтверждением адреса e-mail

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

Stripe, платежный процессор, еще один хороший тому пример. На его странице регистрации есть ссылка «Пропустить этот шаг», которая прямиком отправляет вас к приложению. Вы можете просмотреть его, а потом добавить свое имя и пароль, если решите начать им пользоваться. Демонстрация потенциальным клиентам того, чем они будут пользоваться, проводимая до регистрации – еще один способ для продвижения продукта.

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

Интересная деталь в форме Facebook – это то, что пользователя повторно просят подтвердить свой e-mail-адрес, а не пароль. В этом есть свой смысл. Если вы забудете ваш пароль, ссылка на восстановление всегда может быть отправлена по почте. Но если ваш адрес некорректен, то повторная регистрация будет гораздо сложнее.

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

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

Рисунок 6.10. Компания Apple использует форму-аккордеон на их сайте для онлайн-покупки. Обратите внимание, что кнопка «Continue» («Продолжить») находится внутри каждого блока, а не внизу страницы

Насколько хорошо работает эта техника на практике? Etre, компания из Лондона, занимающаяся юзабилити, провела тестирование форм-аккордеонов [67]. В нем приняли участие 24 простых пользователя в возрасте от 19 до 48 лет, с обычным опытом покупок через Интернет. Тестировались два варианта формы: с формой на нескольких страницах и с одной страницей, где все поля формы находится вместе. Один из вариантов предлагал пользователям нажать на следующий заголовок для того, чтобы развернуть его. В другом располагалась кнопка в конце каждого раздела.

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

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

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

Когда люди заполняют формы, они ищут кнопку «Подтвердить».

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

Иногда веб-сервису нужно знать пол пользователя, чтобы сделать доступными функции, которые зависят от этого. Ваши пользователи могут не захотеть представлять эту информацию и задумаются, зачем вам вообще это надо.

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

Команда Bagcheck нашла отличный способ, как задать подобный вопрос. Вместо того чтобы спрашивать пользователя, мужчина он или женщина, им предлагается выбрать одно из притяжательных местоимений: «его», «ее» или «их». Этот метод проясняет, для чего вы хотите использовать эту информацию, и дает людям возможность выбрать нейтральное в плане пола «их».

Рисунок 6.11. Гендерный вопрос в регистрационной форме Bagcheck

Когда пользователи вводят новые данные, может быть, было бы неплохо предоставить им стандартные значения по умолчанию. Например, магазин Etsy пытается догадаться о ваших региональных настройках, как только вы впервые заходите на его сайт. Вверху экрана высвечивается блок, и вам предлагают подтвердить ваш регион, который выбирается исходя из языковых настроек вашей системы. Ваш выбор влияет на такие вещи, как валюта, которая отражается в ценах за товар. Так как это предположение может сработать во многих случаях, Etsy понимает, что оно все же может быть ошибочным, и поэтому используется подтверждающее сообщение.

Рисунок 6.12. Etsy пытается догадаться о вашем местонахождении на основании языковых настроек вашей системы

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

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