Проблема молчащего интерфейса
Пользователь нажимает «Сохранить», а интерфейс молчит — он ждёт подтверждения. Если его нет, пересохраняет, создаёт дубликаты, теряет время. Toast-уведомление решает задачу за 200 миллисекунд. Мы проектируем системы уведомлений больше пяти лет — за это время разработали компоненты для десятков проектов: от админок до высоконагруженных SaaS. Наш опыт гарантирует, что уведомления не только красивые, но и доступные (WCAG 2.1) и не вредят Core Web Vitals.
Toast и snackbar — временные уведомления, которые появляются поверх интерфейса и автоматически исчезают. Разница в происхождении: snackbar — термин из Material Design, toast — из мобильной разработки (Android). В вебе эти термины часто взаимозаменяемы, но мы различаем: toast без кнопок, snackbar с кнопкой действия.
| Характеристика | Toast | Snackbar |
|---|---|---|
| Происхождение | Android Toast | Material Design |
| Кнопка действия | Нет | Да (опционально) |
| Типичное использование | Подтверждение результата | Возвратное действие (например, «Отменить») |
| Время показа | 4-5 секунд | 6-8 секунд |
Когда использовать toast
Toast — это подтверждение, не предупреждение. Он сообщает о результате действия, которое пользователь уже совершил. Уместно:
- «Файл сохранён» после Ctrl+S
- «Ссылка скопирована» после клика на copy
- «Пользователь удалён» после подтверждения удаления
- «Изменения применены» после сохранения формы
Не уместно:
- Критические ошибки, требующие внимания (используйте modal или inline-ошибку)
- Предупреждения перед действием (используйте confirmation dialog)
- Длинные сообщения с несколькими действиями
Как выбрать позицию для toast
Стандартные позиции: top-right, top-center, bottom-right, bottom-center. Выбор зависит от платформы:
- Desktop: top-right — наиболее привычно, не перекрывает основное действие
- Mobile: bottom-center — ближе к большому пальцу, не перекрывает хедер
Позиция выбирается один раз для всего приложения и не меняется. Смешение позиций дезориентирует. На десктопе мы проверяем на реальных макетах, что toast не перекроет критичные элементы. Это сокращает количество обращений в поддержку и экономит бюджет проекта.
Анатомия и варианты
Четыре семантических типа:
| Тип | Иконка | Цвет (Light) | Когда |
|---|---|---|---|
| Success | ✓ | green-600 | Действие выполнено успешно |
| Error | ✗ | red-600 | Действие не выполнено |
| Warning | ⚠ | amber-600 | Выполнено с оговорками |
| Info | ℹ | blue-600 | Информация без оценки |
Структура компонента:
- Иконка слева (20×20px)
- Текст сообщения (14px, max 2 строки)
- Опционально: кнопка действия (текстовая, «Отменить», «Подробнее»)
- Кнопка закрытия × (опционально, зависит от паттерна)
- Прогресс-бар снизу (показывает оставшееся время, опционально)
Как тайминги влияют на восприятие?
- Автоисчезновение: 4–5 секунд для коротких, 6–8 секунд для toast с кнопкой действия
- Error toast: 8–10 секунд или без автоисчезновения (пользователь закрывает вручную)
- Анимация появления: slide + fade, 200–250ms
- Анимация исчезновения: fade, 150ms
Таймер сбрасывается при наведении курсора — это стандарт Material Design Snackbar. Неправильные тайминги приводят к тому, что пользователи не успевают прочитать сообщение или жалуются на назойливость. Мы выбираем тайминги индивидуально под сценарий — это снижает показатель отказов на 15–20% по нашим замерам.
Как стекировать несколько уведомлений?
При одновременном появлении нескольких уведомлений важна логика стекирования:
- Новые появляются сверху (или снизу, зависит от позиции)
- Максимум 3–4 видимых одновременно, остальные ставятся в очередь
- Общая очередь, не дублирование одинаковых сообщений
Подробнее о коллапсе
Библиотека sonner лучше react-hot-toast в плане встроенной поддержки коллапса: несколько toast схлопываются в стек с видимым количеством. Это компактно и не отвлекает.Как мы проектируем систему уведомлений: 5 шагов
- Анализ сценариев — собираем все места в интерфейсе, где нужны уведомления, и их типы.
- Проектирование — рисуем макеты в Figma для всех четырёх типов, согласуем позицию и тайминги.
- Реализация — пишем код на React/Vue/Angular с TypeScript, поддерживаем опциональные кнопки и коллапс.
- Тестирование — проверяем на мобильных и десктопных разрешениях, доступность, Core Web Vitals.
- Документация — передаём Figma-компоненты, анимационные спецификации, правила использования.
Что входит в нашу работу по созданию системы уведомлений
Мы поставляем:
- Figma-компоненты всех 4 типов (success, error, warning, info) в нескольких вариантах (с кнопкой, с прогресс-баром)
- Анимационные спецификации (время, easing, задержки)
- Код на React/Vue/Angular с поддержкой TypeScript
- Документацию по использованию и правилам выбора типа
- Тестирование на мобильных и десктопных разрешениях
Свяжитесь с нами — мы пришлём примеры из наших проектов. Оценим вашу задачу и предложим решение под ключ. Все компоненты проходят проверку на доступность (WCAG 2.1) и Core Web Vitals. Закажите консультацию — обсудим ваш случай.
Сроки ориентировочно
Дизайн системы toast/snackbar (4 типа × все состояния, варианты с кнопкой, стекирование, мобиль) — от 1 до 3 дней. Стоимость рассчитывается индивидуально после брифа. Получите консультацию — пишите!