Dialog

Диалоговое окно используется для отображения второстепенного контента, а также чтобы сосредоточить внимание пользователя на выполнении определенного действия или сценария. Диалоговое окно блокирует работу пользователя с родительской страницей до тех пор, пока его не закроют либо не выполнят целевое действие в этом окне.

§Точка входа

Точкой входа в диалоговое окно может быть как клик на конкретный триггер (например, кнопка в интерфейсе), так и определенные действия или возникшие условия в интерфейсе (например, попытка покинуть страницу, не сохранив данные, или смена аккаунта в другой вкладке).

§Размеры

Размер диалогового окна подбирается в зависимости от контента.

Размер S (480 px) используется для небольших предупреждений или подверждений, а также небольших форм.

**Размер M (720 px)**используется для небольших и средних форм.

Размер L (900 px) используется для массивных данных и флоу внутри модального окна.

Пользовательский размер используется, когда ни один из трех вариантов (S, M или L) не подходит.

§Контентная область

Контент внутри диалогового окна может быть произвольный. Layout подбирается в зависимости от потребностей.

Если диалоговое окно содержит форму, рекомендуется использовать один из двух типов расположения элементов:

§Кнопки

Action-кнопка нужна почти всегда. Если пользователь не выполнил требуемые в диалоговом окне действия, кнопка остается в режиме Disabled. В левой части предусмотрена зона для произвольных контролов. Здесь можно разместить вспомогательные кнопки или ссылки, например, справочную информацию.

Иногда вместо action-кнопки возможно использование danger-кнопки (к примеру, если это диалог удаления сущности).

Action-кнопка не нужна в случае, если нет целевого действия, а диалоговое окно носит информационный характер. В таком случае используется кнопка «Закрыть» в стиле Normal.

Secondary-кнопка всегда используется как кнопка отмены. Может использоваться для дополнительных действий, (например, «Продолжить без изменений»).

Кнопок может не быть совсем. Как правило, это случай, когда необходимо сделать выбор в самой контентной области, и без этого родительский интерфейс будет недоступен.

§Навигация внутри диалога

Если диалоговое окно предусматривает процесс из нескольких шагов, используется кнопка «Назад» для возврата.

Если диалоговое окно имеет вложенность, но это не линейные шаги, в контентной области окна могут использоваться хлебные крошки.

§Расположение диалогового окна на странице

Диалоговое окно выравнивается по центру экрана по вертикали и по горизонтали.

При масштабировании вьюпорта позиционирование сохраняется, а размер диалогового окна уменьшается, если это не мешает контенту внутри.

Минимально допустимый отступ от верхнего и левого края экрана — 20 px.

Если окно не уместится во вьюпорт, отсутпы сверху и слева останутся фиксированными, а справа и снизу диалоговое окно выйдет за пределы экрана. Это нежелательное состояние, и рекомендуется проектировать диалоговое окно таким образом, чтобы на любом экране оно умещалось во вьюпорт, а отступы со всех сторон составляли не менее 20 px от края экрана.

§Закрытие окна

Помимо выполнения целевого действия, модальное окно можно закрыть следующими способами:

Если окно не является блокирующим, его можно закрыть следующими способами:

• По клику за пределы модального окна.
• По нажатии на клавишу Esc.

Кнопка «Отмена» и крестик — привычные элементы, так как они повсеместно используются в диалоговых окнах для закрытия. Клик за пределами модального окна помогает пользователю легче и быстрее закрыть его, так как не нужно целиться в первые два элемента. Нажатие на клавишу Esc позволяет закрыть окно без помощи мыши.

Поскольку взаимодействие предполагается только с диалоговым окном, то контент родительской страницы не должен прокручиваться.

§Защита от потери пользовательских данных

Из-за легкости закрытия модального окна есть вероятность сделать это случайно. Если в модальном окне пользователь выбирал только чекбоксы, то потерю таких данных проще восстановить, чем когда пользователь долго писал код или переписывал 12-значный VIN автомобиля. Таких ситуаций мы не должны допустить. При этом нельзя и мешать пользователю выйти из модального окна привычным для него образом.

Чтобы избежать ошибки потери данных, лучше использовать дополнительное окно подтверждения удаления данных. В этом случае пользователю нужно будет подтвердить действие.

Нужно ли при закрытии модального окна добавлять еще окно подтверждения, — стоит оценивать исходя из здравого смысла. При этом важно соблюсти баланс между безопасностью и возможным раздражением от слишком частых вопросов. Цель подтверждения — не потерять введенные пользователем данные, не мешая ему при этом выполнять сценарий.