Значок онлайн-консультанта перекрывает важную информацию

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

На многих сайтах в правом нижнем углу висит значок онлайн‑консультанта. Это круглая кнопка или пузырь с текстом. Он фиксирован на экране и едет вместе со страницей.
Проблема начинается, когда значок закрывает важные элементы. Кнопку «Купить». Цену. Поле формы. Фильтр или чекбокс. Пользователь тянется к цели, а на пути — чужой интерфейс.

На мобильных это особенно заметно. Экран маленький, отступов нет, палец большой. Значок попадает ровно на область, куда мы привыкли нажимать: нижние кнопки, вкладки, «Далее».

Пузырь может сам раскрываться. Он перекрывает полэкрана, перетягивает фокус, сдвигает контент. Человек теряет контекст и забывает, где был.

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

Крестик закрытия мелкий или прячется. Нажатие мажет. Возникает раздражение: «Сайт мешает мне, значит, ему всё равно на меня».

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

В корзине и на оплате перекрытие особенно опасно. Любая помеха здесь равна потере денег. Человек уходит, потому что не видит поле «Промокод» или кнопку «Оплатить».

Людям с особенностями зрения и моторики ещё сложнее. Фокус клавиатуры прыгает в чат. Экранный диктор зачитывает лишнее. Путь по странице рвётся.

На десктопе проблема тоже есть. В сервисах и кабинетах значок ложится на таблицы, строки с действиями, на пагинацию. Менеджер не может нажать «Экспорт», потому что там сидит чат.

Когда проблема критична, а когда нет

Критично:

• Перекрывает CTA: «Купить», «Оформить», «Продолжить», «Оплатить».
• Закрывает цену, характеристики, промокод, варианты товара.
• Мешает воронке: корзина, оформление, оплата, регистрация.
• На мобильных и маленьких экранах, особенно в первом экране.
• Авто‑раскрытие виджета, нет явной и крупной кнопки закрытия.
• Перекрывает системные баннеры (cookie, ошибки, подтверждения).
• Залезает на фиксированный футер/навигацию, формы, фильтры.
• У пользователей высокое намерение купить и ограниченное время.

Не критично:

• Виджет не перекрывает интерактивные элементы и ключевой контент.
• Появляется внизу страниц чтения: блог, справка, FAQ.
• На широких экранах с достаточными полями и отступами.
• Виджет в компактном состоянии, легко скрывается, не авто‑открывается.
• Отключён на критических шагах (корзина, оплата) и в модалках.

Что говорят пользователи

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

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

• «Да вроде норм, не заметил ничего.»
• «У вас всё плохо, переделайте сайт.»
• «Там какая‑то круглая штука мешала, не помню где.»
• «Бесит этот чат. Просто бесит.»
• «Не получилось, я ушла. Причину не скажу, некогда.»

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

• «Каталог /smartphones, iPhone 15. Android 12, Chrome, экран 360×800. Виджет закрывает фильтр “Память” и кнопку “Применить”. При скролле вниз значок остаётся поверх.»
• «Страница корзины на десктопе, Windows 11, Chrome. Виджет перекрывает поле “Промокод” справа внизу. Крестик мелкий, не попадаю с первого раза.»
• «Оформление заказа на iPhone 12, Safari. Когда появляется клавиатура, значок нависает над кнопкой “Оплатить Apple Pay”, пришлось несколько раз сворачивать чат.»
• «Личный кабинет, раздел “Счета”. MacBook, Safari. Пузырь чата закрывает пагинацию таблицы и кнопку “Экспорт CSV”.»
• «Карточка товара, мобильная версия. Виджет сам раскрылся и закрыл цену и блок доставки. Крестик был под моим системным жестом — случайно уехала назад.»

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

• Определите критические зоны. Список: CTA, цены, формы, фильтры, пагинация, фиксированные хедер и футер, баннер cookie/конфиденциальность, блок оплаты, модальные окна.
• Закрепите безопасное положение. Нижний правый угол. Отступ: 16–24 px на десктопе, 12–16 px на мобильных. Учитывайте системные зоны: safe-area на iOS, высоту клавиатуры, высоту фиксированного футера.
• Введите антиколлизии. Скрипт проверяет пересечение значка с ключевыми селекторами и сдвигает виджет в свободную зону. При появлении клавиатуры — поднимает виджет выше. В модалках — не перекрывает окно.
• Управляйте слоями. z-index виджета ниже модалок, подсказок и системных баннеров. Кнопка закрытия — не меньше 44×44 px, видна всегда. Закрытие по Esc и по тапу вне виджета.
• Отключите авто‑раскрытие. Старт — компактная иконка без автопоказа. Не крадите фокус при загрузке. Не озвучивайте виджет скринридером, пока он не открыт пользователем.
• Уберите виджет с критических шагов. Не показывайте в корзине, на оформлении и оплате. Там важнее чистый путь.
• Сохраняйте состояние. Если человек закрыл виджет, не открывайте его повторно в этом визите. Храните флаг в sessionStorage.
• Проведите кросс‑платформенные тесты. Мобильные и десктопные браузеры, разные брейкпоинты, портрет/ландшафт. Сценарии: каталог, карточка, корзина, оплата, модалка, клавиатура.
• Введите чек‑лист приёмки. Виджет не перекрывает CTA, цену, формы, системные плашки; крестик доступен; фокус не прыгает; таб‑порядок корректный; читабельно на 320 px.
• Настройте мониторинг. События: показ, раскрытие, закрытие, клики по крестикам, rage‑clickи внизу экрана, выходы с критических шагов. Алерт при росте ошибок и жалоб.
• Выпустите по фичефлагу. Постепенно, с откатом при проблемах и логами.

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

• Если отключить авто‑раскрытие виджета и оставить только компактную иконку, то конверсия в клик по CTA может увеличиться за счёт того, что ничто не закрывает кнопку в ключевой момент.
• Если скрыть виджет на шагах корзины и оплаты, то конверсия в успешное оформление может увеличиться за счёт того, что путь пользователя остаётся чистым и предсказуемым.
• Если сместить виджет из зоны нижних CTA и учесть safe‑area на мобильных, то конверсия в добавление в корзину может увеличиться за счёт того, что палец попадает по кнопке без помех.
• Если показывать виджет только после 30 секунд бездействия, то конверсия в просмотр карточек может увеличиться за счёт того, что виджет не перебивает активное действие.
• Если ограничить частоту появления виджета в визите и запоминать закрытие, то конверсия в целевые события может увеличиться за счёт того, что снижается раздражение и когнитивная нагрузка.

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

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