Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2019-05-010 komment

Hogyan tervezz karuszelt?

Tartalomjegyzék
Bővített tartalomjegyzék

Habár a karuszelek jó pár éve élték a fénykorukat, és sokan ma már egyáltalán nem javasolják a használatukat, még mindig igencsak elterjed megoldás, különösen az e-kereskedelem területén. (Frissítés, 2019.07.15. – Most bővítettük a bejegyzést a karuszeleknél felmerülő problémák részletesebb felsorolásával).

A Baymard Institute vizsgálata szerint az amerikai webáruházak 52 százaléka karuszelt 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 karuszelné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 karuszellel tehát egy elfogadható vizuális megjelenés mellett könnyebbnek tűnhet az üzenetek átadása.

Ugyanakkor persze a karuszel 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 karuszel is zsúfoltságot, felesleges zajt jelent a weboldalon, még ha ezt a karuszel vizuális megjelenése miatt sikerül is titkolni. De akadnak egyéb problémák is.

Milyen problémák vannak egy karuszellel?

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 karuszel 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 karuszel-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 karuszeledben 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 karuszelre. 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 karuszel 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 karuszel 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.

Egy erős jelzés carouselre mobilon
Egy erős jelzés carouselre mobilon

Persze lehet, hogy a felhasználókat akkor sem érdekli a többi karuszel-elem, ha jól látható a karuszel-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 karuszel 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 karuszel?

Ha mégis karuszelt 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 karuszel használhatóságát?

  • A képek sorozata: a karuszel 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 karuszelt használsz, akkor is tedd lehetővé a felhasználók számára, hogy előre-hátra mozgathassák a karuszel egyes lapjait!
  • Azt is jelezd ugyanakkor, hogy a karuszeled 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 karuszeled 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 karuszel.
  • 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!
Kategória: Design | Címke: ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.