Slajderi i karuseli na sajtu: zašto često ne rade i čime ih zameniti

Na početnoj stranici velikog broja sajtova prvo što posetilac vidi je velika slika koja se posle nekoliko sekundi menja u drugu, pa u treću. Slajderi i karuseli su omiljeni jer rešavaju unutrašnji problem firme: svako odeljenje ili svaka usluga želi svoje mesto na vrhu stranice, pa se sve stavi u rotaciju. Problem je što posetilac nije došao da gleda prezentaciju. U ovom tekstu objašnjavamo zašto slajderi često ne ispunjavaju očekivanja, šta je potrebno da bi bili pristupačni, čime ih zameniti i kada su ipak sasvim dobro rešenje.

Zašto slajderi često ne rade

Razlozi su više praktični nego estetski. Kada pogledate kako se ljudi ponašaju na sajtu, ponavljaju se isti obrasci:

• Većina vidi samo prvi slajd. Posetilac skroluje dalje ili klikne na meni pre nego što se slika promeni.
• Pokret odvlači pažnju. Dok neko čita tekst, slika koja se sama menja ga prekida.
• Poruka nestane pre nego što se pročita. Ako je slajd zanimao posetioca, on mora da traži način da se vrati.
• Nijedna poruka nije glavna. Pet ravnopravnih poruka zapravo znači da ne postoji jasna prva.
• Liči na reklamu. Veliki baneri koji se smenjuju podsećaju na oglase, a ljudi su naučili da ih preskaču.

Tu je i tehnička strana. Slajder obično učitava nekoliko velikih slika i JavaScript biblioteku, a nalazi se baš na delu stranice koji treba da se prikaže najbrže. To se vidi u merenjima brzine, posebno kod pokazatelja koji prati učitavanje najvećeg elementa na ekranu, o čemu pišemo u tekstu Core Web Vitals objašnjeno jednostavno.

Pristupačnost: šta slajder mora da ima

Ako slajder ostaje, mora da bude upotrebljiv za sve, uključujući ljude koji koriste tastaturu, čitač ekrana ili imaju poteškoće sa pokretom i pažnjom. Minimum je:

1. Dugme za pauzu ako se slajdovi menjaju sami. Smernice za pristupačnost traže da se pokret koji traje duže od pet sekundi može zaustaviti.
2. Zaustavljanje rotacije kada je miš iznad slajdera ili je fokus tastature u njemu.
3. Dugmad za prethodni i sledeći slajd sa tekstualnim oznakama, a ne samo strelicama bez opisa.
4. Kontrole dostupne tastaturom, sa vidljivim okvirom fokusa.
5. Poštovanje podešavanja smanjenog pokreta u operativnom sistemu: bez automatske rotacije i animacija prelaza.
6. Tekst kao pravi tekst, a ne upisan u sliku, i alt opisi za slike koje nose značenje.
7. Dovoljno vremena za čitanje, ako se rotacija već koristi.

Tačke ispod slajdera koje pokazuju na kom ste slajdu male su i teško se pogađaju prstom; dugmad treba da budu dovoljno velika. Više o osnovama u tekstu pristupačnost sajta: WCAG osnove.

Čime zameniti slajder na početnoj

Najčešće bolje rešenje je jedna jasna uvodna sekcija sa jednom porukom i jednim glavnim dugmetom, a ispod nje ostale poruke kao statični blokovi koje posetilac vidi skrolovanjem. Tako se ništa ne gubi, samo se odluči šta je najvažnije.

Ta odluka je često teža od samog dizajna, jer znači da neka poruka neće biti na vrhu. Pomaže pitanje: zbog čega većina ljudi dolazi na sajt i šta treba da uradi posle toga? Odgovor određuje glavnu poruku, a sve ostalo dobija svoje mesto niže na stranici ili u meniju.

Kako složiti uvodni deo, pisali smo u tekstu hero sekcija: kako je napraviti, a o redosledu ostalih sekcija u tekstu početna stranica sajta: struktura sekcija.

Kada su karuseli sasvim u redu

Nije svaki karusel loš. Problem je pre svega automatska rotacija glavnih poruka. Karusel koji posetilac sam pokreće, i u kome je jasno da ima još sadržaja, može biti dobro rešenje:

• Fotografije jednog proizvoda u web shopu, uz sličice ispod i prevlačenje na telefonu.
• Niz srodnih proizvoda na kraju stranice proizvoda, gde je deo sledeće kartice vidljiv na ivici ekrana.
• Galerija jednog projekta, kada posetilac želi da pregleda više fotografija istog posla.
• Logotipi partnera ili sertifikati, kada nisu ključna poruka.

Zajedničko je da korisnik ima kontrolu, da se ništa ne pomera samo i da sadržaj nije jedina kopija važne informacije. Na telefonu je vodoravno prevlačenje prirodno, ali neka deo sledeće stavke viri sa strane, da bude jasno da se može pomeriti.

Ako slajder mora da ostane: praktična pravila

1. Najviše tri slajda, a prvi nosi najvažniju poruku jer ga vidi najviše ljudi.
2. Bez automatske rotacije, ili sa dugim intervalom i vidljivim dugmetom za pauzu.
3. Prva slika se učitava odmah, ostale tek kada su potrebne.
4. Slike su optimizovane i iste veličine, da se raspored ne pomera.
5. Svaki slajd ima jasan naslov i jedno dugme sa konkretnim natpisom.
6. Pratite klikove na svaki slajd kao događaje, pa posle nekoliko nedelja proverite da li se drugi i treći uopšte koriste.

Ako podaci pokažu da se slajdovi posle prvog gotovo ne klikću, to je jasan znak da poruke treba premestiti u statične blokove. O animacijama koje pomažu umesto da ometaju pisali smo u tekstu animacije i mikrointerakcije na sajtu.

Slajder najčešće nastaje kada firma ne može da odluči šta je najvažnije. Ako želite da zajedno izaberemo glavnu poruku i preuredimo početnu stranicu tako da vodi ka upitu, pošaljite nam upit.