Система нотификаций и toast'ов

Действуй как senior UX-инженер. Большинство систем нотификаций — это спам, который юзеры учатся игнорировать. Цель: каждое сообщение либо несёт ценность, либо его не должно быть.

Продукт: {{product_type}} Плотность действий: {{actions_density}}

Таксономия — 6 типов (не больше)

Не плодить типов. «Notice», «Alert», «Banner-info» — это просто Info или Warning. Один тип — один паттерн.

Когда НЕ показывать toast

• Действие очевидно выполнилось (юзер видит результат: новая строка появилась, кнопка стала чек-маркой). Toast — избыточен.
• Юзер сам инициировал переход — он на другой странице, успех виден.
• Каждое сохранение в autosave-режиме. Используй индикатор «Saved» в углу, не toast.

Правило: toast только когда (а) действие не видно глазом, или (б) есть последствие, о котором надо знать («Email sent», «File uploaded», «Removed — undo»).

Позиция

• Desktop: top-right или bottom-right. Top-right — для системных и редких; bottom-right — для рабочих. Bottom-center — для критичных alerts.
• Mobile: top (с safe-area) или bottom (если есть навигация — bottom может перекрывать).
• НЕ menu top-center в полную ширину — крадёт пространство и блокирует контент.

Один продукт = одна позиция. Не смешивай.

Lifetime

• Auto-dismiss (success/info): 3-4 секунды. Достаточно прочитать. Hover на toast — pause таймера.
• Manual-dismiss (error/warning): ждёт действия или X.
• Persistent (system): пока причина актуальна. После решения — удаляется сама.

Pause on hover — обязательно. Юзер может медленно читать.

Stacking

• Максимум 3-5 toast'ов одновременно. Если больше — старые исчезают (FIFO) или сворачиваются («3 more»).
• Новые добавляются с нижнего края (если выравнивание сверху → snake вниз; если снизу → snake вверх).
• Анимация: slide-in 150-200ms, slide-out 150ms. Без bounce.
• Группировка похожих: «3 files uploaded» вместо 3 отдельных тостов одного типа в течение 2 секунд.

Actions внутри toast

• 0 actions — auto-dismiss, читай и забудь.
• 1 action — обычно Undo (rate-limited window: 5-10 сек). Кнопка справа от текста.
• 2 actions — редко. Если нужны 2 — это уже modal или drawer, не toast.
• «View details» link — окей для ошибок, ведёт в лог / в детали объекта.

A11y (обязательно)

• Container — aria-live="polite" для info/success, aria-live="assertive" для error/warning.
• Toast — role="status" (info/success) или role="alert" (error/warning).
• Кнопка dismiss — aria-label="Dismiss notification".
• При появлении — screen reader зачитывает текст.
• При focus на toast — disable auto-dismiss до blur.

Состояния и edge cases

• Offline: persistent banner («You're offline. Changes will sync when online.»). Не toast.
• Action requires undo: toast «Item removed» с кнопкой Undo. Если юзер делает следующее действие — undo-window закрывается.
• Loading с прогрессом: progress bar внутри toast (Upload 3 of 5 files, 60%). По завершению — превращается в success или error.
• Bulk-action: один toast «5 items deleted» (не 5 тостов).
• Background process: persistent toast с возможностью свернуть, не блокирующий.

Формат вывода

Карта типов

Markdown-таблица: Тип | Когда использовать | Lifetime | Position | Action

Правила «когда НЕ показывать»

3-5 пунктов, специфичных для продукта.

Позиция и stacking

• Position:
• Max stack:
• Direction:
• Animation timing:
• Grouping rules:

Spec для каждого типа

Каждый тип:

• Структура (иконка + текст + action)
• Tone of voice (Success: «Done.» vs «Successfully completed your action!» — выбери стиль)
• Примеры из домена (3-5 настоящих сообщений)

A11y чеклист

ARIA-роли, live regions, keyboard, focus.

Эскалация

Когда toast → banner, когда banner → modal. Простые правила.

Anti-patterns (НЕ делать)

• ❌ Зелёный toast на каждый клик. «You clicked Save» — не информация. Save видно по UI.
• ❌ Error-toast с одной строкой «Error» без описания и без action. Юзер не знает что делать.
• ❌ 6 типов «warning»: amber-warning, orange-info, yellow-notice. Один цвет — один тип.
• ❌ Auto-dismiss для error. Юзер моргнул — упустил информацию.
• ❌ Toast вместо очевидного UI-feedback. Если кнопка превратилась в чек-марку, toast «Saved» — лишний.
• ❌ Toast, который перекрывает primary action. Двинь его или дай safe-area.
• ❌ Mobile-toast снизу поверх bottom-bar. Сдвинь выше или используй top.
• ❌ Stacking без лимита. 12 тостов на экране — все игнорируются.
• ❌ Toast без aria-live. Незрячий юзер не узнаёт о результате.