Эффективные HTML-формы. Часть 1

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

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

Начнем с самого простого

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

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

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

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

То же касается и пояснительного текста. Сделайте его простым и кратким.

Всегда используйте label

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

Этот элемент может быть связан с управлением формой одним из двух способов: явно и неявно.

Неявная связь использует label, как обертку вокруг элемента формы:

<label><input type=”radio” name=”confirm” value=”yes”>Yes</label>

В этом случае метка \"Yes\" неявно ассоциируется с переключателем.

Явная связь использует атрибут for, которому необходимо передать id элемента, соответствующего label.

<label for=”name”>Your Name</label>
<input id=”name” …>

Важным преимуществом этого способа связи является простота управления стилями элементов radio и checkbox независимо от других элементов ввода без необходимости использования селекторов атрибутов (которые могут не работать в некоторых браузерах).

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

• Label становится интерактивным элементом, который дает возможность активировать ассоциированный элемент и управлять ним;
  
  • Текст, используемый в label, будет автоматически считываться голосовыми браузерами.

Оба момента довольно важны, но именно интерактивность label делает ее одним из самых необходимых элементов дружественной к пользователю формы.

Используйте placeholder

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

<input placeholder=”Johnny Appleseed” …>

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

Ассоциированные подсказки

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

<label for=”email”>Your Email</label>
<input id=”email” aria-describedby=”email-note” … >
<em id=”email-note” class=”note”>We will only use your email
address to respond to your message.</em>