Webshark Blog

A parallax effektek már évek óta velünk élnek a webdesignban is, akad jó pár olyan oldal a weben, mely kihasználja a lehetőségeket. Látványos tud lenni a dolog, de vajon egy olyan céges oldalnál, melytől hatékonyságot, konverziót várunk el, érdemes-e alkalmazni? (Frissítés, 2021.11.17. – Egy új fejezettel bővítettünk: Néhány példa parallax oldalra).

A parallax megoldások a videójátékok világában jelentek meg, de ennek már van harminc éve is. Már ekkor akadtak olyan játékok, ahol a háttér lassabban mozgott, így a tér illúzióját keltette. A webdesignban 2011-ben bukkant fel a HTML5-nek köszönhetően. Mindezek mellett még mindig újnak és eredetinek hat a weboldalakon, talán amiatt is, hogy kevés oldal merte megkockáztatni a használatát.

Mi az a parallax design?

A parallax design lényege, hogy több “réteg” jelenik meg egyszerre egy weboldalon, szinte 3D-s lesz a látvány. Azért, mert a rétegek eltérő sebességgel mozognak, amikor scrollozunk lefelé vagy csak mozgatjuk az egeret: például a háttér lassabban mozdul, mint az előtérben lévő képek. Ezáltal kelt térhatást, ami lenyűgöző tud lenni a megszokott kétdimenziós, szöveg-kép felépítésű weboldalak ezrei között.

További “trükkökre” is képes azonban a parallax design: nemcsak függőlegesen mozoghat, hanem akár vízszintesen is, sőt bármilyen irányban, valamint a felhasználók egy-egy linkre kattintással látványos ugrásokat tehetnek az oldalon. Ami képes magával ragadni az embert, vagyis vonzóbbá, látványosabbá tehetjük a weboldalunkat vele, a kijelző előtt tarthatjuk a felhasználót, aki így több időt tölt az oldalunkon.

Mire használható a parallax design 2021-ben?

Általában a designerek és a weboldaltulajdonosok azért nyúlnak a parallax megjelenéshez, mert egy „magával ragadó” élményt szeretnének kínálni a látogatók számára. Azt feltételezik ugyanis, hogy ezáltal kreatívabb megjelenésű és megjegyezhetőbb lesz az oldal. Ennél azonban többet tud a parallax oldal.

Parallax-görgetéssel mondhatunk el egy történetet

A parallax görgetés felhasználására az egyik legkézenfekvőbb lehetőség a történetmesélés. A felhasználók egyre inkább érzelmi kapcsolatot szeretnének kialakítani a márkákkal is, melyektől vásárolnak valamit. Már öt éve is azt mutatták a kutatások, hogy az emberek 81 százaléka azt várja a márkáktól, hogy mondjanak el nekik egy történetet, és ez a trend azóta is változatlan.

A látogatások számának növelésére

Ha egy weboldal hatékonyan mondja el a történet egy parallax animáció alkalmazásával, akkor az nagy eséllyel azt eredményezi, hogy a látogatók tovább maradnak a weboldalon. Márpedig minden weboldal célja az, hogy csökkentse a visszafordulási arányt és növelje a weboldalon eltöltött időt. Tehát lehet, hogy a parallax effekt növeli a betöltődési időt, ami nem kedvező a felhasználói élmény vagy a SEO szempontjából, ezzel szemben áll azonban, hogy – ha jól van kivitelezve – megfogja a felhasználót, növeli az aktivitását az oldalon.

Könnyebbé teszi az információ átadását

Az emberek vizuális lények. Sokkal jobban szeretnek képek segítségével, vonzó és izgalmas vizuális megjelenéssel információt befogadni, mint egyhangú szövegek által. Ez az oka annak is, hogy a vizuális tartalmak sokkal több közösségi megosztást szereznek, mint az egyszerű írott szövegek, legyenek azok bármennyire is informatívak. A parallax animációk segítségével pedig az információk vizuálisan izgalmasabbá tehetők, így hatékonyabban átadhatók az embereknek.

Hiszen ahelyett, hogy sok egyforma bekezdéssel találkoznának a felhasználók a weboldalon, képeket, grafikonokat és nem mellesleg szöveget látnak életre kelni a parallax hatás által.

Mozgóképpé alakítható a weboldal

Az előbbi gondolatot folytatva, a parallax animációk révén élővé válik a weboldal, ahol így gyakorlatilag mozgás jelenik meg, akárcsak korunk legfelkapottabb médiaformátumában: a videókban. A parallax effektek révén a weboldal olyanná válhat, mintha egy videós prezentáció lenne, anélkül persze, hogy valóban el kellene helyezni benne egy videót.

Ugyanakkor van egy előnye a videókkal szemben: maximálisan a felhasználók kezében van az irányítás, hiszen a görgetéssel szabályozhatják a mozgást. Ez pedig sokkal felhasználóbarátabb, mint egy automatikusan elinduló videó, ahol pause gombot kell lenyomni a megállításhoz, vagy a csúszkával lehet előrébb és hátrébb mozogni.

Felhívhatja valamire a figyelmet

Ugyanakkor a parallax használatával felhívható a figyelem bizonyos weboldalelemekre is. Hiszen amikor egy elem más sebességgel mozog, mint a többi, akkor arra irányul a figyelem. Az emberek tekintete automatikusan a gyorsabban mozgó részre összpontosul, így nem kell azt keresniük.

Emlékezetessé tenni a weboldalt

Mit szeretne minden weboldaltulajdonos elérni a weboldalával? Azt, hogy lenyűgözze az embereket és emlékezzenek rá, hogy aztán később is eszükbe jusson és visszatérjenek vásárolni. Habár a parallax mozgás már nem annyira egyedi, mint évekkel ezelőtt volt, azért egy kreatív kivitelezés még mindig emlékezetes lehet a látogatók számára. Ha pedig a Te weboldalad emlékezetesebb és lenyűgözőbb, mint a konkurenciáé, akkor rád fognak emlékezni az emberek.

Vannak korlátai

• Habár az előbb azt mondtuk, hogy a parallax a mozgó elemekre irányítja a figyelmet, az is igaz, hogy sok embernél nem tudja kifejteni ezt a hatást. Ennek oka, hogy a célorientált felhasználók gyorsan görgetnek kulcsszavakat keresve az oldalon, és nem várják meg, hogy kibontakozzon a parallax effekt.
• Ehhez jön még hozzá, hogy a nagyobb parallax weboldalaknál sokat kell várni a betöltésre a hatalmas képek és a mozgásért felelős scriptek miatt, amit sok felhasználó nem tesz meg. Mostanában, amikor egyre türelmetlenebb a közönség, nagyobb visszapattanási arányt eredményezhet egy lassan betöltődő oldal, hiszen sokáig nem látnak semmit a felhasználók, csak egy üres oldalt.
• Az is lehet azonban gond, amikor a görgetés sebességéhez igazodik a parallax megjelenítés, hiszen, ha nagyon gyorsan görget a felhasználó, akkor olyan gyorsabb tűnnek fel és el szövegek, hogy el sem tudja őket olvasni.
• Emellett a hosszas scrollozás is zavarhat néhány látogatót, akik ugyancsak idő előtt lelépnek az oldalunkról.
• A túl sok mozgás is gondot okozhat, különösen a szövegeknél: ezáltal nehezebbé válik az olvasás, sőt akár rosszul is lehetnek egyes felhasználók a parallax effekteket használó weboldaltól.
• Ráadásul azt sem szabad elfelejteni, hogy mivel a weboldalakon alapvetően a hirdetések azok, amik mozognak, így sok felhasználó már tudomást sem vesz a mozgó dolgokról, amikor megérkezik egy weboldalra.
• Egyébként pedig akadnak még mindig olyan régi böngészők, melyek nem támogatják a HTML5-öt, és így nem működik rajtuk a parallax design.
• További gondot jelenthet, hogy nem egy mobil-barát technológiáról van szó, de nehezíti a méréseket is az oldalon, valamint a keresőoptimalizálás során is jelenthet gondokat. Már csak azért is, mert a legtöbb esetben a látvány áll az első helyen, ami a tartalom, illetve elsősorban a szöveg kárára válik.
• És végül azt is érdemes észben tartani, hogy a felhasználók nem feltétlenül rajonganak a parallax effektekért. A designerek vagy a webdesign iránt érdeklődők azok, akik értékelik az ilyen törekvéseket, az átlagemberek nem annyira. A tesztekből az derült ki például a Nielsen Norman Group számára, hogy a felhasználók a weboldalak használata közben egyáltalán nincsenek lenyűgözve a parallax megjelenéstől, nem kommentálják azt, és nem is nézegetik lefelé és felfelé scrollozással, hogy milyen lenyűgöző (legalábbis, ha külön nem hívják fel rá a figyelmüket a moderátorok). Az emberek elsősorban a tartalomra összpontosítanak.

Mindez azonban nem szükségszerűség.

Mit tehetünk?

Azt kell megérteni a parallax esetén, hogy az az animációk egy formája, és mint minden animációnál a kevesebb több. Azaz nem muszáj az egész weboldalunkat parallax designnal készíteni, illetve finomabb mozgásokat érdemes használni.

Érdemes azonban azt is figyelembe venni, hogy milyen jellegű az oldalunk. Hiszen a parallax leginkább ott működik, ahol az emberek nem sietnek, hanem ráérősen, egy meghatározott cél vagy feladat nélkül tartózkodnak az oldalon. Ilyen esetekben a parallax segíteni tudja egy történet elbeszélését vagy a márkaidentitás mélyítését.

Másrészt parallax oldal esetén is figyelhetünk külön a SEO-ra, és – ehhez is kapcsolódóan – a mobilon is használható megjelenésre.

Néhány javaslat:

• Ha a felhasználók egy feladattal érkeznek a weboldaladra, akkor a tartalmat a weboldal felső részére helyezd!
• Használj belső navigációs linkeket, hogy az embereknek ne kizárólag a görgetésre kell támaszkodniuk a navigációnál.
• Ne vidd túlzásba az oldalon a parallax-effekteket, csak egy-egy helyen bukkanjanak. A legjobb, ha a háttérbe vagy a weboldal szélére helyezed őket, mert így nem zavarják meg a tartalom befogadását.
• Az is lehetséges, hogy a parallax hatás csak egyes oldalainkon jelenik meg, például a főoldalunk parallax – melyet egyébként sem feltétlenül érdemes vagy egyáltalán lehetséges hatékonyan SEO-zni -, míg az ott található linkekről elérhető aloldalainknál már nem használjuk a parallax designt.
• De akár az is elképzelhető, hogy egyes aloldalaink kapnak csak parallax designt, így például a cégtörténetet bemutató oldal tipikusan ilyen lehet.
• Jó megoldás lehet, hogy ha egyszer a felhasználók végiggörgettek a weboldalon, és lejátszottad nekik az összes parallax effektet, akkor az elemek ezt követően már maradjanak egy végső, fix pozícióban. Azaz visszafelé görgetésnél már ne kezdődjön újra az animáció. Ha arra kényszeríted őket, hogy újra végignézzék a parallax effekteket, akkor még nehezebben találják meg az őket érdeklő információkat, és emiatt csak idegesek lesznek. Ez olyan, mint ha ugyanazt a viccet mondanád el nekik újra meg újra. Persze elképzelhető az is, hogy szeretnék újra hallani.
• SEO szempontból fontos, hogy ne egyetlen oldalt készíts, hanem több aloldalt, melyeket külön-külön optimalizálhatsz.
• Ellenőrizd és oldd meg a reszponzivitást! Soha ne feledkezz meg arról, hogy a parallax effektet használó weboldaladnak nem csak egyetlen kijelzőméretnél kell működnie.

Igaz, a felhasználókat egy parallax oldalon az animáció fogja lenyűgözni, annyira, hogy másra nem is nagyon figyelnek, azonban még működhet a call to action az oldal alján. És talán egy ilyen parallax-élmény után lelkesebben is kattintanak a látogatók a CTA-gombra.

Mindenesetre, ha nem csak a látvány fontos, hanem a konverzió is, akkor igazán figyelni kell arra, hogy ne hajtsuk túl a parallax-hatást, mert egész egyszerűen elveszhetünk a sok animációban és mozgásban, a hullámvasút során elhalványul az üzenet, eltűnik az oldal célja és iránya a felhasználó számára, és egy idő után nem is tudja, hogy mi végre görget még lefelé. A lenyűgöző látvány és a szédülés között kell megtalálni a határt, hogy a parallax design javítsa, ne pedig rontsa az oldalunk hatékonyságát.

Frissítés, 2021.11.17.:

Néhány példa parallax oldalra

A következő példákból elsősorban az derül ki, hogy mennyire alkalmas eszköz a parallax design történetmesélésre. Ugyanakkor talán az is látszik rajtuk, hogy ehhez nagy odafigyelés és alapos tervezésre van szükség.

A NIIKA oldalán azt látod, ahogy a hero kép absztrakt formái finoman elmozdulnak, miközben a szövegek ennél gyorsabban mozognak, úsznak be a képbe, és onnan kifelé. Ahogy haladsz lefelé az oldalon, úgy változik a parallax effekt, ugyanakkor az oldal több pontján is megjelenik.

A CANN egy amerikai italgyártó, melynek weboldalán a különböző rétegek eltérő sebességgel mozognak a görgetés hatására. Az oldal a termék előnyeit igyekszik elsősorban megmutatni a látogató számára. A szövegek nagyok és jól olvashatók a sok és változó szín ellenére, miközben a termék is folyamatosan látható, ahogy az arra utaló buborékok is (minél gyorsabb a görgetés, annál több a buborék). Mindez folyamatos mozgásban, úgyhogy egy valóban látványos, izgalmas oldalt sikerült összehozni, ami miatt a terméket is hasonló értékekkel ruházzuk fel.

A Garden oldalán kevésbé erőteljes a parallax hatás, ugyanakkor a grafika itt is felkelti a figyelmet és az egyediség érzetét kelti. A hajtás feletti rész parallax mozgása után már csak vonalak és ikonok rajzolódnak ki a görgetés hatására. Ez azonban felhívja a figyelmet a fontos információkra, mint például a szolgáltatások vagy az elérhetőség.

A Bertani weboldalának designja is meglehetősen összetett. Láthatók itt videók, képek, váltakozva, vízszintes és függőleges görgetés, ráadásul az egérmutató is egyedi, ahogy a navigáció sem a megszokott az oldalon. Habár elsőre minden másként van rajta, mint egy megszokott weboldalon, így talán nehezebb kiigazodni, ugyanakkor az kétségtelen, hogy látványos, és maradandó nyomot hagy a látogatóban.

Azt legmerészebb álmunkban sem gondoltuk volna, hogy egy tojástermelő gazdának ilyen lehet a weboldala, mint a Crazy About Eggsé. Pedig itt egy holland gazdaságról van szó, melynek weboldala nagyon egyedi színekkel, grafikával és parallax effekttel nyűgözi le a látogatót.

Végül pedig, aki további parallax-példákra kíváncsi, az az Awwward nevű oldalon több száz díjnyertes példát találhat rá, lehet böngészgetni köztük ötletekért és persze az élményekért.