Mobile Landing Pages til Native Ads: Designregler, der Konverterer

Native ad-trafik er overvældende mobil, da den stammer fra indholdsfæder, folk scroller på deres telefoner, så en pre-lander bygget desktop-first og tilpasset nedad vil underperforme en designet mobile-first fra starten. De designregler, der betyder mest, er sidevægt, tommelfinger-nåelig CTA-placering, enkeltkolonne-layout og at undgå alt, hvad et netværks compliance-gennemgang behandler som en interstitial eller tvungen interaktion.

Hvorfor desktop-first-then-adapt-tilgangen ofte fejler#

Teams, der designer en pre-lander på en desktop-skærm først, har en tendens til at indbake antagelser, der ikke overlever nedskrumpningen til en telefon: flerkolonne-layouts, der presses til en ulæselig enkeltkolonne i sidste øjeblik, hero-billeder beskåret til et bredt formatforhold, der mister deres fokuspunkt, når de beskæres igen til et smalt, og CTA-placering besluttet ud fra, hvad så balanceret ud på en stor skærm, snarere end hvad en tommelfinger faktisk kan nå. Ingen af disse viser sig som en "fejl", du ville fange i en hurtig desktop-gennemgang, de viser sig først, når du ser siden, som din faktiske besøgende vil, hvilket er grunden til, at det at bygge mobile-first fra første udkast, derefter eventuelt tilpasse op til desktop, producerer færre overraskelser end det omvendte.

Design for tommelfingeren, ikke musen#

Hvert element, der kræver præcist tryk, koster konverteringer på en telefon. CTA-knapper skal være store nok til at ramme pålideligt, placeret hvor en tommelfinger naturligt hviler (nederste midte til nederste tredjedel af skærmen fungerer bedre end en knap, der kræver strækning til toppen), og placeret væk fra andre trykbare elementer, så et fejltryk ikke sender nogen et sted hen, du ikke havde til hensigt. En fastgjort CTA-bar, der forbliver synlig, mens læseren scroller gennem en længere advertorial, fjerner behovet for at scrolle tilbage, når de er overbevist, hvilket betyder mere, jo længere din side kører, og jo mere dit format læner sig mod en fuld fortælling snarere end en kort broside.

Sidevægt er en konverteringsspak, ikke kun et teknisk anliggende#

Hvert ekstra sekunds indlæsningstid på en mobilforbindelse er en chance for at miste nogen, der klikkede på impuls fra et indholdsfæde og har nul tålmodighed til en langsom side. Komprimer hero-billeder aggressivt, undgå autoplay-video (som også har tendens til at tiltrække compliance-granskning på flere netværk og brænder mobildata, læseren ikke gik med til at bruge), lazy-load alt under folden, og hold DOM'en simpel. Dette kombineres med domæne- og hostingvalg; en side hostet bag en langsom, overbooket delt server, eller en, der router gennem et unødvendigt ekstra redirect-hop, ødelægger godt designarbejde, før en enkelt pixel gengives. God hosting er en forudsætning for godt mobil-design, ikke et separat anliggende, du kan rette senere.

Layout: enkelt kolonne, vertikal flow, ingen sidevægs overraskelser#

Flerkolonne-layouts, der virker på desktop, kollapser typisk dårligt på mobil, medmindre de var designet mobile-first. Hold dig til en enkelt vertikal kolonne: hero-billede eller overskriftblok, understøttende tekst i korte afsnit, et tydeligt visuelt brud før CTA'en, derefter enten overgangen til tilbuddet eller næste indholdsblok. Undgå helt horisontal scroll, det er desorienterende på en telefon og sjældent bevidst, når det sker.

Hvad man skal undgå, fordi netværk vil flagge det#

• Tvungne interstitials eller pop-ups, der blokerer indhold før en ægte brugerhandling. De fleste native netværks redaktionelle politikker behandler disse som dårlig brugeroplevelse og en almindelig kilde til kreativ afvisning; tjek det specifikke netværks aktuelle dokumentation, før du stoler på nogen interstitial-mønster.
• Autoplay lyd eller video. Samme begrundelse: det overrasker læseren, brænder deres data og tiltrækker gennemgangsopmærksomhed.
• Falske system-UI-elementer (falske "batteri lav"-advarsler, falske notifikationsbannere, falske luk-knapper, der ikke lukker noget). Disse befinder sig tæt på cloaking-territorium i måden, compliance-hold læser dem på, selv når der ikke sker teknisk cloaking, fordi de bedrager læseren om, hvad de kigger på.
• Afsløring begravet eller skjult bag et tryk. Sponsorship- og reklameafsløringer skal være synlige uden ekstra interaktion fra læserens side; se FTC Disclosure Rules for Advertorials & Native Ads for hvad "synlig" faktisk betyder under nuværende vejledning.

Typografi og læserhytme på en lille skærm#

Brødtekst, der er behagelig på en desktop-skærm, er ofte for lille på en telefon, medmindre du indstiller den bevidst til mobil: en grundskriftstørrelse stor nok til at læse uden pinch-zoom, generøs linjehøjde og afsnit holdt korte, tre til fire linjer højst før et brud. Lange ubrudte afsnit er en af de hurtigste måder at miste en mobil-læser midt på siden, da der ikke er noget visuelt hvilested til at signalere fremskridt. Bryd længere advertorial-tekst op med underoverskrifter, pull-quotes eller et relevant billede hvert par afsnit, både for at hjælpe tempoet og for at give læseren en grund til at fortsætte med at scrolle snarere end at hoppe fra ved den første tekstvæg.

Trykmål udover kun CTA'en#

Den primære CTA får designopmærksomheden, men sekundære trykbare elementer (et "lær mere"-link, en luk-knap på ethvert afviseligt element, navigation, hvis siden har nogen) har brug for samme tommelfinger-venlige størrelse og afstand. En luk-knap, der teknisk set er til stede, men for lille til at ramme pålideligt, fungerer i praksis som slet ingen luk-knap og opfattes som frustrerende eller manipulerende for en læser, der forsøger at afvise noget. Apples og Googles egne mobile designretningslinjer specificerer begge minimumsstørrelser for trykmål af netop denne grund, og at følge dem er et rimeligt udgangspunkt, selv uden for native platform-apps.

Formularer: færre felter, native input-typer#

Hvis pre-landeren eller tilbudstrinnet bag den indsamler nogen information, er hvert ekstra felt et frafaldspunkt på mobil, hvor indtastning er langsommere og mere fejltilbøjelig end på desktop. Brug den rigtige inputtype for hvert felt (numerisk tastatur til telefonnumre, email-tastatur til email-felter), så telefonens eget tastatur hjælper besøgenden i stedet for at tvinge dem til at lede efter tegn på et generelt tastatur. Hvis du kan udskyde et felt til et senere trin i tragtet i stedet for at bede om det på selve pre-landeren, gør det.

Geo- og sprogdetaljer, der specifikt snubler mobile sider#

Valutasymboler, datoformater og telefonnummerformater varierer efter geo, og at få dem forkert opfattes som utroværdigt hurtigere på en lille skærm end på en stor, hvor en besøgende har mindre tålmodighed til at parse et ukendt format, mens de også forsøger at læse tilbuddet. Hvis du kører den samme pre-lander-skabelon på tværs af flere geo tiers, lokaliser disse detaljer korrekt i stedet for at standardisere til én geos konventioner overalt.

Håndtering af netværks-injiceret UI oven på din side#

Flere native netværk gengiver deres egne elementer omkring eller oven på dit indhold, et sponsor-mærkat, en luk- eller tilbage-kontrol, nogle gange en native-stylet kommentar- eller engagement-widget, som netværket selv styrer. Design din side under antagelse af, at overlayet eksisterer, snarere end kun at teste i et rent forhåndsvisningsmiljø, da en CTA eller overskrift placeret lige hvor et netværks eget UI-element gengives på en rigtig enhed, effektivt er usynlig for læseren. Tjek, hvordan din side faktisk ser ud inde i netværkets rigtige in-feed-gengivelse, ikke kun som en selvstændig URL, før du finaliserer layoutbeslutninger, der afhænger af præcis vertikal placering nær toppen af siden.

Tjekke, hvad der allerede virker på mobil-tunge netværk#

Nogle netværk er i praksis mere mobile end andre, og de vindende pre-lander-mønstre afviger derfor. Gennemgang af live, aktuelt kørende kreativer og deres traced landers på OpenAdLibrary's native ad spy tool viser dig, hvilke format- og layoutvalg, der faktisk overlever på et givet netværk lige nu, snarere end at anvende generel mobil UX-rådgivning, der ikke tager højde for, hvordan et specifikt netværks publikum opfører sig. MSN Native Ads: The Advertiser's Guide og How Taboola Ads Work dækker begge netværksspecifik placering og publikumsadfærd, der indgår i disse layoutbeslutninger.

Tilgængelighed overlapper med konvertering mere, end folk forventer#

Tilstrækkelig farvekontrast mellem tekst og baggrund, læselige skriftstørrelser uden krav om zoom, og CTA-knapper, der kan skelnes ved mere end kun farve alene, hjælper alle besøgende med nedsat syn, men de hjælper også enhver besøgende, der læser en telefonskærm udendørs i klart sollys eller på en ældre, svagere skærm. Behandl grundlæggende tilgængelighedspraksis som et konverteringsinput, ikke en separat compliance-afkrydsning, da den befolkning, det hjælper, er meget større end den befolkning, det officielt er rettet mod.

Den test, der faktisk betyder noget#

Før du udruller noget mobil pre-lander-design, indlæs det på en faktisk telefon over en throttlet forbindelse, ikke kun i en desktop-browsers mobil-emulator. Emulatorer får viewporten rigtigt, men gengiver sjældent rigtige indlæsningstider, nøjagtighed af trykmål eller hvordan et fastgjort element opfører sig under rigtig rulningsmoment. Fem minutter på en rigtig enhed fanger problemer, som uger med desktop-baseret iteration helt vil gå glip af.