Проектирование эффективных веб-форм: структура, элементы для ввода данных, метки и действия

Формы остаются одним из основных видов взаимодействия для пользователей. Они являются последним шагом на пути к совершению конверсии.

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

Характеристики формы

Стандартная форма содержит пять компонентов:

• Структура

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

• Поля для ввода

Текстовые поля, чекбоксы, переключатели, слайдеры и другие поля.

• Метки полей

Они сообщают пользователям, что означают соответствующие поля ввода.

• Кнопка действия

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

• Обратная связь

Большинство веб-приложений и сайтов используют в качестве обратной связи простой текст.

Формы также могут содержать следующие компоненты:

• Помощь

Объяснение того, как заполнить форму.

• Валидация

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

Структура формы

Форма должна обеспечивать взаимосвязь пользователя с приложением или сайтом. Поэтому:

Спрашивайте только то, что необходимо

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

Логическая организация формы

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

Группируйте связанную информацию

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

Связанные поля

Один столбец или несколько

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

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

Поля ввода

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

Количество полей

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

Объедините несколько полей в одно.

Обязательные и необязательные поля

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

Форма подписки на электронную рассылку MailChimp.

Настройка значений по умолчанию

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

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

Выбранная страна в форме заказа.

Маски ввода

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

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

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

Даже для простого выбора даты нужно придерживаться рекомендаций W3C.

Только для стационарных компьютеров: автофокус для полей ввода

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

Только для мобильных устройств: соответствие клавиатуры полю ввода

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

Автозаполнение

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

Метки

Метка указывает пользователю цель заполнения поля.

Количество слов

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

Формат предложений или формат заголовков

На сегодняшний существует два формата меток:

• формат заголовков: каждое слово с большой буквы. «Это Формат Заголовков».
• формат предложения: первое слово с большой буквы. «Это формат предложения».

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

Избегайте заглавных букв

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

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

Размещение меток: справа, слева или сверху

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

Метки, размещенные слева, справа и сверху от полей формы.

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

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

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

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

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

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

Встроенные метки

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

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

Текст заполнителя в качестве метки поля

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

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

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

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

Первичные и вторичные действия

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

Одинаковое визуальное выделение и визуальное отличие.

Местоположение кнопки

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

Конвенция имен

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

Несколько кнопок действия

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

Кнопка сброса - это зло

Не используйте кнопку сброса. Она никогда не помогает пользователям, а вредит.

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

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

Затенение указывает, что по кнопке можно кликнуть.

Визуальная обратная связь

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

Валидация

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

Встроенная валидация

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

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

Google Forms сообщает о том, что адрес электронной почты недействителен еще до того, как вы закончили вводить текст.

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

Валидация в Apple Store выполняется после завершения ввода данных.

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

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

Гибридный подход: поощрение рано, предостережение поздно.

Защита данных

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

Диалоговые интерфейсы: новые способы разработки форм

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

Интерфейсы естественного языка

Что, если бы мы разрабатывали формы, которые могли задавать вопросы на более «человеческом» (а не машинном) языке? Форма, показанная ниже, создает диалоговый контекст, облегчая понимание, и не полагаясь при этом на традиционные элементы (например, метки и поля ввода).

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

Conversational Form

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

Заключение

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

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