Keresés
Header Háttér

Webshark Blog

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

2018-08-290 komment

Milyen legyen egy carousel mobilon?

Habár a carouseleknek megvan az az előnyük, hogy viszonylag sok tartalmat tudunk általuk egy kis területen elhelyezni, ugyanakkor vannak hátrányaik is. Különösen mobilon.

Desktop megjelenésnél mindig népszerűek voltak a carouselek – habár a designerek jelentős része nem kedvelte, illetve nem is javasolta a használatukat -, mivel segítségükkel nagyobb mennyiségű tartalmat lehetett elhelyezni a főoldalon, vagy egyből a hajtás felett. Ez a jó tulajdonságuk mobilon még inkább kihasználható, hiszen ott még szűkebb a rendelkezésre álló tér. Ráadásul a carouseleknek megvan az az előnyük is, hogy ha egy weboldaltulajdonos nem tudja eldönteni mi a weboldal legfőbb üzenete vagy funkciója, akkor carousellel többet is megjeleníthet.

Ugyanakkor vannak hátrányai is – hívta fel a figyelmet a Nielsen Norman Group egy blogbejegyzésében. Az egyik nagy probléma, hogy a felhasználók nehezen férnek hozzá a carousel 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 carousel-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 oldal megtekintése után feladja. Ezért célszerű, ha a carouseledben nincs is ennél több oldal. Ez persze nem azt jelenti, hogy csak ennyi elem jelenhet meg, hiszen egy oldalra több elemet is elhelyezhetsz.

Ha ennél több oldalt akarsz megmutatni az embereknek, akkor inkább használj helyette 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 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 carouselre. 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.

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 gyenge 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 carosuel-elem, ha jól látható a carousel-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 carousel 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.

Összességében tehát elmondható, hogy bár a csábítás igen nagy a carousel-használatra mobilos megjelenésnél is, az egyes elemek felfedezhetősége elég gyenge, különösen akkor, ha nincsenek egyértelmű jelzések arra, hogy a felhasználók egy carousellel állnak szemben. Óvatosan kell vele bánni, vagy egyáltalán nem használni, ha nem muszáj.

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.