Mobilní landing page pro native reklamy: Designová pravidla, která konvertují

Publikum native reklam je převážně mobilní, protože pochází z obsahových feedů, které lidé projíždějí na telefonech. Pre-lander navržený primárně pro desktop a následně adaptovaný bude mít horší výsledky než stránka navržená od začátku jako mobilní. Mezi nejdůležitější designová pravidla patří váha stránky, umístění CTA dostupné palcem, jednosloupcový layout a vyhýbání se čemukoli, co recenzní proces sítě vyhodnotí jako intersticiál nebo vynucenou interakci.

Proč přístup "nejdřív desktop, pak adaptace" tak často selhává#

Týmy, které navrhují pre-lander nejprve na desktopovém monitoru, často vloží do návrhu předpoklady, které se při zmenšení na telefon rozpadnou: vícesloupcové layouty, které se v poslední chvíli namačkají do nečitelného jednoho sloupce; hero obrázky oříznuté pro široký poměr stran, které ztratí svůj hlavní bod zájmu při dalším oříznutí pro úzký; a umístění CTA rozhodnuté podle toho, co vypadalo vyváženě na velké obrazovce, nikoli podle toho, kam skutečně dosáhne palec. Žádný z těchto problémů se neobjeví jako "chyba", kterou byste odhalili při rychlé kontrole na desktopu. Projeví se až tehdy, když stránku uvidíte tak, jak ji uvidí skutečný návštěvník. Proto návrh od prvního náčrtu mobilně-first a následná volitelná adaptace na desktop přináší méně překvapení než opačný postup.

Navrhujte pro palec, ne pro myš#

Každý prvek vyžadující přesné klepnutí stojí na telefonu konverze. Tlačítka CTA musí být dostatečně velká, aby se na ně dalo spolehlivě klepnout, umístěná tam, kde přirozeně spočívá palec (spodní třetina až střed obrazovky funguje lépe než tlačítko vyžadující natažení k hornímu okraji), a mít odstup od dalších interaktivních prvků, aby chybné klepnutí neposlalo někoho někam, kam jste nezamýšleli. Fixní CTA lišta, která zůstává viditelná, když čtenář scrolluje delším advertoriálem, odstraňuje nutnost scrollovat zpět, jakmile je přesvědčen. To je důležitější, čím delší je vaše stránka a čím více se váš formát blíží plnému narativu spíše než krátké přechodové stránce.

Váha stránky je páka konverzí, ne jen technický problém#

Každá vteřina navíc při načítání přes mobilní připojení je příležitost ztratit někoho, kdo kliknul impulsivně z obsahového feedu a má nulovou trpělivost s pomalou stránkou. Agresivně komprimujte hero obrázky, vyhněte se automaticky přehrávanému videu (které také často přitahuje pozornost compliance týmů na několika sítích a pálí mobilní data, se kterými čtenář nesouhlasil), použijte lazy loading pro cokoli pod foldem a udržujte DOM jednoduchý. To se kombinuje s volbou domény a hostingu; stránka hostovaná na pomalém, přetíženém sdíleném serveru nebo směrovaná přes zbytečný přesměrovací krok zničí dobrou designovou práci dřív, než se vyrenderuje jediný pixel. Dobrý hosting je předpokladem dobrého mobilního designu, ne samostatným problémem, který lze vyřešit dodatečně.

Layout: jeden sloupec, vertikální tok, žádná překvapení do stran#

Vícesloupcové layouty, které fungují na desktopu, se na mobilu typicky hroutí, pokud nebyly navrženy mobilně-first. Držte se jednoho vertikálního sloupce: hero obrázek nebo blok s nadpisem, podpůrný text v krátkých odstavcích, jasný vizuální oddělovač před CTA a poté buď přechod na nabídku, nebo další obsahový blok. Zcela se vyhněte horizontálnímu scrollování – na telefonu je dezorientující a když k němu dojde, je to málokdy záměr.

Čemu se vyhnout, protože to sítě označí#

• Vynucené intersticiály nebo pop-upy blokující obsah před skutečnou akcí uživatele. Redakční pravidla většiny native sítí je považují za špatný uživatelský zážitek a častý důvod zamítnutí kreativy; před spoléháním na jakýkoli intersticiální vzor si ověřte aktuální dokumentaci konkrétní sítě.
• Automaticky přehrávaný zvuk nebo video. Stejná logika: překvapí čtenáře, pálí jeho data a přitahuje pozornost při kontrole.
• Falešné systémové UI prvky (falešná varování "nízká baterie", falešné notifikační bannery, falešná tlačítka zavření, která nic nezavřou). Ty se blíží území cloakingu z pohledu compliance týmů, i když k žádnému technickému cloakingu nedochází, protože klamou čtenáře ohledně toho, na co se dívá.
• Oznámení o sponzorství nebo reklamě schované nebo skryté za klepnutím. Oznámení o sponzorství a reklamě musí být viditelné bez další interakce ze strany čtenáře; podrobnosti o tom, co "viditelné" znamená podle současných pokynů, najdete v článku Pravidla FTC pro oznámení u advertoriálů a native reklam.

Typografie a rytmus čtení na malé obrazovce#

Text, který je pohodlný na desktopovém monitoru, je na telefonu často příliš malý, pokud ho nenastavíte záměrně pro mobil: základní velikost písma dostatečně velká pro čtení bez přibližování, velkorysý řádkový proklad a krátké odstavce, maximálně tři až čtyři řádky před zalomením. Dlouhé nerozdělené odstavce jsou jedním z nejrychlejších způsobů, jak ztratit mobilního čtenáře uprostřed stránky, protože nemá vizuální odpočinkový bod signalizující pokrok. Delší advertoriální text čleňte podnadpisy, citacemi nebo relevantním obrázkem každých pár odstavců – jednak pro lepší rytmus, jednak aby čtenář měl důvod scrollovat dál, a ne odejít při první zdi textu.

Dotykové cíle mimo hlavní CTA#

Primární CTA dostává designovou pozornost, ale sekundární interaktivní prvky (odkaz "více informací", tlačítko zavření na jakémkoli prvku, který lze zavřít, navigace, pokud ji stránka má) potřebují stejné rozměry a odstup přátelské pro palec. Tlačítko zavření, které je technicky přítomné, ale příliš malé pro spolehlivé klepnutí, funguje v praxi jako žádné tlačítko zavření a působí frustrujícím nebo manipulativním dojmem na čtenáře, který se ho snaží použít. Designové směrnice Applu i Googlu z tohoto důvodu specifikují minimální velikosti dotykových cílů a jejich dodržování je rozumným výchozím bodem i mimo nativní platformní aplikace.

Formuláře: méně polí, nativní typy vstupů#

Pokud pre-lander nebo nabídka za ním sbírá jakékoli informace, každé další pole je bodem úbytku na mobilu, kde je psaní pomalejší a náchylnější k chybám než na desktopu. Pro každé pole použijte správný typ vstupu (číselná klávesnice pro telefonní čísla, emailová klávesnice pro emailová pole), aby telefonní klávesnice návštěvníkovi pomáhala, místo aby ho nutila hledat znaky na obecné klávesnici. Pokud můžete pole odložit do pozdějšího kroku funnelu místo toho, abyste se na něj ptali přímo na pre-landeru, udělejte to.

Geografické a jazykové detaily, které specificky komplikují mobilní stránky#

Symboly měn, formáty dat a telefonních čísel se liší podle geografické oblasti. Pokud je špatně nastavíte, působí to nedůvěryhodně rychleji na malé obrazovce než na velké, kde má návštěvník méně trpělivosti pro rozluštění neznámého formátu zároveň se snahou přečíst si nabídku. Pokud používáte stejnou šablonu pre-landeru napříč více geografickými úrovněmi, tyto detaily řádně lokalizujte, místo abyste všude používali konvence jedné oblasti.

Zvládnutí UI vloženého sítí nad vaší stránkou#

Několik native sítí vykresluje vlastní prvky kolem nebo nad vaším obsahem – označení "sponzorováno", ovládací prvek zavření nebo zpět, někdy widget komentářů nebo interakcí ve stylu sítě, který sama sít ovládá. Navrhujte svou stránku s předpokladem, že tato vrstva existuje, místo testování pouze v čistém prostředí náhledu. CTA nebo nadpis umístěný přesně tam, kde se na reálném zařízení vykreslí UI prvek sítě, je pro čtenáře efektivně neviditelný. Před finálním rozhodnutím o layoutu závislém na přesném vertikálním umístění u horního okraje stránky zkontrolujte, jak vaše stránka skutečně vypadá uvnitř reálného vykreslení sítě ve feedu, nejen jako samostatná URL.

Kontrola toho, co již funguje na sítích s vysokým podílem mobilů#

Některé sítě jsou v praxi výrazně mobilnější než jiné a vítězné vzory pre-landerů se podle toho liší. Prohlížení živých, aktuálně běžících kreativ a jejich trasovaných landing stránek v nástroji pro spyování native reklam OpenAdLibrary vám ukáže, jaké volby formátu a layoutu na dané síti aktuálně přežívají, místo aplikování obecných rad pro mobilní UX, které neberou v úvahu chování publika konkrétní sítě. Články Native reklamy na MSN: Průvodce pro inzerenty a Jak fungují reklamy Taboola se oba zabývají specifiky umístění a chování publika u konkrétních sítí, která ovlivňují tato rozhodnutí o layoutu.

Překryv přístupnosti s konverzemi je větší, než se čeká#

Dostatečný kontrast barev mezi textem a pozadím, čitelné velikosti písma bez nutnosti přibližování a tlačítka CTA rozlišitelná více než jen barvou pomáhají návštěvníkům se zrakovým postižením, ale pomáhají i každému návštěvníkovi čtoucímu telefon na přímém slunci nebo na starším, tmavším displeji. Zacházejte se základními principy přístupnosti jako se vstupem pro konverze, ne jako s odděleným políčkem pro compliance, protože populace, které pomáhají, je mnohem větší než populace, pro kterou jsou oficiálně určeny.

Test, na kterém skutečně záleží#

Před nasazením jakéhokoli mobilního designu pre-landeru jej načtěte na skutečném telefonu přes omezené připojení, nejen v mobilním emulátoru desktopového prohlížeče. Emulátory správně zobrazí viewport, ale málokdy reprodukují skutečnou dobu načítání, přesnost klepnutí na cíle nebo chování fixního prvku při reálném scrollování. Pět minut na skutečném zařízení odhalí problémy, které týdny iterací na desktopu zcela minou.