x
 
Михаил Сидаченко
17 ноября 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

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

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

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


Михаил!

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

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

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

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

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

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

Воз­мож­ный вид ссы­лок на неза­пол­нен­ные поля
P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

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

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Недавно всплыло

Насколько уместно использование ЦСС-стилей cursor: default и user-select: none 2 Где хранить скриншоты интерфейсных решений, чтобы было удобно искать референс? 9 Как вы справляетесь с разнобоем? 4 Как улучшить запись автоответчика? 4