Как выбрать между баннером, попапом и встроенной формой
Баннер подходит для короткого необязательного сообщения, встроенная форма — для понятного ввода в ходе чтения, диалог — для отдельного действия с корректным открытием и закрытием. Начни с задачи страницы и результата кнопки. Один и тот же текст в разных форматах требует разного внимания, поэтому «попап заметнее» ещё не объясняет, зачем он нужен посетителю.
Сначала выбери действие, затем контейнер
Сформулируй действие одним глаголом: прочитать пояснение, сравнить варианты, подготовить данные, отправить вопрос. Затем уточни, сколько информации требуется прямо сейчас. Если нужно только открыть материал, форма с обязательными полями добавляет лишний этап. Если нужна структурированная заявка, узкий баннер не обязан вмещать её целиком.
Отдельно реши, можно ли прерывать исходную задачу. В каталоге человек может читать характеристики, на странице обращения — уже готовиться к вводу. В первом случае уместнее компактная ссылка или встроенное пояснение, во втором — сама форма. Право на прерывание не появляется только от длительности визита.
Google рекомендует не закрывать основное содержимое навязчивым рекламным слоем. Это поддерживает требование сохранять доступ к странице, но не определяет универсальный победивший формат и не обещает поисковый эффект.
Сравни три формата по их работе
| Формат | Сильная сторона | Что нельзя прятать за форматом | Приёмка |
|---|---|---|---|
| Баннер | Короткое предложение и один понятный переход | Важные условия предложения и назначение кнопки | Текст читается; кнопка открывает обещанное; блок не закрывает основное действие |
| Встроенная форма | Ввод расположен рядом с объяснением задачи | Зачем нужны данные и что произойдёт после отправки | Поля понятны; ввод и результат доступны в порядке чтения |
| Попап-диалог | Отдельное действие с собственным контекстом | Закрытие, статус и путь назад | Открытие обосновано; фокус, закрытие и возврат работают |
Встроенная форма хороша там, где к ней подводит содержание. Сначала объяснение результата и требований, затем поля. Если посетитель не понимает, что спрашивать, даже короткая форма остаётся преждевременной. Дай материал или возможность уточнить задачу, вместо того чтобы механически уменьшать поля.
Для настоящего модального диалога WAI-ARIA описывает переход фокуса внутрь, Tab в пределах диалога, Escape и возврат после закрытия. Формат требует такого поведения, а не только затемнения фона. Немодальная подсказка и модальный диалог — разные конструкции.
Проверь одно предложение в трёх местах маршрута
- На странице каталога баннер ведёт к списку исходных данных. Человеку не нужно вводить контакты для чтения списка.
- В конце подробного материала встроенная форма предлагает отправить уже подготовленный вопрос. Перед полями написано, что будет передано и какой ответ ожидается.
- По кнопке «Отправить вопрос» открывается диалог с тем же объяснением и формой. После закрытия человек возвращается к кнопке и материалу.
Во всех трёх случаях текст кнопки соответствует действию. Отличается место и объём взаимодействия. Для каталога задача может закончиться чтением списка; для обращения — подтверждённым приёмом вопроса. Считать все три варианта по одной доле отправок без учёта их задач некорректно.
Какой формат подготовить первым
Выбор формата по задаче
Сопоставить объём сообщения, готовность к вводу и допустимое прерывание.
Нужно короткое необязательное сообщение
Когда подходит. Содержание помещается в понятное предложение и ведёт к одному материалу или действию.
Ограничения. Высокая заметность не подтверждает пользу; баннер не должен скрывать страницу.
Следующий шаг. Подготовь компактный баннер или ссылку в содержимом. Проверь текст и обещанный переход.
Посетитель понимает задачу и готов вводить данные
Когда подходит. Объяснение уже дано; поля нужны для согласованного первого ответа.
Ограничения. Короткая форма не гарантирует обращение, а обязательность каждого поля требует основания.
Следующий шаг. Размести встроенную форму рядом с объяснением. Пройди ввод, ошибку и подтверждённый результат.
Нужно отдельное действие с временным вниманием
Когда подходит. Посетитель явно открывает форму или выбор, который не помещается в текущем месте.
Ограничения. Диалог требует управления фокусом и возврата; автоматическое прерывание должно быть обосновано.
Следующий шаг. Подготовь диалог с понятным заголовком и закрытием. Проверь весь путь без мыши и на телефоне.
Короткое необязательное сообщение: начни с баннера или ссылки. Готовый понятный ввод: расположи форму рядом с объяснением. Отдельное действие по инициативе посетителя: используй диалог с корректным фокусом, закрытием и возвратом. Заметность не заменяет пользу, краткость — смысл полей, диалог — приёмку поведения.
Проверь путь после выбора формата
- Без взаимодействия с предложением можно выполнить основную задачу страницы.
- Кнопка приводит к обещанному действию, а не к неожиданному сбору контактов.
- В форме понятны обязательные данные, ошибки и результат отправки.
- Диалог можно закрыть и продолжить прежнюю задачу; клавиатурный путь проверен.
- На узком экране содержание, кнопки и закрытие доступны; длинный текст не вытесняет действие.
- Другие плавающие элементы не создают второе препятствие.
В готовых решениях и конструкторе Кирпича доступны разные виды содержания и настройка действия. Выбранный пример нужно адаптировать под свой маршрут, а собственный код и внешние медиа — проверять отдельно. Название шаблона не подтверждает пригодность для конкретной страницы.
Источники и документация
- Chats, Posts, and Banners FAQs · проверено 11.10.2026
- Avoid intrusive interstitials and dialogs · проверено 11.10.2026
- Dialog (Modal) Pattern · проверено 11.10.2026
- Аналитика с ИИ для B2B-сайтов · проверено 11.10.2026