Стоит ли нам использовать повествовательные веб-формы?

  • Tutorial
Представляю вашему вниманию перевод статьи под названием "Should We Use Mad Libs Style Form?" от Cynthia Savard Saucier. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением компании Yu Centrik.


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

Однако недавно мы увидели, как появляется новый тип форм. Восхваленные юзабилити экспертом Яредом Спулом и гуру дизайна форм Люком Вроблевски, повествовательные формы (в оригинале Mad Libs) стали очень популярными. Давайте разберемся, что же это такое.





Откуда растут уши у повествовательных форм?


Впервые о них заговорил дизайнер Джереми Кейт, создававший в 2008 году аудиосайт Huffduffer. Он тогда написал в своем блоге: «Люк Вроблевски заявил что формы регистрации должны умереть в страшных муках. Убить их я может не убью, но точно сделаю их максимально дружественными к пользователю».

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

Яркие примеры таких форм можно встретить на этих сайтах:
Нужно отметить, что во многих десктопных программах подобный подход используется уже долгое время, в попытке дать не-программистам возможность использовать языки программирования. Достаточно посмотреть, к примеру, на форму создания Smart mailbox в Apple Mail:



/




Они действительно лучше работают?


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

Пример Vast.com
Шумиху поднял пост Люка Вроблевски, в котором он писал о применении Роном Курти на сайте Vast.com повествовательного формата для формы “свяжитесь со мной”. A/B тестирование обоих видов форм показало рост конверсии в размере 25%-40%.

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

http://www.lukew.com/ff/entry.asp?1007



/

Пример Kalzumeus.com
Контпример можно найти в посте «Урок из исследования повествовательных форм: Проводите собственные исследования». Мнение автора о повествовательных формах можно понять из тона статьи. Он называет их «очень интересным, но глупым, дизайнерским решением».

Согласно его исследованию, использование этих необычных форм приводит к снижению конверсии на 22% (с 27,5,% у классических форм до 21,7% у повествовательных форм).

Этот пример сильно критиковали за текст и внешний вид формы. Автор статьи говорит о том, что создал форму за 10 минут, и вобщем-то это видно. В любом случае, вывод был сделан правильный — проводите собственные исследования!

http://www.kalzumeus.com/2010/02/27/lesson-from-madlibs-signup-fad-do-your-own-tests/



/

Netmedia Group
После прочтения материала Вроблевски, ребята из Netmedia Group решили провести собственное исследование. В своем посте J.R. Farr написал о результатах A/B тестирования на одной из их landing page-ей. Они хорошо проработали дизайн и текст, и в результате у них получилась страница с неким чувством индивидуальности.

После недели тестирования в Netmedia Group заявили о 25% приросте конверсии. Говоря точнее, новая форма получила 4,3% конверсии против 3,4% старой формы. К сожалению, данных о количестве выборки они не предоставили.

http://www.netmediagroup.com/blog/25-percent-lift-using-the-mad-libs-form-for-lead-gen/



/

CFD Group
В CFD Group также слышали об интересе к новым формам, и, не смотря на свой скептицизм, также решили провести собственное A/B тестирование на landing page одного финансового сервиса.

Их исследование получилось наиболее полным — в нем содержатся данные по 1800 посещениям за 20 дней. Согласно исследованию, повествовательные формы дают 12% прирост в конверсии (11,8% у новых форм против 10,5%, у классических форм). Это, конечно, не такой впечатляющий прирост как в первом исследовании, но все равно значительное улучшение.

http://www.cdfnetworks.com/mad-lib-form-style-testing-results/



/




Значит вы советуете их использовать?


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




Плюсы:


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

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

3. Это увлекательно.
Как и J.R. Farr из NetMedia Group, мы считаем, что пользователь, который начал заполнять повествовательную форму, с большей вероятностью заполнит ее до конца. Farr пишет: «Хороший текст и грамотное построение повествовательной формы дает пользователю ощущение сопричастности и притягивает его».

4. Такая форма ближе к пользователю. Она подобна разговору с другим человеком, а не простому сбору информации. Вы человек, который живет где-то, а не «Имя, фамилия, адрес».
Вместо того, чтобы запрашивать информацию в том виде, в котором она нужна компании, повествовательная форма представляет ее так, какой она знакома пользователю из общения. Такая форма позволяет задать тон диалога, нужный вам — например, тон телефонной или живой беседы. В пример можно привести процесс регистрации по телефону. Гораздо приятнее слышать «Доброе утро, можно мне узнать как вас зовут?» вместо «Здравствуйте. Имя?». Это меняет тон беседы с «мы спрашиваем вас» на «вы рассказываете нам о себе».

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




Минусы:


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

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

banksimple.com
/

3. Могут возникнуть проблемы с переводом
Локализация может обернуться настоящей проблемой. Например, если текст здорово смотрится на английском, то где гарантия того, что он будет смотреться не хуже на других языках? У каждого языка свой синтаксис, и порядок полей может различаться от языка к языку. Разумеется, мы можем перефразировать и подергать код, однако традиционные формы легче поддаются локализации (впрочем, с этим тоже есть свои проблемы, как мы писали выше).

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

5. Это что-то, чего пользователь не ожидает
Формы обычно встречаются на критичных этапах взаимодействия с пользователем (регистрация, заказ товара). Создавая что-то необычное на этих этапах, вы можете потерять клиента или пользователя. Люди могут быть сбиты с толку, когда видят что-то, к чему уже привыкли, представленным в другом виде. Просто посмотрите на переполох, который происходит при малейшем изменении интерфейса Фейсбук.

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

/



Заключение


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

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

/
PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)
/
UXDepot
0.00
Company
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 46

    +3
    На счет вот этих форм — бред habrastorage.org/storage/a698437e/d8770dc5/a5613977/df13afae.jpg

    У нас в компании проводили эксперимент.
    «Я, %myname%, хочу, чтобы менеджер
    компании ****** связался со мной в течении часа %phone% по этому телефону.

    Честно, показатели не радуют. Уровень заявок через эту форму не упал и не увеличился.
    В общем я хочу сказать — что на конверсию это не влияет.
      +2
      Может, дело в самой форме?

      У Вас, случайно, нету под рукой её скриншота?
        –12
        image
        Форма нормальная, делал юзабилист и дизайнер на пару.
          +26
          Честно говоря, форма не очень.
            +2
            Ну тогда я тыкну их в форму и скажу плоха. Пусть тогда придумывают пока не будет хорошо.
            Если будет возможность дам позже комментариев.
              +4
              В течении часа = срочно?

              Просто если связаться надо срочно, то сомнителен сам кейс. Срочно я сам возьму телефон и свяжусь. Если не срочно, то настораживает «в течении часа». Почему именно часа? Мне удобно, чтобы позвонили с 3 до 6ти, например.

              И повествовательная форма от первого лица это что-то в духе «Здравствуйте, меня зовут Васили Пупкин. Свяжитесь со мной по телефону 8ххх-ххх-хх-хх сегодня после обеда».
              +12
              Еще и с ошибкой: «в течении часа».
                +3
                совсем не очень…
                +1
                Я бы переделал даже текст. Например, у меня сейчас не возникает уверенности в том, что куда вводить и что произойдёт после нажатия на кнопку (или ссылку?) «Оставить заявку»
                  +11
                  Поле в форме должно выглядеть, как поле формы, а не быть стилизованным под бумажную анкету, набранную на печатной машинке.
                  Бумажные формы неудобны до безобразия, потому что при беглом просмотре формы поля-прочерки слабо отличимы от текста, тем более с моноширным шрифтом.

                  Форма-заявка на обслуживание клиента не должна выглядеть, как заявление приема на работу (это про фразу «Я, _____, хочу...»), поскольку это сложно и звучит по-дыбильному. Разве вы говорите работнику банка: «Я, Иванов Ваня, хочу...»?
                  Нет! Вы говорите: «Здравствуйте, меня зовут Иванов Иван и я хочу, что бы...» или «Здравствуйте, я — Иванов Иван, пусть...».

                  Программа должна общаться с человеком, как человек, а не как программа. Все к этому стремятся.
                    +3
                    Казалось бы, компания занимается созданием сайтов, а себе красивую форму сделать не может. Нехорошо это.
                    Могли бы хоть в общем стиле сделать, кнопку отправки как в «Отправить заявку» сделать, и поменять в обеих формах кнопку закрытия — на сайте все стилизованно под рисунок кистью, а тут внезапно трехмерная иконка.
                    Про текст вам уже и так все написали…
                      +1
                      Думаю если бы вы вместо подчеркиваний вставили поля инпута то результаты были другими.
                        +1
                        И в следующий раз кроме юзабилиста и дизайнера пригласите корректора. На троих и сообразите. Ну, это вдобавок ко всем озвученным выше вполне справедливым замечаниям.

                        И, кстати, зачем ОБЯЗАТЕЛЬНО нужно сообщить ээ… неизвестно что, но предполагается, что фамилию и имя? Я еще не являюсь вашим клиентом, мы не настолько близко знакомы, чтобы я вам рассказывал, как меня зовут. Обращайтесь ко мне просто на «Вы», если я захочу, я представлюсь.
                          +4
                          Заявление в милицию.
                            +17
                            Я, ядрить твою налево, хочу, чтобы менеджер компании...

                              +2
                              И дважды повторять не буду
                              0
                              Правильно писать «в течение часа». Проблемные места: не понятно, что поле ввода это поле ввода; кнопка с подчеркнутым текстом плохо читается; не понятно, что вводить в поле ввода после «Я, ...».
                              0
                              дык вот и сама форма :) Inweb
                                0
                                вместо «оставить заявку» я бы сделал «перезвоните мне»
                                  0
                                  Это не ко мне) я лишь прочитал то, что плохо замалёвано на скриншоте.
                            +2
                            А почему статья не оформлена, как перевод в Хабре?
                            Термин «повествовательные веб-формы» у нас на Фреше взяли? ;)
                              0
                              Почему «взяли»? Лёша Копылов сам поделился с нами своими наработками по юзабилити-глоссарию :)
                                +2
                                Ух ты, не знал, что он его недавно актуализировал. Термин-то свежий.
                                +4
                                Да, Иван, по поводу термина ты гонишь. Хорошие переводы терминов должны тиражироваться, а не приватизировать.
                                  0
                                  Вот бы снова всем куда-нибудь поехать. Лето всё-таки )
                                +5
                                Хороший пример на русскоязычном сайте — подбор автомобиля на drive.ru
                                  +1
                                  Действительно хороший пример, сразу оправдывает существование такого вида форм.
                                  Подумаю, как что-то такое себе прикрутить.
                                  +3
                                  Из примеров достаточно очевидно, что повествовательные формы выигрывают там, где нужно заполнять много данных и проигрывают в простых случаях.
                                    +2
                                    С моей точки зрения очень плохая в русских реалиях вещь и сейчас многие от них отходят в бумаге. К примеру в банке когда я открывал счет мне дали бланк, который был ближе стандартному представлению формы. Опять же плохо будет работать при больше трех полях или сложных полях.
                                      +1
                                      Бланки — это бланки. В современных условиях они еще часто и под автоматическую обработку оптимизируются (сканирование, распознание, анализ) — в таких случаях шаблоны вообще могут быть весьма специфическими.
                                      Шаблоны писем и веб-формы — тут несколько иначе.
                                      Ну а в целом, как сказано в статье — «проводите свои исследования». Модное не всегда означает эффективное. У любого инструмента есть своя область применения.
                                        +1
                                        Вы еще не написались в различных учереждениях таких бумажек? Вот у меня такие вещи вызывают стойкую ассоциацию с советским могучим концеляризмом.
                                          +2
                                          Есть форма, есть — содержание.
                                          Километровую форму, требующую указания чуть ли не размер нижнего белья и национальность родственников до десятого колена, в какую форму не оборачивай — все бред будет.
                                          Если же информации достаточно по делу — почему нет?
                                          Например структурированный адрес — индекс, область, город, улица, дом заполнять достаточно быстро и просто (да и банально привычнее). В повествовательной форме это будет напоминать Слово о полку Игоревом: «Челобитная раба божия (имярек), живущего в станице (вписать нужное), (_переулок_), закуток(____)...»

                                          В статье в плюсах как раз сформировано мнение, что структурированная информация (нормально структурированная!) часто воспринимается быстрее и легче. Особенно если есть опциональные поля.
                                          (Попробуйте обличить в повествовательную форму какую-нибудь финансовую отчетность, где разные поля надо заполнять в зависимости от юридической формы организации?)
                                          Повторюсь — у любого инструмента есть область применения.
                                          В соцопросе повествовательная форма вполне имеет право на жизнь. А, например, в финансовых документах — вопрос очень открытый.
                                      +3
                                      А как быть с необязательными полями?
                                        0
                                        посмотрите пример такой формы с необязательными полями www.drive.ru/search/
                                        0
                                        Спасибо. Очень наглядная и полезная статья
                                          +2
                                          А может использовать гибридный вариант?
                                          То есть взять повествовательную форму и разбить красиво на 2 — 3 колонки
                                          и читабельно будет и занимательно:)
                                            +3
                                            В своем проекте использую гибридный вариант формы — простые поля, вроде «включить это» делаю как обычно. А вот связанные поля с непростой логикой оформляю в текст, т.к. этот же текст приходилось раньше писать в виде «подсказки» под набором полей.
                                              0
                                              >У каждого языка свой синтаксис, и порядок полей может различаться от языка к языку.
                                              нет тут никакой проблемы, достаточно банального printf.
                                              — По поводу негативных результатов в некоторых случаях: любой инструмент нужно применять с умом. Форму из двух полей трогать не нужно, ее можно только испортить. А вот портянке из 10 полей, приводящей в уныние одним своим видом, повествовательный стиль обычно идет на пользу
                                                0
                                                Я видел повествовательную форму в приложении на VBA для заполнения договоров на займ (там более 30 полей). С ней невозможно работать. Девочки, которые её заполняют, общаясь с клиентом, отметили, что после напряженного дня у них глаза в кучу.

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

                                                Юзеры стали меньше ошибаться и лучше общаться с клиентами, т.к. их внимание больше направлено именно на них, а не на непонятную неструктурированную пеленку.
                                                  0
                                                  Тут повествовательная форма явно не к месту. Зачем девочкам по 100 раз на день читать одни и те же увлекательные предложения? Их цель — не путать рядом стоящие поля, не более. Они даже подписи под ними не читают.
                                                    0
                                                    я же уточнил: с умом. Повествовательная форма может быть проще при первом использовании. Если же человек работает с формой каждый день, то лишний текст и разбросанные поля будут только мешать. Применять везде без раброру повествовательные формы так же глупо, как пытаться собрать самолет при помощи одного молотка.
                                                  +1
                                                  Я полагаю, что следует использовать «неструктурированные повествовательные веб-формы» в тех интерфейсах, с которыми пользователь часто общается один раз (или вообще впервые). К примеру, форма для ввода дополнительных данных на сайте для корпоративных клиентов, получающих в лизинг тракторы из 16 городов мира.
                                                  А вот для каждодневного общения с формой подойдёт обычная, структурированная, веб-форма, желательно с одинаковой шириной полей ввода, которую легко промотать колесом мыши, свайпом или другими способами.
                                                    +6
                                                    image
                                                      +1
                                                      В своем посте J.R. Farr написал о результатах A/B тестирования на одной из их landing page-ей. Они хорошо проработали дизайн и текст, и в результате у них получилась страница с неким чувством индивидуальности.

                                                      И в результате у них получилась заметка про нашего мальчика…
                                                        0
                                                        Исследователи почему-то выбрали для экспериментов форму регистрации, в то время как она как раз плохо подходит для повествовательной формы.
                                                          0
                                                          Видел такую форму около года назад у Smetana. Тогда очень понравилась и идея и реализация. Спасибо авторам перевода, узнал наконец что это повествовательная форма.
                                                          Я уверен, что их для подписки и для инвайтов на сайт хорошо использовать.

                                                          Only users with full accounts can post comments. Log in, please.