Как оптимизировать формы регистрации и заказа

12
783

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

Известны некоторые очевидные способы:

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

Но это далеко не все методы повышения конверсии подобных форм!

Инновационное решение – слияние текстовых полей

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

Количество полей для ввода данных

Заполняя форму, представленную слева, или форму, представленную справа, пользователь ответит на одинаковое количество вопросов. Однако слияние некоторых полей позволяет оптимизировать ввод данных. Форма справа выглядит более простой, короткой, удобной – в ней всего 6 строк и, соответственно, 6 полей. Тогда как в традиционной форме ввода личных данных – 7 строк и целых 14 полей.

Поля в виде выпадающих списков

С одной стороны, выпадающие списки, из которых пользователь выбирает нужные пункты-ответы – автоматизируют ввод информации. Но упрощают ли они заполнение формы? – Не праздный вопрос.

В традиционной форме (слева) таких списков — 4, а в форме с объединенными полями – ни одного. И пользователю не приходится манипулировать мышью или стрелочками на клавиатуре, чтобы выставлять курсор, помечая нужные ответы. Это экономит и время, и силы.

Точки визуальной фиксации и траектория взгляда

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

Заполняя форму традиционного вида, пользователь фиксирует взгляд на каждом поле – т.е., 14 раз. Траектория движения глаз – сложная. Человек переводит взгляд и сверху вниз, и слева на право. При обращении к форме с объединенными полями все выглядит значительно проще: 6 точек фиксации и прямая траектория перемещения взгляда – сверху вниз.

Использование клавиатуры, мыши, табуляция

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

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

Объединяя текстовые поля, как показано на рисунке справа, мы заметно сокращаем количество табуляций и вынужденных остановок.

Текстовые подсказки внутри каждого поля формы

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

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

Основной метод повышения конверсии – эксперимент

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

Безусловно, каждый сайт уникален, поэтому любое нововведение нужно тестировать. Опробуйте разные варианты форм с объединенными текстовыми полями на своей аудитории. Так вы найдете именно тот формат, который принесет вам наилучшие результаты.

12 КОММЕНТАРИИ

  1. ИМХО, статья из категории «как упростить жизнь пользователю, но создать дополнительную головную боль программисту» 🙂

    В своих проектах я очень много работают с разными формами — от простых на 2 поля, до многостраничных анкет на 200 и более полей.

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

    И вот тут начинаются главные проблемы.

    Подсказки — это ерунда, честно. Их никто не читает, всем они пофигу. Что в полях, что рядом, что по наведению на какой-нибудь знак вопроса — плевать, заполняют как хотят.

    Например, где гарантия, что пользователь заполнит форму как ДД.ММ.ГГГГ, а не Д.М.ГГ? Нужна проверка. То есть юзер ввел как ему решилось, а проверка ему говорит — нет, родной, вводи как правильно. Упростили юзеру жизнь? Нет, т.к. он все равно должен вводить дважды.

    Но тут еще можно решить проверками. А как проверять, что он ввел «улица, дом, квартира», а не «дом, квартира, улица»? 

    «Полное имя» — это не «имя и фамилия», а «имя, фамилия и отчество. Как узнать правильность порядка ввода и что он ввел таки и отчество тоже? К примеру, у меня есть одна такая форма — в ней написано «Фамилия имя, отчество». Пофигу, половина заполняет только имя и фамилию.

    А не дай бог вам надо, что он вводил ФИО как в заграничном паспорте, к примеру. Или только на каком-то конкретном языке?

    Номер телефона — это вообще такая головная больше, что лучше и не надо извращаться. Как и номер соцстраха.

    В итоге борьба за юзабилити порождает повышенную энтропию в получаемой информации — и дополнительную головную боль.

    Вот именно поэтому проще разносить поля и вводить выпадающие списки, которые не оставляют вариантов при вводе.

    Да, есть ситуации, при которых для работы с данными не важно как выглядят данные, главное, чтобы они были более-менее полными. К примеру, в форме callback можно написать и «Вася», вместо «Васисуалий Федорович Лоханкин», но даже тут номер телефона все равно нужно проверять, т.к. большая половина пользователей, при вводе домашних номеров (не мобильных), считает, что сайт сам должен угадывать в каком городе этот номер телефона существует, а потому код вводить не обязательно.

    По-сути, единственная форма, которая может прийти в голову, для которой не требуются проверки — это форма анонимного обращения — просто поле для ввода комментария и кнопка «отправить». 

    В своих проектах, как я уже сказал выше, я очень много работаю с формами, поэтому единственный оптимальный вариант, который я вывел на собственном опыте — это совмещение подсказки и проверки. То есть, когда номер телефона указан в поле: +380(__) ___-__-__, где все «_» проверяются на цифра-буква, проверяется количество символов в форме, проверяется целостность данных и нельзя изменить формат ввода.

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

    • насчет телефона: город можно по айпи определять. и решать,  в этом городе такой номер бывает или нет.

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

      • Пользователь заполняет форму абсолютно не обязательно из того места, где будет заказ/встреча и т.д. То есть в любом случае нужно вводить дополнительный вопрос — «а Вы точно в [название города]», потому что если этого не сделать — претензии потом можно предъявлять только себе.
        У меня в одном из проектов используется геотаргетинг по IP — во-первых, для качественного определения города по IP надо покупать геотаргетинговую базу с обязательными обновлениями. Во-вторых, она далеко не всегда корректно работает — проверено. 

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

        • согласен, что все эти «фишки» должны быть в меру. давай не будем циклиться на конкертно телефоне — главное суть: не нужно усложнять.

          меньше кликов, меньше движений глаз, меньше вариантов запутаться!

          • Ну тогда статья превращается не в пособие «как делать», а просто в пожелание «как хотелось бы мне, как пользователю» 🙂

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

  2. Нужно оставить всего одну, ОДНУ(!) кнопку — «ЗАПОЛНИТЬ» и всё и больше никаких полей… друге НЕДОПУСТИМО(!) Извините, крик души 🙂

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

  4. Мысль верная, нужно все по-максимуму упрощать. Споры в комментариях возникают по понятным причинам — всегда нужно учитывать индивидуальные особенности проекта. 

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

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

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here