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

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

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

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

Размещать форму в двух столбцах — это нормально?

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

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

Где следует размещать подписи?

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

Размещение подписей над полями

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

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

Размещение подписей слева от полей

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

Размещение подписей слева от полей
Размещение подписей слева от полей

Размещение подписей в полях ввода

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

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

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

Можем ли мы использовать плейсхолдер вместо подписи?

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

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

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

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

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

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

Следите за интервалом

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

Визуально сгруппированные подписи
Визуально сгруппированные подписи

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

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

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

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

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

Подписи, написанные с Caps Lock
Подписи, написанные с Caps Lock

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

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

Кнопка должна пояснять действие

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

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

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

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

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

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

Основная кнопка должна выглядеть более заметной
Основная кнопка должна выглядеть более заметной

Выделяйте кнопки

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

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

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

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

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

Автозаполнение на основе данных геолокации
Автозаполнение на основе данных геолокации

Не забывайте про Masked Input

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

Подсказки от masked input
Подсказки от masked input

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

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

Длина поля в качестве намека на подразумеваемый ответ
Длина поля в качестве намека на подразумеваемый ответ

Избегайте выбора из выпадающего списка, если у вас всего 2 или 3 варианта

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

Использование переключателей вместо выпадающих списков
Использование переключателей вместо выпадающих списков

Проверка правильности заполнения форм

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

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

Предотвратите основные ошибки в поле пароля

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

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

Позвольте пользователям авторизоваться посредством социальных сетей

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

Авторизация через аккаунт в социальных сетях
Авторизация через аккаунт в социальных сетях

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

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

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

  • Каждая страна имеет свой собственный формат номера, поэтому маски ввода также должны различаться.
  • В США указывается ZIP code, тогда как в Европе это postal code.
  • Поле «штат» требуется только в США. (На самом деле, нет. Еще оно требуется в Бразилии, Индии, Австралии, Мексике и еще нескольких странах — прим. переводчика).
Примеры форм с локальными различиями
Примеры форм с локальными различиями

Вывод

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