5 visuaalse hierarhia nippi, mis kahekordistavad konversioone

Kokkuvõte

Paljud sihtlehed ebaõnnestuvad mitte halva teksti, vaid segase visuaalse hierarhia tõttu, mis hajutab ja koormab külastajaid. See artikkel pakub 5-sammulist auditit levinud paigutusvigade parandamiseks, kasutades reaalseid näiteid ja psühholoogilisi põhimõtteid. Saate teada, kuidas suunata pilk pealkirjast tegevuskutsuni, kõrvaldada segajad ja suurendada konversioone ilma ühtki sõna ümber kirjutamata. Sammud hõlmavad ühe eesmärgi määratlemist, F-mustri ja Z-mustri paigutuste rakendamist, kontrasti ja tühja ruumi kasutamist ning testimist 5-sekundi reegliga. Iga samm sisaldab praktilisi nõuandeid ja konkreetseid näiteid, et saaksite neid kohe rakendada. Lõpuks on teil kontrollnimekiri mis tahes sihtlehe auditeerimiseks optimaalse visuaalse voo tagamiseks.

Sissejuhatus

Igal sekundil maandub külastaja teie lehele, skannib selle sekundi murdosa jooksul ja teeb hetkeotsuse: jääda või lahkuda. See otsus sõltub peaaegu täielikult visuaalsest hierarhiast – järjekorrast, milles elemendid pilku köidavad. Kui teie pealkiri, pilt ja tegevuskutse võitlevad tähelepanu pärast, külastaja lahkub. See artikkel on praktiline petuleht. Vaatame läbi viis konkreetset nippi, mida saate juba täna rakendada, et luua selge ja veenev visuaalne tee pealkirjast konversioonini. Ümberkujundust pole vaja – ainult targemad paigutusvalikud.

Samm 1: Kõrvaldage segadus – üks eesmärk lehe kohta

Suurim visuaalse hierarhia viga on paluda külastajal teha liiga palju. Sihtlehel peab olema üks ja ainult üks konversioonieesmärk. Kui teie leht pakub võrdse kaaluga „Lisateave”, „Registreeru” ja „Laadi alla”, näeb aju müra.

Kuidas seda parandada: Alustage auditit, eemaldades iga elemendi, mis ei toeta otseselt põhitegevust. See tähendab sekundaarseid nuppe, mitut navigatsioonilinki, isegi sotsiaalmeedia jagamisikoonid. Näiteks SaaS-i sihtleht tasuta prooviversiooni jaoks peaks sisaldama ainult ühte silmapaistvat „Alusta tasuta prooviversiooni” nuppu. Kõik muu – iseloomustused, funktsioonid, hinnad – peab visuaalselt taanduma. Kasutage halli, väiksemat kirjasuurust või asetage need lehe alla.

Hoiatus: Võite siiski lisada toetavat teavet, kuid selle visuaalne kaal peab olema selgelt madalam. Mõelge oma lehele kui lehtrile: pealkiri on kõige laiem osa, tegevuskutse on kitsas väljapääs. Kõik muud elemendid on lihtsalt taust.

Samm 2: Võtke omaks F- ja Z-mustrid

Silma jälgimise uuringud näitavad, et lääne kasutajad skannivad tekstirohketel lehtedel F-mustris (vasakult paremale, siis alla) ja visuaalsetel lehtedel Z-mustris (vasakult paremale, diagonaalselt alla, vasakult paremale). Enamik sihtlehti kasutab mõlemat.

Kuidas seda parandada: Asetage pealkiri vasakusse ülanurka, millele järgneb toetav pilt või eeliste loetelu paremal. Seejärel asetage diagonaali mööda oma tegevuskutse või võtmevisuaal. Näiteks kangelasektsioon, millel on vasakul pealkiri, paremal toote makett ja nupp pealkirja all, sobib suurepäraselt Z-mustriga.

Näide: Dropboxi sihtleht kasutab Z-mustrit: „Keskendu olulisele” (vasakul üleval), puhas ekraanipilt (paremal) ja tegevuskutse nupp all. Pilk liigub loomulikult pealkirjast pildile nupule.

Hoiatus: Ärge sundige mustrit. Kui teie sisu on loendirohke, sobib F-muster paremini. Testige mõlemat, et näha, kumb hoiab kasutajaid kerimas.

Samm 3: Kasutage kontrasti visuaalse hierarhia püramiidi loomiseks

Meie silmad tõmbuvad kõige suurema kontrastiga elemendi poole. Kui teie tegevuskutse nupp on sama värvi kui taust, kaob see ära. Vastupidiselt, kui teie pealkiri on hiiglaslikus rasvases kirjas ja tegevuskutse on väike, varastab pealkiri tähelepanu.

Kuidas seda parandada: Looge kontrasti püramiid. Pealkirjal peaks olema kõrgeim kontrast (tumedaim värv heledamal taustal või vastupidi). Tegevuskutsel peaks olema teine kõrgeim kontrast, kasutades sageli kontrastset nupuvärvi (nt oranž sinisel). Toetav tekst, iseloomustused ja joonealused märkused peaksid olema madalama kontrastiga – hall tekst, väiksem suurus või summutatud taust.

Näide: HubSpot'i sihtlehel on pealkiri must valgel, tegevuskutse on erkroheline nupp ja põhitekst on hall. Kontrasti hierarhia on ilmne: pealkiri > tegevuskutse > põhitekst.

Hoiatus: Liiga palju kontrasti väsitab silma. Kasutage lehel ainult ühte või kahte kõrge kontrastiga elementi.

Samm 4: Vabastage tühja ruumi jõud

Tühi ruum (negatiivne ruum) ei ole tühi – see on võimas disainitööriist, mis rühmitab elemente ja suunab fookust. Kui kõik on kokku surutud, ei paista miski silma.

Kuidas seda parandada: Pärast põhielementide paigutamist lisage oma pealkirja ja tegevuskutse ümber helded veerised. Näiteks pange oma esmase nupu ümber vähemalt 40–60 pikslit polsterdust. Eraldage sektsioone 80–100 piksli vertikaalse vahega. See isolatsioon sunnib silma käsitlema iga sektsiooni eraldi üksusena.

Näide: Apple'i sihtlehed kasutavad tootepiltide ja teksti ümber tohutut tühja ruumi, muutes iga elemendi esmaklassiliseks ja tahtlikuks.

Hoiatus: Mobiilikasutajatel on piiratud ekraanipind. Mobiilil vähendage tühja ruumi 50% võrra, kuid säilitage suhteline vahekauguse suhe.

Samm 5: 5-sekundi reegel – testige oma visuaalset hierarhiat

Teie leht peaks edastama väärtuspakkumise ja järgmise tegevuse 5 sekundi jooksul. Kui kasutaja ei oska öelda, mida teha, on teie hierarhia katki.

Kuidas seda parandada: Näidake oma sihtlehte sõbrale 5 sekundit, seejärel küsige: „Milleks see leht on ja mida ma peaksin tegema?” Kui nad ei vasta õigesti, kohandage hierarhiat. Levinud parandused: muutke pealkiri suuremaks, viige tegevuskutse lehe ülaossa või eemaldage segav taustapilt.

Näide: A/B testige versiooni, kus pealkirja suurust on suurendatud 20% ja tegevuskutset on nihutatud 100 pikslit kõrgemale. Paljud ettevõtted näevad selle ühe nipi abil 10–20% konversioonide kasvu.

Hoiatus: 5-sekundi reegel töötab kõige paremini lehe ülaosas oleva sisu puhul. Pikemate lehtede puhul rakendage seda igas sektsioonis, visuaalselt ankurdades sektsiooni eesmärgi.

Kokkuvõte

Visuaalne hierarhia on sihtlehe konversioonide vaikne mootor. Segaduse eemaldamise, loomulike skannimismustrite ärakasutamise, kontrasti strateegilise kasutamise, tühja ruumi omaksvõtmise ja 5-sekundi reegliga testimisega loote külastaja pilgule selge tee. Parim osa? Need nipid ei nõua uut teksti ega kallist disaini – lihtsalt hoolikat auditeerimist olemasoleva paigutuse üle. Rakendage need viis sammu oma järgmisel sihtlehel ja vaadake, kuidas teie konversioonimäär tõuseb.

Vajate neid muudatusi kiiresti käivitada? Kasutage tööriista, mis genereerib täielikult optimeeritud sihtlehe tavalise kirjelduse põhjal – ilma koodita, ilma disainerita, lihtsalt teie ideed muudetakse mõne minutiga konversioonivalmis leheks.