Hero sekcija

Hero sekcija je prvi dio stranice koji posjetilac vidi bez skrolanja: naslov, kratko objašnjenje, glavno dugme i najčešće jedna velika slika.

Na njoj se odlučuje hoće li čovjek ostati. Ima nekoliko sekundi da shvati šta radite, da li je to za njega i šta sljedeće treba uraditi. Ako odgovor ne dobije, vraća se na rezultate pretrage i klikne sljedeći sajt.

Tri pitanja na koja mora odgovoriti

Šta je ovo. Naslov kaže šta firma radi, riječima kojima bi to rekao kupac, a ne interni naziv odjela.

Je li ovo za mene. Rečenica ispod naslova kaže za koga, gdje ili po čemu ste drugačiji. Tu se najbolje vidi da li firma ima jasno pozicioniranje: ako bi ispod mogao potpisati bilo koji konkurent, nema ga.

Šta sad. Jedno glavno dugme, jasnim riječima, koje vodi na sljedeći korak. Dobar CTA ovdje radi više posla nego bilo gdje drugdje na stranici.

Redoslijed pogleda

Hero sekcija je mjesto gdje se vizuelna hijerarhija vidi najjasnije. Oko prvo ide na najveći i najkontrastniji element, pa na sljedeći, pa na dugme.

Kad su naslov, logo partnera, slider, tri dugmeta i obavještenje o akciji jednako glasni, oko ne zna gdje da krene. Čovjek tada ne čita ništa, samo skrola ili ode.

Prazan prostor oko naslova ovdje nije bačen. Bijeli prostor je ono što naslovu daje težinu, i što ga razdvaja od svega ostalog.

Slika koja nešto kaže

Česta slika u hero sekcijama je fotografija iz besplatne banke slika: nasmijani ljudi za stolom, rukovanje, grad u sumrak. Takva slika ne kaže ništa, jer je ista na stotinama drugih sajtova.

Bolja je fotografija vašeg posla. Pogon, radionica, tim na terenu, gotov proizvod. Ne mora biti savršena. Mora biti vaša, jer kupac na njoj traži dokaz da ste stvarni.

Tekst preko fotografije mora ostati čitljiv. Ako je slika svijetla i šarena, tekst dobija tamnu podlogu ili se pomjera pored slike, a ne preko nje.

Telefon mijenja sve

Veliki dio posjeta danas dolazi s telefona, a tamo je prvi ekran mnogo manji. Ono što na računaru stane jedno do drugog, na telefonu ide jedno ispod drugog.

Zato se hero sekcija planira prvo za telefon. Naslov i dugme moraju biti vidljivi bez skrolanja. Slika koja na računaru zauzima pola ekrana, na telefonu često gurne dugme ispod ruba, i tu se gubi dio upita. Responsive dizajn koji samo smanji isti raspored to ne rješava.

Brzina

Velika slika na vrhu stranice je gotovo uvijek element po kojem se mjeri brzina učitavanja glavnog sadržaja, jedna od metrika koje ulaze u Core Web Vitals.

Fotografija iz aparata od pet megabajta, stavljena direktno na sajt, može sama pokvariti rezultat cijele stranice. Optimizacija slika ovdje daje najveći efekat za najmanje posla: pravi format, prava veličina i slika koja se učitava prva, ne zadnja.

Slideri i videi u pozadini su najčešći krivci. Učitavaju nekoliko velikih datoteka odjednom, a većina ljudi vidi samo prvu.

Kako se provjerava

Najjednostavniji test traje pet sekundi. Pokažite stranicu nekome ko je nikad nije vidio, sklonite je nakon pet sekundi i pitajte šta firma radi i šta bi sljedeće kliknuo. Ako ne zna, hero sekcija ne radi posao, bez obzira na to kako izgleda.

Uz to se gledaju brojevi: koliko ljudi napusti stranicu bez ijedne radnje i koliko klikne glavno dugme. Heatmapa pokaže da li ljudi uopšte skrolaju ispod prvog ekrana, i da li kliknu na slike koje nisu linkovi, jer misle da jesu.

Primjer iz prakse

Proizvođač namještaja iz Gračanice imao je na početnoj stranici slider s pet slika i natpisom “Dobrodošli na našu web stranicu”. Dugme za upit bilo je u meniju, a na telefonu je slider zauzimao cijeli ekran.

Nova hero sekcija ima jednu fotografiju iz njihove radionice, naslov koji kaže da rade namještaj po mjeri za stanove i poslovne prostore, rečenicu o rokovima isporuke i jedno dugme za upit. Stranica se na telefonu učitava primjetno brže, a dugme je vidljivo bez skrolanja. Upita s početne stranice ima više, i ljudi u njima češće navode šta im tačno treba.

Kad ovo nije prvi posao

Ako sajt dobija malo posjeta, bolja hero sekcija neće promijeniti mnogo. Prvo treba dovesti ljude, pa tek onda raditi na tome šta vide.

Isto vrijedi za stranice na koje niko ne dolazi direktno, poput politike privatnosti ili tehničkih uputstava. Tamo je naslov i početak teksta sasvim dovoljan.

Kod landing stranice za oglas je obrnuto: hero sekcija je tu gotovo cijeli posao, jer čovjek dolazi s jednim pitanjem i odgovor treba dobiti odmah.

Greške koje najčešće viđamo

Najčešća je naslov “Dobrodošli” ili naziv firme umjesto onoga što firma radi.

Odmah iza nje je slider s porukama koje se smjenjuju prije nego ih iko pročita.

Viđamo i tri ili četiri dugmeta iste boje i veličine.

Česta je i stock fotografija koja ne pokazuje ništa od stvarnog posla.

Onda tekst preko svijetle slike koji se na telefonu ne može pročitati.

Na kraju, slika od nekoliko megabajta koja usporava cijelu stranicu.

Lista za provjeru

• Kaže li naslov šta radite, bez znanja o vašoj firmi?
• Je li jasno za koga je ponuda?
• Postoji li jedno glavno dugme, jasno naglašeno?
• Vidi li se dugme na telefonu bez skrolanja?
• Pokazuje li slika vaš stvarni posao?
• Može li se tekst pročitati preko slike?
• Je li slika optimizovana za web?
• Zna li neko ko sajt vidi prvi put za pet sekundi reći šta radite?

Pojmovi koje ćete čuti uz hero sekciju

• Above the fold: dio stranice vidljiv bez skrolanja; izraz dolazi iz novina, od gornje polovine presavijene naslovne strane.
• Naslov (H1): glavni naslov stranice, obično u hero sekciji.
• Podnaslov: rečenica ispod naslova koja kaže za koga ili po čemu.
• Slider: niz slika koje se smjenjuju u istom prostoru.
• LCP: metrika koja mjeri kad se pojavi najveći element na ekranu, često upravo slika iz hero sekcije.
• UX dizajn: oblikovanje toga kako se stranica koristi, od prvog ekrana do poslanog upita.