Что такое тост-уведомление — и почему часть людей его вообще не увидит

Тост — это та самая плашка, которая выскакивает в углу: «Сохранено», «Скопировано», «Не удалось отправить». Появилась, повисела три секунды, растворилась.

А теперь смотри, что тут странного. Это единственный элемент интерфейса, который спроектирован исчезнуть раньше, чем его успеют прочитать. Всё остальное в приложении ждёт человека. Тост — нет.

Отсюда все его проблемы и все правила, как с ним обращаться.

Откуда взялось название

От тостера: сообщение «выскакивает» снизу или сбоку, как поджаренный хлеб. Название прижилось в Android, потом расползлось по вебу.

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

Отсюда первое правило: в тосте не должно быть ничего, что человек обязан прочитать. Если сообщение обязательное — это не тост.

Кто не увидит твой тост

Три группы людей, и это не редкие случаи.

Те, кто смотрел в другое место. Человек нажал кнопку внизу длинной страницы, а тост вылез в правом верхнем углу. Глаза были на кнопке. Тост появился и ушёл в слепой зоне.

Пользователи скринридеров — если ты не сделал одну вещь. Обычный блок, вставленный в DOM, скринридер молча проигнорирует: он читает страницу в своём темпе и не следит за тем, что где-то что-то изменилось. Чтобы сообщение прозвучало, нужна «живая область»:

<div id="toast-area" role="status"></div>

У role="status" неявно стоит aria-live="polite" и aria-atomic="true" — то есть «озвучь целиком, но дождись паузы». Ключевая тонкость: пустой контейнер должен лежать в разметке заранее, а текст — появляться внутри него. Если ты вставишь сразу весь блок вместе с role="status", озвучки может не быть.

И отдельно: тост, показанный в момент загрузки страницы, не озвучится вообще — скринридер к этому моменту ещё строит своё дерево и не считает такое сообщение обновлением.

Те, кто читает медленнее тебя. Три секунды — это норма для «Скопировано». Для фразы в двенадцать слов на неродном языке — нет.

Сколько держать на экране

Универсального числа нет, но есть рабочая шкала:

• 2–3 секунды — короткое подтверждение без действий: «Скопировано», «Сохранено».
• 5–7 секунд — сообщение с текстом, который надо прочесть.
• Не убирать вообще — если внутри есть кнопка («Отменить», «Повторить») или это ошибка.

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

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

Что класть в тост, а что — нет

Подходит: результат фонового действия («Файл загружен»), подтверждение мелочи («Ссылка скопирована»), обратимое действие с кнопкой отмены («Задача удалена — Отменить»).

Не подходит: ошибки в форме. Человек не может одновременно читать исчезающее сообщение в углу и искать поле, которое надо исправить. Разбор по критериям — в тост или ошибка под полем.

Не подходит: всё, что требует решения. «Удалить проект? Да / Нет» в тосте — это ловушка: человек не успеет ответить.

Не подходит: очередь из пяти тостов подряд. Частые перебивания мешают сильнее, чем помогают. Если событий много — сворачивай их в одно сообщение: «Загружено 5 файлов».

Как не сделать хуже

Несколько граблей, на которые наступают почти все:

• Тост поверх кнопки. На телефоне плашка снизу часто накрывает ровно ту кнопку, куда человек целился. Проверь на узком экране — заодно посмотри как сделать сайт удобным на телефоне.
• Крестик и таймер одновременно. Если тост уходит сам, крестик почти бесполезен: пока человек до него дотянется, тост исчезнет.
• Красный тост как единственный след ошибки. Он ушёл — и следа не осталось. Ошибку нужно дублировать там, где её можно прочитать спокойно.
• role="alert" на всё подряд. У этой роли режим assertive: скринридер перебьёт то, что читает сейчас. Для «Сохранено» это грубо. Оставь alert настоящим ошибкам, для остального бери status.

Тост и снекбар — это разное?

Практически нет. «Снекбар» — термин из Material Design, там это плашка внизу экрана, у которой может быть одна кнопка действия. Тост в Android изначально был совсем без кнопок. В вебе оба слова давно используют как синонимы.

Нужна ли библиотека?

Для одного сообщения — нет, хватит блока с role="status" и таймера. Библиотека начинает окупаться, когда появляются очередь, стопка, пауза при наведении и анимация ухода: это как раз те детали, которые в своей реализации обычно забывают.

Можно ли показывать тост об ошибке сети?

Можно, если рядом есть кнопка «Повторить» и этот тост не исчезает сам. Иначе получается худший вариант: действие не выполнено, сообщение об этом уже растворилось, а человек уверен, что всё прошло.