Webshark Blog

Habár a karusszelek jó pár éve élték a fénykorukat, és sokan ma már egyáltalán nem javasolják a használatukat weboldalakon, még mindig elterjed megoldás, különösen az e-kereskedelem területén. És van egy fejlettebb változatuk: a vízszintes görgetés. Erről is ejtünk pár szót. (Frissítés, 2023.02.10. – Egy új fejezettel bővítettünk: vízszintes görgetés a weboldalon – Mikor érdemes választani? És hogyan alakítsd ki?).

A Baymard Institute vizsgálata szerint az amerikai webáruházak 52 százaléka karusszelt használ a desktopos főoldalán, míg 56 százalékos a mobilos verziójában. Kérdés azonban, hogy mire kell figyelni egy karusszelnél, hogy valóban segítségére legyen a felhasználóknak a vásárlási folyamat során.

Általában azért szeretik a weboldaltulajdonosok, mert a segítségével több információ helyezhető el a hajtás feletti részen, anélkül, hogy első pillantásra túlzsúfoltnak tűnne az oldal. A karusszellel tehát egy elfogadható vizuális megjelenés mellett könnyebbnek tűnhet az üzenetek átadása.

Ugyanakkor persze a karusszel használata azt is jelzi, hogy a weboldaltulajdonos elvesztette a fókuszt, nem tudja mire összpontosítson, nem tudja eldönteni, hogy mi a legfontosabb cél. A karusszel is zsúfoltságot, felesleges zajt jelent a weboldalon, még ha ezt a karusszel vizuális megjelenése miatt sikerül is titkolni. De akadnak egyéb problémák is.

Milyen problémák vannak egy karusszellel?

A Nielsen Norman Group egyik blogbejegyzéséből kiderül, hogy az egyik nagy probléma, amikor a felhasználók nehezen férnek hozzá a karusszel egyes oldalaihoz, hiszen meg kell keresniük vagy meg kell várniuk azt az oldalt, amelyik őket érdekli. Az interakció tehát nem elég hatékony.

Ráadásul nem is könnyen felderíthetők. Ha az emberek észlelik is egy képről, hogy az egy carouselben található, nem mindig jönnek rá, hogy milyen elemei vannak még, anélkül, hogy interakcióba ne lépnének vele. Érintőképernyők esetén emellett még az irányításukkal is problémák szoktak adódni.

Szekvenciális hozzáférés

Amikor végig kell menni minden egyes karusszel-képen, hogy megtaláljuk közöttük azt, amelyik érdekes lehet számunkra, az elég bosszantó tud lenni. A legtöbb ember általában 3-4 lap megtekintése után feladja. Ezért célszerű, ha a karusszeledben nincs is ennél több kép. Ez persze nem azt jelenti, hogy csak ennyi elem jelenhet meg, hiszen egy lapra több elemet is elhelyezhetsz.

Ha ennél többet akarsz megmutatni az embereknek, akkor használj helyette inkább listanézetet, és adj lehetőséget arra, hogy egyből hozzáférhessenek a listában szereplő bármelyik elemhez.

Egy carouselnél fontos a megfelelő sorrend: a legérdekesebb kép kerüljön az első helyre, mert ez arra készteti a látogatókat, hogy felfigyeljenek a carouselre. Érdemes egyébként megfontolni a személyre szabást is, ezáltal az első néhány oldal még relevánsabb lehet a felhasználók számára, ez pedig csökkenti a nehezebb hozzáférés miatti frusztrációt.

Felfedezhetőség

Egy kapkodó mobilos felhasználó, aki valamilyen speciális tartalmat keres, soha sem fog felfigyelni egy karusszelre. Még akkor sem, ha az magától pörgeti a képeket, mert mire a carousel megmozdulna, már lejjebb is görgetett az oldalon, keresve az őt érdeklő tartalmat.

A weboldaltulajdonosoknak tehát azzal is tisztában kell lenni, hogy a látogatók egy jelentős része soha nem fog a karusszel első lapjánál többet látni, mert addigra már legörget vagy elkattint. A kutatásokból nyilvánvaló, hogy a bannervakság a karusszel esetében is létező jelenség. A felhasználók gyakran tudomást sem vesznek ezekről a nagy képekről, és a rajtuk szereplő információkról.

Hagyományosan háromféle megoldással utalunk egy carousel jelenlétére: pontokkal vagy vonalakkal, nyilakkal, illetve a folytonosság illúziójával. Néhány carousel erősebb vizuális jeleket használ önmaga beazonosítására, mások kevésbé. A pontok vagy a nyilak általában elég gyenge jelzésnek számítanak, hiszen kis méretük miatt az emberek nem mindig veszik észre őket. Különösen akkor, ha mérsékelt a kontraszt a mögötte vagy mellette megjelenő képhez képest. Ez mobilon még nagyobb problémát jelent, ahol a kinti fényben a tükröződő kijelző rontja a láthatóságot.

A folytonosság illúziója – például egy félbevágott kép vagy szöveg által, ami azt mutatja, hogy a tartalom a kijelző függőleges széle után is folytatódik – már egy erősebb jelzés. Ezáltal az emberek gyorsan megértik, hogy több tartalomhoz is hozzáférhetnek.

Persze lehet, hogy a felhasználókat akkor sem érdekli a többi karusszel-elem, ha jól látható a karusszel-jelleg. Ez attól függ, hogy mennyire izgalmas számukra az első kép. Fontos azonban, hogy a carosuelben szereplő elemek kapcsolódjanak egymáshoz, mert az emberek erre számítanak. De az is lényeges, hogy a caruselben elérhető fontosabb elemek más módokon is megközelíthetők legyenek. Ha nem így teszünk, akkor bizonyos tartalmak teljesen elsüllyedhetnek.

A karusszel irányítása

Amikor az emberek interakcióba akarnak lépni egy carousellel érintőképernyős eszközön, akkor csúsztatják az ujjukat. Ha egy carousel nem támogatja ezt a megoldást, az teljesen váratlanul éri őket, így rontja a felhasználói élményt. Mostanra ugyanis a legtöbb felhasználó már elég jól ismeri ezt a mozdulatot a horizontális navigációnál is.

Az NNG ugyanakkor felhívja a figyelmet a csúsztatási bizonytalanságra a iOS esetében, mely az iOS 7 óta állandó veszéllyé vált. Például a Safari böngésző esetében a vízszintes csúsztatás a bal oldalon egyet jelent a vissza gomb lenyomásával. Azaz visszaviszi a felhasználót az előző oldalra. Ugyanakkor az iPhone X-nél, ha ez a csúsztatás a kijelző alsó részén történik, akkor alkalmazást fog váltani az eszköz.

Megoldást jelenthet, ha a kép nem ér el a kijelző széléig, hanem marad még mindkét oldalon némi whitespace. Ez ugyanis azt üzeni a felhasználóknak, hogy a carousel nem érinti a kijelző szélét. Ennek ellenére persze sokan fogják az ujjukat a kijelző szélénél csúsztatni, és így visszalépnek az oldalról.

Sok reszponzív design esetében pedig a tervezők eleve lemondanak a csúsztatás használatáról, és arra számítanak, hogy az emberek majd az apró köröket fogják tapogatni a képek alatt. És bár ez nem okoz gondot az iOS esetében, a felhasználók nem szeretik ezt a megoldást, illetve nem is jönnek rá, hogy a pontok azok, melyekkel irányítani tudják a carouselt. Ráadásul, ha nagyon aprók a körök és közel is vannak egymáshoz, akkor nehéz pontosan eltalálni egyiket vagy másikat.

Milyen legyen a karusszel?

Ha mégis karusszelt használnál, akkor lehet, hogy jobb megoldás, ha nem automatikusan mozgó lapokat használsz. Ez azt jelenti, hogy a képek ne maguktól, bizonyos időközönként, hanem csak kattintásra cserélődjenek. Az időzítetten cserélődő képek sokszor zavarják az embereket a mozgásukkal, és nagyobb az esély arra, hogy nem foglalkoznak vele, ugyanis – mint az előbb már jeleztük – az ilyen mozgó képeket általában hirdetésnek tekintik.

Hogyan javítsuk a karusszel használhatóságát?

• A képek sorozata: a karusszel ne tartalmazzon 5 képnél többet, és azok legyenek fontossági sorrendbe állítva, tehát az első képed legyen a legfontosabb, mert kevesen hajlandóak 3-4 kattintásnál többre.
• Ne legyen rajtuk hosszú szöveg. Az emberek le-fel görgetnek az oldalon, nem fordítanak időt arra, hogy alaposan elolvassák a szövegeket. Mobilon különösen könnyen elterelődik a figyelmük, ezért minél tömörebben fogalmazd meg az üzeneteket!
• Ha automatikus karusszelt használsz, akkor is tedd lehetővé a felhasználók számára, hogy előre-hátra mozgathassák a karusszel egyes lapjait!
• Azt is jelezd ugyanakkor, hogy a karusszeled hány lapból áll, mégpedig a képen belül, mert ha kívül esik azon, netán lecsúszik a hajtás alá, akkor nem fogják észrevenni, így olyan, mintha ott sem lenne.
• Ha automatikusan mozognak a karusszeled lapjai, akkor az utolsó kép után ismét kezdődjön elölről a sorozat, ne akadjon meg az utolsó képnél.
• Mobilon gondoskodj arról, hogy csúsztatással irányítható legyen a karusszel.
• Tedd lehetővé, hogy a felhasználók megállíthassák a képek automatikus mozgását annak érdekében, hogy megnézzenek egy lapot, elolvassák az azon található szöveget! Történhet ez azáltal, hogy a kép fölé viszik az egérmutatót.
• Végül figyelj arra is, hogy az egyes képek megjelenési ideje kellően hosszú legyen ahhoz, hogy be tudják fogadni az azon szereplő információkat!

Frissítés, 2023.02.10.:

A karusszel egy változata: vízszintes görgetés a weboldalon – Mikor érdemes választani? És hogyan alakítsd ki?

A vízszintes görgetés a weboldalakon található vízszintesen mozgó galériákból, karusszelekből alakult ki, ugyanakkor a görgetés egy UX-szempontból jobban működő megoldás, mely nagyobb teret hagy a kreativitásnak is.

A vízszintes görgetés nem egy mindennapos megoldás a weboldalakon, ezért még mindig jobban felkelti az emberek figyelmét, mint a hagyományos, függőlegesen görgethető oldalak. Ugyanakkor az ilyen oldalakon hiányozhatnak a felhasználók számára bizonyos elemek, melyek nem alakíthatók ki rajta, és a használhatóságával is adódhatnak problémák.  

Egy vízszintes görgetésű weboldalt könnyű azonosítani: minden olyan weboldal vízszintes görgetésű, mely balról jobbra vagy jobbról balra mozog. Jól alkalmazható nagyméretű képekkel vagy más nagy elemekkel.

Első megjelenésének azok a galériák vagy karuszelek tekinthetők, melyek balról jobbra mozogtak, akár automatikusan, akár felhasználói beavatkozás hatására. Ezek ugyan még mindig népszerűek, de kialakultak belőlük a vízszintesen görgethető weboldalak. 

A designerek a görgetés lehetőségére általában azzal utalnak, hogy olyan elemeket jelenítenek meg, melyek csak részben láthatók a kijelzőn, és görgetés hatására kúsznak be a képbe.

Emellett sokszor más vizuális jelzéssel is megerősítik a görgetést, hogy a felhasználók világosan lássák a cselekvési lehetőségeiket az oldalon. Ilyen lehet egy húzható csúszka vagy egy idővonal, melynek pozícióját azt megragadva lehet változtatni. Megjelenhetnek az irányt mutató nyilak is, vagy egyszerűen csak az egér görgőjének mozgatására vízszintesen indul el az oldal. 

Vízszintes görgetés bárhol megjelenhet egy oldalban, ugyanakkor legtöbbször a főoldal felső részén szokott felbukkanni.  

Fontos még, hogy mivel erősen meghatározza az oldal jellegét az egyediségével, ezért, ha vízszintes görgetést alkalmazunk, akkor érdemes más design-trükkökkel takarékosan bánni. 

Milyen előnyei és hátrányai vannak a vízszintes görgetésnek? 

Az elsődleges indok a használatára az lehet, hogy több tartalom megjelentését teszi lehetővé a hajtás feletti részen, miközben a felhasználó számára egy lehetőséget kínál a cselekvésre az oldalon. Az elképzelés ezzel kapcsolatban az, hogy a látogatók így aktívabbak lesznek és hosszabban görgetnek az oldalon, így olyan tartalmakat is megtalálnak, melyet egyébként nem.  

A vízszintes görgetéssel el lehet rejteni a másodlagos tartalmakat, melyek aztán csak később, felhasználói cselekvés hatására bukkannak fel, de arra is hasznos lehet, hogy olyan nagyméretű és vízszintes kiterjedésű vizuális elemeket helyezzünk el az oldalon, melyek más megoldással nem lennének megjeleníthetők.  

Ugyanakkor felmerülnek vele kapcsolatban problémák is, így például az, hogy az interakció sokszor nem világos a látogatók számára. A felhasználóknak rá kell jönni, hogy vízszintes görgetéssel találkoztak, és meg kell érteniük azt, hogy hogyan léphetnek a weboldallal kapcsolatba. Ráadásul mindezt úgy, hogy növelje az aktivitásukat az oldalon.  

A legnagyobb gond tehát a megoldással az, hogy eltér a megszokottól, ez ugyanis azzal jár, hogy a felhasználók nem veszik észre, nem foglalkoznak vele, így pedig nem jutnak hozzá fontos információkhoz, tartalmakhoz az oldalon. Az embereknek meg kell érteni a működését a vízszintes görgetésnek, ami igénybe veszi mentális energiáikat, amit egyébként a tartalom befogadására fordíthatnának. 

Hogyan alakíts ki vízszintes görgetést a weboldaladon? 

Ahhoz, hogy a legtöbbet kihozhasd a vízszintes görgetésből, a használhatóságra és a funkciókra kell összpontosítanod. Át kell gondolnod, hogy a vízszintes görgetés hozzáad-e valamit a tartalomhoz vagy a designhoz, felülmúljék-e az előnyei a problémákat.  

Általában érdemes kerülni a teljes kijelzős vízszintes görgetést, és a felhasználóknak meg kell mutatni, hogy vannak olyan tartalmai a weboldalnak, melyek a megszokott módon elérhetők.

Világossá kell tenni azt is, hogy miként működik a vízszintes görgetés az oldalon: utasításokat, vizuális jelzéseket kell adni a felhasználóknak. Akár részben látható képeket kell mutatni nekik, hogy rájöjjenek, miről van szó az oldalon, és hogyan használják, ahogy a fenti weboldalon is látható.

Figyelni kell arra is, hogy a használhatósági problémákat elkerüljük, és tegyük lehetővé a felhasználók számára a görgethető elemek használatát billentyűzettel is.

Érdemes emellett statikus designelemeket használni a nagyobb stabilitás érdekében. A vízszintes görgetési sávokat pedig ugyanúgy alakítsd ki, mint függőlegesen tennéd, hogy a felhasználóknak ismerős legyen a megoldás.  

Összességében tehát elmondható, hogy a vízszintes görgetés egy hatékony designmegoldás lehet a Te weboldaladon is, amivel nagyobb aktivitást és jobb felhasználói élményt érhetsz el, ha jól alakítod ki. Ugyanakkor a jó kivitelezés nem olyan egyszerű. Kell hozzá a megfelelő szöveges és vizuális tartalom, egy határozott design-elképzelés, és annak megvalósítása.  

Ha ezt mind össze tudod tenni, akkor lehet belőle egy jól használható, egyedi kialakítású weboldal.