Scrolling: Hogy használhatod a webdizájban

A görgetés a modern webdesign megjelenésével már-már úgy tűnt, szinte kihal. Egyre kevesebben alkalmazták, nem hittek benne, hogy a rohanó, a tartalomfogyasztásra csak másodperceket szánó felhasználók kíváncsiak a teljes történetre, ezért egyszerre akartak mindent elmondani. Pedig a scrolling ügyesen alkalmazva egy elképesztően hasznos eszközt ad a kezünkbe – ezért is láthatjuk ismét elterjedni.

A mobilról netezők száma jó ideje meghaladta már az asztali gépről a netre csatlakozókét – a dizájnerek pedig alkalmazkodtak ehhez a trendhez, így megjelent a reszponzív webdesign is. Ahogyan egyre többen és többen váltanak kisebb képernyőkre, a görgetés ismét teret hódított magának, kényszerűségből.

Vannak azonban más tényezők is, amelyek segítették a scrolling visszatérését. A nagysebességű internethez való hozzáférés ma már több helyen érhető el, a nagyobb oldalak betöltése így nem okos olyan problémákat, mint néhány évvel ezelőtt. Ráaádsul, minél nagyobb az oldal és minél több jó tartalom van rajta, a keresőoptimalizálás annál hatékonyabb lesz. A különféle szolgáltatások, weboldalak alkalmazkodtak ehhez – élükön a közösségi oldalakkal – és bátran jelenítenek meg tartalommal teli hosszú oldalakat a felhasználók számára.

Ezzel egy időben szépen kifejlődött az úgynevezett card-based dizájn is, amely a görgetéssel kombinálva lehetővé teszi, hogy hatalmas mennyiségű tartalmat jelenítsünk meg kisebb egységekre bontva. Ez a “kártyadizájn”, hála annak, hogy jól elkülöníthető elemekből áll, kifejezetten alkalmas arra, hogy reszponzív, az okostelefonok és más kisebb eszközök (phabletek, tabletek stb.) kijelzőin is tökéletesen megjelenő oldalakat hozhassunk létre a segítségével.

Görgetésmítosz

Az internetet böngésző felhasználók szokásaival kapcsolatban rengeteg mítosz fészkelte be magát makacsul a szakemberek fejébe. Ilyen az például, hogy az emberek nem olvasnak el hosszú szövegeket (amit Jakob Nielsen húsz éve állapított meg, és mára tévesnek bizonyult), vagy hogy az emberek nem szeretnek görgetni. Logikusnak tűnt tehát, hogy mindent a “hajtás fölé” (above the fold) zsúfoljanak be, legalábbis miden lényegeset: a felhasználó egyből szembesüljön a legfontosabb információkkal, CTA-kkal és így tovább. Mára azonban ez a mítosz is megdőlt – a felhasználók igenis görgetnek, ahogyan azt rengeteg független tanulmány bizonyítja is. A látogatói statisztikák, például a Google Analytics segítségével, segítenek ellenőrizni a netezők viselkedését.

Csak egy példa: a ClickTale több mint 120 ezer oldalletöltést vizsgált meg, és úgy találták, hogy a látogatók az esetek 76 százalékában használták a görgetősávot, 22 százalékuk pedig egészen az oldal aljáig görgetett – függetlenül attól, milyen hosszú volt az adott oldal. Ennyit erről, a mítoszrombolás elvégzettnek tekinthető.

A modern dizájnmegoldások persze sokat tettek azért, hogy a görgetés, mint olyan életben maradjon. Egy hosszú, szöveget és alkalmanként képeket tartalmazó oldal valóban nem éppen a legvonzóbb sok felhasználó számára. Ma már azonban az oldalon belüli navigáció, a lebegő dizájnelemek, a jó tartalomkezelő rendszerek, a dinamikusan változó tartalom és más különféle eszközök javították annyira a felhasználói élményt, hogy az a görgetéssel egyáltalán nem romlik.

A scrolling előnyei

Az alábbiakban sorra vesszük a görgetés előnyeit. Lássuk, mire kell figyelnünk a webfejlesztés során:

A scrolling interakcióra ösztönöz. Nem véletlenül látjuk minden közösségi oldalon azt, hogy a tartalmat végtelenített, folyamatosan frissülő oldalakon tárják elénk (az esetek nagy részében infinite scroll technikával, amelyről már írtunk korábban). De már egy ízlésesesen megvalósított parallax scrolling dizájn is rendkívül hasznos lehet a történetmesélésben, az interakcióra ösztönzésben. Görgetéssel több mindent mondhatunk el a felhasználónak, több esélyünk nyílik hozzá szólni, kommunikálni vele.
Gyorsabb. Az, ha egyszerűen legörgethetjük az oldalt, általában gyorsabb, mintha egy komplex oldaltérképen kellene navigálnunk. De nem csak az számít, valóban gyorsabban juttatjuk-e el a megfelelő helyre a felhasználót: ha az oldalon belüli mozgást gyorsnak érzik, az már magában is elég.
Marasztalja az olvasót. Az oldalon belüli könnyű navigáció, a sok jól optimalizált tartalom egyszerre történő megjelenítése, könnyű elérése növeli az oldalon eltöltött időt – ez különösen igaz lehet az infinite scrollingot használó oldalakra, ez a technika azonban, mint arról már írtunk, ritkán ideális megoldás, különösen webáruház fejlesztés esetén.
Reszponzív. Egy olyan oldalt, amelyen minden információt a hajtás fölé akarunk bezsúfolni, nehézkesen optimalizálhatunk csak a különféle platformokra, egy olyat azonban, ahol az információk egyszerűen görgetéssel elérhetőek, már sokkal egyszerűbben.
Gesztusvezérelt. A görgetés egészen természetes módon kivitelezhető az érintésvezérelt eszközökön, ujjunkkal lefelé vagy felfelé húzva egy oldalt pedig sokkal könnyebben navigálhatunk, mintha a navigációs gombokat kellene nyomogatnunk a kijelzőn.

A scrolling hátrányai

Most pedig lássuk a hátrányokat! Íme a lista:

Problémák a SEO-val. Ha a tartalmat egyetlen oldalon jelenítjük meg, az keresőoptimalizálás tekintetében negatívabb hatással lehet az oldalra, mintha több aloldalon tennénk ugyanezt. Ez a különféle egyedi scrolling megoldásokra, mint a parallax vagy a végtelenített oldalak egyaránt vonatkozik. Végezzünk keresőoptimalizálási elemzést!
Zavaró lehet. Ha az oldalt nem tervezzük meg megfelelően, és a görgetés maga nincs összhangban a tartalmak elhelyezésével, megjelenítésével, az kifejezetten zavaró hatással lehet a felhasználókra, rontva ezáltal a felhasználói élményüket (User Experience, UX).
Navigációs nehézségek. Ahogyan a végtelenített oldalak esetében lehetetlen, úgy a hosszú oldalak esetében is nehézkes lehet a navigáció, az egyes tartalmak megtalálása, ezért legalábbis az oldalon belüli navigációra érdemes valamilyen megoldást kidolgoznunk, illetve arra, hogy az egyes tartalmi elemeket a felhasználók külön oldalakon is megjeleníthessék. A jól átgondolt, ergonomikus tervezés sokat segíthet.
Sebesség. Bár a legtöbb esetben ez már nem jelent gondot, az olyan oldalak, amelyeken például rengeteg videót jelenítünk meg (például termékteszteket, bemutatókat, testimonialokat stb.) már okozhatnak problémákat az oldal megjelenítésének sebessége terén is, ami a felhasználói élményt és a SEO-t is befolyásolja.
Weboldalunk kialakításánál mindezeket a tényezőket figyelembe kell vennünk. Ha keresőmarketing kampányt futtatunk, az onnan érkező netezőkre is gondolnunk kell. Magától a görgetéstől egyáltalán nem kell tartanunk – ha jól építjük fel az oldalt, akkor a felhasználók tekintélyes része a hajtás alatti tartalmakat is megtekinti majd, legyen szó akár blogbejegyzésekről, akár termékekről egy webáruházban.

Ne kényszeríts, ösztönözz

Ehhez persze az elsőként megjelenített oldalrészleten olyan motiváló elemeket kell elhelyeznünk, amelyek a böngészést, az oldalon maradást elősegítik, ösztönzik. Világossá kell tennünk azt, hogy a görgetéssel olyan remek tartalmakat érhetnek el, amelyekért érdemes több időt az oldalon tölteniük. Márpedig az oldalon töltött idő fontos tényező, különösen ha fizetünk a látogatásokért – azaz például Google Ads kampányt indítunk a honlapunkra.

Ily módon például érdemes lehet nem csak tartalommegosztó oldalakat, de akár webáruházakat is átalakítani úgy, hogy a felhasználók egyszerre több mindenhez férjenek hozzá. Mérlegelhetjük például egy microsite kialakítását. Nem biztos, hogy megéri egy kategórián belül öt termékenként „lapozásra” kényszeríteni a felhasználót, mikor mobilon ő egyszerűen csak át akarja tekinteni gyorsan és egyszerűen az összes terméket.

A részletekbe belemehetünk az egyes termékoldalakon – erre ráérünk akkor gondolni, amikor a legfontosabb információkat már könnyen fogyasztható és hozzáférhető formában megjelenítettük.

Hogyan használd a görgetést?

A scrolling újfajta technikái sajnos még mindig újnak számítanak – pedig valaminek, amin már négy éve megjelent és elkezdett meghonosodni a piacon, nem kellene annak lennie. Az emberi makacsságnak köszönhetően azonban a parallax és társai még mindig újszerűnek hatnak. Az elmúlt években viszont remekül beazonosíthatóak voltak már a legjobban bevált módszerek, így tanácsokat is adhatunk, hogyan érdemes ezeket használnod.

Keverd a hosszú és rövid oldalakat, legyen okosan felépített a honlapszerkezeted. Ne a dizájn diktálja, hogyan jeleníted meg tartalmaidat (legyenek akár posztok, akár termékek, bármi), hanem fordítva. A tartalmat mindig olyan formában tárd a felhasználó elé, hogy a számára legkényelmesebb formában fogyaszthassa.

Használj „sticky”, helyhez kötött navigációs elemeket, például lebegő gombokat. Ezek segíthetnek az oldalon belüli navigáció egyszerűbbé tételében, így az elejére vagy végére ugrásban, az elemek közötti gyors váltásban.

Utalj rá, hogy az oldalt érdemes görgetni. Figyelj a grafikai tervezésre és helyezz el olyan dizájnelemeket, amelyek mutatják a felhasználónak, hogy lejjebb görgethet további tartalmakért. Olyan navigációs elemeket, amelyeket rögtön ért és képes használni (például lebegő elemként elhelyezett egyszerű nyilakat). Sok oldal alján láthatjuk a „Sroll for more” és hasonló feliratokat, amelyek arra ösztönöznek, hogy megnézzük, mi található lejjebb – ezek használata nem ötletszerű, nagyon is hatékony megoldások.

Figyeld a felhasználók viselkedését! Elemezd, hogyan használják oldaladat, és aszerint alakítsd – a Google Analytics elemzései például remekül megmutatják, hányan görgetnek le egy oldalon a hajtás alá, mennyi időt töltenek el egy oldalon és így tovább.

Ne vidd túlzásba. Igen, a hosszú oldalak hatékonyak lehetnek, de ez nem azt jelenti, hogy feltétlenül kilométeres oldalakat kell gyártanod. Nem kell az egyoldalas (one-page) elrendezésre törekedned, elégedj meg azzal, hogy a legrelevánsabb, maradásra, interakcióra ösztönöző tartalmakból éppen elegendő, akár nagyobb mennyiséget jeleníts meg. Ha a látogatóknál még jobb eredményeket akarsz elérni, használj linképítést! A görgetéstől nem kell tartanod, ez tény. A zsúfolt, mindent egyszerre megjeleníteni akaró oldal hatása olyan, mintha valaki egy percben akarná elmesélni az élettörténetét. Tedd inkább részletessé és egyben vonzóvá történetedet – ültesd le a felhasználót egy fotelba, adj neki egy forró italt és meséld el neki hosszan és érdekesen a mondanivalódat. Ha elég meggyőző vagy, meg fog hallgatni.