Дизайн и UX cookie-баннера: как оформить согласие, типичные ошибки и отказ пользователя

Дизайн cookie-баннера — это не оформление, а юридический вопрос. Часть 1 статьи 9 152-ФЗ требует, чтобы согласие было конкретным, предметным, информированным, сознательным и однозначным, и именно вёрстка решает, выполняется требование или нет: где кнопка отказа, что написано на кнопках, что происходит после отказа, загружаются ли счётчики до выбора. Ниже — рабочий макет первого экрана, поведение баннера при отказе, десять ошибок, которые встречаются чаще всего, и способ проверить свой баннер за пять минут.

Проверить бесплатно, что сайт грузит до согласия посетителя ←

Что в дизайне баннера имеет юридическое значение?

Отдельного закона о cookies в России нет: слово cookie в 152-ФЗ не встречается, требований к размеру шрифта и цвету кнопок тоже. Но у баннера есть ровно одна задача — получить согласие, соответствующее статье 9 152-ФЗ, и по каждому признаку из неё дизайн либо помогает, либо мешает.

Последняя строка — самая частая. Формулировка «продолжая пользоваться сайтом, вы соглашаетесь» не создаёт согласия: посетитель не совершал никакого действия, из которого следует выбор. Про предустановленную галочку и то, как она выглядит при проверке, есть отдельный разбор — «Предустановленная галочка: почему это нарушение».

Как устроен первый экран баннера?

Рабочий минимум, который помещается в один экран и не требует прокрутки:

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

Что стоит убрать из макета:

1. затемнение страницы, не снимаемое ничем, кроме согласия;
2. кнопку «Отклонить» в виде серой текстовой ссылки рядом с зелёной кнопкой согласия;
3. таймер обратного отсчёта и фразы вроде «баннер закроется через 5 секунд» — это давление, а не выбор;
4. повторный показ баннера при каждом переходе по сайту.

Готовый макет с кодом, который реализует эту схему, разобран в статье «Cookie-баннер 152-ФЗ: opt-in согласие и JS-код», а разбивка по категориям — в статье «Классификация cookies и их правовой статус».

Как баннер должен вести себя на мобильном?

Значительная часть посетителей приходит с телефонов — и именно на узком экране баннер чаще ведёт себя не так, как задумывал дизайнер.

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

Что делать, если пользователь отказался от cookies?

Отказ — обычный, штатный сценарий, а не сбой. Что должно произойти:

Аналитика и маркетинг не загружаются. Это главное. Баннер, после отказа от которого счётчик всё равно отрабатывает, хуже отсутствия баннера: он документирует, что оператор знал о необходимости согласия и обошёл её. Как технически отложить загрузку скриптов, описано в статье «Блокировка скриптов до согласия».

Сайт продолжает работать. Строго необходимые cookies — сессия, корзина, защита форм — работают на основании статьи 6 152-ФЗ и от согласия не зависят, так что отказ от аналитики технически ничему не мешает. Прямой нормы «не закрывать контент» в 152-ФЗ нет, но баннер, блокирующий чтение до согласия, делает согласие условием доступа — а значит, вынужденным.

Решение запоминается. Отказ сохраняется так же, как и согласие, и баннер не появляется на каждой странице. Хранить стоит не только «да/нет», но и состав категорий: при добавлении нового стороннего сервиса вопрос придётся задать заново.

Остаётся возможность передумать — в обе стороны. Постоянная ссылка «Настройки cookie» в подвале решает сразу две задачи: посетитель, отказавшийся случайно, может согласиться, а согласившийся — отозвать согласие. Право отзыва прямо предусмотрено частью 2 статьи 9 152-ФЗ, и для cookie оно реализуется именно этой ссылкой.

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

Какие ошибки в настройке баннера встречаются чаще всего?

Последняя строка — следствие требования оформлять согласие отдельным документом, действующего с 1 сентября 2025 года; нарушение это по-прежнему массовое. Подробный разбор — в статье «Пакетное согласие: одна галочка на всё больше нельзя». Что именно из этого списка видит автоматизированный мониторинг регулятора и какие составы КоАП при этом применяются, разобрано в статьях «Штраф за cookie без согласия» и «Изменения в 152-ФЗ в 2026 году и полномочия РКН».

Как хранить доказательство согласия?

Часть интерфейса, которой у большинства баннеров нет вовсе. Решение посетителя сохраняется в его же браузере — и на этом всё. Между тем подтверждать, что согласие получено, придётся оператору, а не посетителю: запись в чужом браузере не доказательство, она стирается вместе с историей и никак не связана с вашей стороной.

Что стоит записывать на сервере в момент выбора:

• отметку времени с часовым поясом;
• состав выбранных категорий — не «согласен», а какие именно переключатели были включены;
• версию текста баннера и политики, которые показывались в этот момент: тексты меняются, а спор может касаться прошлогоднего состояния;
• идентификатор события и псевдонимизированный признак посетителя (условный идентификатор, а не обезличенные данные), по которому запись можно сопоставить с его дальнейшими действиями: сам журнал при этом остаётся обработкой персональных данных;
• источник действия — кнопка «Принять все», «Отклонить все» или сохранение настроек.

Чего в журнале быть не должно: избыточных данных о посетителе. Журнал согласий — это доказательство факта, а не ещё одна база профилей, и сам он тоже подчиняется принципу минимизации.

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

Тот же журнал решает и вторую задачу — обработку отзыва. Отзыв согласия по части 2 статьи 9 152-ФЗ фиксируется так же, как и само согласие, иначе доказать, что требование исполнено, невозможно.

Мешает ли правильный баннер конверсии?

Довод «уберём кнопку отказа, иначе потеряем данные аналитики» стоит разобрать честно, потому что он и есть настоящая причина большинства кривых баннеров.

Данных действительно станет меньше: часть посетителей откажется. Но платить за это приходится не деньгами, а составом риска. Обработка без согласия — это часть 1 статьи 13.11 КоАП, от 150 до 300 тысяч рублей для юридического лица. Более тяжёлая часть 2 (от 300 до 700 тысяч, повтор по части 2.1 — от 1 до 1,5 миллиона) написана про случаи, когда закон требует согласия именно в письменной форме: специальные категории данных, биометрия, трансграничная передача. Для аналитических cookie письменная форма не обязательна, поэтому типичный состав — часть 1. При этом сам факт нарушения виден снаружи: чтобы его зафиксировать, достаточно открыть сайт и посмотреть сетевые запросы до нажатия любой кнопки.

Разумный компромисс — не прятать отказ, а сделать согласие осмысленным: объяснить в одной строке, что именно даёт аналитика сайту, и не просить лишнего. Категория «маркетинговые cookies» на сайте без рекламы — это отказ, который вы спровоцировали сами.

Как проверить свой баннер за пять минут?

• Откройте сайт в приватном окне, включите панель разработчика на вкладке «Сеть» и ничего не нажимайте: если запросы к счётчикам и пикселям уже пошли — баннер не работает, какой бы он ни был.
• Нажмите «Отклонить все» и обновите страницу: запросы не должны появиться, баннер не должен вернуться.
• Перейдите на три-четыре внутренние страницы: баннер не должен появляться снова.
• Найдите в подвале способ изменить решение. Не нашли — его нет и у посетителя.
• Откройте сайт на телефоне: видно ли содержимое, попадаете ли пальцем в «Отклонить».
• Проверьте ссылку на политику и на текст согласия — обе должны открываться.

Первый пункт наш сканер проверяет автоматически: бесплатная проверка показывает, какие трекеры загружаются до любого взаимодействия, есть ли баннер и корректно ли устроены чекбоксы в формах — ровно то, что видно и автоматизированному мониторингу. Поведение после нажатия «Отклонить все» придётся проверить руками: по кнопкам сканер не кликает.

→ Проверить сайт на нарушения 152-ФЗ (бесплатно, 30 секунд)

Что читать дальше

• Cookie-баннер 152-ФЗ: opt-in согласие и готовый JS-код — реализация схемы из этой статьи
• Блокировка скриптов до согласия — как отложить загрузку трекеров
• Классификация cookies и их правовой статус — какие категории выводить в баннер
• Cookie-баннер для интернет-магазина — что нельзя блокировать в магазине
• Статья 15 152-ФЗ: данные для маркетинга и рассылок — согласие на продвижение, отдельное от cookie

Источники: Федеральный закон №152-ФЗ «О персональных данных» — статьи 6, 9, 18.1; КоАП РФ — статья 13.11.