Удобные формы в UX/UI: 30 советов и примеров

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

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

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

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

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

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

Структурируя последовательность полей формы, старайтесь группировать их логически и тематически. Например, если вы собираете несколько видов контактной информации (электронная почта, телефон, адрес), объедините их вместе, а не размещайте в разных местах формы. Так, форма создания аккаунта может содержать три раздела: «Личная информация», «Реквизиты», «Другое».

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

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

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

Даже в одноколоночных макетах часто встречаются ярлыки форм, расположенные слева от области ввода.

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

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

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

В Android от Google и iOS от Apple есть встроенные интерфейсы для ввода определенных типов данных, например, выбора даты. Старайтесь использовать эти встроенные элементы, а не придумывать свои собственные. Пользователи лучше знакомы с родным интерфейсом, и, скорее всего, он и работать будет лучше.

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

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

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

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

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

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

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

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

Я уже говорил об этом, но стоит повторить: чем меньше полей — тем лучше. Однако не стоит делать форму настолько короткой, чтобы в ней не было нужной информации. Как в поговорке: “Everything should be made as simple as possible, but not simpler.”

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

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

Хотя тщательно подобранные шрифты с засечками могут хорошо работать в формах, в целом шрифты без засечек являются более безопасным вариантом. Многие современные шрифты без засечек, такие как Roboto, San Francisco или Proxima Nova, разработаны специально для использования на экранах. Важной особенностью этих шрифтов является то, что они имеют большую высоту x-height - это означает, что строчные буквы относительно крупные.

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

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

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

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

Это дает пользователю четкий визуальный индикатор того, что его данные готовы к отправке.

Эффективная и правильная форма не ограничивается визуальной эстетикой. Да, есть готовые компоненты и шаблоны, но они больше относятся к области UI. По сути каждая форма должна также включать в себя продуманный UX и целостное понимание того, как пользователь будет взаимодействовать с формой. Забавно, что этот список можно продолжать бесконечно, потому что ситуаций, когда у пользователя может что-то пойти не так не счесть: «а как форма отобразиться на разных браузерах?», «а если у пользователя интернет выключится?», «а если пользователь случайно вернется на предыдущую страницу?» и так далее.Главное, что использование фундаментальных принципов, перечисленных в этой статье, поможет вам предоставить пользователям лучший опыт, который вы сможете тестировать и пересматривать по мере необходимости.Источники исследований: — https://clutch.co/resources/7-ux-principles-to-improve-your-web-form-design — https://xd.adobe.com/ideas/principles/web-design/best-practices-form-design/Бонусом для тех, кто прочитал статью, предлагаю оценить самые неудобные поля ввода телефона: https://fun.mishasaidov.com/badux/

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