Cele mai bune sfaturi de proiectare a paginilor de destinație Mobile pe care nu le veți găsi în altă parte

există o mulțime de resurse online care abordează proiectele de pagini de destinație post-clic mobile, dar nu există o mulțime de instrucțiuni specifice de proiectare cum să construiți de fapt o pagină cu conversie ridicată.

ce structură este recomandată pentru vizualizarea mobilă? Câți pixeli ar trebui să fie butoanele? Câți pixeli ar trebui să separe elementele? Ar trebui să utilizați efectul” hover”? Ar trebui ca etichetele să fie în interior sau în exterior?

numele meu este Cosmin Serban, Director Servicii de proiectare la Instapage. Poate va intrebati, ce il face pe Cosmin calificat sa scrie pe mobil post-click landing page design?

am educat clienții cu privire la cele mai bune practici în proiectarea și structurarea paginilor de destinație post-clic pentru a-și îmbunătăți ratele de conversie. De asemenea, am:

  • revizuit peste 1.000 de pagini de destinație post-clic
  • parteneriat cu clienții pentru a se asigura mesajul lor este obtinerea peste și vizitatorii lor au o experiență bună, care în cele din urmă duce la o conversie

mai mult, am fost parte din echipa care a dezvoltat peste 200 de template-uri optimizate utilizate pentru a crea și lansa peste 200.000 de pagini de destinație post-clic, puteți găsi șabloanele aici.

mobil post-clic pagina de destinație design: Ce trebuie să știți înainte de a începe

unele concepte din acest articol au fost dezvoltate intern la crearea bibliotecii noastre de șabloane. Asta nu înseamnă neapărat că toate aceste sfaturi ar trebui să se aplice fiecărei pagini de destinație post-clic pe care o creați. Fiecare pagină de destinație post-clic are propriul set unic de provocări, dar înțelegerea acestor noțiuni de bază ar trebui să vă ajute cu siguranță să oferiți o experiență mai bună oricui vizitează de pe dispozitivul mobil.

să începem cu cele mai importante diferențe dintre experiența desktop și cea mobilă.

structura

chiar dacă nu pare a fi la începutul proiectului dvs., a avea o structură în locul căreia livrați grupul potrivit de elemente la momentul potrivit este mai critic decât credeți.

primul lucru care îmi vine în minte este modul complet diferit în care vizitatorii noștri vor scana conținutul de pe paginile mobile. Cu toții am auzit despre Modelul F sau modelul Z pe paginile de destinație post-clic pe desktop, dar care este modelul pentru mobil numit? Nu îi vom da neapărat un nume, dar cel mai probabil este foarte liniar. Derularea în sus și în jos este singura modalitate de a înțelege ce oferă pagina de destinație post-clic:

deoarece aceasta este una dintre cele mai importante limitări ale modului în care vizitatorii interacționează cu o pagină de destinație post-clic, vă sugerăm să respectați un aspect cu o singură coloană în loc să încercați să înghesuiți mult conținut pe orizontală. (Nimănui nu-i place să ciupească și să mărească.)

pe desktop, de cele mai multe ori marketerii digitali se gândesc la plasarea fiecărui element individual și la impactul pe care îl are. Pe mobil, este mai bine să faceți o schimbare și să vă gândiți la grupuri de elemente și la modul în care le stivați unul peste celălalt pentru un impact maxim.

această comparație side-by-side arată cum este structurată o pagină desktop față de o pagină mobilă:

comparație de proiectare a paginii de destinație post-clic mobil

vă recomandăm să mergeți de la stânga la dreapta și să plasați fiecare grup de elemente unul sub celălalt. Să luăm, de exemplu, zona antetului (deasupra pliului). Vom avea logo-ul în partea de sus, urmat de grupul format din titlul principal și titlul de susținere, apoi vom avea întregul grup de cutii de formular dedesubt.

capacitatea de a grupa elemente creează un set receptiv mobil nativ de obiecte. Alternativ, grupurile pot fi configurate pentru a bloca raportul de aspect al aranjamentelor complexe pentru a-și menține proporțiile exacte atunci când sunt convertite în versiunea mobilă a paginii dvs.

Mobile Aspect Ratio Lock păstrează grupările stratificate împreună și blochează raportul de aspect, indiferent dacă sunt pe un aspect desktop sau mobil.

oricare două sau mai multe elemente strâns legate sau complementare între ele ar trebui să rămână întotdeauna împreună. În această situație nu ar avea sens să aveți caseta de formular chiar în partea de sus a paginii, astfel încât conceptul de a avea formularul în zona de mai sus nu este ideal. Oferirea vizitatorului contextul a ceea ce semnează mai întâi este mai important decât a le oferi o modalitate de a acționa cât mai repede posibil.

timp de încărcare

indiferent de dispozitivul pe care îl folosesc vizitatorii dvs., viteza de încărcare a paginii este foarte importantă. Rețineți că majoritatea vizitatorilor dvs. își vor folosi limitările de date mobile și vor suporta costuri pentru a vă vedea pagina, deci aveți grijă ce fel de grafică sau elemente adăugați la pagini. Imaginați-vă doar accesarea unei pagini și redarea automată a unui videoclip.

dacă aveți nevoie de o mulțime de animații pentru susținerea conținutului, vă sugerăm să rămâneți cu imagini simple pentru mobil. Prin simplu, vreau să spun că va trebui să creați imagini de fundal personalizate pentru o anumită secțiune. Utilizarea unui software de editare a fotografiilor pentru a ajusta dimensiunea sau aspectul fotografiei ar putea merita timpul suplimentar necesar atunci când înseamnă că vă puteți accelera paginile.

același lucru cu imagini de fundal, din moment ce nu aveți nevoie de o imagine care este de 2.000 de pixeli lățime, care este de 300kb pentru a încărca în secțiunea dvs., vă sugerez obtinerea un designer pentru a crea o imagine personalizată adaptate pe care le puteți seta ca fundal secțiune:

Mobile post-click landing page design images

de cele mai multe ori păstrarea paginii mobile cât mai simplă este întotdeauna o idee bună. De exemplu, dacă aveți mai multe elemente grafice care transmit același mesaj, afișați unul pe mobil.

deoarece majoritatea telefoanelor mobile se vor adapta la dimensiunea zonei de conținut furnizate în constructorul mobil, o regulă bună este să aveți o imagine cu o lățime de cel puțin 400 de pixeli pentru a vă asigura că nu există spații goale pe laturi.

construiți o pagină de destinație post-clic AMP

crearea unei pagini de destinație post-clic pozitive pe mobil este esențială, deoarece pagina de destinație post-clic este locul în care au loc conversiile. Dacă pagina dvs. se încarcă prea încet sau creează o experiență disjunctă de la anunț la post-clic, vizitatorii vor sări.

apoi, luați în considerare faptul că Google consideră experiența post-clic pe pagina de destinație ca un factor pentru a determina rangul anunțului, care contribuie în cele din urmă la rata de clic. Adăugați toate acestea și mărcile au o problemă majoră pe mâini. Din fericire, cadrul AMP există.

paginile AMP, în special, sunt atractive pentru agenții de publicitate, deoarece permit experiențe mai convingătoare ale utilizatorilor mobili prin timpi de încărcare aproape instantanee și derulare lină, susținând în același timp o anumită personalizare a stilului și a mărcii. Deoarece AMP restricționează HTML / CSS și JavaScript, permite o redare mai rapidă a paginii de destinație post-clic. Spre deosebire de paginile mobile tradiționale, paginile AMP sunt memorate automat în cache de Google AMP Cache pentru perioade de încărcare mai rapide în Google.

beneficiile cadrului AMP depășesc cu adevărat limitările sale:

  • viteza de încărcare mai rapidă a paginii pe dispozitivele mobile
  • o experiență mai bună a utilizatorului pentru navigarea mobilă
  • utilizarea paginilor AMP poate ajuta la creșterea scorului de calitate
  • Google va favoriza paginile care utilizează AMP

începând cu iunie 2018, Instapage oferă pagini de destinație AMP post-clic în care pagini din aplicație fără Dezvoltator. Pentru că, în cele din urmă, dacă încărcarea paginii nu este instantanee, nu este suficient de rapidă.

14-day trial Instapage creați o pagină nouă

proiectare pentru atingere

una dintre cele mai mari provocări ale dvs. cu designul paginii de destinație post-clic pe mobil este să vă asigurați că este cât mai ușor posibil pentru vizitatori să ia măsuri. Această acțiune ar putea fi o depunere Formular sau un simplu robinet pe un buton. V-ați aștepta ca majoritatea oamenilor să facă unele ajustări, dar nu este întotdeauna cazul.

cu toții am experimentat pagini în care este foarte greu să atingeți ceva sau experiența nu este adaptată pentru utilizatorii de telefonie mobilă. Mai ales link — uri text-ajustarea dimensiunii oricărui element de text care este hiperlinkat este foarte utilă. Vizitatorul dvs. nu ar trebui să fie nevoit să mărească pentru a lua acțiunea dorită.

butoane

dar cea mai mare problemă pe care am observat-o este dimensiunea butoanelor de pe paginile de destinație post-clic. Echipa noastră recomandă proiectarea butoanelor care au o înălțime de cel puțin 70 de pixeli și nu vă fie teamă să le faceți cât mai largi, dar nu le întindeți niciodată pe toată lățimea (400 de pixeli), deoarece ar putea fi confundate cu o secțiune mică.

efectul hover este o atingere plăcută pentru paginile desktop, deoarece semnalează vizitatorului că pot lua măsuri asupra acelui element particular. Pe mobil, prin, efecte hover sunt redundante.

margini

pentru margini vă recomandăm să păstrați o zonă sigură de cel puțin 20 de pixeli liberi pe verticală pe fiecare parte și să evitați orice tensiune vizuală care poate apărea cu elemente prea apropiate de părțile laterale ale ecranului telefonului.

spațiul alb este ceva la fel de important pentru paginile mobile ca și pentru paginile desktop. Conceptele de bază se aplică în continuare, încercați doar să spațiați totul și să nu aveți elemente foarte apropiate unul de celălalt. Făcând acest lucru vă va ajuta să evitați tensiunea vizuală.

a avea marje consistente va duce cu siguranță la o experiență mai bună a utilizatorului. Echipa noastră se asigură de obicei că are cel puțin 20 până la 40 de pixeli între fiecare element. Cât de mult vă decideți este de până la tine, deoarece fiecare bloc ar putea avea o structură unică de elemente.

este destul de subiectiv, dar odată ce ați stabilit o regulă încercați să o reproduceți pe toată pagina și asta îi va oferi un aspect mai modern:

lizibilitate

ați crede că a putea citi clar conținutul este un dat, dar de prea multe ori am văzut pagini de destinație post-clic în care textul este fie prea mic, fie prea mare. Găsirea unui echilibru bun este destul de ușoară, o regulă bună pentru dimensiunea fontului utilizată pentru anumite elemente sunt:

  • titlu principal: 28 pixeli
  • subtitlu: 22 pixeli
  • paragrafe: 17 pixeli
  • alte detalii: 15 pixeli

desigur, puteți ajusta aceste dimensiuni, deoarece nu există o dimensiune care să se potrivească tuturor nevoilor. Cu toate acestea, ar trebui să servească drept o bază bună pentru a continua cu proiectarea unei pagini de destinație post-clic Mobile.

un alt element demn de menționat este înălțimea liniei cu elemente de text.

în anumite situații de pe desktop, este logic să aveți 1.0 sau chiar 1.2, atunci când construiți pagina de destinație post-clic mobilă, asigurați-vă că înălțimea liniei pentru elementele de text este de cel puțin 1.4.

linia de fund: cu cât dimensiunea fontului este mai mică, cu atât înălțimea liniei ar trebui să fie mai mare.

formulare

deoarece formularele sunt cea mai importantă parte a majorității paginilor de destinație post-clic, facilitarea trimiterii informațiilor este esențială.

de-a lungul paginilor noastre mobile întindem de obicei câmpurile de formular cât mai mult posibil pe orizontală și evităm situații precum un câmp de formular și butonul de pe aceeași linie. Asta e doar o experiență proastă:

un alt lucru care iese foarte des se ocupă de forme care au o mulțime de câmpuri.

cea mai bună practică pe care echipa noastră a descoperit-o este că ori de câte ori o pagină are mai mult de 2 câmpuri de formular pentru a seta poziția etichetei la exterior, facilitând vizitatorilor să știe ce informații sunt necesare în loc să încerce să-și amintească ce să introducă:

creșteți conversiile mobile începând de astăzi

la fel ca paginile desktop, designul paginii de destinație post-clic mobil se referă mai întâi la experiența utilizatorului și la ceea ce va convinge oamenii să se angajeze și să convertească. Fără a lua în considerare sugestiile de mai sus, rata de conversie mobil va suferi probabil și oamenii vor sări.

luați în considerare implementarea recomandărilor și vedeți cum paginile dvs. de destinație post-clic se transformă în active de conversie extrem de optimizate. Obțineți un demo Instapage AMP astăzi.

Lasă un răspuns

Adresa ta de email nu va fi publicată.