Slider na web stranici izgleda kao pobjeda za sve. Marketing dobije pet poruka na naslovnici, dizajner dobije animaciju, a vi ne morate odlučiti što je najvažnije. Upravo tu nastaje problem.
Kad ne birate, izabrali ste loše. Podaci o klikovima na slidere brutalno su jasni: posjetitelji ih ignoriraju, a sve nakon prvog slajda praktički ne postoji. Usput slider vuče skripte i hrpu slika, pa se stranica otvara sporije na točno onim mjerenjima koja Google gleda kod rangiranja.
U ovom članku prolazimo kroz brojke, pokazujemo kada carousel ipak ima smisla i što staviti na vrh stranice umjesto rotirajućih bannera. Pišemo iz prakse: dobar dio stranica koje preuzmemo na održavanje ima slider na naslovnici. Gotovo uvijek ga prvog mičemo.
Klik na drugi slajd gotovo ne postoji, i to znamo već desetljeće
Najcitiranije mjerenje napravio je Erik Runyon, web developer sa Sveučilišta Notre Dame. Pratio je slidere na sveučilišnim stranicama i objavio rezultate koji se otad prepričavaju na svakoj ozbiljnijoj konferenciji: otprilike 1 posto posjetitelja kliknulo je bilo što u slideru. A od tog jednog postotka, gotovo 9 od 10 klikova otišlo je na prvi slajd.
Prevedimo to na vašu stranicu. Ako imate 5.000 posjeta mjesečno, slider klikne pedesetak ljudi. Drugi slajd klikne možda petero. Za tih petero plaćate dizajn pet bannera, licencu ili plugin za slider i sporije učitavanje za svih 5.000 posjetitelja. To nije kompromis, to je loš posao.
Postoji i dublji razlog zašto brojke izgledaju tako. Nielsen Norman Group godinama dokumentira fenomen koji zovu banner blindness: korisnici su naučili da sve što se samo od sebe vrti i izgleda kao reklama treba preskočiti. Slider izgleda točno tako. Vaša najvažnija poruka na vrhu naslovnice ponaša se kao oglas koji nitko nije naručio.
Pogrešno: “Stavit ćemo svih pet usluga u slider, pa neka svatko nađe svoje.”
Ispravno: “Na vrh ide usluga od koje živimo. Ostale dobivaju vlastite sekcije niže na stranici.”
Slider na web stranici usporava točno ono što Google mjeri
Hero slider gotovo uvijek stoji na vrhu stranice, iznad pregiba. To znači da je njegova prva slika najčešće najveći element u vidljivom dijelu ekrana, dakle upravo ono što Google mjeri kao LCP (Largest Contentful Paint) unutar Core Web Vitals metrika.
Sad računajte što preglednik mora napraviti prije nego posjetitelj išta vidi. Povući JavaScript biblioteku za slider. Povući CSS za animacije i tranzicije. Često povući svih pet slika odjednom, jer je lijeno učitavanje ostalo neuključeno. Na mobilnoj mreži to je razlika između stranice koja se otvori u dvije sekunde i one koja treba šest.
Drugi tihi ubojica je CLS, pomicanje sadržaja tijekom učitavanja. Slider se često učita naknadno i gurne ostatak stranice prema dolje. Posjetitelj krene kliknuti na izbornik, a klikne na banner koji se upravo pojavio. Google to mjeri i kažnjava, a korisnik pamti frustraciju.
Kako se te metrike mjere i popravljaju, detaljno smo razložili u članku o brzini web stranice i Core Web Vitals metrikama. Kratka verzija: slider je jedan od prvih elemenata koje mičemo kad stranica pada na mjerenjima brzine, jer je omjer štete i koristi uvjerljivo najgori na cijeloj naslovnici.
Rotacija tjera korisnika da lovi metu koja bježi
Zamislite da čitate cijenu u izlogu, a netko svakih pet sekundi okrene plakat. Točno to radi automatska rotacija. Posjetitelj krene čitati naslov, slajd nestane. Krene prstom prema gumbu na mobitelu, gumb se zamijeni drugim. Nakon dva takva promašaja odustaje, i to ne od slidera, nego od cijele stranice.
Na mobitelu je još gore. Slider hvata horizontalni potez prstom, pa korisnik koji pokušava scrollati stranicu umjesto toga lista bannere lijevo i desno. Sitnica, ali svaka takva sitnica gura posjetitelja korak bliže gumbu za natrag.
Postoji i pristupačnost, tema koju hrvatski webovi redovito preskaču. Ljudi ne čitaju istom brzinom: stariji korisnici, osobe s disleksijom ili slabijim vidom trebaju više vremena za isti naslov, a rotacija im ga uzme na pola rečenice. Smjernice za pristupačnost (WCAG) zato traže da se sadržaj koji se sam pomiče može pauzirati ili zaustaviti. Većina slidera koje naslijedimo od prijašnjih izvođača nema ni to.
Tu je i problem raspršene poruke. Naslovnica ima jedan posao: reći tko ste, što nudite i što posjetitelj treba napraviti sljedeće. Pet rotirajućih poruka znači da taj posao ne obavlja nijedna. U praksi to izgleda ovako: apartmani u slideru vrte plažu, terasu, interijer, doručak i logo, a nigdje ne piše “Provjerite dostupnost za kolovoz”. Gost proklika, ništa ne rezervira, ode na Booking.
Slider zna zasmetati i SEO strukturi stranice. Naslovi u slajdovima često su složeni kao slike ili generički H1 i H2 elementi bez ključnih riječi, pa vrh stranice, koji nosi najveću težinu, Googleu ne govori ništa korisno. Tekst “Dobrodošli” preko stock fotografije ne rangira ni za što.
Kada slider na web stranici ipak ima smisla
Nismo dogmatici. Carousel je alat, a alat ima svoje mjesto. Razlika je u tome tko ga pokreće i što nosi. Evo gdje ga i sami ugrađujemo bez grižnje savjesti:
- Galerija fotografija apartmana ili sobe. Gost želi listati slike vlastitim tempom. Sam klikće, nitko mu ništa ne rotira pod prstom.
- Fotografije proizvoda u web shopu. Na stranici proizvoda carousel sa slikama iz više kutova je standard koji kupci očekuju.
- Reference i logotipi klijenata. Niže na stranici, kao dokaz povjerenja, ne kao glavna poruka.
- Portfolio radova. Kad je radova dvadeset, listanje je bolje od beskonačnog scrollanja.
Zajednički nazivnik svih dobrih primjera: korisnik sam pokreće listanje, carousel ne stoji na vrhu naslovnice i ne nosi glavnu poruku ni glavni poziv na akciju. Galerija koja čeka klik nikome ne smeta. Banner koji se sam vrti smeta svima.
Alternativa koja radi: jedan jak hero i jedan gumb
Što onda staviti na vrh? Jednu poruku koja stoji mirno. Naslov koji kaže što radite i za koga. Podnaslov koji ruši prvi prigovor, najčešće cijenu ili rok. Jedan gumb s jasnom akcijom. Jedna optimizirana slika ili čak samo boja u pozadini, jer brzina učitavanja tu pobjeđuje estetiku.
Pogrešno: “Dobrodošli na našu web stranicu” preko stock fotografije rukovanja, u slideru s još četiri slajda.
Ispravno: “Izrada web stranica za male firme. Prva verzija za 14 dana.” I jedan gumb: “Zatražite ponudu”.
| Hero slider | Statični hero s CTA-om | |
|---|---|---|
| Poruka | Pet poruka, nijedna ne stigne do čitatelja | Jedna poruka koju svi vide |
| Brzina i LCP | Skripte, animacije, više velikih slika | Jedna optimizirana slika, čist HTML |
| Klikovi | Oko 1 posto, gotovo sve na prvi slajd | Sav klik ide na jedan jasan gumb |
| Mobilno iskustvo | Meta koja bježi pod prstom | Stabilno, bez pomicanja sadržaja |
| Održavanje | Plugin, ažuriranja, sigurnosni rizik | Nema dodatnih ovisnosti |
Ovo nije samo teorija o dizajnu, nego temelj svake stranice koja prodaje. Kako se takav vrh stranice slaže s ostatkom, od dokaza povjerenja do forme za upit, raspisali smo u vodiču za landing stranicu koja konvertira. Isti princip ugrađujemo u svaki projekt izrade web stranica: prvo odluka što je najvažnije, pa tek onda dizajn.
Ako slider ipak mora ostati, napravite barem ovo
Ponekad odluka nije vaša. Direktor ga želi, franšiza ga propisuje, tema ga ima ugrađenog. U tom slučaju smanjite štetu:
- Isključite automatsku rotaciju. Neka se slajd mijenja samo kad korisnik klikne.
- Prvi slajd neka nosi najvažniju poruku i najjači CTA, jer je on jedini koji većina ikad vidi.
- Prvu sliku optimizirajte i učitajte odmah (WebP ili AVIF, preload), ostale lijeno učitavajte.
- Rezervirajte visinu slidera u CSS-u da se sadržaj ne pomiče tijekom učitavanja.
- Strelice i indikatori neka budu vidljivi i dovoljno veliki za prst na mobitelu.
- Mjerite klikove po slajdu u analitici. Kad brojke pokažu nulu na slajdu tri, imate argument za iduću raspravu.
Slider je najčešće simptom, ne bolest
Kad na naslovnici vidimo slider, gotovo uvijek iza njega stoji ista priča: nitko u firmi nije htio presuditi koja poruka je najvažnija, pa su na vrh stavili sve. To je marketinška odluka koju je netko prebacio na dizajn, i dizajn ju je loše riješio.
Zato popravak ne počinje u WordPressu. Počinje pitanjem: koja jedna akcija posjetitelja vama vrijedi najviše? Poziv, upit, rezervacija ili kupnja. Kad to znate, vrh stranice se piše sam, a slider više nema što raditi na njemu.
Ako niste sigurni što bi na vašoj naslovnici trebalo stajati umjesto slidera, javite nam se. Pogledamo stranicu, izmjerimo brzinu i otvoreno kažemo isplati li se popravak postojećeg ili je pametnije krenuti ispočetka.