Crearea unei ierarhii vizuale: arta de a atrage atenția

„Ar trebui să arunc acest gunoi sau să-l citesc?” subiecții cercetării se întreabă în timp ce examinează o bucată de poștă directă. De sus în jos, ei evaluează litera și, după doar 11 secunde, iau o decizie.

În acea perioadă, experimentatorii de la Asociația de Marketing Direct din München observă ceva ciudat despre ochii subiecților. Ei nu urmează o cale liniară, citind fiecare cuvânt în succesiune, ci în loc să sară în diferite puncte din corpul literei. Deci, la ce se uitau?

Răspunsul este cheia creării unei pagini de destinație post-clic care se convertește, cu ajutorul a ceea ce se numește „ierarhie vizuală”. Pentru a o înțelege pe deplin, va trebui să călătorim înapoi în Germania din 1912, unde trei psihologi au început să formeze bazele Psihologiei Gestalt.

Psihologia Gestalt și fundamentul ierarhiei vizuale

Cu mai bine de un secol în urmă, gânditorii germani Wolfgang Kohler, Max Wertheimer și Kurt Koffka au început să studieze modul în care oamenii percep lumea. Este posibil ca numele lor și teoria „Psihologiei Gestalt” să nu pară familiare, dar mesajul care cuprinde cercetarea lor va:

„Întregul este altul decât suma părților sale” - adică întregul are „o existență independentă în sistemul perceptiv”, spune dr. Russ Dewey.

Cu alte cuvinte, cei trei bărbați au propus ca oamenii să nu-și perceapă împrejurimile în mod individual și în mod egal. În schimb, le organizăm în moduri specifice pentru a le da sens în ansamblu.

Luați, de exemplu, următoarea imagine. Ce vezi?

Probabil observați trei cercuri parțial desenate, dar și un triunghi cu capul în jos în centru unde nu există niciunul. Cercurile incomplete formează colțurile triunghiului, iar mintea ta se umple în margini. Aceasta se numește „contur iluzoriu” și exemplifică exact ce a vrut să spună Koffka când a spus: „întregul este altul decât suma părților sale”. Există mai mult de doar trei cercuri parțial desenate în această imagine. Împreună, poziționate așa cum sunt, acele cercuri formează un triunghi alb.

Din cercetările lor, cei trei bărbați au creat opt ​​legi ale organizării perceptive - moduri în care oamenii văd componentele unui grup ca întreg. Mai mult decât oricare altul are legătură cu modul în care oamenii găsesc informații cruciale pe pagina dvs. de destinație după clic.

Legile similitudinii

Legea similarității afirmă că lucruri similare apar ca și cum ar fi grupate împreună. În imaginea de mai jos, ce vedeți?

Dacă ați spus „36 de cercuri” sau „6 rânduri de cercuri” sau „6 coloane de cercuri”, sunteți în minoritate. Majoritatea oamenilor văd trei rânduri de cercuri negre și trei rânduri de cercuri albe. Deoarece fiecare alt rând este colorat și format în mod similar, este văzut ca parte a propriului grup din întreg.

În același timp, datorită acestei tendințe de a grupa lucruri similare împreună, observăm și lucruri care nu sunt similare grupului. Psihologii Gestalt au numit aceste diferențe „anomalii”.

În imaginea de mai sus, grupăm toate merele verzi similare împreună, iar cel roșu iese în evidență ca o anomalie. Indiferent dacă acea anomalie este diferită ca mărime, culoare sau formă, ne atrage atenția, deoarece este diferită de restul grupului.

Acest proces de grupare perceptivă a elementelor poate explica ceea ce au observat experimentatorii din Asociația de Marketing Direct din München în ochii subiecților de cercetare.

Ce este o ierarhie vizuală?

Brandon Jones de la Tuts + spune că oamenii nu sunt „vizitatori cu șanse egale”. Nu numai că avem tendința de a observa diferențe între grupuri, ci și de a face inferențe despre importanță din acele diferențe. De exemplu, clasificați cercurile din această imagine:

Fără să știți nimic despre ele, probabil că le-ați clasat astfel:

Și asta pentru că cel mai mare cerc atrage cea mai mare atenție, apoi al doilea cel mai mare și așa mai departe. Acum să aplicăm un principiu similar cuvintelor de pe pagină.

Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție.

În acel fragment, probabil că ochii tăi au fost atrași de anomalie. Ați grupat propozițiile neformatate împreună, iar cuvintele cu caractere aldine au ieșit în evidență. Când introduceți diferențe de mărime, atenția este atrasă în altă parte.

Aceasta este cea mai importantă propoziție.
Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție. Aceasta este cea mai importantă propoziție.

De data aceasta, înainte de a observa cuvintele cu caractere aldine din paragraf, probabil că ați văzut deasupra cuvintele cu caractere aldine și mai mari. Am putea continua să modificăm cuvintele cu culoare și poziționare pentru a le face să iasă în evidență și mai mult, dar ai înțeles. „Diferit” atrage atenția, iar atenția pe care doriți să o acordați celor mai importante informații de pe pagina dvs. de destinație după clic.

Cu diferențe în ceea ce privește designul, puteți atrage în mod strategic privirile vizitatorilor dvs. către mesajele de marketing care sunt esențiale pentru generarea conversiilor - propunerea dvs. de valoare, beneficiile produsului dvs. și îndemnul, de exemplu. Aceste strategii care atrag atenția formează „ierarhia vizuală”.

În cadrul acestei ierarhii, cele mai importante informații sunt locul în care ochii vizitatorilor dvs. aterizează mai întâi pe pagină, apoi a doua informație cea mai importantă este locul în care ochii lor aterizează și așa mai departe. Fără să-și dea seama, ei clasifică mental aceste elemente de la cruciale la inutile pe baza diferențelor.

Citirea stilurilor de pe și de pe web

Acum, să revenim la experimentul Asociației de Marketing Direct din München, în care subiecții au ales dacă aruncați la gunoi sau citesc o scrisoare de vânzare în doar 11 secunde. Au putut lua o decizie atât de repede din cauza diferențelor de proiectare.

În primul rând, ochii lor au sărit la ceea ce au perceput a fi cele mai importante informații de pe pagină: titluri și fotografii. Apoi, subtitrările, listele cu marcatori și paragrafele scurte au atras atenția. Copia lungă, neformatată, a fost digerată ultima, dacă nu.

De atunci, numeroase studii au consolidat descoperirile, mai ales cercetarea Nielsen Norman Group care a dat naștere „modelului în formă de F”. După ce a urmărit privirea a 232 de subiecți pe mii de pagini web, grupul a găsit:

• Primii utilizatori citesc în partea de sus a paginii, creând bara orizontală superioară a formei „F”.
• Apoi, oamenii progresează mai jos pe pagină, citind sub-linii pentru a forma bara orizontală inferioară a „F.”
• În cele din urmă, utilizatorii scanează în partea stângă, formând tija verticală a „F.”

Arăta cam așa:

Totuși, numele „în formă de F” este puțin înșelător. După cum explică cercetătorii, tiparele de citire ale utilizatorilor de internet nu sunt întotdeauna atât de îngrijite:

Evident, modelele de scanare ale utilizatorilor nu sunt întotdeauna compuse exact din trei părți. Uneori utilizatorii vor citi o a treia parte a conținutului, făcând ca modelul să arate mai mult ca un E decât un F. Alteori vor citi doar o singură dată, făcând ca modelul să arate ca un L inversat (cu bara transversală în partea de sus) . Cu toate acestea, în general, modelele de citire seamănă aproximativ cu un F, deși distanța dintre bara superioară și cea inferioară variază.

Indiferent dacă este vorba de un „F”, un „L”, un „E” sau chiar un model „în formă de Z” pentru pagini mai puțin grele, implicațiile sunt aceleași: persoanele vorbitoare de limba engleză citesc de la stânga la dreapta și de sus în jos în timp ce căutați diferențe de conținut. Titluri, subtitluri, imagini, cuvinte cu caractere aldine, subtitrări, liste - acestea sunt elemente diferite de textul standard neformatat.

Uită-te la paginile simulate de mai jos:

Nu conțin cuvinte reale, totuși probabil că ești capabil să-l organizezi mental pe cel drept mai bine decât pe stânga. Cea dreaptă găzduiește stilul de citire cu modelul F, în timp ce stânga nu își organizează conținutul într-o ierarhie vizuală.

Știm deja din cercetări că blocuri de text precum cele de pe pagina din stânga rareori sunt citite. Deci, cum te asiguri că ai tăi?

Proiectați cu diferențe în minte

Înainte de a începe să creați o ierarhie vizuală, aveți nevoie de un obiectiv, spune Peep Laja de la CXL:

Ar trebui să clasați elementele de pe site-ul dvs. web pe baza obiectivului dvs. de afaceri. Dacă nu aveți un obiectiv specific, nu puteți ști ce să acordați prioritate.

El folosește o captură de ecran a unei pagini de pornire Williams Sonoma pentru a demonstra:

Cel mai mare captator de ochi este imensa bucată de carne (fă-mă să vreau), urmată de titlu (spune ce este) și butonul de chemare la acțiune (ia-l!). Locul al patrulea merge la un paragraf de text sub titlu, al cincilea este bannerul de transport gratuit, iar navigarea de sus este ultima. Aceasta este o ierarhie vizuală bine realizată.

Totuși, pe pagina dvs. de destinație după clic, nu ar trebui să existe un meniu de navigare. Deci, atenția va fi atrasă puțin diferit. Să aruncăm o privire la o pagină de destinație post-clic din Simply Measured:

Unde ți-au aterizat ochii mai întâi? Următorul? Ultimul? Dacă ar fi să ghicim, am spune ...

1. Titlul: „Cum să faceți deciziile de marketing social mai rapide”.
2. Subtitlul: „Aflați cum să economisiți timp și să arătați ca un profesionist”.
3. Textul cu caractere aldine: „În acest ghid veți învăța cum să ...”
4. Copia cu marcatori sub textul cu caractere aldine.
5. Îndemnul: „Trimiteți”.

Acesta este un exemplu de mare ierarhie vizuală, deoarece transmite informații în ordinea cea mai relevantă pentru vizitatori. În primul rând, titlul și subtitlul comunică USP-ului ofertei într-un mod orientat spre beneficii. Perspectivele înțeleg imediat că vor învăța cum să ia decizii sociale mai rapid cu oferta de pe această pagină.

După aceea, scanând partea stângă a paginii în tipicul tipar F, vizitatorii observă textul cu caractere aldine care îi duce la lista cu marcatori, care detaliază exact ce trebuie câștigat prin revendicarea ofertei.

În cele din urmă, potențialii scanează puțin mai jos, apoi pe pagină, unde văd butonul de îndemn care a fost colorat diferit față de restul elementelor de pe pagină pentru a atrage atenția. Le permite să știe cum să-și revendice oferta.

Copia corpului poate fi citită în totalitate după ce aceste trei elemente sunt fixate, dar nu este posibil - motiv pentru care este important să evidențiați cele mai importante informații. În această ordine, ierarhia dvs. vizuală ar trebui cel puțin:

1. Atrageți atenția cu un titlu și informați vizitatorii de ce ar trebui să citească restul paginii dvs.
2. Elaborați pe scurt beneficiile ofertei dvs. cu cuvinte cu caractere aldine, text cu marcatori și paragrafe mici.
3. Arătați-le cum să revendice oferta cu un îndemn.

Deci, cum faceți asta cu elemente de design? Știți că „diferit” atrage atenția, ceea ce la rândul său transmite importanță - dar ce elemente de design ar trebui să utilizați atunci când creați o ierarhie vizuală?

Caracteristicile care au impact asupra ierarhiei vizuale

Potrivit designerului și autorului independent Steven Bradley, cinci caracteristici pot fi manipulate pentru a forma o ierarhie vizuală pe pagina dvs.:

• Dimensiune - După cum v-ați aștepta, elementele mai mari au o greutate mai mare
• Culoare - Nu se înțelege pe deplin de ce, dar unele culori sunt percepute ca cântărind mai mult decât altele. Roșul pare a fi cel mai greu, în timp ce galbenul pare a fi cel mai deschis.
• Densitate - Ambalarea mai multor elemente într-un spațiu dat conferă mai multă greutate spațiului respectiv
• Valoare - Un obiect mai întunecat va avea mai multă greutate decât un obiect mai deschis
• Spațiu alb - Spațiul pozitiv cântărește mai mult decât spațiul negativ sau spațiul alb

Gradul în care utilizați aceste elemente pe pagina dvs. de destinație după clic va afecta locul unde vizionează vizitatorii. Iată cum să le utilizați pentru a vă crea ierarhia vizuală:

• Dimensiune: titlul dvs. ar trebui să fie cel mai mare text de pe pagina dvs. Dacă aveți unul, subtitlul ar trebui să fie al doilea ca mărime. Mai mici decât acestea ar trebui să fie subtitrările pe care le utilizați pentru a separa conținutul dacă pagina dvs. este lungă, iar cea mai mică ar trebui să fie copia corpului neformatat.

• Culoare: acest element este cel mai important pentru îndemnul dvs. Schema de culori joacă un rol important în ghidarea vizitatorului către butonul dvs. Cheia aici este contrastul. Observați că pe pagina de destinație Simple-Measured după clic, culoarea portocalie apare o singură dată pe o pagină albastră și albă. Acest lucru face ca butonul CTA să fie extrem de vizibil pentru vizitator.

• Densitate: Uită-te din nou la pagina Williams-Sonoma. Titlul și îndemnul sunt ambele suprapuse pe imaginea prezentată. Ambalând toate aceste elemente într-un spațiu atât de mic, designerii au atras mai multă atenție asupra acestuia decât meniul sau bannerul de mai sus.

• Valoare: cuvintele îndrăznețe atrag mai multă atenție decât cele neformatate. Titlul, subtitlul și copia corpului care introduce avantajele ofertei dvs. ar trebui să aibă mai multă valoare decât restul textului de pe pagina dvs.

• Spațiu alb: Amintiți-vă înapoi la rezultatele studiului realizat de Asociația de Marketing Direct din München - unul dintre cei mai mari captori de atenție sunt paragrafele mici. „Aruncați” textul în secțiuni formate din maximum trei propoziții îl poate face nu numai mai atrăgător, ci și mai ușor de citit și de păstrat.

Citiți cele mai importante informații

Ierarhia vizuală ajută vizitatorii să acorde prioritate informațiilor de pe pagina de destinație după clic. Convingeți-vă vizitatorii să convertească creând una care:

• Subliniază USP în titlu
• Transmite beneficiile ofertei dvs. în copia corporală
• Anunțați potențialii cum să revendice oferta dvs. cu butonul CTA

Începeți să vă proiectați ierarhia vizuală rapid și ușor, înscrieți-vă astăzi pentru o demonstrație Instapage Enterprise.