Mobil landingsider for native annonser: Designregler som konverterer

Native annonsetrafikk er overveldende mobil, siden den oppstår i innholdsfeeder folk scroller på telefonen sin, så en pre-lander bygget desktop-først og tilpasset nedover vil prestere dårligere enn en designet mobil-først fra starten. Designreglene som betyr mest er sidevekt, tommel-nåelig CTA-plassering, enkeltkolonne-layout, og å unngå alt som et nettverks overholdelsesvurdering behandler som et interstitielt eller påtvunget interaksjon.

Hvorfor desktop-først-så-tilpass-tilnærmingen mislykkes så ofte#

Team som designer en pre-lander på en desktop-skjerm først har en tendens til å bake inn antagelser som ikke overlever krympingen ned til en telefon: flerkolonne-layout som presses til en uleselig enkeltkolonne i siste liten, hero-bilder beskjært for et bredt format som mister sitt fokuspunkt når de beskjæres igjen for et smalt ett, og CTA-plassering bestemt av hva som så balansert ut på en stor skjerm i stedet for hva en tommel faktisk kan nå. Ingen av disse vises som en "feil" du ville fange i en rask desktop-gjennomgang, de vises først når du ser siden slik din faktiske besøkende vil, som er grunnen til at å bygge mobil-først fra første utkast, deretter eventuelt tilpasse opp til desktop, gir færre overraskelser enn det motsatte.

Design for tommelen, ikke musen#

Hvert element som krever presisjonstapping koster konverteringer på en telefon. CTA-knapper må være store nok til å treffe pålitelig, plassert der en tommel naturlig hviler (midt-nederst til nedre tredjedel av skjermen fungerer bedre enn en knapp som krever strekking til toppen), og med avstand til andre trykkbare elementer slik at et feiltrykk ikke sender noen et sted du ikke hadde til hensikt. En sticky CTA-meny som forblir synlig mens leseren scroller gjennom en lengre advertorial fjerner behovet for å scrolle tilbake opp når de er overbevist, noe som betyr mer jo lengre siden din er og jo mer formatet ditt lener seg mot en fullstendig narrativ i stedet for en kort broside.

Sidevekt er en konverteringsspak, ikke bare et teknisk bekymring#

Hvert ekstra sekund med lastetid på en mobilforbindelse er en sjanse til å miste noen som klikket på impuls fra en innholdsfeed og har null tålmodighet for en sakte side. Komprimer hero-bilder aggressivt, unngå autospillende video (som også har en tendens til å trekke overholdelsesgranskning på flere nettverk og brenner mobil-data leseren ikke samtykket til å bruke), latelast alt under folden, og hold DOM-en enkel. Dette kombineres med domen- og hosting-valg; en side hostet bak en treg, overabonnert delt server, eller en som rutes gjennom et unødvendig ekstra omdirigeringshopp, gjør godt designarbeid om før en eneste piksel rendres. God hosting er en forutsetning for god mobil design, ikke et separat bekymring du kan fikse senere.

Layout: enkeltkolonne, vertikal flyt, ingen sideveis overraskelser#

Flerkolonne-layout som fungerer på desktop kollapser typisk dårlig på mobil med mindre de var designet mobil-først. Hold deg til en enkelt vertikal kolonne: hero-bilde eller overskriftblokk, støttende tekst i korte avsnitt, et klart visuelt brudd før CTA-en, deretter enten tilbudsovergangen eller neste innholdsblokk. Unngå helt horisontal scroll, det er desorienterende på en telefon og sjelden forsettlig når det skjer.

Hva du bør unngå fordi nettverk vil flagge det#

• Påtvungne interstitials eller pop-ups som blokkerer innhold før en genuin brukerhandling. De fleste native nettverks redaksjonelle retningslinjer behandler disse som dårlig brukeropplevelse og en vanlig kilde til kreativ avvisning; sjekk det spesifikke nettverkets nåværende dokumentasjon før du stoler på noe interstitielt mønster.
• Autospillende lyd eller video. Samme begrunnelse: det overrasker leseren, brenner dataene deres, og trekker granskningsoppmerksomhet.
• Falske system UI-elementer (falske "batteri lav"-advarsler, falske varslingsbannere, falske lukkeknapper som ikke lukker noe). Disse ligger nær cloaking territorium i hvordan overholdelsesteam leser dem, selv når ingen teknisk cloaking foregår, fordi de bedrar leseren om hva de ser på.
• Avsløring begravd eller skjult bak et trykk. Sponsing og annonseringsavsløringer må være synlige uten ekstra interaksjon fra leserens side; se FTCs avsløringsregler for advertorials & native annonser for hva "synlig" faktisk betyr under nåværende veiledning.

Typografi og leserytme på en liten skjerm#

Brødtekst som er behagelig på en desktop-skjerm er ofte for liten på en telefon med mindre du setter den bevisst for mobil: en grunnskriftstørrelse stor nok til å lese uten klypezoom, generøs linjehøyde, og avsnitt holdt korte, tre til fire linjer maks før et brudd. Lange ubrutte avsnitt er en av de raskeste måtene å miste en mobil-leser midt på siden, siden det ikke er noe visuelt hvilested for å signalere fremdrift. Bryt opp lengre advertorial-tekst med underoverskrifter, utdrag, eller et relevant bilde hvert par avsnitt, både for å hjelpe tempoet og for å gi leseren en grunn til å fortsette å scrolle i stedet for å hoppe av ved den første tekstmuren.

Berøringsmål utover bare CTA-en#

Den primære CTA-en får designoppmerksomheten, men sekundære trykkbare elementer (en "lær mer"-lenke, en lukkeknapp på noe som kan avvises, navigasjon hvis siden har noen) trenger samme tommelvennlige størrelse og avstand. En lukkeknapp som teknisk sett er til stede, men for liten til å treffe pålitelig, fungerer i praksis som ingen lukkeknapp i det hele tatt, og oppfattes som frustrerende eller manipulerende for en leser som prøver å avvise noe. Apples og Googles egne mobil designretningslinjer spesifiserer begge minimumsstørrelser for berøringsmål av nettopp denne grunn, og å følge dem er et rimelig utgangspunkt selv utenfor native plattform-apper.

Skjemaer: færre felt, native inndatatyper#

Hvis pre-landeren eller tilbudstrinnet bak den samler inn informasjon, er hvert ekstra felt et frafallspunkt på mobil, hvor det er tregere og mer feilutsatt å skrive enn på desktop. Bruk riktig inndatatype for hvert felt (numerisk tastatur for telefonnumre, e-post-tastatur for e-post-felt) slik at telefonens eget tastatur hjelper besøkende i stedet for å tvinge dem til å jakte på tegn på et generelt tastatur. Hvis du kan utsette et felt til et senere trinn i trakten i stedet for å be om det på pre-landeren selv, gjør det.

Geo- og språkdetaljer som spesielt snubler opp mobil-sider#

Valutasymboler, datoformater og telefonnummerformater varierer etter geo, og å få dem feil oppfattes som upålitelig raskere på en liten skjerm enn på en stor, hvor en besøkende har mindre tålmodighet til å tolke et ukjent format mens de også prøver å lese tilbudet. Hvis du kjører den samme pre-lander-malen på tvers av flere geo-nivåer, lokaliser disse detaljene ordentlig i stedet for å standardisere til én geos konvensjoner overalt.

Håndtering av nettverks-injisert UI på toppen av siden din#

Flere native nettverk gjengir sine egne elementer rundt eller på toppen av innholdet ditt, et sponset merke, en lukke- eller tilbake-kontroll, noen ganger en native-stylet kommentar- eller engasjementswidget nettverket selv kontrollerer. Design siden din med antagelsen om at det overlayet eksisterer i stedet for å teste kun i et rent forhåndsvisningsmiljø, siden en CTA eller overskrift plassert akkurat der et nettverks eget UI-element gjengis på en ekte enhet er effektivt usynlig for leseren. Sjekk hvordan siden din faktisk ser ut inne i nettverkets ekte in-feed-gjengivelse, ikke bare som en frittstående URL, før du finaliserer layout-beslutninger som avhenger av presis vertikal posisjonering nær toppen av siden.

Sjekke hva som allerede fungerer på mobil-tunge nettverk#

Noen nettverk skråner mer mot mobil enn andre i praksis, og de vinnende pre-lander-mønstrene varierer deretter. Gjennomgang av levende, pågående kreativer og deres sporede landingssider på OpenAdLibrary's native annonse-spionverktøy viser deg hvilke format- og layout-valg som faktisk overlever på et gitt nettverk akkurat nå, i stedet for å anvende generell mobil UX-råd som ikke tar hensyn til hvordan et spesifikt nettverks publikum oppfører seg. MSN Native Ads: The Advertiser's Guide og How Taboola Ads Work dekker begge nettverksspesifikk plassering og publikumatferd som påvirker disse layout-beslutningene.

Tilgjengelighet overlapper med konvertering mer enn folk forventer#

Tilstrekkelig fargekontrast mellom tekst og bakgrunn, lesbare skriftstørrelser uten krav om zoom, og CTA-knapper som kan skilles ved mer enn farge alene hjelper alle besøkende med nedsatt syn, men de hjelper også enhver besøkende som leser en telefonskjerm utendørs i sterkt sollys eller på en eldre, svakere skjerm. Behandle grunnleggende tilgjengelighetspraksis som et konverteringsinput, ikke en separat overholdelsesavkryssning, siden befolkningen det hjelper er mye større enn befolkningen det offisielt er rettet mot.

Testen som faktisk betyr noe#

Før du lanserer noe mobil pre-lander design, last det på en faktisk telefon over en begrenset forbindelse, ikke bare i en desktop-nettlesers mobil-emulator. Emulatorer får viewporten riktig, men gjengir sjelden reelle lastetider, nøyaktighet for trykk-mål, eller hvordan et sticky element oppfører seg under ekte scroll-momentum. Fem minutter på en ekte enhet fanger problemer som uker med desktop-basert iterasjon vil gå glipp av helt.