{"id":3596,"date":"2019-05-01T14:49:42","date_gmt":"2019-05-01T12:49:42","guid":{"rendered":"http:\/\/blog.webshark.hu\/?p=3596"},"modified":"2023-02-14T06:15:26","modified_gmt":"2023-02-14T05:15:26","slug":"hogyan-tervezz-karuszelt","status":"publish","type":"post","link":"https:\/\/blog.webshark.hu\/2019\/05\/01\/hogyan-tervezz-karuszelt\/","title":{"rendered":"Hogyan tervezz karusszelt vagy v\u00edzszintes g\u00f6rget\u00e9st a weboldaladra? (Friss\u00edtve, 2023.02.10.)"},"content":{"rendered":"\n

Hab\u00e1r a karusszelek j\u00f3 p\u00e1r \u00e9ve \u00e9lt\u00e9k a f\u00e9nykorukat, \u00e9s sokan ma m\u00e1r egy\u00e1ltal\u00e1n nem javasolj\u00e1k a haszn\u00e1latukat weboldalakon, m\u00e9g mindig elterjed megold\u00e1s, k\u00fcl\u00f6n\u00f6sen az e-kereskedelem ter\u00fclet\u00e9n. \u00c9s van egy fejlettebb v\u00e1ltozatuk: a v\u00edzszintes g\u00f6rget\u00e9s. Err\u0151l is ejt\u00fcnk p\u00e1r sz\u00f3t.<\/strong> (Friss\u00edt\u00e9s, 2023.02.10. – Egy \u00faj fejezettel b\u0151v\u00edtett\u00fcnk: v\u00edzszintes g\u00f6rget\u00e9s a weboldalon – Mikor \u00e9rdemes v\u00e1lasztani? \u00c9s hogyan alak\u00edtsd ki?<\/a>).<\/em><\/p>\n\n\n\n\n\n\n\n

A Baymard Institute vizsg\u00e1lata szerint<\/a> az amerikai web\u00e1ruh\u00e1zak 52 sz\u00e1zal\u00e9ka karusszelt haszn\u00e1l a desktopos f\u0151oldal\u00e1n, m\u00edg 56 sz\u00e1zal\u00e9kos a mobilos verzi\u00f3j\u00e1ban. K\u00e9rd\u00e9s azonban, hogy mire kell figyelni egy karusszeln\u00e9l, hogy val\u00f3ban seg\u00edts\u00e9g\u00e9re legyen a felhaszn\u00e1l\u00f3knak a v\u00e1s\u00e1rl\u00e1si folyamat sor\u00e1n.<\/p>\n\n\n\n

\u00c1ltal\u00e1ban az\u00e9rt szeretik a weboldaltulajdonosok, mert a seg\u00edts\u00e9g\u00e9vel t\u00f6bb inform\u00e1ci\u00f3 helyezhet\u0151 el a hajt\u00e1s feletti r\u00e9szen, an\u00e9lk\u00fcl, hogy els\u0151 pillant\u00e1sra t\u00falzs\u00fafoltnak t\u0171nne az oldal. A karusszellel teh\u00e1t egy elfogadhat\u00f3 vizu\u00e1lis megjelen\u00e9s mellett k\u00f6nnyebbnek t\u0171nhet az \u00fczenetek \u00e1tad\u00e1sa. <\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Ugyanakkor persze a karusszel haszn\u00e1lata azt is jelzi, hogy a weboldaltulajdonos elvesztette a f\u00f3kuszt, nem tudja mire \u00f6sszpontos\u00edtson, nem tudja eld\u00f6nteni, hogy mi a legfontosabb c\u00e9l. A karusszel is zs\u00fafolts\u00e1got, felesleges zajt jelent a weboldalon, m\u00e9g ha ezt a karusszel vizu\u00e1lis megjelen\u00e9se miatt siker\u00fcl is titkolni. De akadnak egy\u00e9b probl\u00e9m\u00e1k is.<\/p>\n\n\n\n

Milyen probl\u00e9m\u00e1k vannak egy karusszellel?<\/h2>\n\n\n\n

A Nielsen Norman Group egyik blogbejegyz\u00e9s\u00e9b\u0151l<\/a> kider\u00fcl, hogy az egyik nagy probl\u00e9ma, amikor a felhaszn\u00e1l\u00f3k nehezen f\u00e9rnek hozz\u00e1 a karusszel egyes oldalaihoz, hiszen meg kell keresni\u00fck vagy meg kell v\u00e1rniuk azt az oldalt, amelyik \u0151ket \u00e9rdekli. Az interakci\u00f3 teh\u00e1t nem el\u00e9g hat\u00e9kony.<\/p>\n\n\n\n

R\u00e1ad\u00e1sul nem is k\u00f6nnyen felder\u00edthet\u0151k. Ha az emberek \u00e9szlelik is egy k\u00e9pr\u0151l, hogy az egy carouselben tal\u00e1lhat\u00f3, nem mindig j\u00f6nnek r\u00e1, hogy milyen elemei vannak m\u00e9g, an\u00e9lk\u00fcl, hogy interakci\u00f3ba ne l\u00e9pn\u00e9nek vele. \u00c9rint\u0151k\u00e9perny\u0151k eset\u00e9n emellett m\u00e9g az ir\u00e1ny\u00edt\u00e1sukkal is probl\u00e9m\u00e1k szoktak ad\u00f3dni.<\/p>\n\n\n\n

Szekvenci\u00e1lis hozz\u00e1f\u00e9r\u00e9s<\/h3>\n\n\n\n

Amikor v\u00e9gig kell menni minden egyes karusszel-k\u00e9pen, hogy megtal\u00e1ljuk k\u00f6z\u00f6tt\u00fck azt, amelyik \u00e9rdekes lehet sz\u00e1munkra, az el\u00e9g bosszant\u00f3 tud lenni. A legt\u00f6bb ember \u00e1ltal\u00e1ban 3-4 lap megtekint\u00e9se ut\u00e1n feladja. Ez\u00e9rt c\u00e9lszer\u0171, ha a karusszeledben nincs is enn\u00e9l t\u00f6bb k\u00e9p<\/strong>. Ez persze nem azt jelenti, hogy csak ennyi elem jelenhet meg, hiszen egy lapra t\u00f6bb elemet is elhelyezhetsz.<\/p>\n\n\n\n

Ha enn\u00e9l t\u00f6bbet akarsz megmutatni az embereknek, akkor haszn\u00e1lj helyette ink\u00e1bb listan\u00e9zetet<\/strong>, \u00e9s adj lehet\u0151s\u00e9get arra, hogy egyb\u0151l hozz\u00e1f\u00e9rhessenek a list\u00e1ban szerepl\u0151 b\u00e1rmelyik elemhez.<\/p>\n\n\n\n

Egy carouseln\u00e9l fontos a megfelel\u0151 sorrend: a leg\u00e9rdekesebb k\u00e9p ker\u00fclj\u00f6n az els\u0151 helyre<\/strong>, mert ez arra k\u00e9szteti a l\u00e1togat\u00f3kat, hogy felfigyeljenek a carouselre. \u00c9rdemes egy\u00e9bk\u00e9nt megfontolni a szem\u00e9lyre szab\u00e1st is, ez\u00e1ltal az els\u0151 n\u00e9h\u00e1ny oldal m\u00e9g relev\u00e1nsabb lehet a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, ez pedig cs\u00f6kkenti a nehezebb hozz\u00e1f\u00e9r\u00e9s miatti frusztr\u00e1ci\u00f3t.<\/p>\n\n\n\n

Felfedezhet\u0151s\u00e9g<\/h3>\n\n\n\n

Egy kapkod\u00f3 mobilos felhaszn\u00e1l\u00f3, aki valamilyen speci\u00e1lis tartalmat keres, soha sem fog felfigyelni egy karusszelre<\/strong>. M\u00e9g akkor sem, ha az mag\u00e1t\u00f3l p\u00f6rgeti a k\u00e9peket, mert mire a carousel megmozdulna, m\u00e1r lejjebb is g\u00f6rgetett az oldalon, keresve az \u0151t \u00e9rdekl\u0151 tartalmat.<\/p>\n\n\n\n

A weboldaltulajdonosoknak teh\u00e1t azzal is tiszt\u00e1ban kell lenni, hogy a l\u00e1togat\u00f3k egy jelent\u0151s r\u00e9sze soha nem fog a karusszel els\u0151 lapj\u00e1n\u00e1l t\u00f6bbet l\u00e1tni, mert addigra m\u00e1r leg\u00f6rget vagy elkattint. A kutat\u00e1sokb\u00f3l nyilv\u00e1nval\u00f3<\/a>, hogy a bannervaks\u00e1g a karusszel eset\u00e9ben is l\u00e9tez\u0151 jelens\u00e9g. A felhaszn\u00e1l\u00f3k gyakran tudom\u00e1st sem vesznek ezekr\u0151l a nagy k\u00e9pekr\u0151l, \u00e9s a rajtuk szerepl\u0151 inform\u00e1ci\u00f3kr\u00f3l. <\/p>\n\n\n\n

Hagyom\u00e1nyosan h\u00e1romf\u00e9le megold\u00e1ssal utalunk egy carousel jelenl\u00e9t\u00e9re: pontokkal vagy vonalakkal, nyilakkal, illetve a folytonoss\u00e1g ill\u00fazi\u00f3j\u00e1val. N\u00e9h\u00e1ny carousel er\u0151sebb vizu\u00e1lis jeleket haszn\u00e1l \u00f6nmaga beazonos\u00edt\u00e1s\u00e1ra, m\u00e1sok kev\u00e9sb\u00e9. A pontok vagy a nyilak \u00e1ltal\u00e1ban el\u00e9g gyenge jelz\u00e9snek<\/strong> sz\u00e1m\u00edtanak, hiszen kis m\u00e9ret\u00fck miatt az emberek nem mindig veszik \u00e9szre \u0151ket. K\u00fcl\u00f6n\u00f6sen akkor, ha m\u00e9rs\u00e9kelt a kontraszt a m\u00f6g\u00f6tte vagy mellette megjelen\u0151 k\u00e9phez k\u00e9pest. Ez mobilon m\u00e9g nagyobb probl\u00e9m\u00e1t jelent, ahol a kinti f\u00e9nyben a t\u00fckr\u00f6z\u0151d\u0151 kijelz\u0151 rontja a l\u00e1that\u00f3s\u00e1got.<\/p>\n\n\n\n

A folytonoss\u00e1g ill\u00fazi\u00f3ja – p\u00e9ld\u00e1ul egy f\u00e9lbev\u00e1gott k\u00e9p vagy sz\u00f6veg \u00e1ltal, ami azt mutatja, hogy a tartalom a kijelz\u0151 f\u00fcgg\u0151leges sz\u00e9le ut\u00e1n is folytat\u00f3dik – m\u00e1r egy er\u0151sebb jelz\u00e9s. Ez\u00e1ltal az emberek gyorsan meg\u00e9rtik, hogy t\u00f6bb tartalomhoz is hozz\u00e1f\u00e9rhetnek.<\/p>\n\n\n

\n
\"Egy
Egy er\u0151s jelz\u00e9s carouselre mobilon<\/figcaption><\/figure><\/div>\n\n\n

Persze lehet, hogy a felhaszn\u00e1l\u00f3kat akkor sem \u00e9rdekli a t\u00f6bbi karusszel-elem, ha j\u00f3l l\u00e1that\u00f3 a karusszel-jelleg. Ez att\u00f3l f\u00fcgg, hogy mennyire izgalmas sz\u00e1mukra az els\u0151 k\u00e9p. Fontos azonban, hogy a carosuelben szerepl\u0151 elemek kapcsol\u00f3djanak egym\u00e1shoz, mert az emberek erre sz\u00e1m\u00edtanak. De az is l\u00e9nyeges, hogy a caruselben el\u00e9rhet\u0151 fontosabb elemek m\u00e1s m\u00f3dokon is megk\u00f6zel\u00edthet\u0151k legyenek. Ha nem \u00edgy tesz\u00fcnk, akkor bizonyos tartalmak teljesen els\u00fcllyedhetnek.<\/p>\n\n\n\n

A karusszel ir\u00e1ny\u00edt\u00e1sa<\/h3>\n\n\n\n

Amikor az emberek interakci\u00f3ba akarnak l\u00e9pni egy carousellel \u00e9rint\u0151k\u00e9perny\u0151s eszk\u00f6z\u00f6n, akkor cs\u00fasztatj\u00e1k az ujjukat<\/strong>. Ha egy carousel nem t\u00e1mogatja ezt a megold\u00e1st, az teljesen v\u00e1ratlanul \u00e9ri \u0151ket, \u00edgy rontja a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Mostanra ugyanis a legt\u00f6bb felhaszn\u00e1l\u00f3 m\u00e1r el\u00e9g j\u00f3l ismeri ezt a mozdulatot a horizont\u00e1lis navig\u00e1ci\u00f3n\u00e1l is.<\/p>\n\n\n\n

Az NNG ugyanakkor felh\u00edvja a figyelmet a cs\u00fasztat\u00e1si bizonytalans\u00e1gra<\/strong> a iOS eset\u00e9ben, mely az iOS 7 \u00f3ta \u00e1lland\u00f3 vesz\u00e9lly\u00e9 v\u00e1lt. P\u00e9ld\u00e1ul a Safari b\u00f6ng\u00e9sz\u0151 eset\u00e9ben a v\u00edzszintes cs\u00fasztat\u00e1s a bal oldalon egyet jelent a vissza gomb lenyom\u00e1s\u00e1val. Azaz visszaviszi a felhaszn\u00e1l\u00f3t az el\u0151z\u0151 oldalra. Ugyanakkor az iPhone X-n\u00e9l, ha ez a cs\u00fasztat\u00e1s a kijelz\u0151 als\u00f3 r\u00e9sz\u00e9n t\u00f6rt\u00e9nik, akkor alkalmaz\u00e1st fog v\u00e1ltani az eszk\u00f6z.<\/p>\n\n\n\n

Megold\u00e1st jelenthet, ha a k\u00e9p nem \u00e9r el a kijelz\u0151 sz\u00e9l\u00e9ig, hanem marad m\u00e9g mindk\u00e9t oldalon n\u00e9mi whitespace. Ez ugyanis azt \u00fczeni a felhaszn\u00e1l\u00f3knak, hogy a carousel nem \u00e9rinti a kijelz\u0151 sz\u00e9l\u00e9t. Ennek ellen\u00e9re persze sokan fogj\u00e1k az ujjukat a kijelz\u0151 sz\u00e9l\u00e9n\u00e9l cs\u00fasztatni, \u00e9s \u00edgy visszal\u00e9pnek az oldalr\u00f3l.<\/p>\n\n\n\n

Sok reszponz\u00edv design eset\u00e9ben pedig a tervez\u0151k eleve lemondanak a cs\u00fasztat\u00e1s haszn\u00e1lat\u00e1r\u00f3l, \u00e9s arra sz\u00e1m\u00edtanak, hogy az emberek majd az apr\u00f3 k\u00f6r\u00f6ket fogj\u00e1k tapogatni a k\u00e9pek alatt. \u00c9s b\u00e1r ez nem okoz gondot az iOS eset\u00e9ben, a felhaszn\u00e1l\u00f3k nem szeretik ezt a megold\u00e1st, illetve nem is j\u00f6nnek r\u00e1, hogy a pontok azok, melyekkel ir\u00e1ny\u00edtani tudj\u00e1k a carouselt. R\u00e1ad\u00e1sul, ha nagyon apr\u00f3k a k\u00f6r\u00f6k \u00e9s k\u00f6zel is vannak egym\u00e1shoz, akkor neh\u00e9z pontosan eltal\u00e1lni egyiket vagy m\u00e1sikat.<\/p>\n\n\n\n

Milyen legyen a karusszel?
<\/h2>\n\n\n\n

Ha m\u00e9gis karusszelt haszn\u00e1ln\u00e1l, akkor lehet, hogy jobb megold\u00e1s, ha nem automatikusan mozg\u00f3 lapokat haszn\u00e1lsz. Ez azt jelenti, hogy a k\u00e9pek ne magukt\u00f3l, bizonyos id\u0151k\u00f6z\u00f6nk\u00e9nt, hanem csak kattint\u00e1sra cser\u00e9l\u0151djenek. Az id\u0151z\u00edtetten cser\u00e9l\u0151d\u0151 k\u00e9pek sokszor zavarj\u00e1k az embereket a mozg\u00e1sukkal, \u00e9s nagyobb az es\u00e9ly arra, hogy nem foglalkoznak vele, ugyanis – mint az el\u0151bb m\u00e1r jelezt\u00fck – az ilyen mozg\u00f3 k\u00e9peket \u00e1ltal\u00e1ban hirdet\u00e9snek tekintik.
<\/p>\n\n\n\n

Hogyan jav\u00edtsuk a karusszel haszn\u00e1lhat\u00f3s\u00e1g\u00e1t?
<\/p>\n\n\n\n