Sticky-кнопки и плавающие меню — где помогают, где раздражают
Sticky-кнопка "Заказать" в нижнем правом углу — стандартный приём для мобильных лендингов. Поднимает конверсию или мешает читать? Зависит от того, что прилипает, как часто появляется и не перекрывает ли реально нужный контент. Разбираем по типам элементов: что работает, что бесит, и где грань.
На лендинге студии висит большая красная sticky-кнопка "Заказать сайт за 10 000 ₽". Кликабельная, прилипает к низу экрана при скролле. Через месяц анализируем тепловую карту — кнопка собирает 14% всех кликов на странице. Хорошо? Смотрим записи Hotjar — на телефоне эта кнопка перекрывает половину текста в блоке цен, и пользователи активно её закрывают, листают вокруг. Цифры приличные, но раздражение тоже есть. Где грань?
Что вообще делают sticky
Прилипают к одной из сторон экрана при скролле. Самые частые:
- Шапка сайта (sticky header)
- Кнопка CTA "Заказать/Купить/Позвонить"
- Чат-виджет (Jivo, Битрикс24, WhatsApp-кнопка)
- Сайдбар с формой заявки
- Уведомления и куки-баннеры
- Прогресс-бар чтения, оглавление статьи
- Кнопка "Наверх" (back-to-top)
Каждое — со своим UX-эффектом. Не все одинаково полезны.
Где помогают
Sticky-header с логотипом, меню и поиском — хорошо для контентных сайтов и каталогов. Пользователь не должен скроллить наверх ради навигации. Условие — высота не больше 60-72 пикселя на десктопе, 48-56 на мобильном. Большая липкая шапка съедает экран.
Прогресс-бар и оглавление статьи — отличный UX для длинных лонгридов. У Medium, Substack, Хабра — реально помогает понять, сколько ещё читать, и быстро перейти к нужному разделу.
Sticky-кнопка "Купить" на карточке товара — на мобилке, когда пользователь долго листает описание и галерею. Чтобы не искать кнопку наверху или внизу.
Кнопка "Заказать звонок" на лендинге услуги — работает, если у вас один CTA и страница длинная. Пользователь решил → клик в моменте, не приходится искать.
Кнопка "В корзину" в админке/калькуляторе — когда пользователь много раз меняет параметры. Кнопка должна быть видна постоянно.
WhatsApp/Telegram-виджет — лёгкий, не перекрывает контент, ожидаемый паттерн. Если ваш канал коммуникации — мессенджеры, это работает.
Где раздражают
Чат-виджет, открывающийся сам через 10 секунд — главный антипаттерн. По всем тепловым картам — пользователи закрывают и больше не открывают. Если хотите чат, оставьте маленькую иконку, не разворачивайте автоматически.
Большая sticky-кнопка на мобильном внизу экрана, которая занимает 80 пикселей и перекрывает контент. На айфоне с safe-area внизу — это значит, что нижние 100 пикселей видимой области съедены постоянно. Прокрутка тяжёлая, контент не помещается.
Несколько прилипающих элементов сразу — sticky-header + sticky-кнопка + чат-виджет + куки-баннер + поп-ап "оцените сайт". На айфоне SE из 568 пикселей экрана остаётся 250 для контента. Сайт неюзабелен.
Sticky-баннер с акцией, который нельзя закрыть. Видел "−15% только сегодня", человек его прочёл, дальше он ему не нужен — но висит. Раздражает.
Sticky-сайдбар с формой, которая занимает треть экрана и закрывает основной контент. Видел такое на B2B-сайтах: левая колонка с предложением чего-то, правая колонка — основной текст. Сайдбар прилипает, текст справа сжимается до неюзабельной ширины.
"Наверх" на коротких страницах — на странице длиной два экрана кнопка "Наверх" не нужна. Появляется → жмут случайно → раздражение.
Cookie-баннер во всю высоту с десятью вкладками настроек согласия. Не sticky сам по себе, но фактически блокирует экран. Особенно когда нет кнопки "Принять всё одним кликом".
Технические правила
1. Не более 1-2 sticky-элементов одновременно. Header + один CTA. Или header + чат. Не всё сразу.
2. Учитывать safe-area-inset-bottom. На iPhone X+ есть жест "home" внизу. Sticky-кнопка должна отступать от низа на 12-16 пикселей плюс env(safe-area-inset-bottom).
3. Уменьшать высоту при скролле. Sticky-header лучше делать компактнее в свёрнутом состоянии — без логотипа полным размером, без подзаголовков. Так больше места под контент.
4. Кнопка закрытия — обязательна. Чат, баннер, всплывашка — всё, что не базовая навигация, должно закрываться одним кликом. Закрыто → не появляется снова в этой сессии.
5. Прятать на скролле вниз, показывать на скролле вверх. Поведение типа Twitter/Instagram — sticky-header исчезает, когда пользователь читает контент, появляется, когда хочет навигироваться. Освобождает экран без потери функционала.
6. На мобильном — приоритизировать. На десктопе можно позволить себе sticky-header + sticky-чат. На мобильном — одно из двух. И чат лучше как ссылка "написать в WhatsApp" внутри страницы, а не плавающий пузырь.
7. Z-index хаоса. Когда sticky-элементы перекрывают друг друга при открытии модалок — это типовая ошибка. Заранее назначьте систему: header z-50, sticky-button z-40, модалка z-100, кук-баннер z-90.
Как измерять
Микс из аналитики и UX-исследований:
- Heatmaps (Hotjar, Plerdy, Яндекс.Метрика "Карта кликов") — показывают, на что реально жмут.
- Session recordings — видно, когда пользователи закрывают sticky-элементы, как ведут себя при появлении.
- А/B-тест — самое надёжное. Сделайте 50% без sticky-кнопки и 50% с ней. Через 2-4 недели сравните конверсию и время на сайте.
- Скролл-карты — если контент после sticky-баннера никто не читает, баннер съел внимание.
Опытная цифра — хорошая sticky-CTA добавляет 5-15% к конверсии лида. Плохая (перекрывающая, без закрытия) — теряет 8-20% сессий через bounce.
Вывод
Sticky-элементы — мощный инструмент, но как нож: правильно использован — режет хлеб, неправильно — палец. Один CTA, разумная высота, кнопка закрытия, учёт safe-area, поведение на скролле — этих принципов достаточно. Если у вас уже три плавающие штуки на мобилке и пользователи жалуются на "тесный" сайт — это диагноз. Подключите нас, посмотрим тепловые карты, отрежем лишнее и оставим то, что реально приносит конверсии.