Модальные окна, тосты и подсказки: что и когда использовать

Короткий ответ

Все три паттерна показывают что-то поверх интерфейса, но различаются тем, насколько сильно они прерывают человека:

• Модальное окно блокирует остальной интерфейс. Используйте, когда без ответа пользователя продолжить нельзя или ошибка будет дорогой.
• Тост (toast, snackbar) появляется на несколько секунд и не мешает работать. Подходит для подтверждений: «Сохранено», «Письмо отправлено».
• Подсказка (tooltip) показывает короткое пояснение к элементу по наведению или фокусу. Нужна, когда информация полезна, но не обязательна.

Правило: чем сильнее паттерн прерывает, тем реже им стоит пользоваться.

Сравнение по срочности и прерыванию

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

Правила для модальных окон

• Одна задача. Модальное окно — не страница. Если внутри появляются вкладки и прокрутка, стоит сделать отдельный экран.
• Понятные кнопки. Вместо «ОК / Отмена» пишите действие: «Удалить проект» и «Оставить».
• Закрытие. Крестик, клавиша Esc и, для неразрушающих окон, клик по фону. Для окон с несохранёнными данными спрашивайте подтверждение.
• Без цепочек. Модальное окно поверх модального окна запутывает. Пересоберите сценарий.
• Не при загрузке страницы. Окно, которое появляется до того, как человек что-то сделал, воспринимается как помеха.

Правила для тостов

• Время показа зависит от длины текста: короткому сообщению хватит нескольких секунд, длинному нужно больше. Пауза при наведении и фокусе — обязательна.
• Действие «Отменить» в тосте лучше, чем модальное подтверждение для обратимых операций.
• Стопка. Новые тосты складывайте в одну зону, ограничивайте количество одновременно видимых, а повторяющиеся сообщения объединяйте.
• Расположение — постоянное: один угол или край экрана, не перекрывающий основные кнопки и навигацию на мобильных.
• Не для важного. Если сообщение нельзя пропустить, тост не подходит: он исчезнет, пока человек смотрит в другое место.

Правила для подсказок

• Показывайте по наведению и по фокусу с клавиатуры, скрывайте по Esc.
• Текст — одна короткая фраза. Без ссылок и кнопок внутри: до них трудно добраться.
• На сенсорных экранах наведения нет. Важное пояснение выносите в текст рядом или делайте отдельную иконку справки по тапу.
• Небольшая задержка перед появлением защищает от мелькания при движении мыши.

Доступность

Модальные окна:

• Фокус переходит внутрь окна при открытии и возвращается на вызвавший элемент при закрытии.
• Focus trap: Tab не должен уходить в контент под окном.
• Нужны role="dialog" (или alertdialog для критичных подтверждений), aria-modal="true" и заголовок через aria-labelledby.

Нативный элемент <dialog> с showModal() берёт на себя значительную часть этой работы:

<dialog id="confirm" aria-labelledby="confirm-title">
  <h2 id="confirm-title">Удалить проект?</h2>
  <form method="dialog">
    <button value="cancel">Оставить</button>
    <button value="delete">Удалить</button>
  </form>
</dialog>

Тосты размещайте в live-регионе (role="status" или aria-live="polite"), чтобы скринридер озвучил сообщение, не перехватывая фокус. Для ошибок — role="alert", но экономно.

Подсказки связывайте с элементом через aria-describedby, а иконки без текста дополнительно снабжайте aria-label.

Подробные шаблоны есть в WAI-ARIA Authoring Practices Guide.

Ошибки, которые раздражают пользователей

• Модальное окно с подпиской или скидкой через секунду после открытия сайта.
• Окно подтверждения на каждое мелкое действие — люди начинают нажимать «Да» не читая.
• Тост с ошибкой, который исчезает раньше, чем человек его прочитал.
• Подсказка как единственное место, где объясняется обязательное поле.
• Крестик закрытия, который трудно найти или в который сложно попасть на телефоне.
• Несколько тостов, перекрывающих друг друга и кнопки интерфейса.