Keresés
Header Háttér

Webshark Blog

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

2014-11-050 komment

Mi az a parallax design? És mikor érdemes használni?

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? Nem feltétlenül, illetve csak módjával. (Frissítés, 2019. január 28.: Kiegészítettük néhány új és fontos információval a problémák és a megoldások listáit).

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 lasabban 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.

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.

Miért érdemes parallax elemeket használni a weboldalon?

Á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.

Ugyanakkor a parallax használatával felhívható a figyelme 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.

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. Az Applenek például az iOS 7 esetében egy frissítést kellett kiadni, melyben a felhasználók mérsékelhették a mozgás sebességét, mert a feladatváltásnál használt parallax animációk sok felhasználónál szédülést és hányingert okoztak.
  • 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.
  • Fontos, 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.
  • SEO szempontból fontos, hogy ne egyetlen oldalt készíts, hanem több aloldalt, melyeket külön-külön optimalizálhatsz.

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.

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.

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.