A carousel (slideshow) divatos, de semmi több?

Caroussel/diavetítés/slideshow. Egy honlapon éppen elmozduló képek. Felirat: elvárt olvasási sebesség: 3 szó másodpercenként

Ideges lettél? Használd a carouselt, és látogatóid is azok lesznek!

Ezzel a csattanóval sokkolta egy neves amerikai akadálymentes informatikával foglalkozó szakember a webdesignereket. Mi a carousel? Jelentése: körhinta, mert a honlapon ugyanazokat a képeket vetíti egymás után. Magyar szakkifejezés híján mi is slideshownak vagy slidernek nevezzük, néha pedig diavetítésnek. A WordPresshez elképesztően sok ilyen bővítmény van, ezekkel találkoztam a legtöbbször munkám során, de sohasem állították be ezeket a WCAG szabványnak megfelelően. 

A WebAim említett szakembere készített egy kis oldalt, egy roppant számomra idegesítően gyors carousellel, ami azért mégsem gyorsabb az Apple cég honlapján használt változatnál. A kis oldalon 10 dia fut körbe-körbe. Ezeken a carousel ellen szóló marketing és UX szakemberek ellenérvei szerepelnek: MIért kellene diavetítést hasznánom?

Szükséges-e a carousel?

A szakember által készített demonstráció szövege magyarul az alábbi:

  • Nem! Komolyan nem.
  • Miért nem? Engedd meg, hogy elmondjam.
  • Az emberek 1 százaléka kattint rá. 89 százalékuk a legelső képre. (Erik Runyon a Notre Dome egyetem marketing szakának vezetője)
  • 1 százalék kattint a kezdőlap leglényegesebb képére A felhasználó nem teljesítette a célt (Nielsen Norman Group)
  • Sokat teszteltük a mozgó képek hatékonyságát, és megállapítottuk: igencsak rossz módszer a tartalom kiemelésére (Wider Funnel, marketing cég).
  • Szinte kivétel nélkül minden tesztünk azt bizonyítja, hogy nem éri el a célt. Nagyon kevesen kattintanak rá. (Adam Fellowes, Experience Architect)
  • A carussel abban hatékony, hogy az emberek megtudják, mi a főnök elképzelése a weboldalról. Tedd ki a kezdőlapra, és a felhasználók nem fogják használni. Vagy ha úgy gondolod, soha ne használd. (Lee Dudde, What Users Do).
  • A carousel olyan akadálymentességi problémákat okoz, amelyet nem lehet megoldani. carousel korunk értéktelen csillogása. (Jared Smith, a honlap készítője, WebAim vezetője),
  • Ideges lettél? Használd a carouselt és a látogatóid is azok lesznek!

A honlap 10. diája: Ideges lettél? Használd a caruselt és a látogatóid is azok lesznek.

Szakmai értékelés

Ez utóbbi csattanó nagyon hatásos, és abban az esetben igaz, ha valaki éppen betűzi a dián lévő szöveget vagy tanulmányozza a képet. Ne felejtsük el, hogy nem egyenlő a felhasználók olvasási sebessége. Melyik felhasználói csoportoknak okoz gondot a caroussel?

  • gyerekeknek
  • legtöbb idősnek
  • a diszlexiásoknak
  • A gyengénlátóknak
  • A funkcionális analfabétáknak
  • A figyelemzavarosoknak
    • A weboldal tulajdonosok erre szinte mindig azt felelik, hogy ők nem tartoznak a honlap célcsoportba. A képen látható carousselt pedig a Magyar Posta honlapjáról másoltam ki. Remélem, hamarosan belátják ennek az érvelésnek a visszásságát.
      Semmilyen kutatás nem igazolja, hogy a carousel beváltaná a hozzá fűzött reményeket. Néhány sokak által majmolt honlap használja, ezért divatos lett. Ha nem akadálymentesen valósítják meg, akkor sok ember számára diszkriminációt jelent.

      A problémát azok a carouselek jelentik, amelyek nem szabványos HTML elemeket használnak vagy pedig a JavaScript oly módon ír a HTML kódba, hogy a képernyőolvasókat megzavarja. Azonban az esetek többségében ilyennel találkozunk. Ahogy a Kiemelt képen is láthatjuk a Posta honlapján.

      Engem személy szerint nagyon zavar, ha a kép és a szöveg automatikusan továbbmegy, miközben olvasom. Valóban, ahogy állítják a marketing cégek, én soha nem kattintottam mozgó képre. Egyet kell értenem az amerikai szakemberrel, hogy vannak más webdesign technikák, amelyek ennél sokkal hatásosabbak és könnyebb a felhasználóknak használni. Nem véletlen, hogy nagyon sok vérprofi cég honlapján egyáltalán nincs carousel.

      Mégsem értek egyet azzal, hogy a diavetítésnek nincs jogosultsága. A weboldal tulajdonosoknak ne kelljen lemondani az általuk kedvelt diavetítésről. Ha azonban nem akarják, hogy a weboldaluk diszkriminatív legyen, akkor helyezzenek el rajta megállj, újraindít gombokat. Az akadálymentes diavetítés egyik megoldása megtalálható a W3C oldalán: Carousel (diavetítés)

Diavítetés helyett

Az elmúlt évtizedben a diavetítésnek az alábbi hátrányait támasztották alá:

  • Nagy sávszélességet használ, lassú a honlap betöltése
  • Nem kattintanak rá, nem éri el a kívánt hatást
  • A felhasználók nehezen találják meg bennük az őket érdeklő tartalmakat
  • Rosszabb a konverziós aránya
  • Egyeseket kizár, diszkriminatív
  • Keresőoptimalizálás szempontjából nem mindig megfelelő

A sliderek egyik nagy hátránya, hogy az emberek nem tudják áttekinteni. Ha valaki az utolsó slider-re lenne kíváncsi már nincs türelme kivárni. Ha a képeket a fejlécbe helyezzük el, egy pillantással fel lehet mérni a főbb tartalmi elemeket. A korszerű megoldások lényege tehát az, hogy azokat a képeket és címsorokat, melyeket a sliderek időzítve mutattak egyszerre mutatjuk.

Hálóra rendezés, azaz grid

Egy honlap fejléce: négyzethálós elrendezéssel

  • négyzethálóra (grid) történő elrendezés
  • egyenlő méretű  képek szabályos elrendezés:
  • nagyméretű fejléckép
  • Intelligens webdesign

    Különböző felhasználóknak különböző fejléc. A rendelkezésekre álló adatok alapján más és más fejlécet jelenítünk meg. Ennek több megoldását is ismerjük:

    • Az oldal megnyitásakor véletlenszerűen mutat egy fejlécképet és hívószöveget több lehetőség körül.
    • A felhasználó helyadatai alapján jeleníti meg a fejlécet. Ez a leggegyszerűbb megoldás.
    • Az oldal megnyitásakor mindig új diát mutat, de a sorrendjét előre meghatározzuk.
    • A felhasználó analitikus adatai alapján dönt a fejlécképről. A megjelenítés logikája webáruházak esetén általában az upselling és cross-selling. Így mindenki azt látja a fejlécben, ami számára a fontosabb lehet.
    • 2015-ben megjelent cikk felújított változata.