UX в контактных формах: основы для превращения лидов в конверсии

Вам нравится заполнять формы? Я думал, что нет. Это не то, что мы хотим от сервиса. Все, чего хочет пользователь, это купить билет, забронировать номер в отеле, совершить покупку и так далее. Заполнение формы — необходимое зло, с которым им приходится иметь дело. Это описывает вас? Итак, что же на самом деле влияет на отношение человека к отправке формы?

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

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

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

Можно ли разместить форму в две колонки?

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

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

Где должны быть размещены этикетки?

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

Размещение меток над полями

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

Обоснование меток слева

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

Размещение меток внутри полей (метки, выровненные по верхнему краю поля)

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

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

Тем не менее, интерактивные метки-заполнители выигрывают на милю над статическими. При щелчке по полю метка перемещается вверх, оставаясь видимой, а статическая просто исчезает.

Можем ли мы использовать текст-заполнитель вместо метки?

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

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

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

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

Как уменьшить когнитивную нагрузку формы?

Расстояние между часами

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

Автофокус на первом поле ввода

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

Никогда не используйте заглавные буквы

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

Считаются ли кнопки частью UX формы?

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

Кнопка должна объяснять действие, которое необходимо предпринять

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

Назовите кнопку, чтобы объяснить, что она делает, а не используйте общий ярлык (например, «ОК»). BettingExpert получила на 31,54% больше регистраций, заменив простой глагол фразой с призывом к действию. По возможности используйте глагол вместо «Да» или «ОК», потому что ваши кнопки будут иметь смысл вне контекста с пояснительным текстом или заголовком. Имейте в виду, что ваш призыв к действию должен отражать намерения пользователя. Например, если это регистрация, то заведомо вызываем кнопку «Регистрация».

Отделяйте первичные действия от второстепенных

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

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

Кнопки выделения

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

Можно ли облегчить процесс заполнения формы?

Добавить автозаполнение

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

Не забывайте о маскированном вводе

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

Будьте изобретательны

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

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

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

Проверка форм

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

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

Добавьте удобства для предотвращения распространенных ошибок в поле пароля

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

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

Разрешить пользователям авторизоваться через социальные сети

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

Влияет ли местоположение пользователя на UX формы?

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

Вот на что следует обратить внимание:

• Каждая страна имеет свой собственный формат чисел, поэтому маски ввода также должны различаться.
• В США указывается почтовый индекс, тогда как в Европе это почтовый индекс.
• Поле «штат» необходимо только в США.

Заключение

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