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

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

Например, когда компания ZURB создавала домашнюю страницу для одного своего заказчика и перенесла кнопку регистрации вниз страницы, обнаружилось, что конверсия увеличились на 350 %[64] – неслабое улучшение. У Vendio регистрационная форма стояла первой позицией на одной из страниц, сместив текст вниз. При переделке дизайна форму перенесли на отдельную страницу, а ссылку на нее оставили надомашней. Что в итоге?

Конверсия поднялись на 60 %[65].

Рисунок 6.4. Сайт Vendio с формой регистрации прямо на главной странице (исходная версия)

Рисунок 6.5. Сайт Vendio с регистрационной формой, перенесенной на отдельную страницу (финальная версия)

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

Плавное вхождение в контакт

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

Например, когда Twitter переделывал свою регистрационную форму, то ввел дополнительный шаг в процесс. Теперь на первом шаге Twitter пытается подключиться к e-mail-адресу посетителя для поиска друзей, которые уже пользуются Twitter. Если пользователь не хочет показывать контакты своей почты, то он окажется прямиком на пустой странице профиля – не самое лучшее начало.

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

Редизайн сработал? Да: конверсия выросла на 29 %[66].

Рисунок 6.6. Twitter помогает вам найти людей для подписки на их ленты в процессе регистрации

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

Последовательная регистрация

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

Рисунок 6.7. Регистрационная форма сервиса Stripe позволяет вам «пропустить этот шаг»

Рисунок 6.8. Вы можете сразу, без регистрации, «перескочить» на рабочий экран Stripe. Верхняя ссылка «Save account» («Сохранить учетную запись») позволит вам зарегистрироваться позже

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

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

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

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

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

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

Формы – аккордеоны

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

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

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

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

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

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

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

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

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

Гендерный вопрос