Keresés
Header Háttér

Webshark Blog

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

2017-05-250 komment

Hogyan tervezz felugró ablakokat? Mire figyelj?

A tapasztalatok szerint rendkívül hatékony a felugró ablakok alkalmazása marketing szempontból. Ehhez persze nem árt, ha a mai kor követelményeinek megfelelő megoldást tervezel a weboldaladhoz, és arra is figyelni kell, hogy a Google mobilon már szigorúan veszi a felugrók megjelenítését.

A felugró ablakok első generációját – melyek új ablakokat nyitottak – a böngészők végezték ki jó néhány évvel ezelőtt, de az őket váltó úgynevezett modális ablakok is egyre szorongatottabb helyzetben vannak. A Google ugyanis mobilon már büntet a használatuk miatt. Ezzel szemben áll az, hogy igen hatékonyak tudnak lenni, annak ellenére, hogy legtöbbször idegesítők. Nem véletlen, hogy a tengerentúlon tömve vannak velük a weboldalak.

Azok a weboldalak, melyek felugró ablakokat használnak, sokszor egy call to actionnel egészítik ki azt, amikor a céljuk valamiféle konverzió. Ugyanakkor nem feltétlenül csak ez lehet a cél, akár egy üzenetet is eljuttathatunk így a közönségünkhöz. Rendkívül hatékonyan természetesen, hiszen a felugró ablakok lényege, hogy felhívják magukra a figyelmet. Minél jobban sikerül ez nekik, annál könnyebben közvetítik az üzenetünket.

Desktopon ezek a felugrók még használhatók, és érdemes is kihasználni az erejüket. Ezért most azt tekintjük át a Designmodo egyik bejegyzése segítségével, hogy miként érdemes modális ablakot tervezni a weboldaladra úgy, hogy hatékony legyen.

Sötét hátterek és kattintható területek

A felugró ablakok mindegyike általában hasonló designstratégiát követ, ami nem túl bonyolult. Többnyire egy sötétített háttér előtt jelennek meg a weboldalon annak érdekében, hogy magukra vonják a figyelmet. Nem egy teljesen fekete háttérről beszélünk ilyenkor, hiszen az csak megijesztené az embereket. A felhasználók tehát látják az eredeti weboldalt, de az átlátszósága csökken. Ennek mértéke változó, attól függ, hogy mennyit tartasz még elfogadhatónak.

Célszerű, ha a felugró úgy van megoldva, hogy ha a felhasználó az azon kívüli területre kattint, akkor eltűnik. Általában helyet kap rajtuk egy X vagy bezárás gomb is, de így lecsukni az ablakot kicsit körülményesebb lehet, mint mellé kattintani.

Akadnak olyan megoldások, melyek valamilyen animációt használva jelennek meg a kijelzőn. Ami azért előnyös, mert ezzel a játékossággal kicsit csökkenthető az irántuk érzett ellenszenv, és talán így kevésbé zavaróak. Ugyanakkor az animációt sem érdemes túlzásba vinni, mert a legtöbb embernek egyáltalán nem lesz kedve egy három másodperces trükkös megjelenést végignézni. Tehát jelenítsd meg minél gyorsabban, és hagyd, hogy az emberek elolvassák vagy becsukják az ablakot!

A felugró ablak designja a weboldaltól függ, azonban a legtöbb esetben fehér hátteret alkalmazunk sötét szöveggel. Ez a legegyszerűbb megjelenítése egy nagy kontrasztú üzenetnek, és jól illeszkedik bármely weboldalhoz.

Megjelenítési technikák

Akad néhány olyan népszerű trend, melyeket a marketingesek mostanában használnak a felugró ablakoknál. A leggyakrabban ezek a felugrók az oldal betöltése után néhány másodperccel jelennek meg. Ilyenkor a legtöbb embernek még nem volt ideje arra, hogy átfussa a weboldalt, és megtudja, hogy egyáltalán miről szól. Ez tehát nem igazán jó megoldás, hacsak nem valami fontos információt igyekeznek átadni a felhasználónak, például a cookie-k használatával vagy az adblocker beállításával kapcsolatosan.

Akadnak jobban működő megjelenítési megoldások, melyek igazodnak a felhasználói viselkedéshez:

  • A kilépéskor felugró ablakok akkor jelennek meg, amikor a felhasználó egérmutatója elhagyja az oldalt.
  • Az időzített felugrók egy meghatározott időtartam eltelte után jelennek csak meg az emberek számára.
  • A helyhez kapcsolódó felugrók pedig akkor, ha a felhasználó egy bizonyos pontig legörgetett már a weboldalon.

Mindegyik jó lehet, hogy melyiket választod, az a közönségedtől és a weboldaladtól függ. Például, ha van egy blogod, ahol meglehetősen hosszú tartalmak szerepelnek, akkor célszerű lehet a görgetés alapú felugró használata. Ugyanakkor sokan követik azt a stratégiát, hogy csak a kilépéskor jelenítik meg a felugrót, és úgy tűnik, hogy meglehetősen hatékonyan.

Marketingüzenetek

Mivel a felugrók általában marketing célokat szolgálnak, így a szövegek érzelmek kiváltására irányulnak. Egyre több olyan felugróval is találkozhatunk mostanában, mely bűntudat keltését célozza az emberekben. Ez azt jelenti, hogy akadnak bennük olyan gombok vagy linkek, melyek az egyszerű igen, nem helyett más szöveget tartalmaznak, és azt érik el, hogy az ember rosszul érezze magát vagy bűntudata legyen. Itt látható egy ilyen:

felugro-ablak

Habár úgy tűnik, hogy ezzel még jobban fel lehet idegesíteni az embereket, a gyakorlatban úgy tűnik, hogy javuló konverziót eredményez.

Ugyanez a bűntudat persze kiváltható azokkal az egyre szaporodó felugrókkal, melyek arra hívják fel a figyelmet, hogy nem mutatják meg a tartalmat, ha adblockert használsz. Ezeket nem is lehet bezárni anélkül, hogy rá ne kattintanál valamely opcióra.

A cél minden felugró ablakkal az, hogy meggyőzd az embereket egy cselekvés végrehajtásáról. Ez kapcsolódhat egy feliratkozó űrlaphoz, az adblocker kikapcsolásához, vagy bármihez, amit szeretnél, ha megtenne a felhasználó. Az eredményhez kell a kiváló szöveg, és a rövid, de hatékony üzenet.

Tiszta CSS vagy JS

A felugrók esetében sem kell újra feltalálni a kereket, használhatod a megfelelő plugineket. Ami talán nehézséget okozhat, az a megfelelő plugin kiválasztása. A JavaScript pluginek kínálják a legtöbb stílust és a legnagyobb kontrollt. Ilyen a leanModal, a Remodal vagy a SimpleModal. Azért is előnyös a használatuk, mert szinte mindenkinél engedélyezve van a JavaScript.

Ugyanakkor a tiszta CSS még kevesebb akadályba ütközhet. Erre is található pár alternatíva, ilyen a CSS Modal, a Basic Modal vagy a Modal Pure CSS. Mindegyiknek megvan a maga előnye, úgyhogy érdemes végignézni, hogy melyik felel meg a leginkább az elképzeléseidnek.

De akár JS, akár CSS alapú felugrót választasz, mindegyiknél nagyon hasonló lesz az eredmény. A felhasználók eltérő módon reagálnak a felugró ablakokra, így arról mindenképpen győződj meg, hogy kellően magára vonja a figyelmet. Ehhez nem árt, ha tisztában vagy a webdesign alapelvekkel és a CTA-k kialakítására vonatkozó szabályokkal. Ha pedig nem vagy biztos benne, hogy hatékonyan működik a felugró ablakod, akkor A/B tesztek segítségével vizsgáld meg a különböző verziókat!

Vedd figyelembe, hogy büntet a mobil weboldaladon felugró ablakok miatt a Google!

A Google 2017 január 10-étől bünteti azokat a weboldalakat, melyek mobilon a felhasználókat erősen zavaró felugró ablakokat használnak. Amit fontos tudni, hogy ez a lépés csak azokat a felugrókat érinti, melyek akkor láthatók, ha valaki a Google mobil találati listájából közvetlenül az adott oldalra érkezik. Nem jár büntetés a desktopon, illetve az oldalon belül használt felugró ablakok miatt. A büntetés pedig azt jelenti, hogy romlik azoknak az oldalaknak a rangsorolása, melyeken a tartalom csak nehezen érhető el a felugró miatt, miután a felhasználó megérkezett a Google mobilos találati oldaláról.

A Google korábban fel is sorolta, hogy

Mely felugró ablakok miatt jár büntetés?

  • Azon felugrók miatt, melyek kitakarják a fő tartalmat. Akár azonnal megjelennek a felhasználó számára, amikor megérkezik az oldalra, akár csak később.
  • Azon felugrók miatt, melyeket a felhasználónak le kell kattintania, mielőtt hozzáférne a fő tartalomhoz.
  • Illetve, ha olyan layoutot használsz a hajtás felett, mely hasonló egy önálló felugróhoz, és így ezáltal a fő tartalom leszorul a hajtás alá.

Mindez talán érthetőbbé válik, ha megnézed a következő képet:

tiltott-mobil-felugro-ablakok

Melyeket nem érint a büntetés?

Már ha “felelősségteljesen” használod őket:

  • Az olyan felugrók, melyek azért ugranak fel, mert a törvény kötelezi a megjelentetésükre a weboldaltulajdonost. Tipikusan ilyen egy cookie-tájékoztatás vagy egy életkor-megerősítés.
  • Az olyan login-felugrókat, amelyek mögött a tartalom nyilvánosan nem indexelhető, tehát magán vagy fizetős tartalmakról van szó.
  • Azokat a bannereket, melyek elfogadható méretűek, és könnyen bezárhatók. Ilyen például a Safari vagy a Chrome által feldobott, applikáció telepítését ösztönző banner.

elfogadott-felugrok

Észlelni nem feltétlenül egyszerű egy büntetést, bár a helyezés hirtelen visszaesése és a mobilos forgalom csökkenése egyértelmű utalás lehet olyan oldalaknál, melyek használnak felugró ablakokat.

Mekkora felugrók miatt jár büntetés?

Sokakban felmerül ezek után a kérdés, hogy ha lehet felugró ablakokat használni a mobil weboldalon, akkor mégis mekkorákat? A Google korábban csak azt közölte, hogy ésszerű méretű felugrók (mint például a Safari hirdetése) miatt nem fog büntetni. De mekkora az ésszerű?

A dolog azért is érdekes, mert nem könnyű tesztelni a dolgot. Hiszen a Google továbbra is mobilbarátként jelöli azokat a weboldalakat is, melyek egyértelműen zavaró felugró ablakokat használnak.

A kérdést feltették a Google szakemberének, John Muellernek is. Ő azonban nem árulta el, hogy pontosan mekkorának kell lennie a felugrónak, hogy még ne érje el a büntetés. Ez logikus is, hiszen, ha megmondaná az egzakt méretet, akkor minden weboldal ezt a maximális méretet használná a mobilos weboldalán, ami nem biztos, hogy jót tenne a felhasználói élménynek.

John Mueller egészen pontosan azt mondta, hogy nincs olyan kifejezett százalékos mérték, melyet közölni tudna. Ugyanakkor azt is megjegyezte, hogy egy app banner méret, illetve egy e körüli érték még megfelelő popupként. Vagyis, ha biztosra akarsz menni a felugróid használatánál, akkor a második képen is látható app banner méretét vedd alapul!

Hogyan és mikor szabadulhatunk a felugrók miatti büntetéstől?

Ha már elért a büntetés a felugró ablakaid miatt, akkor csak annyit kell tenned, hogy eltávolítod a hibás méretű popupokat, és megvárod, hogy a Google újra feltérképezze az érintett oldalakat. Mint John Mueller fogalmazott: frissítésre akkor kerül sor, amikor a Google újra feltérképezi és újraindexeli az oldalakat.

Az tehát, hogy mennyi idő múlva szabadulsz a büntetéstől, attól függ, hogy milyen gyakran indexeli a Google a weboldalaidat. Ez lehet akár néhány nap, de lehet akár több hónap is. Gyorsíthatja a folyamatot, ha a Search Console-ban a Megtekintés Google-ként menüpontnál kéred az adott oldalaid újraindexelését. Ez ugyanakkor nem garantál azonnal újraindexelést, mindössze egy jelzés a Google számára. Ennek ellenére érdemes élni vele, hiszen más eszköz nincs a kezedben.

Search Console indexelés

A Google szerint más gondok is vannak a felugrókkal

Korábban egy Google+ Hangouton elhangzó kérdésre válaszul John Mueller, a Google szakembere elmondta, hogy bizony egy felugró ablakot akár elsődleges tartalomnak is tekinthet a Google a weboldaladon. Ez akkor sem jó hír, ha nem kapnál közvetlenül büntetést miatta – mert mondjuk csak desktopon használod a felugrót. Hiszen ilyen esetben, nem látja az oldal valódi tartalmát a Google.

A kérdező konkrétan arra volt kíváncsi, hogy elképzelhető-e, hogy a Googlebot magasabb prioritást ad a felugró ablakban szereplő információknak, mint a mögötte megjelenő oldalon lévőknek. John Mueller pedig válaszában leszögezte, hogy ez határozottan megtörténhet.

Mint kifejtette, usability szempontból egy felugró ablak kifejezetten kontraproduktív lehet, ha azt megelőzően jelenik meg a felhasználó szemei előtt, hogy megismerkedne az ajánlatoddal. Vagy legalábbis nem tudod kihozni belőle mindazt, ami benne rejlik.

Ráadásul annak is van esélye, hogy a Googlebot magasabb prioritást ad annak a tartalomnak, ami a felugró ablakban jelenik meg, mint annak, mint ami a mögötte lévő oldalon található, tehát a fő tartalomnak. És ez bizony a büntetésen túl is komoly probléma SEO szempontból. Ezért a Search Console-ban ellenőrizni kell, hogy miként látja a Google a weboldaladat.

Másrészt azonban, ha valaki a weboldaladon nézelődik, vagy esetleg egy hosszabb oldalon görget lefelé, és egyszer csak felbukkan számára egy ablak, akkor John Mueller szerint is lehet annak értelme, hogy felhívd a figyelmét arra, hogy milyen módon maradhat kapcsolatban veled, miként értesülhet az újabb változásokról. A késleltetett megjelenés tehát lehet hasznos, ugyanakkor mint látható, mobilos megjelenésnél ezt is érinti a büntetés, ha zavaró a mérete.

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.