Cele mai bune sfaturi pentru proiectarea paginilor de destinație mobile pe care nu le veți găsi nicăieri

Există o mulțime de resurse online care se adresează proiectelor de pagini de destinație post-clic pentru mobil, dar nu există o mulțime de instrucțiuni specifice de proiectare despre cum să construiți de fapt o pagină cu conversie ridicată.

Ce structură de structură este recomandată pentru vizualizarea pe 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 formei să fie în interior sau în exterior?

Numele meu este Cosmin Serban, Director Servicii de proiectare la Instapage. Este posibil să vă întrebați, ce face Cosmin calificat să scrie pe designul paginii de destinație post-clic pe mobil?

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:

• Au examinat peste 1.000 de pagini de destinație după clic
• Parteneriat cu clienții pentru a se asigura că mesajul lor este transmis și vizitatorii lor au o experiență bună care, în cele din urmă, duce la o conversie

Mai mult, am făcut parte din echipa care a dezvoltat peste 200 de șabloane optimizate folosite pentru a crea și lansa peste 200.000 de pagini de destinație după clic, puteți găsi șabloanele aici.

Proiectarea paginii de destinație post-clic pe mobil: 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 le creați. Fiecare pagină de destinație după clic are propriul său 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 loc să livrați grupul potrivit de elemente la momentul potrivit este mai critic decât credeți.

Primul lucru care ne vine în minte este cu totul alt mod î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 de pe desktop, dar cum se numește modelul pentru mobil? 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ă acea pagină de destinație după clic:

Deoarece aceasta este una dintre cele mai importante limitări ale modului în care vizitatorii interacționează cu o pagină de destinație după clic, vă sugerăm să rămâneți la un aspect cu o 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 specialiștii în marketing digital se gândesc la plasarea fiecărui element individual și la impactul pe care îl are acesta. Pe dispozitivele mobile, 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 altul pentru un impact maxim.

Această comparație side-by-side arată cum este structurată o pagină desktop față de o pagină 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 pliantei). 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 casete de formular dedesubt.

Abilitatea de a grupa elemente creează un set de obiecte adaptabile la nivel mobil. 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.

Blocarea raportului de aspect mobil vă menține grupările stratificate împreună și blochează raportul de aspect, indiferent dacă acestea sunt pe un desktop sau un aspect mobil.

Orice două sau mai multe elemente strâns legate sau complementare unele cu altele 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 sus nu este ideal. Este mai important să oferiți vizitatorului contextul a ceea ce înregistrează mai întâi decât să le oferiți 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 limitele de date mobile și vor suporta costuri pentru a vă vedea pagina, așadar aveți grijă ce tip de elemente grafice sau elemente adăugați la pagini. Imaginați-vă că accesați o pagină și aveți un videoclip redat automat.

Dacă aveți nevoie de o mulțime de animații pentru a susține conținutul, vă sugerăm să rămâneți cu imagini simple pentru mobil. Simplu, vreau să spun că va trebui să creați imagini de fundal personalizate pentru o anumită secțiune. Folosirea 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 imaginile de fundal, deoarece nu aveți nevoie de o imagine cu o lățime de 2.000 de pixeli, care să fie de 300kb pentru a fi încărcată în secțiunea dvs., vă sugerez ca un designer să creeze o imagine personalizată pe care să o puteți seta ca fundal al secțiunii:

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, arătați unul pe mobil.

Deoarece majoritatea telefoanelor mobile se vor adapta la dimensiunea zonei de conținut oferite de constructorul de dispozitive mobile, 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 laterale.

Creați o pagină de destinație AMP după clic

Crearea unei pagini de destinație pozitive după clic 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ță neconectată de la anunț la post-clic, vizitatorii vor sări.

Apoi, luați în considerare faptul că Google consideră experiența paginii de destinație după clic ca un factor care determină clasarea anunțului, ceea ce contribuie în cele din urmă la rata de clic. Adăugați toate acestea și mărcile au o problemă majoră pe mâna lor. 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 de telefonie mobilă, prin timpi de încărcare aproape instantanee și derulare ușoară, în timp ce acceptă în continuare o anumită personalizare a stilului și a mărcii. Deoarece AMP restricționează HTML / CSS și JavaScript, permite redarea mai rapidă a paginii de destinație după clic. Spre deosebire de paginile mobile tradiționale, paginile AMP sunt memorate automat în cache de Google AMP Cache pentru timpi de încărcare mai rapide în Google.

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

• Viteză mai mare de încărcare a paginii pe dispozitivele mobile
• Experiență mai bună a utilizatorului pentru navigarea pe mobil
• Utilizarea paginilor AMP vă poate ajuta să vă creșteți Scorul de calitate
• Google va favoriza paginile care utilizează AMP

Începând din iunie 2018, Instapage oferă pagini de destinație AMP post-clic în care specialiștii în marketing digital pot crea pagini conforme AMP în cadrul aplicației fără un dezvoltator. Pentru că, în cele din urmă, dacă încărcarea paginii nu este instantanee, nu este suficient de rapidă.

Proiectare pentru atingere

Una dintre cele mai mari provocări cu designul paginii de destinație post-clic pe mobil este să vă asigurați că vizitatorii pot acționa cât mai ușor. Acțiunea ar putea fi o trimitere de formulare sau o simplă atingere pe un buton. Te-ai aștepta ca majoritatea oamenilor să facă unele ajustări, dar nu întotdeauna este cazul.

Cu toții am experimentat pagini în care este foarte greu să atingi ceva sau experiența nu este adaptată pentru utilizatorii de telefonie mobilă. Mai ales legăturile text - ajustarea dimensiunii oricărui element text care este hiperlegat este foarte utilă. Vizitatorul dvs. nu ar trebui să meargă pentru a face acțiunea dorită.

Butoane

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

Efectul hover este o atingere plăcută pentru paginile desktop, deoarece indică vizitatorului că poate acționa asupra acelui element. Pe dispozitivele mobile, efectele de hover sunt redundante.

Margini

Pentru margini, vă recomandăm să păstrați o zonă sigură de cel puțin 20 de pixeli pe verticală liberă pe fiecare parte și să evitați orice tensiune vizuală care poate apărea cu elemente prea aproape 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, trebuie doar să încercați să spaționați totul și să nu aveți elemente foarte apropiate unele de altele. Acest lucru vă va ajuta să evitați tensiunea vizuală.

A avea margini consistente va duce cu siguranță la o experiență mai bună pentru utilizator. Echipa noastră se asigură, de obicei, să aibă cel puțin 20 până la 40 de pixeli între fiecare element. Cât de mult decideți depinde de dvs., deoarece fiecare bloc ar putea avea o structură unică de elemente.

Este destul de subiectiv, dar odată ce stabiliți o regulă, încercați să o reproduceți pe toată pagina și aceasta îi va oferi un aspect mai modern:

Lizibilitate

Ați crede că a putea citi în mod clar conținutul este un lucru 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:

• Titlul principal: 28 pixeli
• Subtitlul: 22 pixeli
• Paragrafe: 17 pixeli
• Alte detalii: 15 pixeli

Desigur, puteți regla acele dimensiuni, deoarece nu există o singură dimensiune care să se potrivească tuturor nevoilor. Cu toate acestea, ar trebui să servească ca o linie de bază bună în viitor cu proiectarea unei pagini de destinație post-clic pentru mobil.

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 creați pagina de destinație post-clic pe mobil, asigurați-vă că înălțimea liniei pentru elementele text este de cel puțin 1.4.

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

Formulare

Întrucât formularele reprezintă cea mai importantă parte a majorității paginilor de destinație post-clic, este esențial să faciliteze transmiterea informațiilor oamenilor.

De-a lungul paginilor noastre mobile, întindem de obicei câmpurile formularului cât mai mult pe orizontală și evităm situații cum ar fi să aveți un câmp formular și butonul pe aceeași linie. Aceasta este doar o experiență proastă:

Un alt lucru care apare foarte des este tratarea formelor care au multe domenii.

Cea mai bună practică pe care echipa noastră a descoperit-o este că, de fiecare dată când o pagină are mai mult de 2 câmpuri de formular pentru a seta poziția etichetei în exterior, este mai ușor pentru vizitatori să știe ce informații sunt necesare în loc să încerce să-și amintească ce să introducă:

Creșteți conversiile dvs. mobile începând de astăzi

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

Luați în considerare implementarea recomandărilor și vedeți modul în care paginile dvs. de destinație după clic se transformă în materiale de conversie extrem de optimizate. Obțineți astăzi o demonstrație Instapage AMP.