Мобільні цільові сторінки для нативних оголошень: правила дизайну, які конвертують

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

Чому підхід «спочатку десктоп, потім адаптація» так часто провалюється#

Команди, які спочатку розробляють прелендер на моніторі десктопу, схильні закладати припущення, які не витримують зменшення до розміру телефону: багатоколонкові макети, які в останню мить стискаються в нечитабельну одну колонку, головні зображення, обрізані під широке співвідношення сторін, які втрачають фокусну точку при повторному обрізанні під вузьке, та розміщення CTA, визначене тим, що виглядало збалансовано на великому екрані, а не тим, до чого великий палець реально може дотягнутися. Жодне з цих питань не проявляється як "баг", який можна виявити при швидкому огляді на десктопі; вони з'являються лише тоді, коли ви переглядаєте сторінку так, як це робить реальний відвідувач. Ось чому розробка спочатку під мобільні пристрої, а потім, за потребою, адаптація під десктоп, призводить до меншої кількості несподіванок, ніж зворотний підхід.

Проектуйте під великий палець, а не під мишу#

Кожен елемент, який вимагає точного натискання, коштує конверсій на телефоні. Кнопки CTA повинні бути достатньо великими для надійного натискання, розташованими там, де великий палець природно лежить (нижня третина екрану працює краще, ніж кнопка, яка вимагає тягнутися до верху), та віддаленими від інших клікабельних елементів, щоб помилкове натискання не відправило когось не туди, куди ви планували. Фіксована панель CTA, яка залишається видимою, поки читач скролить довший рекламний матеріал, усуває необхідність скролити назад, коли він уже переконався, що важливіше, чим довша ваша сторінка і чим більше ваш формат наближається до повного наративу, а не короткої перехідної сторінки.

Вага сторінки — це важель конверсії, а не лише технічне питання#

Кожна зайва секунда часу завантаження на мобільному зв'язку — це шанс втратити того, хто клікнув імпульсивно з контентної стрічки і не має жодного терпіння для повільної сторінки. Агресивно стискайте головні зображення, уникайте автовідтворення відео (що також часто привертає увагу служб перевірки відповідності в кількох мережах і спалює мобільний трафік, на який читач не погоджувався), завантажуйте відкладано все, що нижче згину, та тримайте DOM простим. Це посилюється вибором домену та хостингу; сторінка, розміщена на повільному перевантаженому спільному сервері або та, що проходить через зайвий редирект, зводить нанівець хорошу дизайнерську роботу ще до відображення першого пікселя. Хороший хостинг — це передумова хорошого мобільного дизайну, а не окреме питання, яке можна виправити пізніше.

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

Багатоколонкові макети, які працюють на десктопі, зазвичай погано згортаються на мобільному, якщо вони не були розроблені спочатку під мобільні пристрої. Дотримуйтесь однієї вертикальної колонки: блок з головним зображенням або заголовком, підтримуючий текст короткими абзацами, чіткий візуальний розрив перед CTA, потім або перехід до пропозиції, або наступний блок контенту. Повністю уникайте горизонтального скролу — це дезорієнтує на телефоні і рідко є навмисним, коли трапляється.

Чого уникати, бо мережі це заблокують#

• Примусові інтерстиціали або поп-апи, які блокують контент до справжньої дії користувача. Редакційні політики більшості нативних мереж розглядають це як поганий користувацький досвід і часту причину відхилення креативів; перевіряйте актуальну документацію конкретної мережі перед використанням будь-якого інтерстиціального шаблону.
• Автовідтворення аудіо або відео. Та сама логіка: це дивує читача, спалює його трафік і привертає увагу перевіряючих.
• Підроблені елементи системного інтерфейсу (фальшиві попередження про низький заряд батареї, фальшиві банери сповіщень, фальшиві кнопки закриття, які нічого не закривають). Вони наближаються до території клоакингу з точки зору того, як їх трактують команди з перевірки відповідності, навіть коли технічного клоакингу не відбувається, оскільки вони обманюють читача щодо того, на що він дивиться.
• Розкриття інформації, закопане або приховане за натисканням. Розкриття інформації про спонсорство та рекламу має бути видимим без додаткової взаємодії з боку читача; дивіться Правила розкриття інформації FTC для рекламних матеріалів та нативної реклами, щоб зрозуміти, що насправді означає "видимий" згідно з поточними вказівками.

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

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

Дотикові цілі, крім самої CTA#

Основна CTA отримує основну увагу дизайнера, але другорядні клікабельні елементи (посилання "дізнатися більше", кнопка закриття на будь-якому елементі, що закривається, навігація, якщо вона є на сторінці) потребують таких самих зручних для пальця розмірів та відстаней. Кнопка закриття, яка технічно присутня, але занадто мала для надійного натискання, на практиці функціонує як відсутня кнопка закриття і сприймається як дратівлива або маніпулятивна читачем, який намагається щось закрити. Власні рекомендації з мобільного дизайну Apple і Google обидва визначають мінімальні розміри дотикових цілей саме з цієї причини, і дотримання їх є розумним базовим рівнем навіть поза нативними платформними додатками.

Форми: менше полів, нативні типи введення#

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

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

Символи валют, формати дат та формати номерів телефонів відрізняються за географією, і помилка в них сприймається як ненадійність швидше на маленькому екрані, ніж на великому, де у відвідувача менше терпіння розбирати незвичний формат, одночасно намагаючись прочитати пропозицію. Якщо ви запускаєте один і той же шаблон прелендера в кількох гео-рівнях, правильно локалізуйте ці деталі, а не використовуйте скрізь умовності однієї географії за замовчуванням.

Обробка інтерфейсу, який мережа додає поверх вашої сторінки#

Кілька нативних мереж відображають власні елементи навколо або поверх вашого контенту: мітку "Спонсоровано", елемент керування закриттям або поверненням, іноді віджет коментарів або взаємодії у стилі мережі, яким керує сама мережа. Проектуйте свою сторінку, припускаючи, що цей оверлей існує, а не тестуйте лише в чистому середовищі попереднього перегляду, оскільки CTA або заголовок, розташований саме там, де елемент інтерфейсу мережі відображається на реальному пристрої, фактично невидимий для читача. Перевіряйте, як ваша сторінка реально виглядає всередині реального відображення мережі в стрічці, а не лише як окремий URL, перед тим, як остаточно визначати рішення щодо верстки, які залежать від точного вертикального позиціонування біля верху сторінки.

Перевірка того, що вже працює на мережах з переважно мобільним трафіком#

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

Доступність перетинається з конверсією більше, ніж очікують#

Достатній колірний контраст між текстом і фоном, читабельний розмір шрифту без необхідності збільшення та кнопки CTA, які можна відрізнити не лише за кольором, — все це допомагає відвідувачам з порушенням зору, але також допомагає кожному відвідувачеві, який читає екран телефону на вулиці при яскравому сонці або на старішому, тьмянішому дисплеї. Ставтеся до базової практики доступності як до фактору конверсії, а не як до окремого пункту відповідності, оскільки населення, якому це допомагає, набагато більше, ніж населення, на яке це офіційно спрямовано.

Тест, який реально має значення#

Перед запуском будь-якого дизайну мобільного прелендера завантажте його на реальний телефон через обмежений зв'язок, а не лише в емуляторі мобільного браузера на десктопі. Емулятори правильно відображають вікно перегляду, але рідко відтворюють реальний час завантаження, точність натискання цілей або поведінку фіксованого елемента під час реального скролу. П'ять хвилин на реальному пристрої виявляють проблеми, які тижні ітерацій на десктопі пропустять повністю.