Как заставить пользователей заполнять длинную форму на сайте: учимся у Google - MadCats

Условия публикации на Котиках

Вы можете предложить нам готовую статью или написать новую. Авторы могут поработать с нами под заказ. >> Условия публикации на Котиках

#BDD17

А куда ты поедешь в августе? Лови промокод от Котиков и готовь плавки

Как заставить пользователей заполнять длинную форму на сайте: учимся у Google

Вокруг моего восторженного поста о Google Inbox разгорелась небольшая дискуссия, где продукты Гугла сравнивались с сервисами Майкрософт. Поэтому я решил попробовать и Outlook, чтобы сделать осознанный выбор. Перешел на https://www.microsoft.com/ru-ru/outlook-com/ , нажал «Зарегистрироваться»…

Оригинал.


И увидел это:

Между прочим, только часть формы

Между прочим, только часть формы

Тут я понял, что объективность и адекватный выбор — это, конечно, хорошо, но Outlook лично мне не подходит. Уже просто по эстетическим причинам. Заполнять десяток полей, которые занимают всю страницу на немаленьком мониторе, мне было лень.

Чисто ради интереса заглянул на страницу регистрации в Gmail:

zaregistriruytes-v-google-google-chrome

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

Так, стоп!

Я вернулся на microsoft.com.

Тщательно пересчитал собираемые данные.

В недоумении переключился на вкладку gmail.

Пересчитал поля и здесь…

Оба сервиса запрашивают при регистрации одни и те же данные! Gmail требует ничуть не меньше!!!

Но форму Outlook я воспринял как что-то скучное и тягостное в заполнении. А страница регистрации Gmail меня ничуть не испугала.

Конечно, это только личные впечатления. У меня нет данных о том, какая страница дает лучшую конверсию. Но весь мой веб-опыт кричит о том, что Gmail в этом вопросе положит Outlook на обе лопатки. Тем более что для Google Интернет — приоритетная область, а Microsoft сосредоточила усилия на десктопном софте. Так что можно принять как рабочую гипотезу, что форма Гугла имеет лучшие показатели заполняемости.

А значит — неплохо будет понять, как ей это удается. Сравним интерфейсы и сделаем выводы.

Принципы построения веб-формы с высокой конверсией

Размер имеет значение

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

Только формы недостаточно

Полезно показать пользователю «товар лицом», чтобы он понимал, ради чего регистрируется. Google выводит на видное место иконки своих самых востребованных сервисов и демонстрирует гаджеты с открытыми на них Каратами.

Чем меньше полей — тем лучше

Если нельзя уменьшить число элементов в форме — нужно поработать с размером тех, с которыми пользователь будет взаимодействовать реже. Сравним: в Outlook под страну для кода телефона отведена целая строка, что делает форму более громоздкой, в Gmail задать код региона можно через маленький флажок.

telefonnyiy-kod

Неудивительно: ведь в большинстве случаев автоматическое определение страны работает отлично, можно не отвлекать внимание регистрирующегося.

Подсказки — только когда это действительно необходимо

Gmail не требует немедленно вписать пароль длиной не менее 8 символов. Предупреждение появится только когда вы попробуете ввести короткий пароль.

parol

В Outlook такая надпись висит всегда, опять же загромождая форму.

То же самое относится к надписи «Номер телефона позволяет защитить вашу учетную запись.» В Google такие разъяснения собраны на странице, куда ведет ссылка под формой «Зачем Google собирает эти сведения». И недаром — не удивлюсь, если 90% пользователей на нее никогда не нажимает, а сразу регистрируется. Кому-то все равно, кто-то и так это прекрасно понимает.

Тип поля ввода должен быть подобран осознанно

Outlook все три составляющие (день, месяц, год) предлагает вводить с помощью выпадающих списков.

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

Всегда можно сделать инструкции еще проще и доступнее

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

Сравните:

  • «Имя Фамилия» и «Как вас зовут (Имя Фамилия)»
  • «Имя пользователя» и «Придумайте имя пользователя»
  • «Пароль» и «Придумайте пароль».

Наверняка я разглядел не все «фишки». Заметили что-то? Поделитесь в комментариях!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

  • Alexander Terehov

    Спасибо за чудесную статью!

    Любопытно, что форма на сайте автора такая же как у Аутлука: http://alexeytrudov.com/zakazat-analiz-proekta/
    Захотел вот заполнить, а форма страшная такая :(

    Как мне близко это «знаю как надо, но руки не доходят» :)

    • http://alexeytrudov.com/ Alexey Trudov

      Верное замечание! :)
      Здесь не только сапожник без сапог. Просто у меня и так большая загрузка по консультациям. Поэтому красоту наводить особо не надо и некогда. Ну а если уж клиент прорвался через форму — значит действительно хочет сотрудничать; стараюсь работать только с такими.
      Разумеется, если найдете проблему, которая реально мешает заполнять, а не просто отпугивает внешним видом — я ее тут же поправлю.

  • Юрий Кудренко

    Отличная статья.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: