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 számomra idegesítően gyors carousellel. 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álnom?

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 Dame 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 konverziós 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 carousel 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 a 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!

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. Mely csoportoknak okoz gondot a diavetítés?

• a gyerekeknek
• a legtöbb idősnek
• a diszlexiásoknak
• a gyengénlátóknak
• a funkcionális analfabétáknak
• a figyelemzavarral élőknek
A weboldal tulajdonosok erre szinte mindig azt felelik, hogy ők nem tartoznak a honlap célcsoportjába. A képen látható carouselt 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 használni. Nem véletlen, hogy nagyon sok vérprofi cég honlapján egyáltalán nincs slideshow.

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 van megoldás. A WCAG az alábbi sikerkritériumába ütközik a mozgó slideshow:

Minden mozgó, villogó, gördülő információ esetében, amely

• automatikusan indul
• hosszabb ideig tart, mint három másodperc
• más tartalommal párhuzamosan jelenik meg

létezik egy mechanizmus, amivel a felhasználók szüneteltethetik, megállíthatják, vagy elrejthetik azt, hacsak a mozgás, villogás, gördülés nem egy olyan tevékenység része, ahol ezek lényegesnek minősülnek.

Ebből következik, hogy a megoldás nagyon egyszerű: helyezzünk el a carouselen megállj, újraindít gombokat.

Az akadálymentes diavetítésnek egy előre elkészített mintamegoldása megtalálható a W3C oldalán:
Carousel (diavetítés)

Slideshow helyett

Az elmúlt évtizedben az alábbi hátrányokat fedezték fel:

• 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, inkább egy időben mutatjuk.

Hálóra rendezés, azaz grid

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özül.
• A felhasználó helyadatai alapján jeleníti meg a fejlécet. Ez a legegyszerű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.