Kako napisati hero sekciju koja konvertuje
Prvi ekran sajta odlučuje da li posetilac ostaje ili pobegne. Konkretan framework za pisanje hero sekcije koja u 5 sekundi kaže šta nudiš, kome, i zašto.
Hero sekcija je prvi ekran tvog sajta · ono što posetilac vidi pre nego što skrolu mrdne palac. Imaš oko 5 sekundi da mu odgovoriš na tri pitanja: šta je ovo, za koga je, i zašto da ostane. Ako ne odgovoriš · ode. Većina sajtova koje pregledamo ovde poklekne. Ne zato što je dizajn loš, već zato što hero sekcija pokušava da bude pametna umesto jasna.
Šta hero sekcija mora da odgovori
Tri pitanja, redom:
- Šta tačno radiš? (proizvod ili usluga u jednoj rečenici)
- Za koga je to? (konkretan tip kupca, ne 'za sve')
- Šta dobijam ako ostanem? (rezultat, vremenski okvir, garancija)
Sve drugo · brand priča, vrednosti, "naš tim" · ide niže na stranicu. Hero sekcija je tu da te zadrži dovoljno da skroluš.
Framework od 4 elementa
Svaka hero sekcija koja radi ima istih 4 elementa. Možeš da dodaš slike, video, animacije, decoration · ali ova četiri moraju da budu jasna pre svega.
1. H1: konkretan, kratak, problem-orijentisan
H1 nije slogan. To je obećanje rezultata. Loš H1: "Dobrodošli na naš sajt". Dobar H1: "Sajt koji konvertuje posetioce u kupce za 7 dana". Drugi obećava konkretan ishod i konkretan rok · prvi te samo pozdravlja.
2. Pod-headline: za koga je
Ovo je gde sužavaš publiku. Umesto "za biznise koji rastu", napiši "za male firme u Srbiji koje imaju 2-20 zaposlenih i muče se da nađu kupce online". Specifičnost odbija pogrešnu publiku · što je dobro · i govori pravom kupcu da je on na pravom mestu.
3. CTA dugme: jedan jasan sledeći korak
Jedno glavno dugme. Ne tri. Tekst na dugmetu mora da bude radnja, ne magla. Loš: "Saznaj više". Dobar: "Zatraži ponudu za 24h" ili "Rezerviši besplatan razgovor". Korisnik mora da zna šta ga čeka kad klikne · ceo framework za CTA dugme je u zasebnom vodiču.
4. Vizuelni dokaz · ne stock fotografija
Stock slike nasmejanih business-people-a sa laptopima ubijaju kredibilitet. Bolje: screenshot tvog stvarnog dashboard-a, slika tvog stvarnog tima u kancelariji, ili kratak video sa klijentom koji svedoči. Ako nemaš autentičnu sliku · bolje ostavi prazno nego da staviš lažno.
Primer · pre i posle
Pre (generic):
H1: "Tvoj partner u digitalnoj transformaciji"
Pod-headline: "Pomažemo vam da ostvarite svoj puni potencijal"
CTA: "Saznajte više"
Posle (konkretno):
H1: "Sajt za tvoj biznis za 7 dana. Bez avansa."
Pod-headline: "Za male firme u Beogradu i Novom Sadu · pišemo, dizajniramo i lansiramo. Plaćaš samo kad si zadovoljan."
CTA: "Vidi cenu · 5 minuta"
Drugi radi zato što odgovara na šta, za koga, i sledeći korak · u tri reda.
Testovi koje sprovodi pre nego što pustiš
- Pokrij gornju polovinu sajta. Da li možeš da kažeš šta firma radi za 5 sekundi? Ako ne · prepravi.
- Pokaži hero osobi van industrije. Ako nije razumela šta prodaješ za 10 sekundi · prepravi.
- Klikni svoj CTA i prati šta se dešava. Da li je sledeći korak jasan? Da li forma traži premalo ili previše podataka?
- Pogledaj hero na telefonu. Da li je H1 čitljiv bez zumiranja? Da li CTA dugme staje u palac?
Hero sekcija nije mesto za kreativnost po svaku cenu. Najbolja je ona koja ti za 5 sekundi kaže ono što ti treba i zatim te vodi dalje. Kreativnost ide u dizajn, animacije, paletu boja · ne u poruku.