Pagini de destinație mobile pentru anunțuri native: reguli de design care convertesc

Traficul de anunțuri native este în mare parte mobil, deoarece provine din feeduri de conținut pe care oamenii le derulează pe telefoane, așadar un pre-lander construit desktop-first și adaptat în jos va avea performanțe mai slabe decât unul conceput mobile-first de la început. Regulile de design care contează cel mai mult sunt greutatea paginii, plasarea CTA la îndemâna degetului mare, layout-ul cu o singură coloană și evitarea oricărui lucru pe care revizuirea de conformitate a unei rețele îl tratează ca un interstițial sau o interacțiune forțată.

De ce abordarea desktop-first-și-apoi-adaptare eșuează atât de des#

Echipele care proiectează un pre-lander pe un monitor de desktop mai întâi tind să încorporeze presupuneri care nu supraviețuiesc micșorării pe telefon: layout-uri cu mai multe coloane care sunt strânse într-o singură coloană de necitit în ultimul moment, imagini hero decupate pentru un raport de aspect larg care își pierd punctul focal atunci când sunt decupate din nou pentru unul îngust, și plasarea CTA decisă de ceea ce arăta echilibrat pe un ecran mare, mai degrabă decât de ceea ce poate atinge de fapt un deget mare. Niciunul dintre acestea nu apare ca un "bug" pe care l-ai prinde într-o revizuire rapidă pe desktop, ele apar doar odată ce vezi pagina așa cum o va vedea vizitatorul tău real, motiv pentru care construirea mobile-first de la prima schiță, apoi opțional adaptarea la desktop, produce mai puține surprize decât invers.

Proiectează pentru degetul mare, nu pentru mouse#

Fiecare element care necesită atingere de precizie costă conversii pe un telefon. Butoanele CTA trebuie să fie suficient de mari pentru a fi atinse în mod fiabil, poziționate acolo unde degetul mare se odihnește în mod natural (partea de mijloc-jos până la treimea inferioară a ecranului funcționează mai bine decât un buton care necesită întindere până sus) și distanțate de alte elemente care pot fi atinse, astfel încât o atingere greșită să nu trimită pe cineva undeva unde nu ai intenționat. O bară CTA lipicioasă (sticky) care rămâne vizibilă pe măsură ce cititorul derulează printr-un advertorial mai lung elimină necesitatea de a derula înapoi odată ce sunt convinși, ceea ce contează cu atât mai mult cu cât pagina ta este mai lungă și cu cât formatul tău se îndreaptă mai mult spre o narațiune completă, mai degrabă decât spre o pagină de punte scurtă.

Greutatea paginii este o pârghie de conversie, nu doar o preocupare tehnică#

Fiecare secundă suplimentară de timp de încărcare pe o conexiune mobilă este o șansă de a pierde pe cineva care a dat clic din impuls dintr-un feed de conținut și nu are deloc răbdare pentru o pagină lentă. Comprimă imaginile hero agresiv, evită videoclipurile cu redare automată (care, de asemenea, tind să atragă atenția conformității pe mai multe rețele și consumă date mobile pe care cititorul nu a fost de acord să le cheltuiască), încarcă lazy-load orice este sub fold și menține DOM-ul simplu. Acest lucru se combină cu alegerile de domeniu și găzduire; o pagină găzduită în spatele unui server partajat lent și suprasolicitat, sau una care rută printr-un hop de redirect suplimentar inutil, anulează munca bună de design înainte ca un singur pixel să se redeze. O găzduire bună este o condiție prealabilă pentru un design mobil bun, nu o preocupare separată pe care o poți rezolva mai târziu.

Layout: o singură coloană, flux vertical, fără surprize laterale#

Layout-urile cu mai multe coloane care funcționează pe desktop se prăbușesc de obicei prost pe mobil, cu excepția cazului în care au fost concepute mobile-first. Rămâi la o singură coloană verticală: imagine hero sau bloc de titlu, text suport în paragrafe scurte, o pauză vizuală clară înainte de CTA, apoi fie tranziția ofertei, fie următorul bloc de conținut. Evită complet derularea orizontală, este dezorientantă pe un telefon și rareori intenționată atunci când se întâmplă.

Ce să eviți pentru că rețelele îl vor semnala#

• Interstițiale forțate sau pop-up-uri care blochează conținutul înainte de o acțiune reală a utilizatorului. Politicile editoriale ale majorității rețelelor native tratează acestea ca o experiență slabă pentru utilizator și o sursă frecventă de respingeri ale materialelor creative; verifică documentația actuală a rețelei specifice înainte de a te baza pe orice model interstițial.
• Audio sau video cu redare automată. Același raționament: surprinde cititorul, consumă datele lor și atrage atenția revizuirii.
• Elemente false de UI de sistem (avertismente false de "baterie descărcată", bannere false de notificare, butoane false de închidere care nu închid nimic). Acestea se situează aproape de teritoriul cloaking în modul în care echipele de conformitate le citesc, chiar și atunci când nu are loc niciun cloaking tehnic, deoarece înșală cititorul cu privire la ceea ce vede.
• Dezvăluirea îngropată sau ascunsă în spatele unei atingeri. Dezvăluirile de sponsorizare și publicitate trebuie să fie vizibile fără interacțiune suplimentară din partea cititorului; vezi Regulile FTC de dezvăluire pentru advertoriale și anunțuri native pentru ceea ce înseamnă "vizibil" de fapt sub orientările actuale.

Tipografie și ritm de citire pe un ecran mic#

Textul de corp care este confortabil pe un monitor de desktop este adesea prea mic pe un telefon, cu excepția cazului în care îl setezi în mod deliberat pentru mobil: o dimensiune de bază a fontului suficient de mare pentru a fi citit fără a face zoom cu ciupitul, o înălțime generoasă a liniei și paragrafe păstrate scurte, trei până la patru rânduri cel mult înainte de o pauză. Paragrafele lungi neîntrerupte sunt una dintre cele mai rapide modalități de a pierde un cititor mobil la mijlocul paginii, deoarece nu există un punct de odihnă vizual care să semnaleze progresul. Împarte copia mai lungă de advertorial cu subtitluri, citate evidențiate (pull quotes) sau o imagine relevantă la fiecare câteva paragrafe, atât pentru a ajuta ritmul, cât și pentru a oferi cititorului un motiv să continue derularea, în loc să sară la primul zid de text.

Ținte de atingere dincolo de simplul CTA#

CTA-ul principal primește atenția designului, dar elementele secundare care pot fi atinse (un link "află mai multe", un buton de închidere pe orice element care poate fi închis, navigație dacă pagina are una) necesită aceeași dimensiune și spațiere prietenoase cu degetul mare. Un buton de închidere care este prezent din punct de vedere tehnic, dar prea mic pentru a fi atins în mod fiabil, funcționează, în practică, ca și cum nu ar exista deloc și se citește ca frustrant sau manipulator pentru un cititor care încearcă să închidă ceva. Liniile directoare de design mobil ale Apple și Google specifică ambele dimensiuni minime ale țintelor de atingere exact din acest motiv, iar respectarea lor este o bază rezonabilă chiar și în afara aplicațiilor native de platformă.

Formulare: mai puține câmpuri, tipuri de intrare native#

Dacă pre-lander-ul sau pasul ofertei din spatele său colectează orice informație, fiecare câmp suplimentar este un punct de abandon pe mobil, unde tastarea este mai lentă și mai predispusă la erori decât pe desktop. Folosește tipul de intrare corect pentru fiecare câmp (tastatură numerică pentru numere de telefon, tastatură de e-mail pentru câmpurile de e-mail) astfel încât tastatura proprie a telefonului să ajute vizitatorul, în loc să îl oblige să caute caractere pe o tastatură generală. Dacă poți amâna un câmp la un pas ulterior al pâlniei, în loc să îl ceri pe pre-lander-ul însuși, fă asta.

Detalii geografice și de limbă care împiedică paginile mobile în mod specific#

Simbolurile valutare, formatele de dată și formatele de număr de telefon variază în funcție de geo, iar a le greși se citește ca fiind nesigur mai repede pe un ecran mic decât pe unul mare, unde un vizitator are mai puțină răbdare să analizeze un format necunoscut în timp ce încearcă să citească și oferta. Dacă rulezi același șablon de pre-lander pe mai multe niveluri geo, localizează aceste detalii în mod corespunzător, mai degrabă decât să folosești convențiile unei singure geo peste tot.

Gestionarea UI-ului injectat de rețea peste pagina ta#

Mai multe rețele native își redează propriile elemente în jurul sau deasupra conținutului tău, o etichetă sponsorizată, un control de închidere sau înapoi, uneori un widget de comentarii sau implicare în stil nativ pe care rețeaua însăși îl controlează. Proiectează-ți pagina presupunând că acea suprapunere există, mai degrabă decât să testezi doar într-un mediu de previzualizare curat, deoarece un CTA sau un titlu poziționat exact acolo unde un element UI propriu al rețelei se redează pe un dispozitiv real este, în efect, invizibil pentru cititor. Verifică cum arată pagina ta de fapt în interiorul redării reale în-feed a rețelei, nu doar ca un URL independent, înainte de a finaliza deciziile de layout care depind de poziționarea verticală precisă aproape de partea de sus a paginii.

Verificarea a ceea ce funcționează deja pe rețelele cu mult trafic mobil#

Unele rețele sunt mai mult mobile decât altele în practică, iar modelele câștigătoare de pre-lander diferă în consecință. Revizuirea materialelor creative live, care rulează în prezent, și a pre-lander-urilor lor urmărite pe instrumentul de spy pentru anunțuri native al OpenAdLibrary îți arată ce alegeri de format și layout supraviețuiesc de fapt pe o rețea dată chiar acum, mai degrabă decât aplicarea unor sfaturi generice de UX mobil care nu țin cont de cum se comportă audiența unei rețele specifice. MSN Native Ads: Ghidul advertiserului și Cum funcționează anunțurile Taboola acoperă ambele plasarea specifică rețelei și comportamentul audienței care alimentează aceste decizii de layout.

Accesibilitatea se suprapune cu conversia mai mult decât se așteaptă oamenii#

Un contrast suficient de culoare între text și fundal, dimensiuni de font lizibile fără a necesita zoom și butoane CTA care se disting prin mai mult decât doar culoare ajută vizitatorii cu vedere afectată, dar ajută și fiecare vizitator care citește un ecran de telefon în aer liber în lumina puternică a soarelui sau pe un afișaj mai vechi, mai slab. Tratează practica de bază a accesibilității ca un input de conversie, nu ca o bifă separată de conformitate, deoarece populația pe care o ajută este mult mai mare decât populația căreia i se adresează oficial.

Testul care contează cu adevărat#

Înainte de a lansa orice design de pre-lander mobil, încarcă-l pe un telefon real printr-o conexiune limitată, nu doar într-un emulator mobil al unui browser de desktop. Emulatoarele obțin viewport-ul corect, dar rareori reproduc timpii reali de încărcare, precizia țintei de atingere sau modul în care un element sticky se comportă sub un impuls real de derulare. Cinci minute pe un dispozitiv real prind probleme pe care săptămâni de iterație pe desktop le vor rata complet.