Принципы дизайна форм: 13 лучших практик, подкрепленных эмпирическим путем

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

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

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

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

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

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

13 принципов дизайна форм и лучших практик

1. Чем меньше, тем лучше (т.е. удалить поля формы).

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

В одном тематическом исследовании контактная форма с 11 полями была заменена версией с 4 полями, а заполнение формы увеличилось на 160 %. (Качество материалов осталось прежним.)

В другом тесте форма с 5 полями превзошла форму с 9 полями на 34%. В этом случае также не было падения данных или качества потенциальных клиентов.

Большинство форм слишком длинные. Это «синдром жадного маркетолога» — мы думаем, что нам нужны все данные.

Институт Беймарда обнаружил, что средняя касса содержит 14,88 полей формы. Но их юзабилити-тестирование также показало, что большинство сайтов могут сократить количество полей форм, отображаемых по умолчанию, на 20–60%.

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

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

• Сколько у вас форм?
• Сколько людей испытывают их?
• Что бы для вас значило увеличение на 10% в каждой форме?

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

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

Пример со страницы нашего агентства:

Когда вы оптимизируете поля формы, спросите о данных: они вам действительно нужны? Вам действительно нужны телефоны, факсы или адреса людей? Вам нужно название компании, если вы продаете свечи? Спрашивайте только о том, что актуально. Expedia удалила поле «Компания» из своей формы бронирования и увидела увеличение прибыли на 12 миллионов долларов в год.

Знайте также, что, особенно для B2B, существуют компании по обогащению данных, такие как Clearbit. Если вы соберете адрес электронной почты и, возможно, имя, они, как правило, могут обогатить остальные данные (название компании, размер, дескриптор Twitter и т. д.).

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

Лучшая форма регистрации короткая:

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

Однако в целом безопасно следовать этой эвристике: удалить бесполезные или лишние поля формы.

2. Одноколоночные лучше, чем многоколоночные.

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

В исследовании CXL участники опроса заполнили линейную форму с одним столбцом (n = 356) в среднем на 15,4 секунды быстрее, чем форму с несколькими столбцами (n = 346). Это было значительно быстрее при уровне достоверности 95%.

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

Я уверен, что из этого правила есть исключения (как и из любого другого), но я не нашел ничего эмпирического подтверждения.

3. Четко сообщайте об ошибках.

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

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

Итак, да, изучите юзабилити самостоятельно, но начните со следующих рекомендаций по сообщениям об ошибках:

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

4. Используйте встроенную проверку полей формы.

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

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

Вот отличный пример встроенной проверки:

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

• 22% увеличение показателей успеха;
• на 22% меньше ошибок;
• 31% увеличение рейтинга удовлетворенности;
• на 42 % сократилось время выполнения;
• На 47% уменьшилось количество фиксаций взгляда.

Я возьму эти результаты. (Я видел аналогичные результаты A/B-тестов, проведенных на многих сайтах электронной коммерции.)

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

5. Упорядочите поля от простого к сложному для заполнения.

Принцип «обязательства и последовательности» Роберта Чалдини гласит, что когда кто-то предпринимает небольшое действие или делает шаг к чему-то, он чувствует себя обязанным закончить. По этой причине рекомендуется ставить самые простые элементы на первое место.

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

Не делайте этого:

6. Упростите набор текста.

Всеобъемлющий принцип лучших практик дизайна форм постоянно всплывает: упрощайте работу пользователя (особенно для мобильных форм).

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

Принимая решение об автозаполнении, вот несколько хороших вопросов, над которыми стоит подумать:

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

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

Так что не делайте этого:

7. Укажите, является ли каждое поле обязательным или необязательным (если только они не обязательны).

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

Сосредоточьтесь на информации, которая вам нужна от пользователей, чтобы они могли начать работу. Вы не хотите, чтобы пользователь, сидя дома, думал: «Зачем им это?!»

Укажите, является ли каждое поле обязательным или необязательным, если только оно не является обязательным.

8. Поля имени и номера телефона должны быть одним полем.

Вместо поля имени и фамилии просто укажите поле «полное имя». Вместо трех полей для номера телефона используйте одно.

Проблема с несколькими полями — это проблемы взаимодействия. Как правило, передовая практика дизайна форм гласит: «Чем меньше полей, тем лучше».

Представьте себе, что вы используете свое мобильное устройство и вам нужно нажимать пять полей для имени и номера (два для имени, три для номера) вместо двух? Бесполезное трение.

9. Предлагайте радиокнопки вместо раскрывающихся списков.

UX Movement утверждало, что формы с меню выбора часто забрасываются, потому что они «требуют больше времени и усилий для заполнения».

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

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

Результаты, достижения? Форма с переключателем заполнялась быстрее. Участники опроса заполнили форму с переключателями (n = 354) в среднем на 2,5 секунды быстрее, чем форму с кнопками множественного выбора (n = 354). Это было значительно быстрее на уровне 95%.

10. Не делайте поля кода купона заметными.

Когда люди видят поле «Введите код купона здесь», они чувствуют себя менее особенными. Они думают: «Почему у меня его нет?» Они получают FOMO.

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

Уход с сайта для поиска купонов — частая причина отказа от корзины.

Так что это не очень хорошая идея:

Вместо большого баннера используйте текстовую ссылку «Есть купон?» (или что-то подобное). Если пользователь щелкнет ссылку, он должен открыть поле ввода. Текстовые ссылки не выделяются визуально, поэтому меньше людей обратят на них внимание.

Клиенты, у которых уже есть код купона, будут искать способ ввести его, поэтому, если вы не спрятали его (слишком хорошо), они все равно смогут применить свой купон. И если покупатель получил купон (по электронной почте), примените его автоматически и отобразите скидку.

11. Избегайте кнопки «очистить поля».

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

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

Рекомендации по дизайну форм для мобильных устройств

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

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

12. Фокусируйтесь на поле предложения.

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

Сделайте редактируемое поле ввода заметным и сфокусированным.

13. Не маскируйте пароли.

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

Как подытожил NN/g:

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

Предостережение: проводите свои собственные эксперименты.

Тот факт, что что-то является «лучшей практикой», не означает, что это всегда оптимальное решение. Иногда лучшие практики терпят неудачу.

Веб-сайты контекстуальны. То, что работает на одном сайте, может не работать на другом.

Кроме того, ваш бизнес-контекст может быть другим. Кто знает, может быть, вам действительно нужно это второе имя как часть данных. Кто я такой, чтобы судить?

Так что относитесь ко всему с недоверием. Знайте, что все это было протестировано и изучено, но, в конце концов, все, что имеет значение, это то, как это работает на вашем сайте и в вашем бизнес-контексте.

Это рекомендации, а не предписания.

Заключение

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

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

Работаете над чем-то связанным с этим? Разместите комментарий в сообществе CXL !