Мобильные лендинги для нативной рекламы: правила дизайна, которые конвертируют

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

Почему подход «сначала десктоп, потом адаптация» так часто проваливается#

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

Проектируйте для большого пальца, а не для мыши#

Каждый элемент, требующий точного тапа, стоит конверсий на телефоне. Кнопки CTA должны быть достаточно крупными, чтобы по ним можно было надежно попасть, расположены там, где большой палец лежит естественно (нижняя середина или нижняя треть экрана работают лучше, чем кнопка, до которой нужно тянуться к верху), и отстоять от других кликабельных элементов, чтобы ошибочный тап не отправил пользователя не туда, куда вы планировали. Закрепленная панель CTA, которая остается видимой, пока читатель скроллит длинный advertorial, избавляет от необходимости прокручивать обратно, когда он уже убежден, — это тем важнее, чем длиннее ваша страница и чем больше ваш формат склоняется к полному нарративу, а не к короткой переходной странице.

Вес страницы — это рычаг конверсии, а не только техническая проблема#

Каждая лишняя секунда загрузки на мобильном соединении — это шанс потерять того, кто кликнул импульсивно из ленты контента и совершенно не терпит медленную страницу. Агрессивно сжимайте hero-изображения, избегайте автовоспроизведения видео (что также часто привлекает внимание compliance в нескольких сетях и сжигает мобильный трафик, на который читатель не соглашался), лениво загружайте всё, что ниже сгиба, и упрощайте DOM. Это накладывается на выбор домена и хостинга; страница, размещенная на медленном перегруженном shared-сервере или проходящая через лишний редирект, сводит на нет всю хорошую дизайнерскую работу еще до отрисовки первого пикселя. Хороший хостинг — это предпосылка для хорошего мобильного дизайна, а не отдельная проблема, которую можно решить позже.

Верстка: одна колонка, вертикальный поток, никаких боковых сюрпризов#

Многоколоночные макеты, работающие на десктопе, обычно плохо сворачиваются на мобильных, если они не были спроектированы как мобильные. Придерживайтесь одной вертикальной колонки: hero-изображение или блок заголовка, поддерживающий текст короткими абзацами, четкий визуальный разрыв перед CTA, затем либо переход к офферу, либо следующий контентный блок. Полностью избегайте горизонтального скролла — он дезориентирует на телефоне и редко бывает намеренным, когда возникает.

Чего избегать, потому что сети это отметят#

• Принудительные интерактивы или попапы, блокирующие контент до настоящего действия пользователя. Редакционные политики большинства нативных сетей рассматривают это как плохой пользовательский опыт и частую причину отклонения креативов; проверяйте актуальную документацию конкретной сети, прежде чем полагаться на любой паттерн с интерактивом.
• Автовоспроизведение аудио или видео. Та же логика: это удивляет читателя, сжигает его трафик и привлекает внимание ревьюеров.
• Поддельные элементы системного UI (фальшивые предупреждения о низком заряде батареи, фальшивые баннеры уведомлений, фальшивые кнопки закрытия, которые ничего не закрывают). Они близки к территории клоакинга в понимании команд compliance, даже когда технического клоакинга не происходит, потому что они обманывают читателя относительно того, на что он смотрит.
• Раскрытие информации, похороненное или скрытое за тапом. Раскрытия информации о спонсорстве и рекламе должны быть видны без дополнительных действий со стороны читателя; см. Правила FTC по раскрытию информации для advertorial и нативной рекламы для понимания, что на самом деле означает «видимый» согласно текущим рекомендациям.

Типографика и ритм чтения на маленьком экране#

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

Области касания помимо основной CTA#

Основная CTA получает все внимание дизайнера, но второстепенные кликабельные элементы (ссылка «узнать больше», кнопка закрытия на любом скрываемом элементе, навигация, если она есть на странице) требуют такого же удобного для большого пальца размера и отступов. Кнопка закрытия, которая технически присутствует, но слишком мала, чтобы по ней можно было надежно попасть, на практике функционирует как отсутствующая и воспринимается читателем, пытающимся что-то закрыть, как раздражающая или манипулятивная. Руководства по мобильному дизайну от Apple и Google сами задают минимальные размеры областей касания именно по этой причине, и следование им — разумный базовый уровень даже вне нативных платформенных приложений.

Формы: меньше полей, нативные типы ввода#

Если прелендер или этап оффера за ним собирает какую-либо информацию, каждое дополнительное поле — это точка оттока на мобильных, где печатать медленнее и легче ошибиться, чем на десктопе. Используйте правильный тип ввода для каждого поля (цифровая клавиатура для номеров телефонов, email-клавиатура для полей email), чтобы собственная клавиатура телефона помогала посетителю, а не заставляла его искать символы на общей клавиатуре. Если вы можете отложить поле на более поздний этап воронки вместо того, чтобы запрашивать его на самом прелендере, сделайте это.

Гео- и языковые детали, которые особенно проблемны для мобильных страниц#

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

Работа с UI, который сеть добавляет поверх вашей страницы#

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

Проверка того, что уже работает в сетях с преобладанием мобильного трафика#

Некоторые сети на практике более мобильные, чем другие, и выигрышные паттерны прелендеров соответственно различаются. Просмотр живых, запущенных креативов и их отслеженных лендингов в инструменте для анализа нативной рекламы OpenAdLibrary показывает, какие выборы формата и верстки реально выживают в конкретной сети прямо сейчас, а не применение общих советов по мобильному UX, которые не учитывают поведение аудитории конкретной сети. Нативная реклама MSN: руководство для рекламодателя и Как работают рекламные объявления Taboola освещают специфичные для сетей размещения и поведение аудитории, которые влияют на эти решения по верстке.

Доступность пересекается с конверсией больше, чем многие думают#

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

Тест, который действительно важен#

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