Школа
Дизайн

Ошибки в полях дизайн‑системы для государственных сайтов

Добрый день. Недавно узнал, что ведётся разработка дизайн‑системы для государственных сайтов.

Просматривал компоненты. Заметил, что ошибки, которые совершил пользователь при заполнении формы, будут указываться не рядом с полем, которое было неправильно заполнено, а в специальном, отдельном компоненте Errors summary.

Так как у компонента Text Field не предусмотрено «ошибочного» состояния, узнать, что было написано в форме неправильно, можно будет только после заполнения.

Имеет ли место такой подход?

Михаил Сидаченко
17 ноя 2020
👁 4882   🗩1
Дизайн

Ошибки в полях дизайн‑системы для государственных сайтов

Добрый день. Недавно узнал, что ведётся разработка дизайн‑системы для государственных сайтов.

Просматривал компоненты. Заметил, что ошибки, которые совершил пользователь при заполнении формы, будут указываться не рядом с полем, которое было неправильно заполнено, а в специальном, отдельном компоненте Errors summary.

Так как у компонента Text Field не предусмотрено «ошибочного» состояния, узнать, что было написано в форме неправильно, можно будет только после заполнения.

Имеет ли место такой подход?

Михаил Сидаченко
17 ноя 2020
👁 4882   🗩1
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Михаил!

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

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

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

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

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

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

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

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

Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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