Всплывающие окна мешают работе с сайтом

Критичность проблемы: Высокая Сложность внедрения: Средняя | Встречаемость: Высокая

Захожу на сайт оплатить счёт. Первый экран темнеет, поверх — «Подпишитесь на новости». Крестик бледный, спрятан в угол. Я ищу цену, а смотрю на рекламу.
Закрываю. Снизу выезжает чат. Он перекрывает кнопку «Добавить в корзину». На мобильном чат прыгает, когда появляется клавиатура. Кнопка уходит за край.

Пролистываю описание. Сверху липкая плашка просит включить уведомления. Я случайно попадаю по ней, меня уносит в настройки браузера. Возвращаюсь. Страница сбрасывает позицию.

В корзине — всплывашка про акцию. Она шире модалки и перекрывает крестик. Я пытаюсь тапнуть — мимо. С третьей попытки попадаю, но уже забыл, какая доставка была выбрана.

Заполняю форму. Модалка просит разрешить куки. Фокус с поля исчезает, курсор пропадает. Я печатаю, а текст не появляется. Понимаю это спустя пару строк.

На странице оплаты — таймер «Скидка 10% за 10 минут». Экран скачет от анимации. Я читаю реквизиты, но взгляд снова на таймере. Сердце подскакивает, руки торопятся.

На блоге — подписка на рассылку после десяти секунд. Я ещё не понял, о чём статья, а меня уже зовут в письма. Закрываю. Через минуту прилетает повторно.

На форуме модалка просит оценить сервис. Я нажимаю «позже», но она всплывает при каждом первом переходе. Ощущение, что я в лифте, где заедает кнопка.

На планшете попап не влезает. Кнопка закрытия за границей экрана. Маска блокирует скролл. Я в ловушке, перезагружаю страницу.

С каждой новой всплывашкой я теряю нить. Я пришёл купить, а стал бороться с окнами. В конце просто выхожу.

Когда критично, а когда нет

Критично:

• Оформление заказа, оплата, авторизация, восстановление пароля.
• Банкинг, госуслуги, медицина, страхование, B2B-заявки и демо.
• Мобильные устройства, маленькие экраны, медленные телефоны.
• Пользователи с ограничениями по зрению/моторике; работа с клавиатуры.
• Когда попап перекрывает ключевые CTA, формы или нарушает фокус и скролл.
• Повторные попапы в сессии, таймеры, автопоявление без явного действия.

Не критично или почти не влияет:

• Постпросмотрные предложения после завершённого целевого действия.
• Мягкие, ненавязчивые баннеры внизу страницы, не блокирующие контент.
• Контентные сайты, где попап — ожидаемая часть сценария (например, age-gate).
• Когда показ строго по явному триггеру (клик «подписаться»), есть легко видимый закрывающий элемент и частота ограничена.

Что об этом говорят другие пользователи

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

Бесполезные ответы

• «Попапы бесят, как везде».
• «Я такое не люблю».
• «Сложно сказать, я не помню».

Полезные ответы

• «Хотел оплатить. На шаге “Доставка” всплыло окно про подписку, закрывало кнопку “Далее”, крестик мелкий. Потратил ~10 секунд на попадание. После закрытия фокус слетел с поля “Город”».
• «Читала описание товара. Снизу выехал чат и перекрыл “В корзину”. Клавиатура поднялась и сдвинула чат поверх кнопки закрытия. Пришлось скрывать клавиатуру, потом закрывать чат».
• «Во время ввода email модалка про куки забрала фокус. Нажал Enter — она закрылась, но форма очистилась. Пришлось вводить заново».
• «Попап акции шире экрана, крестик за пределами. Маска блокирует скролл. Только перезагрузка помогла».
• «На странице оплаты таймер скидки вибрирует и перетягивает внимание. Дважды вводила неверный CVV — отвлекалась на анимацию».

Решение проблемы

• Уберите блокирующие попапы с критических шагов: вход, корзина, доставка, оплата, формы.
• Показывайте окна только по явному действию пользователя. Нет действия — нет модалки.
• Ограничьте частоту: одно окно на сессию, без повторов после закрытия. Помните выбор.
• Делайте закрытие очевидным: крупный контрастный крестик, кликабельная маска, Esc, свайп вниз на мобильных.
• Не крадите фокус. Не сбрасывайте введённые данные. Не блокируйте скролл страницы, если окно не полноэкранное.
• На мобильных используйте не модалки, а некритичные, фиксированные нижние баннеры высотой до 56–64 px.
• Отключите анимации и автооткрытие на страницах с вводом платежных данных.
• Соблюдайте доступность: таб-цикл внутри модалки, aria-метки, фокус-ловушка, возврат фокуса после закрытия.
• Тестируйте на реальных устройствах и браузерах. Проверяйте перекрытия, высоту клавиатуры, безопасные зоны.
• Мерьте: процент закрытий, время до закрытия, всплытия в критических шагах, отказ от сессии после попапа. Удаляйте окна, которые не дают прироста цели.

Гипотезы для роста конверсии

• Если заменить модальное окно подписки на небольшой нижний баннер, то конверсия в добавление товара в корзину может увеличиться за счёт того, что кнопка «В корзину» не перекрывается.
• Если показывать предложение скидки только после клика «Купить», то конверсия в завершение заказа может увеличиться за счёт того, что внимание не рассеивается до выбора товара.
• Если отключить повторные попапы в одной сессии, то конверсия в заполнение формы может увеличиться за счёт того, что пользователь не сталкивается с повторным раздражением.
• Если сделать закрытие окна явным и крупным, то конверсия в оплату может увеличиться за счёт того, что пользователь быстрее возвращается к целевому действию.
• Если перенести чат-виджет так, чтобы он не перекрывал CTA на мобильных, то конверсия в клик по целевой кнопке может увеличиться за счёт того, что элемент всегда доступен.