Михаил!

Я ознакомился с дизайн‑системой и помимо компонента Error summary нашёл компонент Errors message, который как раз и выводит ошибку рядом с неправильно заполненным полем. Насколько я понял из описания дизайн‑системы, он работает с любыми типами полей, инпутов, выпадающих списков, чекбоксов и радиокнопок.

Обратите внимание на рекомендацию в дизайн‑системе начинать текст со слова «Ошибка», чтобы людям с искаженным восприятием цвета было проще определить новый текст, содержащий совет по правильному заполнению формы. Приём стоит взять на вооружение.

Что касается специального компонента Errors summary, то он поможет пользователю увидеть все неправильно заполненные поля в одном месте. Это полезно в длинных формах, если пользователь при заполнении пропустил или проигнорировал поля с ошибками.

В описании компонента меня смутило, что он появляется в начале формы после её отправки. Не знаю, какие ограничения у авторов дизайн‑системы, но в своих проектах я бы выводил такой список ошибок возле отключённой кнопки отправки формы в конце — он как раз подскажет, почему кнопка недоступна.

Возможное расположение компонента Errors summary в конце формы возле кнопки

Возможно, стоит сильнее помочь пользователю и в длинных формах рядом с неактивной кнопкой отправки выводить названия незаполненных полей. Каждое название — ссылка на поле.

Возможный вид ссылок на незаполненные поля

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

Отправить
Поделиться
Запинить

Рекомендуем другие советы