какое количество полей должно быть в форме для записи
Стандартное поле формы
Форму должно быть легко заполнить: обычно достаточно имени и номера телефона или имени и электронной почты.
Пример стандартного поля с именем и номером телефона
Стандартного поля с именем и почтой
Стандартного поля с именем и почтой 
Поля с именем и почтой, дополнительное поле с возможностью оставить сообщение 
Каждое поле можно назначить обязательным. Обязательные поля будут помечены звездочкой.
Настраиваем стандартное поле
Названия и тип стандартных полей можно изменить:
Дополнительные поля
В некоторых случаях кроме имени, номера телефона и почты можно использовать дополнительные поля.
Например, предпочтительная дата и время записи для сайта салона красоты
Адрес доставки заказа для интернет-магазина 
Номер телефона и выбор программы курса для сайта языковой школы. 
Как добавить новое поле?
Во внутренней рамке формы по наведению появляется кнопка «Добавить поле», нажимаем её и добавляем поле к стандартным имени и электронной почте. Для нового поля можно назначить тип, прописать текст, а также назначить его обязательными или по выбору. 
Также можно настроить дизайн каждого поля.
Какое количество полей должно быть в форме для записи
Почему важно сокращать количество полей для ввода при оформлении заказа
Последнее исследование юзабилити крупнейших интернет-магазинов, проведенное Baymard Institute, показало, что в среднем в процессе оформления заказа используется вдвое больше полей для заполнения, чем нужно. Эти данные дают понимание, как упростить процесс оформления заказа и улучшить конверсию. Делимся переводом этой полезной статьи.
Среднее число шагов при оформлении заказа выросло с 5,08 в 2012 г. до 5,42 в 2016 г.
Однако по нашим наблюдениям за пользователями, само по себе количество шагов – не самый важный аспект. Важно то, что пользователь должен сделать на каждом шаге. Но и количество шагов, начиная с 8-ми, становится уже важным: если их 8 или больше, это уже плохо для юзабилити. Как видно на графике, от таких длинных процессов оформления интернет-магазины отказались.
Из этого же графика заметно резкое снижение числа интернет-магазинов, где оформление заказа осуществляется за 3 шага и менее. Эта тенденция в увеличении числа шагов может частично объясняться внедрением более сложных опций при оформлении. В частности, многие сайты теперь предлагают различные опции доставки, увеличились также и опции оплаты.
Другая причина увеличения числа шагов при оформлении заказа может заключаться в том, что увеличилось число сайтов, где процесс оформления сделан в стиле «аккордеон». То есть отдельные шаги отображаются и скрываются во вкладки, содержащие сделанный пользователем выбор.
В 2012 году 14% сайтов использовали процесс оформления в стиле «аккордеон», а в 2016-м их стало уже 32%.
Оптимальный размер формы захвата: результаты исследований
Короткая лид-форма: преимущества и недостатки
Короткой обычно считается форма от 1-ого до 3-ех полей. Такая лид-форма имеет ряд преимуществ:
Например, форма подписки на Webdesigner News состоит всего из одного поля и кнопки «Подписаться». А зачем больше?
О том, что короткая лид-форма конвертирует лучше, говорят многочисленные кейсы и исследования. Мы собрали самые интересные из них.
3 кейса, которые доказывают, что сокращение полей лид-формы может увеличить конверсию
1. Сервис ImageScape сократил количество полей в форме подписки с одиннадцати до четырех, чем увеличил конверсию на 120%.
Уменьшение количества полей в форме дало рост конверсии с 5,4% до 11, 9%.Источник изображения
2. Второй кейс — исследование маркетологов сервиса Gemm Learning.
Они провели A/B тестирование двух лид-форм. В одной было 6 полей, во вторую добавили еще одно — выпадающий список с запросом на звонок.
В результате первая, более короткая форма оказалась эффективнее на 70,43%.
Можно сделать вывод, что чем больше вариантов взаимодействия вы предлагаете пользователю, тем больше вероятность его запутать и увести от главного целевого действия.
3. Третий кейс от Expedia.
Убрав из лид-формы поле «Название компании», фирма заработала 12 миллионов долларов.
Конверсия выросла на 37%, когда в лид-форме отказались от поля «Номер телефона». А когда обозначили поля как необязательные, конверсия выросла с 42,6% до 80%.
Исследования, которые подтверждают эффективность короткой лид-формы
Дэн Зарелла из HubSpot провел целое исследование на тему оптимальной длины формы, и проанализировал более 40 000 целевых страниц своих клиентов. Он показал, как изменяется коэффициент конверсии по мере увеличения количества полей в лид-форме.
Лучше всего конвертируют формы из трех полей. По мере увеличения количества полей конверсия снижается.
Кейсы и исследования доказывают, что короткая лид-форма более удобна для пользователя, а сокращение полей ввода может в разы увеличить конверсию. Но несмотря на все преимущества такой формы, у нее есть один, но существенный недостаток — вы получаете минимум информации о пользователе, а это значит:
Поэтому, чтобы сделать второй контакт с пользователем более персонализированным, приходится делать форму длиннее.
Длинная форма подписки: вынужденная необходимость
Лид-форма считается длинной, если она состоит более чем из 3-ех строк для заполнения. Из приведенных выше исследований можно сделать вывод, что пользователей отталкивают дополнительные поля для ввода:
Почему же длинные лид-формы продолжают использовать?
Потому что у них тоже есть ряд преимуществ:
Crayola, например, предлагает заполнить вот такую форму:
Таким образом компания готовит для пользователя более релевантную рассылку.
Кейсы, которые доказывают, что длинная лид-форма также может обеспечить высокую конверсию
1. Исследование на сайте Advanced Grass
Простая форма из трех вопросов (имя, почта, телефон) была изменена на более длинную, состоящую из семи полей.
Пользователь заполняет эту форму в два этапа. Кроме того, сама форма отличается от привычной нам, и больше напоминает тест.
После такого изменения формы подписки конверсия выросла на 214%.В этом примере есть один важный нюанс: ребята сделали из одной длинной формы две короткие. В результате пользователям не сложно заполнять первую часть (всего три поля), а заполнять вторую уже есть мотивация — жалко бросать начатое.
В TopTal пошли еще дальше, и подали лид-форму в виде теста.
На экран по мере заполнения выводится только 1 вопрос
Такая необычная длинная форма грамотно продумана:
Все эти кейсы доказывают, что длинная форма тоже может хорошо конвертировать, особенно если выбрать правильную подачу.
Так что же выбрать?
Выбирая лид-форму для своего сайта, руководствуйтесь принципом: чем меньше форма, тем лучше. И если вы хотите добавить еще одно поле – подумайте, насколько это оправдано, и ответьте для себя на следующие вопросы:
1. Какая главная цель вашей лид-формы?
Если нужно собрать базу подписчиков, то достаточно одного-двух полей. Если пользователь подает заявку на мероприятие — нужны дополнительные сведения.
2. Какая мотивация у пользователя?
Чтобы мотивировать пользователя заполнить больше полей, пообещайте взамен что-то полезное: бесплатный аудит, бонусы, или предлагаете найти более релевантную ценную информацию.
3. Как вы будете работать с полученной информацией?
Можете обойтись без дополнительной информации? Обойдитесь! Если данные собираются по принципу “хорошо бы знать”, но вы никак не используете их для дальнейшей сегментации базы клиентов и продаж, не мучайте пользователя лишними полями.
4. Где будет размещаться форма?
Короткую можно расположить практически на любой странице и в любом блоке. Длинная форма менее универсальна с этой точки зрения.
5. Как будет выглядеть форма?
Если она замаскирована под тест в несколько шагов, имеет необычный дизайн, визуально не создает впечатление полотна текста, то и вероятность, что ее заполнят, будет выше.
Но помните, что соблюдение всех этих рекомендаций не даст вам 100% ответ, какой оптимальный размер лид-формы для вашего сайта. Наилучших результатов можно добиться с помощью А/Б тестов, грамотно продуманных текстов и качественной графики.
Способы создания эффективных форм для заполнения — от структуры до кнопок
Советы по проектированию от разработчика интерфейсов Ника Бабича.
У того, кто пользуется вашим приложением или сайтом, есть определенная цель. Часто на пути пользователя к его цели встает форма, которую необходимо заполнить. Форма до сих пор остается одним из наиболее важных для пользователя способов взаимодействия в сети и приложениях.
Как правило, формы считаются последним шагом на пути к тому, чтобы достичь своей цели. Однако формы — это только способ дойти до конца. Важно, чтобы пользователи могли заполнять их быстро и без каких либо затруднений.
У обычной формы есть пять компонентов:
Дополнительные компоненты форм:
Эта статья охватывает множество аспектов, которые относятся к структуре, полям ввода, текстовому содержимому ячеек, командным кнопкам и валидации.
Форма — это своеобразный разговор. И как любой разговор, она должна представлять собой логическое общение между двумя сторонами: пользователем и приложением.
Спрашивайте только то, что вам действительно необходимо. Каждое дополнительное поле ввода в форме может повлиять на показатели конверсии. Всегда продумывайте, почему вы просите пользователя предоставить ту или иную информацию и как вы будете её использовать.
Уточнение деталей должно быть логичным для пользователя, а не для приложения или базы данных. Спрашивать адрес прежде имени — как минимум необычно.
Схожую информацию лучше группировать в логические блоки или группы. Переход от одной группы вопросов к другой будет больше напоминать диалог. Если группировать схожие поля, то пользователю будет легче разобраться в информации, которую он должен заполнить.
Основная проблема организации полей формы в несколько колонок заключается в том, что скорее всего пользователи будут перемещаться по ней непоследовательно. Если колонки будут распределены по горизонтали, то пользователю придется просматривать форму зигзагообразно. Это может замедлить скорость восприятия и создать трудности во время заполнения формы. Но если в форме будет только одна колонка, то путь заполнения будет строго вертикальным, вниз по странице.
Поля ввода — это то, благодаря чему пользователи могут заполнить форму. Существуют различные виды полей, в зависимости от того, какая информация вам нужна: текстовые поля, поля для ввода паролей, выпадающий список, поля для галочек, поля с зависимой фиксацией, поле выбора даты и многие другие.
Золотое правило в дизайне форм — чем меньше, тем лучше. И это интуитивно понятно: чем меньше усилий со стороны пользователя, тем больше конверсия. Старайтесь уменьшать количество полей насколько это возможно. Так форма не будет казаться перегруженной, особенно если вам нужно много информации.
Но и перегибать палку не стоит: никому не понравится, если форма, состоящая из трех полей, вдруг превратится в допрос из 30 полей. Как правило, за один раз выводится от пяти до семи полей.
Старайтесь не включать необязательные поля в форму. Но если вы их используете, то по крайней мере отчетливо выделяйте, какие поля нельзя оставить незаполненными. Традиционно символ (*) используется для обязательных полей, а слово «необязательно» — для необязательных полей (лучше придерживаться этой практики в больших формах со множеством обязательных полей).
Если вы решите использовать звездочку для обозначения обязательных полей, то в конце формы приведите подсказку, которая объяснит, для чего служит символ, потому что не все понимают, что он означает.
Избегайте значений по умолчанию, если только не считаете, что большая часть ваших пользователей (например, 90%) выберут это значение. Особенно избегайте этого для обязательных полей. Почему? Потому что скорее всего так вы будете поощрять ошибки.
Люди сканируют онлайн-формы быстро, так что не стоит считать, что они будут останавливаться и разбирать каждый пункт. Таким образом пользователи могут пропустить то, что для вас особенно ценно.
Однако правильно настроенные значения по умолчанию помогают быстрее и точнее заполнять форму. Например, можно предварительно выбрать страну пользователя, основываясь на данных геолокации. И всё же с осторожностью пользуйтесь этой возможностью, потому что пользователи чаще всего оставляют предварительно установленные значения как есть.
Создание шаблона для заполнения поля — это техника, которая помогает пользователям, задает формат текста. Маска появляется, когда пользователь доходит до нужного поля, она форматирует текст автоматически по мере заполнения строчек. Так пользователям легче сконцентрироваться на требуемых данных и проще заметить ошибку.
В примере ниже скобки, пробелы и тире появляются автоматически — по мере ввода номера телефона и карты. Эта простая техника экономит время и усилия на ввод числовых данных.
У пользователей должна быть возможность переходить по полям и редактировать их с помощью одной клавиатуры. Пользователи, которые привыкли работать с клавиатурой, должны иметь возможность перемещаться по полям и редактировать их с помощью клавиши Tab. Подробные требования к взаимодействию с клавиатурой можно найти в руководстве W3C (World Wide Web Consortium) по шаблонам дизайна.
Автофокус на поле показывает пользователю, где начало ввода, и позволяет быстро начать заполнять форму. Должен быть четкий визуальный сигнал о том, что фокус сдвинулся. Это может быть изменение цвета, изменение яркости поля, сверкающая стрелка — всё что угодно.
Пользователи мобильных устройств очень ценят приложения, в которых клавиатура подстраивается под текст, необходимый для ввода. Эту возможность нужно внедрять во всех частях приложения, а не только под определенные задачи.
Так как все больше людей пользуются мобильными экранами, всё, что помогает пользователям избегать ручного набора текста, улучшает пользовательский опыт и помогает избежать ошибок. С помощью автозаполнения можно освободить пользователя от набора большого количества текста.
Например, заполнение поля адреса — зачастую самое проблемное место в любой регистрационной форме. Такой инструмент, как автозаполнение адреса, который с помощью определения геолокации предлагает довольно точные варианты местоположения пользователя, помогает вводить адрес нажатием нескольких клавиш.
Ясная подпись — один из основных способов сделать UI более доступным. Хорошая подпись объясняет пользователю, зачем существует каждое поле, полезна непосредственно во время работы с этим полем и остаётся видимой даже после того, как поле заполнено.
Подпись — это не подсказки. Старайтесь использовать сжатые, короткие, описательные подписи (состоящие из одного-двух слов), чтобы пользователи могли быстро просмотреть форму.
Предыдущие версии подписи регистрационной формы Amazon состояли из большого количества слов, из-за чего форма заполнялась очень медленно. Текущая версия гораздо лучше, а подписи короче.
В большинстве цифровых продуктов сегодня используется два способа капитализации начальных букв в словах:
Капитализация начальной буквы первого слова читается немного проще (а значит, и быстрее). Если подписи короткие, то разницей можно пренебречь («Полное Имя» и «Полное имя»), а если подпись длинная, то капитализация начальной буквы первого слова в предложении — предпочтительнее.
Никогда не пишите все слова заглавными буквами, иначе форму станет сложно читать и ещё сложнее просматривать, потому что не будет различия в высоте букв.
В 2006 году в своей статье Маттео Пенцо предположил, что форму легче заполнить, если подписи расположены сверху полей. Подписи, выравненные по верху, хороши, если вы хотите, чтобы ваши пользователи могли просмотреть форму максимально быстро.
Самый большой недостаток подписей, выравненных по левому краю, в том, что такие формы заполняются медленнее всего. Возможно, потому что визуально расстояние между подписью и полем ввода кажется большим. Чем короче подпись, тем дальше она будет располагаться от поля ввода текста.
Однако не всегда плохо, если пользователь заполняет форму медленно. Особенно если нужно внести конфиденциальную информацию. Если вы просите пользователя внести номер водительского удостоверения или номер социального страхования, то, возможно, стоит, наоборот, замедлить его, чтобы он смог сосредоточиться.
Получается, время, потраченное на чтение подписи к полям для внесения конфиденциальных данных, не имеет значения. Однако у подписей, выравненных по левому краю, есть ещё один недостаток: для их размещения на странице требуется больше пространства, а это может создать проблемы для пользователей мобильных устройств.
Главное преимущество подписей, выравненных по правому краю, — сильная визуальная связь между текстом и полем ввода. Предметы, расположенные рядом друг с другом, кажутся нам связанными. Этот принцип совсем не новый и происходит из закона близости в гештальт-психологии.
Если форма короткая, то выравненные по правому краю подписи могут демонстрировать очень хорошее время заполнения формы. Недостаток такого выравнивания в дискомфорте: нет четкого края с левой стороны, это не очень приятно выглядит и подписи сложнее читать.
Если вы хотите, чтобы пользователи могли быстро просмотреть форму, разместите подписи над полями ввода текста. Такой текст можно просмотреть бегло, потому что взгляд будет двигаться прямо к низу страницы. Однако если вам нужно, чтобы пользователи читали внимательно, подписи следует выровнять по левому краю — такое расположение замедлит читателя, а его взгляд будет двигаться зигзагообразно.
Если подпись расположена внутри поля ввода как замещающий текст, то она будет исчезать каждый раз, когда пользователь начинает заполнять поле, то есть с этого момента он её больше не увидит. Эти встроенные подписи хорошо работают, если форма состоит из двух полей (простая форма авторизации с полями имени пользователя и пароля), однако когда от пользователя требуется больше информации, то этот вариант не так хорош, как подпись, которую видно всегда.
Как только пользователь кликнет по полю ввода, подпись исчезнет, так что ему не удастся перепроверить, то ли он написал. Это увеличивает вероятность совершить ошибку. Еще одна проблема заключается в том, что пользователи могут принять встроенную подпись за предзаполненные данные и, следовательно, проигнорировать это поле (это подтверждается исследованием Nielsen Norman Group, в котором отслеживалось движение глаз пользователя).
Хорошим решением для замещающего текста может быть плавающая подпись. Замещающий текст будет показан по умолчанию, но как только пользователь тапнет по полю ввода и начнет вводить текст, подпись исчезнет и появится сверху поля.
Не стоит останавливаться исключительно на замещающем тексте; включайте в форму и подписи, потому что как только поле будет заполнено, замещающий текст исчезнет. Пользуйтесь плавающими подписями, чтобы пользователи могли проверить, правильное ли поле они заполнили.
Если нажать на командную кнопку, то должен запуститься какой-то процесс, например, отправка формы.
Недостаточное визуальное отличие первичных действий от вторичных действий может подвести. Чем меньше визуально выделяется второстепенное действие, тем меньше вероятность ошибки и более вероятен успешный исход пути пользователя.
Для сложных форм часто требуется кнопка «назад». Если она расположена сразу под полем ввода (как в примере слева ниже), пользователь может случайно на нее нажать. Так как кнопка «назад» — это второстепенное действие, сделайте так, чтобы доступ к ней был более сложным (на форме справа кнопки расположены верно).
Не называйте действия общими словами вроде «Отправить» или «Подтвердить», потому что из-за них и вся форма кажется ничем не примечательной. Вместо этого пишите на кнопке, какое действие будет выполнено, если на кнопку нажать, например, «Создать мой личный кабинет» или «Подписаться на еженедельную рассылку».
Следует избегать множества командных кнопок, потому что они могут отвлекать пользователя от конечной цели — отправки формы.
Не используйте кнопку «Сбросить». Она почти никогда не помогает пользователям, а, наоборот, приносит одни проблемы. Интернет стал был гораздо лучше, если бы везде удалили кнопки «Сбросить».
Кнопки должны выглядеть как кнопки: покажите, что по ним можно кликнуть или тапнуть.
Оформите кнопку «Отправить» так, чтобы после нажатия на неё было четко понятно, что форма обрабатывается. Таким образом он получает обратную связь и понимает, что не надо отправлять форму второй раз.
Ошибки валидации формы неизбежны, и это естественная часть ввода данных (потому что пользователи склонны совершать ошибки). Да, конечно, нужно минимизировать вероятность возникновения ошибки, но ошибки валидации никогда не исчезнут. Так что главный вопрос звучит так: «Что вы можете сделать, чтобы пользователю было проще исправить ошибки?».
Пользователи не любят узнавать о том, что допустили ошибку при заполнении формы, только после того, как попытаются отправить её. И особенно расстраиваются, когда, заполнив большую форму, нажимают кнопку «Отправить», а в ответ приходит большое количество сообщений об ошибке. Еще сильнее раздражает, если непонятно, какие ошибки допущены и где.
Валидация должна информировать пользователя о правильности текста как только тот ввел данные. Говорите с пользователем, рассказывайте ему, что он сделал неправильно. Встроенная валидация в режиме реального времени немедленно информирует пользователя о том, корректно ли введены данные. Этот подход позволяет быстрее исправлять любые ошибки, при этом пользователю не приходится доходить до кнопки «Отправить», чтобы увидеть есть ли они.
Однако не стоит делать так, чтобы валидировалось каждое нажатие клавиш, потому что чаще всего вы не можете проверить правильность данных, пока пользователь не закончит печатать ответ. Формы, которые валидируют данные во время набора текста, «наказывают» пользователя, как только он начинает вводить данные.
С другой стороны, формы, которые валидируют текст только после его ввода, не достаточно быстро предупреждают пользователя о допущенной ошибка.
В своей статье «Встроенная валидация в формах: создаем пользовательский опыт» Михаэль Коневич исследует различные виды стратегий валидации и предлагает гибридную стратегию, чтобы отвечать обоим требованиям: награда — сразу, наказание как можно позже.
Джеф Раскин однажды сказал: «Система должна относиться к тексту, введенному пользователем, как к неприкосновенному». Это абсолютно истинно и для форм. Очень здорово, когда вы начинаете заполнять форму, а затем случайно обновляете страницу, но данные остаются на своем месте.
Такие инструменты, как Garlic.js, помогают сохранить данные до тех пор, пока форма не отправлена. Таким образом пользователи не потеряют драгоценные данные, если случайно закроют вкладку или даже браузер.
В последнее время очень много шума вокруг диалоговых интерфейсов и чат-ботов. Несколько трендов возникли в результате этого феномена, в частности, один из них заключается в том, что люди проводят все больше времени в мессенджерах, чем в социальных сетях.
Было проведено множество экспериментов в отношении поддержки некоторых видов взаимодействий с помощью протоколируемого диалога, который имитирует общение в мессенджере. И даже такой устоявшийся элемент, как онлайн-форма, благодаря этому тренду претерпел изменения. Дизайнеры ищут способ трансформировать традиционные онлайн-формы в интерактивный диалоговый интерфейс.
Каждый интерфейс — это диалог. Традиционные формы (те, которые мы создаем каждый день) очень похожи на разговор. Единственная разница — то, как мы отвечаем на вопросы. Но что если бы создаваемые нами формы задавали вопросы в таком формате, который больше бы напоминал настоящий человеческий (не машинный) разговор?
Форма, которая показана ниже, создает диалоговый контекст, который способствует пониманию, но в то же время не опирается на традиционные элементы онлайн-форм (такие как подписи и поля ввода).
Диалоговая форма — это концепт с открытым исходным кодом, который быстро превращает любую форму на веб-странице в диалоговый интерфейс. Диалоговая форма заменяет все элементы ввода, управляет индивидуальными настройками и полностью контролирует внешний вид.
Этот проект показывает происходящий сейчас интересный сдвиг в видении пользовательского опыта и взаимодействия. Тенденция заключается в постепенном переходе к текстовому диалогу, который помогает пользователям достичь своих целей.
Пользователи, скорее всего, не хотят заполнять формы, так что лучше максимально упростить этот процесс. И даже самые небольшие изменения, такие как группирование схожих полей и указание на то, какая информация должна быть в том или ином поле, могут значительно улучшить опыт заполнения формы.
Проверка на простоту использования просто неотделима от дизайна формы. Очень часто достаточно протестировать форму на нескольких людях или даже просто попросить коллегу пройти через прототип, чтобы получить ценные отзывы о простоте использования формы.