Уведомление об успешном действии должно подтвердить результат, не отвлекая от следующего шага. Для коротких фоновых операций обычно подходит ненавязчивый тост; для важных или требующих дальнейшего действия результатов - сообщение, остающееся на экране. Выбирайте текст, место и длительность показа по важности события, контексту и доступности интерфейса.
Опорные принципы спокойного подтверждения
- Показывайте уведомление только после того, как действие действительно завершено.
- Соотносите заметность сообщения с важностью результата и возможными последствиями.
- Используйте короткий текст, который называет результат, а не просто сообщает об успехе.
- Не перекрывайте элементы, нужные для продолжения задачи.
- Проверяйте отображение и доступность на разных экранах и при увеличенном размере текста.
Выберите момент и способ показа уведомления
Краткое уведомление подходит, если результат очевиден, не требует реакции и пользователь может сразу продолжить работу: например, после сохранения черновика. Постоянное сообщение уместно, когда важно сохранить контекст результата, показать следующий шаг или дать возможность отменить действие.
Не показывайте подтверждение до завершения операции или при неопределённом результате. Если запрос ещё обрабатывается, используйте отдельное состояние ожидания, а при сбое - ясное сообщение об ошибке. Такой подход помогает согласовать визуальную заметность с важностью действия и поддерживает продуманный дизайн интерфейса.
Сформулируйте подтверждение без лишних слов
Перед настройкой определите, какой результат нужно подтвердить, где пользователь находится после действия и требуется ли ему что-то делать дальше. Для работы понадобятся макеты или рабочая сборка продукта, доступ к настройкам текста и компонентов, а также возможность проверить сценарий на нужных устройствах.
Хорошее подтверждение называет совершённое действие и, если это полезно, его объект: "Черновик сохранён". Избегайте расплывчатого "Готово", если без контекста непонятно, что именно произошло. В дизайн UX UI включите уведомление в общие правила текста и поведения компонентов.
Разместите сообщение так, чтобы оно не перекрывало задачу
- Зафиксируйте событие успеха. Определите, какой сигнал от системы означает завершение операции. Не связывайте показ сообщения только с нажатием на элемент: действие может не выполниться.
- Выберите тип сообщения. Используйте тост для короткого подтверждения без обязательного продолжения. Оставьте постоянное сообщение, если результат важен для текущей страницы, должен быть доступен дольше или содержит следующий шаг.
- Назначьте место показа. Размещайте уведомление рядом с контекстом действия или в предсказуемой области интерфейса. Проверьте, что оно не перекрывает кнопки, поля ввода, системные панели и важные сведения.
- Напишите конкретный текст. Назовите завершённое действие простыми словами. Добавляйте ссылку или команду только тогда, когда они помогают продолжить работу или отменить результат.
- Согласуйте визуальную подачу. Используйте цвет, значок и анимацию как вспомогательные сигналы, а не как единственный способ сообщить об успехе. Сохраните читаемый контраст и единообразие с другими состояниями продукта.
- Встройте поведение в сценарий. Настройте закрытие, повторный показ и реакцию при новой операции. Уведомление не должно появляться повторно из-за обновления страницы или повторной доставки одного и того же события.
Быстрый режим
- Убедитесь, что операция завершилась успешно.
- Выберите тост для краткого подтверждения или постоянное сообщение для важного результата.
- Напишите, что именно выполнено, и разместите текст вне зоны необходимых действий.
- Проверьте доступность, повторные события и отображение на разных экранах.
Настройте длительность показа и доступность
Проверьте сценарий по списку перед выпуском или передачей макета в разработку интерфейса сайта:
- Сообщение появляется только после подтверждённого успеха.
- Текст понятен без опоры только на цвет или значок.
- Уведомление не закрывает элементы, которые нужны для следующего действия.
- Краткий тост остаётся видимым достаточно долго для спокойного прочтения.
- Если сообщение требует реакции, оно не исчезает прежде, чем пользователь сможет её выполнить.
- Текст и кнопки остаются читаемыми при увеличении масштаба и размера шрифта.
- При появлении сообщения фокус клавиатуры не перемещается неожиданно.
- Для вспомогательных технологий предусмотрено доступное объявление результата без лишнего повторения.
- На узком экране сообщение не обрезается и не перекрывает системные элементы.
Уберите повторные сигналы и лишнюю анимацию
- Не показывайте одинаковое подтверждение одновременно в нескольких местах.
- Не дублируйте уведомление при повторном получении одного и того же события.
- Не используйте звуковой сигнал для каждого обычного успешного действия.
- Не полагайтесь только на зелёный цвет: добавьте понятный текст.
- Не запускайте резкую или длительную анимацию, которая отвлекает от задачи.
- Не скрывайте сообщение по таймеру, если внутри есть действие, которое пользователь должен успеть выполнить.
- Не сообщайте об успехе, пока операция ещё выполняется или её результат неизвестен.
Проверьте сценарий на ошибках и разных экранах
- Тост. Выбирайте для короткого, обратимого или очевидного результата, который не требует ответа. Подходит для подтверждения сохранения, если контекст действия остаётся понятным.
- Постоянное сообщение на странице. Используйте, если результат влияет на дальнейшую работу, должен оставаться в контексте или содержит полезную ссылку.
- Подтверждение рядом с элементом. Подходит, когда пользователю важно увидеть, какое именно поле или элемент изменился, а общее уведомление было бы слишком неопределённым.
- Состояние ожидания с последующим результатом. Выбирайте для операций, которые не завершаются сразу: сначала показывайте ход обработки, затем - успех или ошибку, не смешивая эти состояния.
Проверьте выбранный вариант на телефоне, широком экране, при навигации с клавиатуры и при повторном запуске действия. В дизайне мобильного приложения особенно важно учитывать ограниченное место и то, что системные панели могут занимать часть экрана.
Разбор спорных решений для уведомлений об успехе
Когда выбрать тост, а не постоянное сообщение?
Выбирайте тост, если успех не требует ответа, а пользователь может продолжить без сохранения сообщения на экране. Постоянное сообщение лучше, когда нужно оставить контекст или предложить следующий шаг.
Нужно ли добавлять значок успеха?
Значок может ускорить распознавание, но не должен заменять понятный текст. Сообщение должно оставаться ясным и без опоры только на цвет или форму значка.
Можно ли закрывать уведомление автоматически?
Краткое уведомление без обязательного действия можно скрывать автоматически после достаточного времени для прочтения. Сообщение с кнопкой или важной информацией лучше оставить видимым.
Где показывать подтверждение сохранения?
Разместите его рядом с формой или в устойчивой области интерфейса, где оно не перекрывает поля и команды. Выбор зависит от того, нужен ли пользователю локальный контекст или общее подтверждение страницы.
Нужно ли озвучивать уведомление для скринридера?
Да, результат должен быть доступен вспомогательным технологиям, но объявление не должно повторяться без необходимости. Проверьте поведение на реальном сценарии с используемыми средствами доступности.
Что показывать, если операция выполняется долго?
Сначала покажите состояние обработки, а уведомление об успехе - только после подтверждённого завершения. Если операция завершилась ошибкой, сообщите об этом отдельно и объясните, что пользователь может сделать дальше.