В первом разделе вы узнали, как создать базовую форму. Этот раздел посвящен лучшим практикам. В этом модуле вы узнаете о пользовательском опыте (UX) и о том, почему хорошо реализованный пользовательский интерфейс (UI) может иметь большое значение.
Создание удобных интерфейсов
Заполнение форм может занять много времени и утомить. Это не обязательно. Чтобы гарантировать отличный UX, убедитесь, что пользовательский интерфейс интуитивно понятен. Убедитесь, что вы обеспечиваете оптимальную структуру формы и графический дизайн (макет, интервал, размер и цвет шрифта), а также логический пользовательский интерфейс (например, формулировки меток и соответствующие типы ввода). Давайте посмотрим, как можно улучшить вашу форму и сделать ее простой в использовании.
Этикетки
Помните, для чего нужен элемент <label> ? Метка описывает элемент управления формы. Видимая и хорошо написанная метка помогает пользователю понять назначение элемента управления формой.
Используйте метку для каждого элемента управления формой
Хотите добавить в форму новый элемент управления? Начните с добавления метки для нового поля. Таким образом, вы не забудете его добавить.
Добавление меток в первую очередь также поможет вам сосредоточиться на целях формы: какие данные мне здесь нужны? Как только это станет ясно, вы можете сосредоточиться на том, чтобы помочь пользователю ввести данные и заполнить форму.
Текст этикетки
Допустим, вы хотите описать поле электронной почты. Вы можете сделать это следующим образом:
<label for="email">Enter your email address</label>
Или вы могли бы описать это так:
<label for="email">Email address</label>
Какое описание вы выберете?
Для нашего примера предпочтительна формулировка «Адрес электронной почты», поскольку короткие метки легче сканировать, они уменьшают визуальный беспорядок и помогают пользователям быстрее понять, какие данные необходимы.
Положение метки
С помощью CSS вы можете разместить метку сверху, снизу, слева и справа от элемента управления формой. Где вы его поместите?
Исследования показывают , что лучше всего размещать метку над элементом управления формой , чтобы пользователь мог быстро просмотреть форму и увидеть, какая метка принадлежит какому элементу управления формой.
Проектирование форм
Хороший дизайн формы может значительно снизить процент отказов от форм . Помогите пользователям вводить данные, используя соответствующий элемент и тип ввода. Вы можете выбирать из различных элементов формы и типов ввода . Чтобы предложить лучший UX, используйте наиболее подходящий элемент и тип ввода для вашего случая использования. Если пользователю необходимо заполнить несколько строк текста, используйте элемент <textarea> . Если им необходимо принять условия вашего сайта, используйте <input type="checkbox"> .
Вам также следует визуально различать различные типы элементов управления формой. Кнопка должна выглядеть как кнопка. Вход как вход. Сделайте так, чтобы пользователи могли легко распознать назначение элемента управления формой. Например, если что-то выглядит как ссылка, нажатие на нее должно открыть новую страницу, а не отправлять форму.
Помогите пользователям перемещаться по формам
Экстравагантный макет может быть интересным, но может помешать заполнению формы.
В частности, исследования показывают , что лучше всего использовать только один столбец. Пользователи не хотят тратить время на поиск следующего элемента управления формой. Используя один столбец, можно следовать только в одном направлении.
Помогите пользователям взаимодействовать с формами
Чтобы избежать случайных нажатий и щелчков и помочь пользователям взаимодействовать с вашей формой, сделайте кнопки достаточно большими. Рекомендуемый целевой размер кнопки — не менее 48 пикселей. Вам также следует добавить достаточное расстояние между элементами управления формой, используя свойство CSS margin , чтобы избежать случайных взаимодействий.
Размер элементов управления формы по умолчанию слишком мал, чтобы их можно было использовать. Вам следует увеличить размер, используя padding и изменив font-size по умолчанию.
Вы можете определить разные размеры для разных указывающих устройств, например мыши, с помощью медиа-функции CSS- pointer .
// 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;
}
}
Узнайте больше о медиа-функции CSS- pointer .
Показывать ошибки там, где они происходят
Чтобы пользователям было проще узнать, какой элемент формы требует их внимания, отображайте сообщения об ошибках рядом с элементом управления формой, на который они ссылаются. При отображении ошибок при отправке формы обязательно перейдите к первому недопустимому элементу управления формой.
Объясните пользователям, какие данные вводить
Убедитесь, что пользователи понимают, как вводить действительные данные. Нужно ли им вводить пароль не менее восьми символов? Скажи им.
<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> .