Pagina de destinație vs. Pagina de pornire: Care este diferența?

Publicat: 2017-02-20

Proiectarea paginii de pornire a site-ului web de la mijlocul anilor '90 a fost un coșmar total pentru standardele de proiectare de astăzi, dar în timpul copilăriei web, era tot ce știam. Hiperlinkurile turcoaz strălucitoare care pluteau în spațiul cosmic păreau o idee bună în acel moment.

Această imagine prezintă specialiștilor în marketing care au folosit Microsoft culorile strălucitoare și nicio ierarhie vizuală pe designul original al paginii de pornire a site-ului web.

Două decenii mai târziu, lucrurile s-au schimbat. Paginile de start de astăzi se concentrează mai mult pe atragerea vizitatorilor în pâlnia de marketing decât pe orbirea lor cu grafică și culori din alte lumi care acoperă spectrul vizibil. Construirea experiențelor de conversie ridicată în câteva minute este acum posibilă din cauza constructorilor de pagini de destinație.

În acest sens, paginile de start devin foarte asemănătoare paginilor de destinație după clic. Dar există încă unele diferențe majore între ele. Rețineți aceste diferențe de proiectare pentru a crea pagini extrem de eficiente.

Proiectarea paginii de pornire a site-ului web vs. proiectarea paginii de destinație după clic: Ce trebuie să știți

1. paginile de destinație după clic și paginile de pornire ale site-ului web ar trebui să fie create pentru utilizatori diferiți

Bine, deci șansele să întâlniți o pagină de pornire care pare a fi mizeria Microsoft din 1995 sunt mici. Dar de ce?

Kara Jensen, Principiul creativ la BOP Design, explică:

„Poate fi ușor să te prinzi în conceptul de site web și să uiți de utilizatorul final. Un site web de succes nu este doar o piesă vizuală minunată; este un portal pentru a-ți atrage publicul țintă și a le oferi informațiile de care au nevoie. să decidă dacă vor să devină un nou client ".

În profesiile creative, cum ar fi designul web, nu este neobișnuit ca designerii (și chiar clienții) să se atașeze atât de mult de produsul final încât să uite de cine îl fac: vizitatorul.

În urmă cu douăzeci de ani, acel spațiu spațial plin de hyperlinkuri ar fi putut părea grozav pentru designerul Microsoft, dar a fost ceva la care ținea utilizatorul? Probabil ca nu.

Ce zici de butonul lateral „FAQ” de pe a doua pagină de pornire? A fost ceva conceput pentru utilizator? Nu.

Înainte de a proiecta orice pagină, este esențial să vă întrebați „Care este scopul acestei pagini?” - sau, chiar mai bine, „Care este obiectivul unui utilizator care ajunge pe această pagină?”

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Care este scopul paginii

Pe pagina dvs. de pornire, obiectivul este imposibil de prezis pentru fiecare vizitator. Persoanele potențiale noi sau clienții potențiali reveniți ar putea dori să știe povestea din spatele afacerii dvs., în timp ce alții se vor îndrepta direct spre planuri și informații despre prețuri. De aceea, paginile de pornire includ bare de navigare și mai multe link-uri de ieșire, care oferă vizitatorilor acces ușor la orice conținut dorit.

Luați, de exemplu, pagina de pornire a produsului Zoho CRM, în care navigarea permite clienților, dezvoltatorilor și potențialilor să învețe fiecare detaliu despre instrument:

Această imagine prezintă specialiștilor în marketing cum Zoho include link-uri de navigare pe designul paginii de pornire a site-ului web pentru a-și educa publicul cu privire la produsul său.

Totuși, paginile de destinație după clic au un singur scop: să convertească un vizitator într-o ofertă. Atunci când utilizatorii navighează la pagina dvs. de destinație post-clic de pe un link promoțional, se întâmplă deoarece se gândesc să revendice oferta pe care ați promovat-o. De aceea, pe pagina dvs. de destinație după clic, este de datoria dvs. să includeți doar informațiile pe care vizitatorul dvs. le va avea nevoie pentru a determina dacă oferta respectivă merită revendicată.

Iată o pagină de destinație post-clic construită de aceeași companie:

Această imagine prezintă specialiștilor în marketing cum Zoho și-a eliminat legăturile de navigare pentru a spori experiența utilizatorului în proiectarea paginii de destinație post-clic.

Diferențe majore de proiectare pot fi observate deasupra pliantei, chiar și dintr-o privire. Lipsa de navigare pe această pagină îi menține pe vizitatori să se concentreze asupra ofertei pe care au făcut clic pentru a o evalua. Titlul de pe pagina de destinație după clic este mult mai orientat spre beneficii decât cel de pe pagina de pornire.

Sub cutie, pagina de pornire prezintă capturi de ecran din aplicație pline de linkuri către alte pagini, în timp ce pagina de destinație după clic prezintă numere specifice pentru a dovedi eficiența instrumentului.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Pagina principala:

Această imagine prezintă specialiștilor în marketing cum Zoho folosește capturi de ecran ale caracteristicilor produsului pe designul paginii de pornire a site-ului său web.

pagina de destinație după clic:

Această imagine prezintă specialiștilor în marketing cum Zoho folosește statistici pe designul paginii de destinație post-clic pentru a convinge vizitatorii să convertească.

Derulați chiar mai jos și veți vedea că pagina de pornire Zoho folosește mici paragrafe de text care îi determină pe vizitatori să prezinte pagini ale site-ului, în timp ce pagina de destinație după clic înlocuiește dovada socială:

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Pagina principala:

Această imagine prezintă specialiștilor în marketing cum Zoho CRM folosește linkuri către pagini cu caracteristici de pe site-ul său web.

pagina de destinație după clic:

Această imagine arată cum marketingul Zoho folosește dovezi sociale în proiectarea paginii de destinație după clic.

Pe pagina principală, am numărat peste 80 de linkuri către alte pagini care nu erau CTA. Pe pagina de destinație după clic, erau două. Cu toate acestea, două sunt prea multe. Raportul legăturilor către butoanele CTA (alias „raportul de conversie”) de pe pagina dvs. de destinație după clic, ar trebui să fie întotdeauna 1: 1.

Să aruncăm o privire la un alt exemplu, de data aceasta de la FreshBooks. Mai întâi, pagina de pornire a acestora, deasupra paginii:

Această imagine prezintă specialiștilor în marketing cum FreshBooks folosește un CTA de încercare gratuit deasupra paginii de pe site-ul său web.

Acum, una dintre paginile de destinație post-clic ale companiei, deasupra dosarului:

Această imagine prezintă specialiștilor în marketing cum FreshBooks folosește un CTA de încercare gratuit deasupra pliantei pe designul paginii de destinație post-clic.

Arată aproape identic, nu? Aproape, dar observați pe pagina de destinație după clic că titlul și CTA au fost modificate. În special, meniul de navigare a fost eliminat pentru a menține vizitatorii concentrați asupra evaluării ofertei.

Mai multe porțiuni ale paginii de pornire de sub fereastră sunt aceleași. Ambele prezintă dovezi sociale, aceleași paragrafe de text orientate spre beneficii și o mulțime de aceleași elemente grafice. Dar uitați-vă cu atenție și veți observa că, pe pagina de destinație după clic, toate CTA-urile secundare au fost înlocuite cu butonul „Încercați-l gratuit”.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Iată o captură de ecran de pe pagina principală:

Această imagine prezintă specialiștilor în marketing cum FreshBooks folosește un CTA secundar pe designul paginii de pornire a site-ului său web.

Iată una din pagina de destinație după clic:

Această imagine prezintă specialiștilor în marketing cum FreshBooks folosește un test CTA gratuit pe designul paginii de destinație după clic.

Nu lăsați paradoxul alegerii să intre

Amintiți-vă paradoxul alegerii: cu cât aveți mai multe opțiuni, cu atât este mai greu să luați o decizie. De aceea, întotdeauna este nevoie de mai mult timp pentru a comanda în restaurantele cu meniuri mai extinse.

În restaurantul care este pagina dvs. de destinație după clic, CTA-urile sunt elementele dvs. de meniu. Oferiți vizitatorilor dvs. una dintre care să aleagă. FreshBooks face acest lucru cu îndemnul „Încercați-l gratuit” pe toată pagina.

Pe pagina lor de start, FreshBooks oferă vizitatorilor mai multe CTA-uri, ceea ce este în regulă. Aceste „CTA secundare”, cum ar fi „Aflați mai multe”, ajută potențialii să găsească răspunsurile la întrebările lor și, dacă sunt concepute corect, nici măcar nu vor abate prea multă atenție de la CTA primar.

Puteți vedea îndemnul principal și îndemnul secundar pe această pagină?

Această imagine arată specialiștilor în marketing cum FreshBooks folosește un CTA principal și un CTA secundar pe designul paginii de pornire a site-ului web.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Vedeți cum apare „Încearcă gratuit” mai mult decât butoanele incolore „Află mai multe” de mai jos? Proiectantul acestei pagini dorește să atragă vizitatorul către butonul „Încearcă-l gratuit”, dar oferă în continuare potențialilor posibilitatea de a afla dacă nu sunt gata să încerce. Și aceasta este cea mai semnificativă diferență între o pagină de pornire a site-ului web și o pagină de destinație după clic.

Pagina principală se concentrează mai mult pe informarea și abilitarea vizitatorului, în timp ce pagina de destinație după clic se concentrează pe convingerea vizitatorului.

Obiectivul fiecărui vizitator al paginii de pornire pe care nu îl putem ști cu siguranță. Totuși, obiectivul vizitatorului paginii de destinație după clic? Este pentru a lua o decizie. Construiți o pagină de destinație corectă din punct de vedere anatomic pentru a-i ajuta să o facă.

2. Paginile de pornire urmează linia minimalistă a paginilor de destinație după clic

Deși obiectivele lor specifice ar putea fi diferite, într-un mod de bază, vizitatorii paginii de destinație după clic și vizitatorii paginii de pornire doresc același lucru. Sergie Magdalin, Chief Web Design Officer la Webflow, explică:

„Designerii din întreaga lume și-au dat seama că oamenii vizitează site-urile web pentru conținutul lor - indiferent dacă este vorba de furtuni de tweet furioase, de citiri îndelungate atentă sau de cel mai recent meme„ generat de utilizatori ”- și că rolul final al designului este de a prezenta conținut într-un mod intuitiv, eficient și” mod încântător.

Acesta este un motiv pentru trecerea de la designul skeuomorf la „abordări mai plate”, mai minimaliste ... ”

În 1995, cele mai bune practici de proiectare și euristicile web standardizate nu au fost încă dezvoltate. Creatorii de site-uri web au avut puține cercetări pe care să își bazeze desenele. Așa a ajuns internetul cu hyperlinkuri plutind în spațiul cosmic.

„Designerii din întreaga lume și-au dat seama că oamenii vizitează site-uri web pentru conținutul lor.” - @thesergie

Faceți clic pentru a trimite un Tweet

Proiectarea paginii a început să se schimbe

Pe măsură ce mai multe întreprinderi și consumatori s-au orientat către web, accentul a devenit concentrarea pe tranziția de la lumea reală la spațiul cibernetic. Proiectările skeuomorfe, cum ar fi pictograma coș de gunoi, de exemplu, au ușurat recunoașterea elementelor și funcția lor pe web.

Cu toate acestea, a existat o mare problemă cu ei. Au avut tendința să aglomereze pagini web. Și asta a interferat cu ceea ce doreau vizitatorii lor: conținut. Astăzi, elementele de design „mai plate”, minimaliste - umbrele, tipul de bază și culorile luminoase, de exemplu - îl prezintă vizitatorilor într-un mod simplu și direct.

Aceste elemente sunt, de asemenea, un element de bază al unui anumit tip de pagină: pagina de destinație după clic. Ca ascensor al unei companii pe web, o pagină de destinație după clic conține tot ce are nevoie un vizitator pentru a evalua rapid o ofertă și nimic mai mult.

Asta le face atât de eficiente la conversie. Acestea subliniază conținutul cu un aspect simplu. Și acum paginile de pornire încep să facă același lucru. Aruncați o privire la această pagină de destinație post-clic a pilotului automat:

Această imagine prezintă specialiștilor în marketing cum pilotul automat folosește elemente de convingere pe pagina de destinație gratuită de încercare post-clic pentru a atrage vizitatori și a-i converti.

Uită-te acum la pagina lor principală:

Această imagine prezintă specialiștilor în marketing cum pilotul automat folosește spațiul alb și alte elemente persuasive pe designul paginii de pornire a site-ului web pentru a atrage potențiali clienți și a genera clienți potențiali.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Destul de asemănător, nu? Faceți clic și derulați în jos pentru a vedea că desenele lor sunt similare chiar și sub pliant.

Dacă aveți nevoie de un alt exemplu, căutați înapoi la pagina de pornire FreshBooks și faceți clic pe pagina de destinație de mai sus. Astăzi, indiferent de pagina web, se concentrează pe livrarea de conținut în loc să distragă atenția de la acesta.

3. Atât paginile de destinație post-clic, cât și paginile de pornire ale site-ului web trebuie să îndrume vizitatorii cu o ierarhie vizuală

Chiar și înainte de internet, oamenii au vizionat paginile în același mod. Studiile timpurii de urmărire a ochilor au arătat că cititorii intră mai întâi pe o pagină printr-o imagine sau un titlu pe o pagină scrisă, apoi aruncă o privire în partea stângă pentru a căuta text cu marcatori sau cursiv. Copia corpului a fost citită ultima dată.

Pe web, acest lucru a devenit cunoscut sub numele de modelul în formă de F:

Această imagine arată specialiștilor în marketing cum modelul F poate îmbunătăți proiectarea paginilor de destinație după clic și experiența utilizatorului.

Pentru a-i determina pe cititori să vă vadă cel mai important conținut, va trebui să creați ceea ce se numește o „ierarhie vizuală” pe baza modului în care oamenii le place să citească. Ar trebui să arate cam așa:

  1. Folosiți imagini care atrag atenția și un titlu mare pentru a vă atrage cititorii.
  2. Împărțiți conținutul paginii dvs. cu subtitluri.
  3. Utilizați puncte glonț pentru a atrage atenția asupra elementelor dintr-o listă, cum ar fi caracteristicile și beneficiile.
  4. Utilizați copia corporală în cadrul acestor subpoziții și gloanțe pentru a elabora pe scurt.

Ierarhia ar trebui să se bazeze și pe principii familiare de design web. De exemplu, siglele sunt întotdeauna în partea stângă sus a unei pagini web. Linkurile sunt fie subliniate, fie o culoare diferită de restul textului. Nu încercați să reinventați modul în care oamenii citesc pe web. Un studiu MIT a arătat odată că oamenii preferă aspectele de pagină care sunt familiare celor care încearcă să se abată de la cele mai bune practici de lungă durată.

Exemplu

Iată un exemplu de ierarhie vizuală bună:

Această imagine arată specialiștilor în marketing cum Oracle creează o ierarhie vizuală bună prin designul paginii de destinație după clic.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Imaginea și titlul atrag atenția cititorului. Se mută la sub-titlul „Mai mult de 40.000 de organizații și filiale din întreaga lume ... și continuă să crească”. Sub aceasta, punctele glonț transmit informații importante despre software. În dreapta, un formular colectează informații despre prospect și un buton viu colorat finalizează conversia.

Exemplu de ierarhie vizuală proastă

Iată un exemplu de ierarhie vizuală defectuoasă:

Această imagine arată comercianților cum FinancialForce nu reușește să creeze o ierarhie vizuală bună a paginii de destinație după clic.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

Pagina are un titlu, un subtitlu, puncte glonț și chiar un infografic - deci ce nu este în regulă?

Ei bine, oamenii citesc de la stânga la dreapta și, deoarece formularul rupe marginea stângă, textul începe de la formular. Asta înseamnă că, în ceea ce privește cititorii, această pagină începe de la marginea dreaptă a formularului respectiv. Și asta înseamnă că cea mai critică parte a acestei pagini - forma și îndemnul - se pierde complet.

Vizitatorii vor citi subtitlul, punctele glonț și vor arunca o privire spre infografia din dreapta, deoarece se află în linia lor de vedere. Cu toate acestea, chiar și cu ajutorul acestui ajutor vizual, este nenatural ca cititorii să privească în stânga formularul atunci când restul conținutului este în dreapta.

Iată o pagină de pornire care creează o ierarhie vizuală bună (faceți clic aici pentru a vedea pagina de pornire completă):

Această imagine arată marketingilor cum Upwork creează o ierarhie vizuală bună pe pagina sa de pornire a site-ului web.

FOLOSIȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

O imagine și un titlu atrag atenția cititorului, apoi mai multe subtitluri cu conținut marcat descriu pe scurt beneficiile serviciului. Apoi, o mărturie video vorbește despre puterea Upwork. Și mai jos, un îndemn la acțiune invită vizitatorul să se alăture platformei.

Iată un exemplu de ierarhie vizuală a paginii principale (faceți clic aici pentru a vedea pagina de pornire completă):

Această imagine prezintă specialiștilor în marketing cum Telerik nu folosește o ierarhie vizuală bună cu designul paginii de pornire a site-ului web.

UTILIZAȚI INSTAPAGE PENTRU PAGINILE DE ATERIZARE ➔

La prima vedere, această pagină de pornire pare că respectă regulile unei ierarhii bune. O imagine cu un titlu suprapus atrage atenția vizitatorilor; apoi, un subtitlu introduce câteva pictograme cu marcatori. Sub aceasta, compania prezintă premii și clienți proeminenți. Dar atunci, sub asta?

Nimic. Utilizatorul trebuie să deruleze înapoi sau să caute prin subsolul site-ului web pentru a face pasul următor. Fiecare element de pe pagina dvs. ar trebui să vă ghideze vizitatorul către intrarea în pâlnia dvs. de marketing. Ar trebui să existe un CTA la sfârșitul acestei pagini.

Paginile de start și paginile de destinație ale site-urilor web au mai multe în comun decât credeți

Toate aceste discuții despre paginile de pornire ale site-urilor web și paginile de destinație post-clic vă pot face să credeți că sunt două animale complet diferite. În anumite privințe, cu siguranță sunt. Dar, la bază, sunt la fel.

Crearea paginilor de destinație după clic nu a fost niciodată atât de ușoară - până acum. Deci, înscrieți-vă astăzi pentru o demonstrație Instapage Enterprise.