Alert

С помощью Alert можно привлечь внимание пользователя и сообщить ему какую-либо важную информацию, не прерывая его работу.

§Когда использовать

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

§Типы

В зависимости от ситуации пользователю показываются разные типы (Type) Alert'ов:

• Danger используется, чтобы сообщить пользователю, что в настоящий момент невозможно продолжить работу согласно основному сценарию (к примеру, нет доступа к объекту) или дальнейшие действия пользователя могут привести к безвозвратной потере данных или ресурсов.
• Warning используется, чтобы сообщить пользователю, что дальнейшая работа может быть затруднена или второстепенный сценарий работы может быть недоступен.
• Success используется, чтобы проинформировать пользователя о статусе или каком-либо изменении в системе, имеющем положительную коннотацию (например, об успешном завершении длительной операции).
• Info используется для вывода рекомендаций по организации работы с системой, которые стоит показать в явном виде, или объявления о каких-либо дополнительных возможностях для пользователя в системе.
• Normal используется в основном для того, чтобы выделить какой-либо фрагмент текста, как то короткая справка, пример кода, результаты вычислений и пр.

Не следует подменять типы только из желания сильнее привлечь внимание пользователя – например, показывать важную справочную информацию в Alert с типом Warning или Error.

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

§Когда применять не стоит

Alert стоит применять экономно, потому что они притягивают внимание и могут отвлекать от выполнения основного сценария, особенно при неправильном выборе типа Alert.

• Не рекомендуется применять Alert для демонстрации ошибки, предупреждения или справки, связанной с отдельным полем в форме или диалоге. В таком случае лучше задействовать состояние Error у компонента поля или выводить сообщение простым текстом или текстом с иконкой рядом с полем.
• Не рекомендуется помещать несколько Alert типа Danger и Warning на одной странице (форме, диалоге), так как это затрудняет определение приоритета сообщений.
• Не следует применять Alert не по назначению, а, к примеру, для визуального выделения каких-либо блоков на странице: заголовков, полей в форме и т.п.
• Не следует применять Alert для подтверждения выполнения операций. Для этого применяется Dialog.
• Не следует применять Alert для отображения статуса операции, запущенной пользователем. Для этого применяется Toaster.

§Содержание

Обязательными в Alert являются описание и иконка. Кроме них Alert опционально может содержать заголовок (Title), кнопку закрытия (Close) и до трех дополнительных кнопок с действиями (Actions).

§Иконка

По умолчанию в Alert показывается иконка, соответствующая его типу. Однако в компоненте можно определить собственную иконку, оставив цвет фона неизменным. Для Alert типа Normal иконка является опциональной и по умолчанию не показывается.

§Текст

Текст заголовка и описания должен начинаться с заглавной буквы и быть по возможности максимально кратким. За дополнительной информацией лучше оправлять пользователя на отдельную страницу справки или сайта с помощью ссылок или кнопки “Помощь”, “Справка”, “Подробнее” и т.п.

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

Заголовок не должен содержать в конце точку.

§Кнопки

В зависимости от требований и ограничений дизайна дополнительные кнопки могут показываться справа от текста (Horizontal Layout) или под ним (Vertical Layout).

Вариант c кнопками, расположенными справа, можно выбрать, если количество кнопок и их наименования позволяют выделить достаточно места под описание и заголовок без лишних переносов строк. Как правило, если ширина Alert менее 500–600 px, лучше выбирать вертикальный вид.

Дополнительные кнопки по умолчанию используют стиль Normal, однако в зависимости от семантики сообщения они могут быть Action, Contrast-normal и Outline различных типов (Outline-info, Outline-danger и др.) Не следует делать все три кнопки с разными стилями. Action-кнопка может быть только одна, при этом нужно учитывать контекст страницы: есть ли уже на ней другие Action-кнопки.

В Alert предусмотрена кнопка “крестик”, которую следует показывать в случаях, когда пользователь может захотеть скрыть сообщение, т.к. посчитает его более неактуальным.

§Варианты

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

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

Если согласно дизайну не требуется активное привлечение внимания пользователя к Alert, рекомендуется использовать вариант с обводкой (Outlined View), который имеет такую же семантику по типу, что и вариант с заливкой (Filled View).