- Единый стиль всех полей, отступов формы и кнопок на сайте. Исключения: дизайнерские задумки, бизнес-логика.
- Разные элементы формы должны визуально согласовываться.
- Элементы в форме должны находиться в сетке, соблюдаться одинаковые отступы и размеры.
- ♿️ Лейбл поля всегда видим, плейсхолдер не используется как единственная подсказка.
- Обязательные и необязательные поля визуально различимы.
- Если есть группировка полей в сетке формы, она должна быть обоснована бизнес-логикой или содержанием полей.
- ♿️ Высота поля ввода и кнопки — жёсткий минимум — 24×24px (WCAG 2.2, критерий 2.5.8).
- В полях ввода должны быть внутренние отступы для текста.
- Расстояние между соседними интерактивными элементами — не менее 8px (чтобы избежать случайных нажатий).
- Размер текста внутри поля не менее 16px на мобильной версии (меньший размер провоцирует автозум в Safari на iOS).
- Клавиши — размер и отступы, позволяющие уверенно попасть пальцем на мобильном экране.
-
Макет должен содержать стандартные состояния для каждого вида полей, чекбоксов, селектов, клавиш:
- обычное (default)
- наведение мышью (hover, если необходимо; для клавиш обязательно)
- фокус (focus, когда элемент выделен, происходит ввод, находится в фокусе и т.д.)
- недоступен (disabled, если необходимо; обязательно для клавиш)
-
Сложные (кастомные) элементы должны содержат все состояния:
- селект: пустой, выбранный, открытый
- множественный выбор: пустой, частично заполненный, ограничения (если есть)
- поиск: пустой, результаты поиска, выбранный варинат
- т.д.
-
Передавать в разработку ожидаемый "тип" информации для полей
- маску номера телефона
- регион номеров телефона
- диапозон дат, возраста
- перечесление значений селекта
- т.д.
- Ошибка обязательно обозначается текстом и/или иконкой.
- Текст ошибки однозначное и объясняющий суть.
- Ошибки у полей: располагаются непосредственно рядом с полем, к которому относятся. Общие ошибки, рядом с интерактивным элементом который их вызвал.
- Контраст текста и элементов — не ниже WCAG AA: 4.5:1 для обычного текста, 3:1 для крупного текста и графических элементов интерфейса (иконки, рамки полей). Проверка контрастности
- Информация никогда не передаётся только цветом (пример — ошибка должна содержать текст, а не только цвет)
- Достаточный размер кликабельной области
- После отправки формы должно быть явное и однозначное сообщение о успешной отправки
- Должно быть предусмотренна информация о неуспешной отправки (проблемы с интернетом, сервером и т.д.)
- (если требуется) индикация процесса отправки
- Возможность вернуться назад для многошаговых форм
- Под клавишами отправки или навигацией многошаговых форм не должно быть полей, ошибок, прогресса и т.д. (они не видны пользователю на мобильно устройстве)