5 vizuālās hierarhijas pielāgojumi, kas dubulto reklāmguvumus

Kopsavilkums

Daudzas iegādes lapas neizdodas nevis slikta teksta, bet mulsinošas vizuālās hierarhijas dēļ, kas novērš uzmanību un pārņem apmeklētājus. Šis raksts sniedz 5 soļu auditu, lai labotu bieži sastopamās izkārtojuma kļūdas, izmantojot reālus piemērus un psiholoģiskus principus. Jūs uzzināsiet, kā vadīt skatienu no virsraksta uz aicinājumu veikt darbību (CTA), novērst traucēkļus un palielināt reklāmguvumus, nepārrakstot ne vārda. Soļi ietver viena mērķa noteikšanu, F-raksta un Z-raksta izkārtojumu izmantošanu, kontrasta un tukšās telpas izmantošanu, kā arī testēšanu ar 5 sekunžu likumu. Katrs solis ietver praktiskus padomus un konkrētus piemērus, lai jūs tos varētu nekavējoties pielietot. Beigās jums būs kontrolsaraksts, lai audita jebkuru iegādes lapu optimālai vizuālai plūsmai.

Ievads

Katru sekundi apmeklētājs nonāk jūsu lapā, to sekundes daļā apskata un pieņem acumirkļa lēmumu: palikt vai aiziet. Šis lēmums gandrīz pilnībā ir atkarīgs no vizuālās hierarhijas — secības, kādā elementi piesaista skatienu. Ja jūsu virsraksts, attēls un CTA cīnās par uzmanību, apmeklētājs aiziet. Šis raksts ir praktisks ceļvedis. Mēs apskatīsim piecus konkrētus pielāgojumus, ko varat pielietot jau šodien, lai izveidotu skaidru, pārliecinošu vizuālo ceļu no virsraksta līdz konversijai. Nav nepieciešama pārprojektēšana — tikai gudrākas izkārtojuma izvēles.

1. solis: Atbrīvojieties no jucekļa – viens mērķis lapā

Lielākā vizuālās hierarhijas kļūda ir prasīt apmeklētājam darīt pārāk daudz. Iegādes lapai ir jābūt vienam un tikai vienam konversijas mērķim. Ja jūsu lapa piedāvā “Uzzināt vairāk”, “Reģistrēties” un “Lejupielādēt” ar vienādu svaru, smadzenes redz troksni.

Kā to labot: Sāciet savu auditu, noņemot katru elementu, kas tieši neatbalsta primāro darbību. Tas nozīmē sekundāras pogas, vairākas navigācijas saites, pat sociālo tīklu kopīgošanas ikonas. Piemēram, SaaS iegādes lapai bezmaksas izmēģinājumam vajadzētu būt tikai vienai, izcilai pogai “Sākt bezmaksas izmēģinājumu”. Visam pārējam — atsauksmēm, funkcijām, cenām — vizuāli jāatkāpjas. Izmantojiet pelēku krāsu, mazāku tekstu vai novietojiet tos zem locījuma.

Piezīme: Jūs joprojām varat iekļaut atbalsta informāciju, bet tās vizuālajam svaram jābūt acīmredzami zemākam. Domājiet par lapu kā piltuvi: virsraksts ir platākā daļa, CTA ir šaurā izeja. Visi pārējie elementi ir tikai ainava.

2. solis: Izmantojiet F un Z rakstus

Acu kustību pētījumi liecina, ka Rietumu lietotāji skenē tekstam bagātās lapās F-rakstā (no kreisās uz labo, tad uz leju) un vizuālajās lapās Z-rakstā (no kreisās uz labo, pa diagonāli uz leju, no kreisās uz labo). Lielākā daļa iegādes lapu sajauc abus.

Kā to labot: Novietojiet virsrakstu augšējā kreisajā stūrī, kam seko atbalsta attēls vai ieguvumu saraksts labajā pusē. Pēc tam pa diagonāli novietojiet CTA vai galveno vizuālo elementu. Piemēram, hero sadaļa ar virsrakstu pa kreisi, produkta maketu pa labi un pogu zem virsraksta lieliski darbojas ar Z-rakstu.

Piemērs: Dropbox iegādes lapā tiek izmantots Z-raksts: “Koncentrējieties uz svarīgo” (augšā pa kreisi), tīrs ekrānuzņēmums (pa labi) un CTA poga zemāk. Acs dabiski plūst no virsraksta uz attēlu un pogu.

Piezīme: Nespiediet rakstu. Ja jūsu saturs ir sarakstiem bagāts, F-raksts ir labāks. Pārbaudiet abus, lai redzētu, kurš notur lietotājus ritināšanā.

3. solis: Izmantojiet kontrastu, lai izveidotu vizuālās hierarhijas piramīdu

Mūsu acis piesaista elements ar visaugstāko kontrastu. Ja jūsu CTA poga ir tādā pašā krāsā kā fons, tā pazūd. Savukārt, ja virsraksts ir milzīgā treknrakstā un CTA ir mazs, virsraksts nozag uzmanību.

Kā to labot: Izveidojiet kontrasta piramīdu. Virsrakstam jābūt ar visaugstāko kontrastu (tumšākā krāsa uz gaišāka fona vai otrādi). CTA jābūt otrajam augstākajam, bieži izmantojot kontrastējošu pogas krāsu (piem., oranžu uz zila). Atbalsta tekstam, atsauksmēm un zemsvītras piezīmēm jābūt ar zemāku kontrastu — pelēks teksts, mazāks izmērs vai klusināts fons.

Piemērs: HubSpot iegādes lapā virsraksts ir melns uz balta, CTA ir spilgti zaļa poga, un pamatteksts ir pelēks. Kontrasta hierarhija ir acīmredzama: virsraksts > CTA > pamatteksts.

Piezīme: Pārāk daudz kontrasta nogurdina acis. Izmantojiet tikai vienu vai divus augsta kontrasta elementus lapā.

4. solis: Atbrīvojiet baltās telpas spēku

Baltā telpa (negatīvā telpa) nav tukša — tā ir spēcīgs dizaina rīks, kas grupē elementus un virza fokusu. Kad viss ir saspiests, nekas neizceļas.

Kā to labot: Pēc pamatelementu novietošanas pievienojiet plašas malas ap virsrakstu un CTA. Piemēram, novietojiet vismaz 40–60 pikseļu atstarpi ap primāro pogu. Atdaliet sadaļas ar 80–100 pikseļu vertikālo atstarpi. Šī izolācija liek acij uztvert katru sadaļu kā atšķirīgu vienību.

Piemērs: Apple iegādes lapās ap produktu attēliem un tekstu tiek izmantota milzīga baltā telpa, padarot katru elementu greznu un apzinātu.

Piezīme: Mobilajiem lietotājiem ir ierobežots ekrāna izmērs. Mobilajā versijā samaziniet balto telpu par 50%, bet saglabājiet relatīvo atstarpju attiecību.

5. solis: 5 sekunžu likums – pārbaudiet savu vizuālo hierarhiju

Jūsu lapai jākomunicē vērtības piedāvājums un nākamā darbība 5 sekunžu laikā. Ja lietotājs nevar pateikt, ko darīt, jūsu hierarhija ir salauzta.

Kā to labot: Parādiet savu iegādes lapu draugam uz 5 sekundēm, pēc tam jautājiet: “Kam domāta šī lapa, un kas man jādara?” Ja viņi neatbild pareizi, pielāgojiet hierarhiju. Biežākie labojumi: padariet virsrakstu lielāku, pārvietojiet CTA virs locījuma vai noņemiet traucējošu fona attēlu.

Piemērs: A/B pārbaudiet versiju, kurā virsraksta izmērs ir palielināts par 20% un CTA pārvietota par 100 pikseļiem augstāk. Daudzi uzņēmumi no šī vien pielāgojuma iegūst 10–20% konversijas pieaugumu.

Piezīme: 5 sekunžu likums vislabāk darbojas saturam virs locījuma. Garākām lapām piemērojiet to katrai sadaļai, vizuāli noenkurojot sadaļas mērķi.

Secinājums

Vizuālā hierarhija ir klusais iegādes lapu konversiju virzītājs. Noņemot jucekli, izmantojot dabiskus skenēšanas modeļus, stratēģiski pielietojot kontrastu, izmantojot balto telpu un testējot ar 5 sekunžu likumu, jūs radāt skaidru ceļu apmeklētāja acīm. Labākā daļa? Šie pielāgojumi neprasa jaunu tekstu vai dārgu dizainu — tikai rūpīgu esošā izkārtojuma auditu. Ieviesiet šos piecus soļus savā nākamajā iegādes lapā un vērojiet, kā jūsu konversiju līmenis kāpj.

Vajag ātri ieviest šīs izmaiņas? Izmantojiet rīku, kas ģenerē pilnībā optimizētu iegādes lapu no vienkārša apraksta — bez koda, bez dizainera, jūsu idejas pārvērš konversijai gatavā lapā dažu minūšu laikā.