Паттерны дизайна: Обязательные поля форм
Мы, как разработчики и проектировщики сайтов, можем помочь пользователю обнаружить обязательные для заполнения поля. Эффективное выделение обязательных полей сократит время заполнения формы и улучшит восприятие сайта в целом. На сегодняшний день описано множество вариантов визуального выделения обязательных полей. При этом уже стало некоторым стандартом обозначение обязательных полей – изменение стиля шрифта, выделение заголовка поля полужирным шрифтом или другим цветом (обычно красным), часто с обозначением поля звёздочкой.
1. Наиболее очевидный и популярный вариант выделения - звёздочки
2. Как же сделать обязательные поля более доступными и читаемыми?
Обратим особенное внимание как на доступность такой формы для пользователей с ограниченными возможностями, так и на техническую сторону реализации и, прежде всего, на валидность кода.
Одним из важных подходов является группировка полей по принципу обязательности заполнения. Обязательные поля при этом размещают сверху, как правило, в отдельном fieldset. Этот вариант, безусловно, учитывает потребности пользователей со слабым зрением и использующих системы голосового воспроизведения экранного текста.
Ещё один метод, также повышающий доступность формы, состоит в том, чтобы вынести звёздочку после текстового поля лишь визуально. В исходном коде она идёт непосредственно после метки поля.
3. Выделение собственно поля
Есть много разных способов подсветки собственно текстового поля. Один из оригинальных и относительно новых вариантов реализации предлагает Michael Dain:
4. Галерея дизайнов интерфейса
Подборка вариантов выделения обязательных полей формы - UI pattern factory
