Cum se folosește modelul F pentru a crește conversiile

Crearea paginii dvs. de destinație post-clic pentru a include toate elementele vitale ale paginii de destinație post-clic este importantă, dar la fel de importantă este și ordinea și locația lor - aspectul paginii dvs. de destinație post-clic.

Când vă proiectați aspectul paginii de destinație după clic, este esențial să luați în considerare modul în care vizitatorii dvs. sunt cel mai probabil să vă vadă pagina. Recunoașterea tendinței noastre de a citi de sus în jos este un bun început pentru a determina vizitatorii să se concentreze asupra a ceea ce doriți să facă. Știind unde este probabil să meargă privirea lor, puteți crea o ierarhie vizuală și puteți plasa CTA în cele mai bune locații pentru a le converti.

De asemenea, au existat cercetări ample pentru a sprijini acest lucru. În 2006, Nielsen Norman Group a realizat ceea ce este acum unul dintre cele mai utile și mai citate studii de urmărire a ochilor până în prezent. În timpul studiului, au examinat modul în care 232 de utilizatori au văzut mii de pagini web diferite. Descoperirile au concluzionat că comportamentul principal al utilizatorilor la citire a fost relativ consistent pe diferite site-uri și sarcini. Utilizatorii citesc într-un aspect F-Pattern.

Ce este modelul F?

Modelul F este modul în care ne mișcă ochii atunci când citim conținut online. În câteva secunde, ochii noștri se mișcă la viteze remarcabile în copierea site-ului web și în alte elemente vizuale, scanând pagina în această ordine:

• În primul rând, în partea de sus a paginii pentru a citi titluri importante
• Apoi, în partea stângă a paginii pentru a vizualiza cifre sau puncte glonț
• În cele din urmă, reveniți peste pagină pentru a citi text cu caractere aldine sau subtitluri

Cele trei hărți de căldură de mai jos sunt derivate din studii de urmărire a ochilor de către utilizatori ale a trei site-uri web diferite. Tasta de culoare este după cum urmează:

• Roșu = cel mai vizualizat și cel mai fixat
• Galben = unele vizualizări, dar mai puțină fixare
• Albastru = cel mai puțin vizualizat și cu greu fixări
• Gri = cu greu vizualizări și fără fixări

Observați că modelul F-Reading este mai degrabă un contur aspru, generalizat - nu neapărat o formă F exactă. De asemenea, rețineți că designul F-Pattern nu se limitează la două tulpini orizontale ca un F. tradițional.

Vor exista momente în care utilizatorii citesc doar pe o singură linie orizontală, făcând ca modelul să arate ca un cap pe sus L. Alteori vor citi o a treia secțiune a paginii, făcând ca designul să semene mai mult cu un E decât cu un F. Și , dacă pagina dvs. de destinație după clic este mai lungă, veți dori să includeți mai mult de două tulpini pentru a ajuta la crearea unei ierarhii vizuale pe care oamenii sunt mai susceptibili să o urmeze.

Cum se aplică modelul F pentru paginile de destinație după clic

Este important să proiectați pagini web cu un flux intenționat. Fără nimic plasat special pentru a atrage atenția spectatorilor, ochii lor se vor mișca în mod natural pe o pagină cu conținut ridicat în designul F-Pattern.

Designul F-Pattern funcționează cel mai bine pentru paginile care sunt dense cu text - cum ar fi postările de blog, paginile cu rezultatele căutării, paginile de vânzări mai lungi etc. Cu toate acestea, asta nu înseamnă că nu puteți proiecta pagini de destinație post-clic în formă scurtă cu aspectul F-Pattern.

Folosind rezultatele studiilor de urmărire a ochilor, puteți proiecta strategic orice pagină de destinație după clic, astfel încât cele mai importante elemente să fie exact locul în care vizitatorii dvs. sunt cel mai probabil să se concentreze asupra lor.

Rețineți că ochii spectatorilor vor începe aproape întotdeauna în colțul din stânga sus al paginii înainte de a scana restul paginii. Deci, dacă pagina dvs. de destinație post-clic este ocupată și doriți ca vizitatorii să observe un anumit element chiar de pe bat - cum ar fi o numărătoare inversă pentru oferta dvs. - asigurați-vă că îl plasați în această secțiune din stânga sus. Apoi, proiectați restul paginii dvs. de destinație post-clic cu o ierarhie vizuală clară și un flux care vă conduce spectatorii la CTA.

O pagină de destinație după clic care ignoră modelul F.

Pest Exterminator a creat această pagină de destinație după clic și nu urmează F-Layout. Îi lipsește orice ierarhie vizuală:

Unde îți merge atenția mai întâi? Imaginea? Reducerea? Câmpul cu o singură formă? Cele trei oferte din partea de jos?

Ochii tăi nu sunt atrași de un anumit loc. Se întâmplă prea multe pentru a vă atrage atenția în mai multe direcții diferite. Fiecare element a fost formatat pentru a atrage cât mai multă atenție, ceea ce îi face pe toți să concureze între ei. Prin urmare, este dificil pentru vizitatori să identifice obiectivul principal al paginii, iar Pest Exterminator se va lupta probabil în generarea de conversii.

Acum, să ne uităm la câteva exemple de pagini de destinație după clic care urmează modelul F-Reading.

Rețineți, pentru paginile de destinație mai scurte după clic, am arătat întreaga pagină. Pentru pagini mai lungi, am afișat numai deasupra pliantei. În plus, unele dintre mărcile enumerate pot fi A / B care își testează pagina cu o versiune alternativă decât cea afișată mai jos.

faceți clic pe paginile de destinație care urmează F-Layout

Dovico

Pagina de destinație post-clic Dovico de mai sus folosește cele mai bune practici de design web F-Pattern. Observați cum fiecare componentă importantă este localizată exact de-a lungul traseului F-Pattern, unde vizitatorii vor privi în mod natural atunci când vizionează această pagină:

1. Spectatorii se vor uita mai întâi în colțul din stânga sus al paginii, unde vor vedea sigla companiei.
2. Mișcându-se de-a lungul primei tulpini orizontale, vor ajunge apoi la fața zâmbitoare a femeii. Ceea ce este deosebit de interesant aici este că unghiul F se înclină în jos spre fața ei și nu este direct direct către numerele de telefon.
3. Trecând în partea stângă a paginii la următoarea tijă orizontală, spectatorii își vor concentra atenția asupra titlului și a liniei secundare.
4. În cele din urmă, vor continua modelul F în jos pe tija verticală, unde vor ajunge la butonul CTA, care este obiectivul principal al paginii de destinație după clic.

Plasarea celor mai esențiale elemente ale paginii de destinație după clic de-a lungul aspectului F-Layout astfel ajută la optimizarea paginii Dovico și la convingerea vizitatorilor să ia măsuri cu privire la ofertă.

Randament dinamic

Pagina de destinație post-clic a Dynamic Yield urmărește, de asemenea, aspectul F-Pattern, dar din moment ce numele și sigla lor sunt cel mai mic lucru de deasupra dosarului, ochii privitorului vor începe probabil într-o altă locație:

1. Probabil că vor fi atrași mai întâi de titlul paginii, deoarece fontul este mai mare și o parte din acesta este îndrăzneață.
2. Apoi, se vor deplasa de-a lungul primei tulpini către imaginea din dreapta, care completează prima tulpină orizontală.
3. Scanând tulpina verticală, spectatorii vor citi subtitlul.
4. Continuând în jos, butonul CTA albastru strălucitor va atrage atenția vizitatorului în continuare.
5. După butonul CTA, insignele pentru clienți acționează ca o tijă de adăugare, iar pagina continuă într-un mod similar sub fereastră.

Chiropractica comună

Întrucât modelele F-Pattern nu trebuie întotdeauna să urmeze o formă F tradițională, observați cum pagina de destinație post-clic a Chiropracticului comună are destul de multe tulpini orizontale:

1. Similar cu Randamentul dinamic, titlul începe modelul F (și continuă spre dreapta cu formularul).
2. În al doilea rând, declarația de misiune (în format mai mare decât restul copiei) se încadrează de-a lungul următoarei tulpini.
3. În cele din urmă, iconografia și beneficiile îndrăznețe ale Chiropracticii comune alcătuiesc ultimele tulpini ale modelului.

În ciuda numărului mai mare de tulpini, pagina a fost creată având în vedere cele mai bune practici de design web F-Pattern - facilitând vizitatorii să urmărească și să se concentreze pe cele mai importante părți ale paginii de destinație post-clic.

Boston Globe

Pagina de destinație post-clic din Boston Globe nu urmează o formă F tipică, ceea ce îi ajută în cele din urmă să convingă vizitatorii să convertească la promoție:

1. Începând din colțul din stânga sus, vizitatorii observă mai întâi sigla ziarului.
2. Direct sub siglă se află titlul, urmat de imagine de-a lungul aceleiași tulpini orizontale.
3. Continuând în jos pe tija verticală, vizitatorii se fixează pe butonul CTA verde strălucitor.
4. Dacă aleg să continue mai departe pe tulpina verticală, vor afla la ce se pot aștepta atunci când se înscriu pentru acces nelimitat.

Este rândul tău să folosești modelul F

Includerea tuturor elementelor necesare pentru pagina de destinație după clic este importantă pentru conversii, dar aspectul lor este la fel de important.

Designul F-Pattern vă ajută să stabiliți o ierarhie vizuală și un flux intenționat pentru a determina vizitatorii să se concentreze asupra unor elemente specifice. Dacă îi puteți determina să urmeze calea dorită, vor avea mai puține șanse să sară și, în schimb, să fie mai implicați și să acționeze pe pagina dvs.

Având în vedere aceste exemple, este rândul tău să pui în practică F-Layout. Creați-vă propria pagină de destinație profesională post-clic cu Instapage, solicitați azi o demonstrație Enterprise.