23 рекомендации по дизайну форм для увеличения количества отправок

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

Если менее 100% ваших посетителей заполняют вашу форму, у вас есть возможность.

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

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

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

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

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

Итак, с чего начать?

Спросите себя: должен ли я использовать форму?

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

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

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

Сделайте мотивацию ясной

Когда пользователи чувствуют, что получают от формы что-то стоящее, они с большей вероятностью завершат ее. Это вопрос анализа затрат и результатов: что они получат, если потратят время и усилия?

Рекомендации по дизайну форм, описанные в этой статье, сделают ваши формы более привлекательными, приятными и простыми в использовании, снизив предполагаемую стоимость заполнения. Тем не менее, вы можете подчеркнуть ценность или цель вашей формы, чтобы увеличить количество представлений. Будут ли они создавать учетную запись, которая позволит им делать X, получить бесплатную пробную версию или получить помощь? Что бы пользователь ни получил от обмена, сделайте это понятным.

Мощный заголовок, текст, ориентированный на выгоду, и прямой призыв к действию (CTA) могут помочь. Не забывайте, что убеждение все еще играет роль.

Если вы хотите, чтобы посетители подписывались на вашу рассылку, укажите преимущества. «Обновления» неубедительны. Обновления о чем? Они получают что-нибудь еще? Скажите им, почему они должны заботиться.

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

Наблюдайте за теми, кто был до вас

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

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

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

Приготовьтесь к суду

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

Два стилистических совета, о которых следует помнить, — это пространство и удобочитаемость.

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

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

Держать его коротким

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

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

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

Структурные формы с логикой

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

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

Уменьшите движение глаз и путаницу с хорошим дизайном формы

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

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

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

Полезные советы по дизайну

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

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

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

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

Воспользуйтесь преимуществами предварительного заполнения и автоматических функций

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

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

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

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

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

Используйте условную логику

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

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

Используйте правильные элементы управления вводом

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

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

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

Делайте правильно с помощью кнопок формы

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

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

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

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

Сделайте ошибки понятными и легкими для исправления

Уведомлять пользователей об ошибке, не предлагая помощь, — это неприятно. Удобные сообщения об ошибках предоставляют решения.

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

Если можете, расскажите конкретно об ошибке, чтобы пользователям не пришлось догадываться, что это такое. Информация не соответствует вашим записям? Это из-за опечатки или недопустимого символа? Возможно, они создают пароль, и он не соответствует требованиям по длине. Что бы это ни было, расскажи им.

Если есть ошибка, сразу же сообщите о ней. Это скорее разочарование для пользователей, когда они, наконец, нажимают кнопку «Отправить», а ожидаемого результата не происходит.

Сохранить данные кэша

Вы когда-нибудь начинали заполнять форму, но вас прерывали? Может быть, у вас отключился WiFi, страница перезагрузилась или вы случайно вышли с сайта?

Хранение данных кэша избавляет пользователей от повторного запуска формы при возникновении событий такого типа. Это защищает их от разочарования на первом месте и увеличивает шансы на завершение формы.

Подружитесь с адаптивным дизайном уже сейчас

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

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

Да, доступность здесь тоже применима

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

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

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

Делать. Что. Копировать. Работа.

Формы — это не все поля и пользовательские записи. Хорошее UX-письмо необходимо для эффективного руководства пользователями через любую форму. UX-копия формы присутствует в сообщениях об ошибках и микротекстах, таких как кнопки, заполнители и метки.

Копия формы должна быть короткой, информативной и легкой для понимания.

При написании меток формы используйте только существительное и откажитесь от глагола (например, «Имя» вместо «Введите имя»). Это более просто и стандартно. Для кнопок сделайте микрокопию ориентированной на результат, чтобы пользователи точно знали, что они делают (например, «Подписаться на информационный бюллетень» или «Получить PDF» вместо «Отправить»).

Копия формы, если она короткая и служит цели, также может содержать полезные детали. Замена «Имени» на «Имя как на открытке» или «Имя получателя подарка» может устранить неопределенность пользователя и предотвратить ошибку.

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

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

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

Разговор о конфиденциальности

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

Около 29% людей называют соображения безопасности причиной отказа от формы. Если у вас есть политика конфиденциальности, защищающая конфиденциальность данных пользователей, сообщите им об этом. Будьте понимающими и успокаивайте опасения, чтобы те, кто входит в 29%, чувствовали себя в безопасности, делясь с вами.

Посмотрите на цифры

Если вы переделываете форму, у вас есть самый ценный инструмент из всех: данные.

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

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

В том году они получили 12 миллионов прибыли от формы.

Дизайн формы A/B-тестирования

Компании должны не только просматривать историю пользователей с помощью форм; они должны проводить тесты, чтобы продолжать совершенствоваться. В частности, A/B-тесты — отличный способ постоянно обновлять веб-формы.

Чтобы провести A/B-тестирование формы, создайте две точные итерации рассматриваемой формы, но измените один фактор. Это может быть заголовок, фрагмент микротекста, цвет СТА или удаление одного из полей. Используйте оба в течение определенного периода времени и оцените, какой из них работает лучше.

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

Решите: одноэтапные и многоэтапные формы

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

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

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

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

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

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

Решите: чат-бот против веб-формы

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

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

Мы обсуждаем плюсы и минусы чат-ботов и форм, а также когда их использовать в нашем руководстве: Конвертируют ли чат-боты лучше, чем веб-формы?

Секретный вариант третий: формы естественного языка

Ранее мы упоминали, что у всех одинаковое представление о том, как выглядят веб-формы, из-за их давнего сходства. Ну, это не совсем верно для редкой формы естественного языка.

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

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

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

Пример формы естественного языка взят из The Theme Foundry.

Превратите свои формы в опыт

Этот заголовок является неправильным, потому что все формы — это опыт. Но не все формы хороши – и это цель.

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

Отсюда и советы в этой статье. Используйте их, чтобы создать отличный дизайн веб-формы с мотивирующим микротекстом, и наблюдайте за ростом конверсии.

Есть вопросы о наших предложениях или хотите обсудить формы? Протяни руку.