Виджет на мобильном сайте: как сохранить доступ к странице

Определи, чему виджет не должен мешать

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

Google Search Central рекомендует сохранять доступ к содержимому и избегать рекламных промежуточных экранов, которые его перекрывают. Это основание не заслонять страницу навязчивым предложением, а не обещание роста позиций после уменьшения окна.

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

Выбери формат по объёму действия

Модальное окно временно ограничивает работу с остальной страницей. В шаблоне WAI-ARIA фокус перемещается внутрь диалога, Tab остаётся внутри, Escape закрывает окно, а после закрытия фокус обычно возвращается к вызвавшему элементу. Видимая кнопка закрытия также нужна. Просто нарисованный поверх страницы прямоугольник этим поведением не обладает.

Немодальная подсказка не должна неожиданно забирать фокус или превращаться в невидимое препятствие для клавиатуры. По критерию W3C Focus Not Obscured элемент с клавиатурным фокусом не должен быть полностью скрыт созданным автором содержимым. Закреплённый баннер проверяй по всей странице, а не только в положении сразу после загрузки.

Проверь ввод при открытой экранной клавиатуре

Узкое окно браузера полезно для проверки ширины, но не заменяет телефон с экранной клавиатурой. Открой форму на устройстве, переведи фокус в нижнее поле и попробуй закончить ввод. Нужно видеть текущее поле, его подпись, ошибку и путь к отправке или закрытию. Не считай тест пройденным только потому, что форма помещалась до ввода.

1. Открой предложение через предусмотренный вход и убедись, что состояние страницы понятно.
2. Перейди в каждое поле. С открытой клавиатурой проверь видимость текущего поля и возможность добраться до остальных.
3. Введи длинное, но допустимое значение. Текст и подпись не должны делать кнопку недоступной.
4. Вызови ошибку валидации. Проверь, что понятно, какое поле исправить, и введённые данные не исчезли без необходимости.
5. Проверь неуспешную отправку. Она не должна превращаться в экран «Заявка принята».
6. После подтверждённой отправки проверь понятное завершение и закрытие.
7. Закрой диалог и продолжи основную задачу на странице с ожидаемого места.

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

Проверь увеличение текста и узкое пространство. W3C Reflow описывает адаптацию содержимого без потери информации и функций; отдельные виды двумерного содержимого имеют исключения. Для обычного предложения и формы практическая цель проста: текст читается, кнопки доступны, горизонтальная прокрутка не становится обязательным способом добраться до действия.

Составь матрицу состояний, а не один удачный скриншот

Зафиксируй устройство, браузер, размеры области, масштаб и состояние виджета. Одинаковый экран без клавиатуры и с клавиатурой — разные проверки. Для каждой ячейки матрицы сохрани фактический результат или конкретный дефект; пропущенную проверку пометь неизвестной.

Успешный прогон одного устройства подтверждает именно этот прогон. Выбери набор устройств и браузеров по своей фактической аудитории и рискам формы. Не подменяй отсутствующее измерение заявлением «проверено на всех мобильных». Для сложных жестов, озвучивания и внешних клавиатур предусмотри отдельные проверки.

Пройди мобильную приёмку по наблюдаемым действиям

Отделяй видимость предложения от полезного результата

Показ виджета означает только доставку блока. Открытие формы — интерес к действию. Подтверждённое обращение — отдельный результат. Если мобильных показов много, а отправок мало, сначала проверь доступность формы и клавиатуру, затем обсуждай текст и аудиторию. Без этой последовательности можно оптимизировать рекламный призыв вокруг недоступной кнопки.

В конструкторе Кирпича можно настраивать содержание, оформление, поля и действие виджета. Частота и остановка после целевого действия тоже требуют настройки. Свой код и внешние медиа нужно проверять в реальном мобильном маршруте; наличие конструктора не подтверждает удобство каждого созданного варианта.