Мы обобщили информацию об отметках “обязательно” в зарубежных пользовательских интерфейсах (формах) вместе с материалами руководств по UI.
📌 Основные знаки обязательного заполнения и лучшие практики
Использование звездочки (*)
- Это наиболее распространенный и широко используемый способ, когда обязательные поля помечаются символом “*”.
- Однако в начале формы обязательно должно быть пояснение, например, “ — обязательное поле”* (Nielsen Norman Group, California State University, Northridge).
- Также есть примеры использования цвета для выделения (например, красный текст).
Явное указание “Required” или “(required)” в метке
- Добавление слова “Required” в текстовую метку (label) делает его понятным для программ чтения с экрана, что улучшает доступность (Deque).
Совместное использование атрибутов ARIA и атрибута
requiredв HTML5- В дополнение к визуальному отображению использование
aria-required="true"и<input required>позволяет программно передать обязательность поля (Deque).
- В дополнение к визуальному отображению использование
Использование “(optional)” для явного указания необязательных полей
- Вместо обязательных полей можно использовать “(optional)” для указания необязательных, что эффективно при их смешивании.
- Однако Nielsen‑Norman отмечает, что “легче принимать решения, когда обязательные поля также четко обозначены” (TPGi).
✅ Краткое изложение руководств по UI
| Источник | Содержание |
|---|---|
| NN/g: Marking Required Fields in Forms | Рекомендуется комбинация звездочки и пояснительного текста; отображение только необязательных полей считается недружелюбным (Nielsen Norman Group). |
| Deque (Anatomy of Accessible Forms) | ・Использование строки “Required” или изображения внутри метки. ・Четко указано, что одной лишь цветовой индикации недостаточно. |
| W3C Techniques (H90) | Примеры включения звездочки или “(required)” в метку с определением значения в начале формы. |
| TPGi (Doing what’s required) | С учетом доступности комбинация звездочки, атрибута ARIA и текстовой вставки в метку оценивается как оптимальная. |
| Contensis Руководство по UX форм | Кратко отмечено, что важна последовательная разметка (например, * или (optional)) . |
✅ Рекомендуемый подход к реализации
Добавьте пояснительный текст в начале формы :
Fields marked with * are required. (Или все вместе: “All fields are required”, а если есть необязательные: “unless marked optional”)
Добавление меток (Label) :
- Напишите, например,
First Name *илиEmail (required).
- Напишите, например,
Атрибуты ARIA и HTML5 :
1 2<label for="email">Email <abbr title="required">*</abbr></label> <input id="email" required aria-required="true">Не полагайтесь только на цвет : обеспечьте поддержку как визуально, так и программно.
🔗 Полезные ссылки (материалы руководств по UI)
- NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
- Deque: Anatomy of Accessible Forms (Deque)
- W3C Techniques: H90 Indicating required form controls (W3C)
- TPGi: Indicating mandatory fields accessibly (TPGi)
- Contensis: UX Forms Guidelines (Contensis)
При необходимости мы также можем предоставить конкретные примеры кода HTML/CSS, шаблоны дизайна компонентов UI для Sketch или Figma и т. д. Пожалуйста, обращайтесь к нам!