5 vizualinės hierarchijos koregavimai, padvigubinantys konversijas

Santrauka

Daugelis nukreipiamųjų puslapių žlunga ne dėl prasto teksto, o dėl painios vizualinės hierarchijos, kuri blaško ir slegia lankytojus. Šiame straipsnyje pateikiamas 5 žingsnių auditas, padedantis ištaisyti dažniausias maketo klaidas, naudojant realius pavyzdžius ir psichologinius principus. Sužinosite, kaip nukreipti akį nuo antraštės iki veiksmo raginimo (CTA), pašalinti blaškymą ir padidinti konversijas neperrašant nė vieno žodžio. Žingsniai apima vieno tikslo apibrėžimą, F ir Z raštų maketų taikymą, kontrasto ir baltos erdvės naudojimą bei testavimą pagal 5 sekundžių taisyklę. Kiekvienas žingsnis apima praktinius patarimus ir konkrečius pavyzdžius, kad galėtumėte juos pritaikyti nedelsiant. Pabaigoje turėsite kontrolinį sąrašą, kaip įvertinti bet kurio nukreipiamojo puslapio vizualinį srautą.

Įvadas

Kiekvieną sekundę lankytojas patenka į jūsų puslapį, per sekundės dalį jį nuskaito ir akimirksniu priima sprendimą: likti ar išeiti. Tas sprendimas beveik visiškai priklauso nuo vizualinės hierarchijos – tvarkos, kuria elementai patraukia akį. Jei jūsų antraštė, paveikslėlis ir CTA kovoja dėl dėmesio, lankytojas išeina. Šis straipsnis yra praktinis cheat sheet. Apžvelgsime penkis konkrečius koregavimus, kuriuos galite pritaikyti jau šiandien, kad sukurtumėte aiškų, įtikinamą vizualinį kelią nuo antraštės iki konversijos. Nereikia jokio perprojektavimo – tik protingesni maketo sprendimai.

1 žingsnis: Pašalinkite netvarką – vienas tikslas puslapyje

Didžiausia vizualinės hierarchijos klaida yra prašyti lankytojo padaryti per daug. Nukreipiamasis puslapis turi turėti vieną ir vienintelį konversijos tikslą. Jei jūsų puslapyje vienodai siūloma „Sužinoti daugiau“, „Užsiregistruoti“ ir „Atsisiųsti“, smegenys mato triukšmą.

Kaip tai ištaisyti: Pradėkite auditą pašalindami kiekvieną elementą, kuris tiesiogiai nepalaiko pagrindinio veiksmo. Tai reiškia antrinius mygtukus, kelias naršymo nuorodas, net socialinių tinklų dalijimosi piktogramas. Pavyzdžiui, SaaS nukreipiamasis puslapis nemokamai bandomajai versijai turėtų turėti tik vieną, ryškų mygtuką „Pradėti nemokamą bandomąją versiją“. Visa kita – atsiliepimai, funkcijos, kainodara – vizualiai turi nublankti. Naudokite pilką spalvą, mažesnį šriftą arba išdėstykite žemiau sulenkimo linijos.

Įspėjimas: Vis tiek galite įtraukti papildomos informacijos, tačiau jos vizualinis svoris turi būti akivaizdžiai mažesnis. Įsivaizduokite savo puslapį kaip piltuvą: antraštė yra plačiausia dalis, CTA – siauras išėjimas. Visi kiti elementai yra tik dekoracijos.

2 žingsnis: Pasinaudokite F ir Z raštais

Akių sekimo tyrimai rodo, kad Vakarų vartotojai nuskaito tekstinius puslapius pagal F raštą (iš kairės į dešinę, tada žemyn), o vizualinius puslapius – pagal Z raštą (iš kairės į dešinę, įstrižai žemyn, vėl iš kairės į dešinę). Dauguma nukreipiamųjų puslapių derina abu.

Kaip tai ištaisyti: Pastatykite antraštę viršuje kairėje, o šalia jos dešinėje – papildomą vaizdą ar naudos punktus. Tada per įstrižainę įdėkite CTA arba pagrindinį vaizdą. Pavyzdžiui, hero sekcija su antrašte kairėje, produkto maketu dešinėje ir mygtuku po antrašte puikiai atitinka Z raštą.

Pavyzdys: „Dropbox“ nukreipiamasis puslapis naudoja Z raštą: „Sutelkite dėmesį į tai, kas svarbu“ (viršuje kairėje), švarus ekrano vaizdas (dešinėje) ir CTA mygtukas apačioje. Akis natūraliai teka nuo antraštės prie vaizdo, tada prie mygtuko.

Įspėjimas: Nespauskite rašto. Jei jūsų turinyje gausu sąrašų, F raštas yra geresnis. Išbandykite abu, kad sužinotumėte, kuris skatina vartotojus slinkti toliau.

3 žingsnis: Naudokite kontrastą vizualinės hierarchijos piramidei sukurti

Mūsų akis traukia didžiausio kontrasto elementas. Jei jūsų CTA mygtukas yra tokios pat spalvos kaip fonas, jis išnyksta. Atvirkščiai, jei antraštė yra didžiuliu paryškintu šriftu, o CTA mažytis, antraštė pavagia dėmesį.

Kaip tai ištaisyti: Sukurkite kontrasto piramidę. Antraštė turėtų turėti didžiausią kontrastą (tamsiausia spalva šviesiausiame fone arba atvirkščiai). CTA turėtų būti antras pagal dydį, dažnai naudojant kontrastingą mygtuko spalvą (pvz., oranžinę mėlyname fone). Pagalbinis tekstas, atsiliepimai ir išnašos turėtų turėti mažesnį kontrastą – pilką tekstą, mažesnį dydį arba prislopintus fonus.

Pavyzdys: „HubSpot“ nukreipiamajame puslapyje antraštė yra juoda baltame fone, CTA – ryškiai žalias mygtukas, o pagrindinis tekstas pilkas. Kontrasto hierarchija akivaizdi: antraštė > CTA > tekstas.

Įspėjimas: Per daug kontrasto vargina akis. Naudokite tik vieną ar du didelio kontrasto elementus puslapyje.

4 žingsnis: Išlaisvinkite baltos erdvės galią

Balta erdvė (neigiama erdvė) nėra tuščia – tai galingas dizaino įrankis, grupuojantis elementus ir nukreipiantis dėmesį. Kai viskas suspausta, niekas neišsiskiria.

Kaip tai ištaisyti: Sudėję pagrindinius elementus, pridėkite gausius tarpus aplink antraštę ir CTA. Pavyzdžiui, aplink pagrindinį mygtuką palikite bent 40–60 pikselių paraštes. Atskirkite skyrius 80–100 pikselių vertikaliu tarpu. Ši izoliacija verčia akį traktuoti kiekvieną skyrių kaip atskirą vienetą.

Pavyzdys: „Apple“ nukreipiamieji puslapiai naudoja didžiules baltas erdves aplink produktų vaizdus ir tekstą, todėl kiekvienas elementas atrodo prabangus ir apgalvotas.

Įspėjimas: Mobiliųjų įrenginių vartotojai turi ribotą ekrano plotą. Mobiliajame telefone sumažinkite baltą erdvę 50%, tačiau išlaikykite santykinį tarpų santykį.

5 žingsnis: 5 sekundžių taisyklė – išbandykite savo vizualinę hierarchiją

Jūsų puslapis turėtų perteikti vertės pasiūlymą ir kitą veiksmą per 5 sekundes. Jei vartotojas negali pasakyti, ką daryti, jūsų hierarchija sugedusi.

Kaip tai ištaisyti: Parodykite savo nukreipiamąjį puslapį draugui 5 sekundėms, tada paklauskite: „Kam skirtas šis puslapis ir ką turėčiau daryti?“ Jei jie neatsako teisingai, pakoreguokite hierarchiją. Dažni pataisymai: padidinkite antraštę, perkelkite CTA virš sulenkimo linijos arba pašalinkite blaškantį foninį vaizdą.

Pavyzdys: A/B testas su antraštės dydžiu, padidintu 20%, ir CTA pakeltu 100 pikselių aukščiau. Daugelis įmonių iš šio pakeitimo vieno mato 10–20% konversijų padidėjimą.

Įspėjimas: 5 sekundžių taisyklė geriausiai tinka turiniui virš sulenkimo linijos. Ilgesniems puslapiams taikykite ją kiekvienam skyriui, vizualiai įtvirtindami skyriaus tikslą.

Išvada

Vizualinė hierarchija yra tylusis nukreipiamųjų puslapių konversijų variklis. Pašalindami netvarką, pasinaudodami natūraliais skaitymo raštais, strategiškai naudodami kontrastą, išlaisvindami baltą erdvę ir išbandydami pagal 5 sekundžių taisyklę, sukuriate aiškų kelią lankytojo akiai. Geriausia dalis? Šiems pakeitimams nereikia naujo teksto ar brangaus dizaino – tik kruopštaus esamo maketo audito. Įgyvendinkite šiuos penkis žingsnius savo kitame nukreipiamajame puslapyje ir stebėkite, kaip kyla jūsų konversijų rodiklis.

Reikia greitai įdiegti šiuos pakeitimus? Naudokite įrankį, kuris sugeneruoja visiškai optimizuotą nukreipiamąjį puslapį iš paprasto aprašymo – be kodavimo, be dizainerio, tik jūsų idėjos, per kelias minutes paverstos į konversijai paruoštą puslapį.