В первом разделе вы узнали, как создать простую форму. Этот раздел посвящен лучшим практикам. В этом модуле вы узнаете о пользовательском опыте (UX) и о том, почему грамотно реализованный пользовательский интерфейс (UI) может иметь большое значение.
Создавайте удобные интерфейсы
Заполнение форм может отнимать много времени и вызывать раздражение, но это не обязательно. Чтобы создать удобный пользовательский интерфейс, убедитесь, что он интуитивно понятен. Убедитесь, что вы разработали оптимальную структуру формы и графический дизайн (макет, интервалы, размер и цвет шрифта), а также логичный пользовательский интерфейс (например, текст подписей и подходящие типы ввода). Узнайте, как можно улучшить форму и сделать её более удобной для использования.
Этикетки
Помните, для чего нужен элемент <label> ? Метка описывает элемент управления формы. Заметная и хорошо написанная метка помогает пользователю понять назначение элемента управления формы.
Используйте метку для каждого элемента управления формы
Хотите добавить новый элемент управления в форму? Начните с добавления метки для нового поля. Так вы не забудете её добавить.
Добавление меток в первую очередь также помогает сосредоточиться на целях формы: какие данные здесь нужны? Как только это станет ясно, вы сможете сосредоточиться на том, чтобы помочь пользователю ввести данные и заполнить форму.
Текст этикетки
Допустим, вы хотите описать поле адреса электронной почты. Это можно сделать следующим образом:
<label for="email">Enter your email address</label>
Или вы можете описать это так:
<label for="email">Email address</label>
Какое описание вы выберете?
В нашем примере предпочтительнее формулировка «Адрес электронной почты», поскольку короткие метки легче сканировать, они уменьшают визуальный беспорядок и помогают пользователям быстрее понять, какие данные им нужны.
Положение этикетки
С помощью CSS можно разместить метку сверху, снизу, слева и справа от элемента управления формы. Где её разместить?
Исследования показывают , что лучше всего размещать метку над элементом управления формы , чтобы пользователь мог быстро просмотреть форму и увидеть, какая метка принадлежит какому элементу управления формы.
Формы дизайна
Хороший дизайн формы может значительно снизить процент отказа от заполнения . Помогите пользователям вводить данные, используя подходящие элементы и типы полей. Существует множество элементов формы и типов полей, из которых вы можете выбирать. Чтобы обеспечить наилучший пользовательский опыт, используйте наиболее подходящие элементы и типы полей для вашего варианта использования. Если пользователю необходимо заполнить несколько строк текста, используйте элемент <textarea> . Если пользователю необходимо принять условия использования вашего сайта, используйте <input type="checkbox"> .
Также следует визуально различать разные типы элементов управления формы. Кнопка должна выглядеть как кнопка. Поле ввода должно выглядеть как поле ввода. Сделайте так, чтобы пользователям было проще определить назначение элемента управления формы. Например, если что-то похоже на ссылку, нажатие на неё должно открывать новую страницу, а не отправлять форму.
Помогите пользователям ориентироваться в формах
Экстравагантный макет может быть интересным, но может помешать заполнению формы.
В частности, исследования показывают , что лучше всего использовать только один столбец. Пользователи не хотят тратить время на поиск следующего элемента управления формы. Использование одного столбца позволяет двигаться только в одном направлении.
Помогите пользователям взаимодействовать с формами
Чтобы избежать случайных нажатий и щелчков, а также чтобы пользователи могли взаимодействовать с формой, делайте кнопки достаточно большими. Рекомендуемый размер области нажатия кнопки — не менее 48 пикселей. Также следует добавить достаточное расстояние между элементами управления формы с помощью CSS-свойства margin , чтобы избежать случайных нажатий.
Размер элементов управления формы по умолчанию слишком мал для полноценного использования. Увеличьте размер, используя padding и изменив font-size по умолчанию.
Вы можете определить различные размеры для различных указывающих устройств, например, мыши, используя медиа-функцию pointer CSS.
// pointer device, for example, a mouse
@media (pointer: fine) {
input[type="checkbox"] {
width: 15px;
height: 15px;
}
}
// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
input[type="checkbox"] {
width: 30px;
height: 30px;
}
}
Узнайте больше о медиа-функции pointer CSS .
Показывать ошибки там, где они происходят
Чтобы пользователи могли легко определить, какой элемент управления формы требует их внимания, отображайте сообщения об ошибках рядом с элементом управления, на который они ссылаются. При отображении ошибок при отправке формы обязательно перейдите к первому недопустимому элементу управления формы.
Дайте пользователям понять, какие данные им следует вводить
Убедитесь, что пользователи понимают, как вводить корректные данные. Нужно ли вводить пароль длиной не менее восьми символов? Расскажите им об этом.
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>
Дайте пользователям понять, какие поля обязательны для заполнения.
<label for="name">Name (required)</label>
<input name="name" id="name" required>
Если поле обязательное, сделайте это очевидным! В книге «Анатомия доступных форм» описаны альтернативные способы указания обязательных полей. Если большинство полей в форме обязательны, возможно, лучше указать необязательные поля .
Как связать сообщения об ошибках с элементами управления формы, чтобы сделать их доступными для программ чтения с экрана? Подробнее об этом можно узнать в модуле «Специальные возможности» .
Проверьте свое понимание
Проверьте свои знания по проектированию форм
Как можно описать элемент управления формы?
<description> .<label> .description .placeholder .Каков рекомендуемый размер области нажатия?
Где следует размещать сообщения об ошибках?
<form> .