Keresés
Header Háttér

Webshark Blog

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

2018-08-150 komment

Felugró ablak a weboldalon: hogyan tervezd meg? Mire figyelj? Milyen hibákat követhetsz el?

Tartalomjegyzék
Bővített tartalomjegyzék

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. (Frissítés, 2020.04.29. – Egy új fejezettel bővítettünk: Milyen hibákat követhetsz el a felugró ablakok kialakításánál?.

A felugró ablakok gyakran zavaróak a felhasználók számára. Ez az oka annak, hogy 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. És ez mit jelent számodra? Nem jelentethetsz meg felugró ablakban akciós ajánlatokat vagy nem toborozhatsz új feliratkozókat? De. Desktopon ezek a felugrók még használhatók, és érdemes is kihasználni az erejüket.

De hogyan is néznek ki mostanában a korszerű felugrók? Miként használják őket? Hogyan érdemes modális ablakot tervezni a weboldaladra úgy, hogy hatékony legyen? És miért érdemes Neked is bevetned a felugrókat?

Az utóbbi kérdésre a válasz az, hogy azért, mert hatékonyak. Egy vizsgálat szerint egy felugró 317 százalékkal javítja a feliratkozási arányodat. 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ó. De 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. Nem véletlen, hogy a tengerentúlon tömve vannak velük a weboldalak.

A felugró ablakok típusai

Modal

A felugrók legfontosabb típusa – amit az előbb már említettünk – a modal, mellyel a legtöbbször lehet mostanában találkozni a weben. Az ilyen ablakok becsúsznak vagy hirtelen megjelennek egy weboldal előterében. Jó esetben a weboldalnak elsősorban azon a részén, mely nincs a felhasználó figyelmének középpontjában, így nem is zavarja annyira. Ez lehet a kijelző alja vagy valamelyik sarka.

Ugyanakkor a definíció szerint egy modális ablak úgy jelenik meg, hogy bár látható a háttérben az eredeti oldal, az egészen addig nem használható, amíg a felhasználó interakcióba nem lép a modális felugróval. A felhasználói felületek tipikusan akkor használnak modalt, ha fel kell hívni valamire az emberek figyelmét.

A modal típusai

Megerősítési felugró

Az ilyen típusú felugróknál a felhasználónak egy döntést kell hoznia: vagy megerősíti az adott cselekvést, vagy pedig leállítja a műveletet. Az ilyen modalok két gombot tartalmaznak, az egyik az “igen”-ra vonatkozik, a másik a “nem”-re. Ökölszabály szerint a felhasználók nem tudnak a modalon kívül a weboldalra kattintani, mivel a döntést meg kell hozni a továbblépéshez.

Információs/figyelmeztető ablak

Az ilyen típusú felugrók fontos információkat tartalmaznak, melyek jellemzően figyelmeztetést vagy visszajelzést tartalmaznak azzal a cselekvéssel kapcsolatban, amit a felhasználó éppen megpróbál kivitelezni. Ezeken jellemzően egy gomb jelenik meg, például az “Ok”. Ezzel bezárható a modális felugró.

Egy figyelmeztető modális felugró ablak a Mediumon

Űrlap a felugróban

A belépési hitelesítés űrlapja egyre többször jelenik meg a weben modális felugróként:

Egy belépési űrlap modalként

Oldalak modális ablakban

Egy viszonylag friss trendként jelent meg, hogy teljes weboldalak kerülnek modális ablakokba. Ennek oka, hogy gyorsabb a betöltése, mint ha átlépne az adott oldalra a felhasználó, vethet egy gyors pillantást rá, majd mellékattintva egyből visszatérhet az eredeti oldalra.

Modális ablakban megjelenő weboldal a Dribbble-n

Interstitial vagy overlay

A másik típus az úgynevezett interstitial vagy overlay felugró, mely nevéből következően betakarja a teljes kijelzőt. Rendszerint akkor találkozhatsz ilyennek, amikor belépsz egy weboldalra.

Egy példa interstitial felugró ablakra

Értesítési sáv

Végül a harmadik megoldás az értesítési sáv, mely ráragad a weboldal aljára vagy tetejére.

Mikor használj felugrót (modális ablakot)?

Négy olyan tipikus helyzet van, melyben mindenképpen megfontolandó megoldás egy felugró ablak használata, annak ellenére, hogy zavarhatja a felhasználót:

  1. Döntési helyzetek: amikor a felhasználónak döntést kell hoznia, melyben megerősít vagy elutasít egy bizonyos lépést, és ez meghatározza a további utat a weboldalon.
  2. A figyelem felkeltése: érdemes modalt használni akkor is, ha meg akarod akasztani a felhasználót egy feladat elvégzése során, mert felhívnád a figyelmét egy hasonlóan fontos dologra.
  3. Adatgyűjtés: amikor a felhasználótól adatokat akarsz szerezni. Tipikusan egy bejelentkezésnél a felhasználónév-jelszó párosra kell gondolni.
  4. Információ átadása: amikor el akarod vonni a felhasználó figyelmét egy tartalomról valami más, de kapcsolódó tartalomra.

Miért érdemes felugrót használnod?

  1. Kiválóan felhívják magukra a figyelmet – miközben az embereknek nincs kedvük elolvasni a weboldalakat, egy felugró ablak remek megoldás a figyelmük felkeltésére.
  2. Megmutatják, mi az, ami fontos – amikor megjelenik egy felugró ablak az egyből megmutatja, hogy mi a legfontosabb lehetőség a weboldaladon: egy jó ajánlat vagy egy felhasználó számára is értékes lehetőség kihasználása.
  3. Sokoldalúak – a felugróknak számos típusa létezik. Megjelenhetnek egyből a belépésnél, a görgetés egy bizonyos pontján, egy cselekvés által kiváltva, vagy akár közvetlenül a kilépés előtt.
  4. Nem zsúfolják tele az oldalt – a minimalista kialakítások nem véletlenül egyre népszerűbbek mostanában. Ha viszont fontos, hogy átadj egy üzenetet az embereknek, és nem akarod telezsúfolni az oldalad, elrontani a vizuális megjelenést, akkor egy felugró remek megoldást kínál.
  5. Javítják a konverziós arányt – végül pedig a felugrók hozzájárulnak a konverziós arány javításához. A Sumo vizsgálata szerint, míg a weboldalak átlagos konverziós aránya 3 százalék, addig egy jól megtervezett felugróé 9 százalék.

Mi kell egy jó felugróhoz?

Egy jó marketingszöveg

Az első és legfontosabb dolog ahhoz, hogy hatékony legyen a felugró ablakod: a szöveg megfogalmazása. Alapvető fontosságú, hogy a felhasználó pontosan megértse mit vársz tőle, és miért. Ebből a szövegből tudhatják meg az emberek, hogy milyen előnyeik származnak mondjuk azon feliratkozásból, amire kéred őket. Ösztönzést kell nyújtanod számukra. Ha nincs semmilyen ösztönző, nem fogalmazod meg számukra, hogy miért lesz jó nekik, ha megteszik, amit kérsz, akkor egyszerűen nem foglalkoznak a felugró ablakoddal.

Márkaépítés

Amikor az emberek megérkeznek a weboldaladra, nem fogják pontosan tudni, hogy hova is érkeztek. Ez talán az első benyomásuk rólad, úgyhogy sokat számít. Kérdés persze, hogy mikor dobod fel számukra a felugró ablakot, de mindenképpen lényeges, hogy be tudják azonosítani a cégedet. Ez persze egy kicsit több annál, hogy egyszerűen megjeleníted a neved a pop-upban. Vonzóvá is kell válnod számukra. Egy olyan üzenetet kell eljuttatnod a felugró ablak által is a termékedről, mely világossá teszi az emberek számára, hogy miért passzol az ő életükbe.

Képek és vizuális design

Az előbbiek mellett egy hatékony kép is sokat javíthat a konverziós arányon. Csak képzeld magad a felhasználók helyébe, akik megérkeznek az oldaladra. Látsz egy felugrót, amiben nincs más, mint egy halom betű, mindenféle kép vagy vonzó vizuális elrendezés nélkül. Megfelelő lesz a hatása? Vagy meggyőzőbb lenne egy kép, egy márkádhoz illeszkedő, vonzó vizuális kialakítás, mely magával ragadja a tekintetet?

Ez az oka annak, hogy a látványra is figyelned kell a pop-upnál. Nem feltétlenül fotókban kell gondolkodnod. Ha a weboldalad egyébként is minimalista, akkor csak egy jó vizuális designra van szükség. Valamire, ami segít megakadályozni azt, hogy az embereket megragadja a felugró ablak látványa, és ne egyből az “X”-re vagy a “köszönöm, nem”-re kattintsanak a sarokban.

Call to action

Végül pedig, ami egy felugróból nem maradhat el: a call to action. Ha nincs CTA-d, akkor nincs értelme az egésznek. Nem kell ennek a cselekvésre ösztönző szövegnek több mondatos magyarázatnak lennie a márkádról, vagy hogy miként tudsz segíteni a látogatónak a céljai elérésében. Ne bonyolítsd túl!

Mi az a legrövidebb szöveg, amellyel ellenállhatatlanná tudod tenni az ajánlatod? Ennyi lenne a call to action. Egy mondat, néhány szó, amiben elmondod, hogy miért jó döntés feliratkozni a hírleveledre, megrendelni a könyvedet, jegyet vásárolni az előadásodra, stb. Képzeld magad a felhasználók helyébe! Minél egyszerűbb, annál nagyobb az esélye annak, hogy a felhasználók reagálni fognak.

Mi legyen a marketingüzenet?

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 vagy szégyenérzet 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. Ezek már az úgynevezett sötét megoldások (dark pattern) körébe tartoznak. 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. Legalábbis rövid távon. Hosszú távon ezeknek a megoldásoknak a használata már az üzleti bizalom elvesztését, és romló eredményeket hoz.

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.

Hogyan nézzen ki a felugró ablakod?

A felugró ablakok mindegyike általában hasonló – nem túl bonyolult – designstratégiát követ. Jelentős részük egy overlay előtt jelenik 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.

Egy modal típusú felugró sötét háttér előtt

Hogyan épül fel egy modális ablak?

A modális ablakok megjelenési a céljukat, tartalmukat, méretüket tekintve különbözik, azonban vannak olyan alapelemei, melyek mindegyiknél megjelennek.

Mint látható tehát, a modalnak van egy címe, mely az első szöveg az ablakban. Egy információs/figyelmeztető modal esetében ez maga a visszajelzés, míg a megerősítő ablakoknál rendszerint egy kérdés.

Általában helyet kap rajta egy ikon is a cím mellett, mely nem csak vizuálisan javít az ablak megjelenésén, hanem felhívja a figyelmet a végrehajtandó cselekvésre. Például a törlési megerősítő mellett szereplő “kuka” ikon egyértelműbbé teszi, hogy miről van szó.

Ez alatt található a szövegtörzs, vagyis maga a tartalom, mely egy olyan szöveg, ami elmagyarázza, kibontja a címben foglaltakat. Felhívja a figyelmet azokra a következményekre is, melyek a folyamat során felmerülnek. Például egy törlésnél jelzi, hogy a lépés nem vonható vissza a későbbiekben.

Helyet kapnak az ablakban gombok is, melyekkel interakcióba lép a felhasználó, és ugyanígy a legtöbb esetben egy “X” ikon is látható. Végül pedig az ablaknak van egy úgynevezett “menekülő övezete” a modal körül, melyre rákattintva bezáródik az ablak.

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

A leggyakrabban 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.

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!

16 további tipp felugró ablakok kialakításához

  1. Soha ne használj felugró ablakot pusztán azért, mert trendi. Ha vesztegeted a felhasználóid idejét azzal, hogy feleslegesen megzavarod őket, azzal elveszíted a bizalmukat.
  2. Legyen olyan jó a felugród is, mint a weboldalad többi része.
  3. Legyen reszponzív!
  4. Használj rövid, lényegre törő szöveget!
  5. Ne szégyenítsd meg a felhasználóid, ne kelts bennük bűntudatot a CTA-id szövegezésével!
  6. Ha információt kérsz az emberektől, akkor mindig a lehető legkevesebbet!
  7. A felugród tartalma illeszkedjen a weboldalad tartalmához.
  8. Ha lehet, kerüld el a főoldali, azonnal megjelenő felugrókat. Hagyj időt az embereknek!
  9. Mobilon kövesd a Google szabályait: ne használj interstitialt, túlméretezett modalt, és ne legyen az első oldalon felugród.
  10. A mobilos és a desktopos felugrónak nem kell egyformának lennie.
  11. Mindig könnyen be tudják zárni a felhasználók a felugró ablakot: egy kívül történő kattintással vagy a jobb sarokban elhelyezett X-szel.
  12. Lehetőleg a megfelelő pillanatban bukkanjon fel a felugród, ne akkor, amikor zavarja az embereket.
  13. Állítsd be a gyakoriságot, hogy ne lássák a felhasználók minden oldalon, vagy minden egyes látogatáskor.
  14. A megfelelő helyre tedd, ahol nem zavarja a látogatókat!
  15. Ha úgy gondolod, nem lesz zavaró az embereknek, akkor jelenítsd meg a kijelző közepén!
  16. Ha van egy akciós ajánlatod, akkor egy ragadós sávon is elhelyezheted az oldal alján vagy tetején.

Mi a helyzet a Google szigorításával?

A Google 2017. január 10. óta 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

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

Milyen hibákat követhetsz el a felugró ablakoknál? És mi a megoldás?

Bármilyen felugró ablakról legyen is szó, a legtöbbjük rossz időben jelenik meg, egy fontos feladat elvégzése közben zavarja a felhasználót, ráadásul gyakran rosszul vannak megírva a szövegeik.

Kemény szavak, melyek a Norman Nielsen Grouptól származnak. De okuk van ezt mondani, mivel már évtizedek óta tesztelik felhasználókon a felugró ablakok hatékonyságát, így tökéletesen tisztában vannak azzal, hogy az emberek utálják ezeket, legyen az klasszikus felugró vagy úgynevezett modal. De először lássuk, hogy miről is van szó!

A popup (overlay vagy felugró) egy olyan ablak vagy párbeszédpanel, ami az adott oldal tartalmi része felett jelenik meg. Két dimenzió mentén lehet őket csoportosítani:

  • Amikor a felhasználó interakcióba tud kerülni az oldal többi részével. Ez lehet:
    • modal: a tartalom ugyan látható, de addig nem férhetünk hozzá, amíg kapcsolatba nem kerülünk a felugró ablakkal.
    • nonmodal: a felhasználók interakcióba kerülhetnek a tartalommal annak ellenére, hogy a felugró ablak látható.
  • A háttér elsötétülhet vagy nem. Az előbbi esetében lightboxról beszélünk, ami nem minden esetben modal.

Ez után lássuk a felmerülő problémákat és megoldásaikat:

A popup már az oldal tartalmát megelőzően megjelenik

Ilyenkor a felhasználó már azelőtt megakad feladatának elvégzésében, hogy megérkezne az oldalra. Mivel egyre inkább hozzászokunk ehhez a megoldáshoz, egyből keressük a popup bezárásnak lehetőségét. Egy ilyen felugró kétségbeesett megoldásnak tűnik a weboldalak részéről, és a felhasználókat csak felidegesíti. Ráadásul a Google sem szereti azt a gyakorlatot, amikor a fő tartalom hozzáférhetetlenné válik egy felugró miatt.

A megoldás az, hogy az ablak megjelenésével addig kell várni, amíg az relevánssá nem válik a felhasználó számára. Itt is érvényes az az online marketinges alapelv, miszerint először adj valamit a látogatónak, és csak utána kérj tőle bármit is. Teszteld, hogy mikor jelenjen meg és hogyan, bár a legtöbb esetben a legjobb megoldás nem egy popup lesz – figyelmeztet az NNG szerzője. Az egyetlen indokolható felugró a tartalom előtt: a cookie-tájékoztatás.

Belépés után egyből megjelenő felugró

Ez majdnem ugyanaz, mint az előbbi. Amikor a felhasználók belépnek egy oldalon a fiókjukba, akkor már a következő lépésen gondolkodnak. Ehelyett megzavarja őket egy felugró ablak, és gátolja a feladatuk végrehajtásában. Ugyanakkor mivel a következő lépést szeretnék végrehajtani, így nagy valószínűséggel nem érdekli őket a felugró ablak tartalma, illetve egyből bezárják. Ugyanakkor persze frusztráltak lesznek a popup miatt, hiszen megzavarta őket, időt vett el tőlük és még interakciós költsége is van számukra, hiszen be kellett zárni az ablakot.

A megoldás az, hogy időt kell hagyni a felhasználóknak arra, hogy végrehajtsák a feladatukat, amikor belépnek a fiókba. Néhány tipp, segítség, iránymutatás vagy az új funkciók ismertetése még belefér, de ez is csak egy kis idő elteltét követően, és olyan módon, ami kevésbé zavaró, így például egy nonmodal felugróval.

Már az interakció előtt e-mail címet kér

Nagyon sok weboldal használja azt a megoldás, hogy elkéri a látogató e-mail címét, még azt megelőzően, hogy annak esélye lenne bármilyen kapcsolatba kerülni a tartalommal. Ez a rendszer nem csak amiatt idegesíti az embereket, hogy megzavarja őket egy felugró ablak, hanem azzal is, hogy spamet feltételeznek. Lehet, hogy a rövid távú számok hatékonyságot mutatnak, ennek ellenére nagyon sok felhasználót idegesítenek.

A megoldás az, hogy nem mindjárt az elején kéred el a felhasználók e-mail címét, hanem amikor már megismerkedtek a tartalommal, mondjuk elolvastak egy blogposztot. Ilyen időzítéssel egy jobb felső vagy alsó sarokban megjelenő nonmodal felugró elfogadható megoldás. De arra is érdemes figyelni, hogy mit kínálsz a felhasználónak az e-mail címéért cserébe.

Már azelőtt visszajelzést kérsz, hogy bármit csináltak volna az oldalon

A visszajelzések fontosak, de nem szabad leterhelni velük a felhasználókat, különösen akkor nem, amikor még nem is ismerik az oldalt. Pedig, ha túl korán kérsz visszajelzést, akkor lehet, hogy elveszíted a lehetőséget arra, hogy akkor kérd, amikor fontos lenne. Az NNG egyik felhasználóját az idegesítette fel, hogy miközben éppen a számláját próbálta befizetni, megakasztotta a folyamatban egy visszajelzést kérő modal.

A megoldás itt az, hogy akkor kérj a felhasználóktól visszajelzést, amikor éppen befejeztek egy feladatot az oldalon.

Egy kritikus feladat közben kérsz visszajelzést

Ez majdnem ugyanaz, mint az előző probléma, csak épp a felhasználókat nem egy folyamat elején, hanem közben zavarja meg a felugró. A megoldás is ugyanaz: akkor kell a látogatóktól visszajelzést kérni, amikor éppen túl vannak egy fontos feladat végrehajtásán. A legjobb megjelenése pedig egy olyan visszajelzési lehetőség, ami nem zavaró: ez lehet egy link a láblécben vagy a navigációs menüben, vagy akár egy felbukkanó tab a kijelző szélén.

Egymás után több felugró megjelenítése

Egy ilyen megoldástól már inkább amatőrnek, kétségbeesettnek kezd tűnni egy weboldal, melyet a tulajdonosai nem voltak képesek megfelelően rendezni. A látogatókat arra kényszeríti, hogy több ablakot is bezárjanak egymás után.

Ha a weboldalad több felugrót is használ, akkor győződj meg arról, hogy ezek nem sorozatban érkeznek meg egyes felhasználókhoz. A kritikus fontosságú információkat pedig inkább ne popupként jelenítsd meg, mert ezeket hajlamosak az emberek olvasás nélkül bezárni.

Akkor jelenítesz meg felugrót, amikor a felhasználó új oldalra lépne

Ezek a felugrók túlhangsúlyozzák a weboldal-váltás fontosságát és zavarba ejtik a felhasználót, különösen akkor, ha egy új ablakban nyílna meg az új oldal. Pedig még az sem biztos, hogy kilépne az oldaladról, de ha igen, akkor is negatív érzéseket kelt az oldallal kapcsolatban.

A legjobb megoldás elengedni a felhasználót, vagy ha tényleg fontos egy kifelé vezető linknél jelezni, hogy ezzel otthagyja az oldalt, akkor egy linkbuborékban jelenjen az erre vonatkozó üzenet.

GDPR és cookie tájékoztató felugrók

Mivel az emberek ma már gondolkodás nélkül lekapcsolják a felugrókat, ezért a fontos információkat inkább ne így jelenítsd meg. Ilyen lehet például a GDPR vagy a cookie-tájékoztatás. Ezek inkább egy nonmodal sávban jelenjenek meg az oldal alján vagy oldalt, úgy, hogy ne akadályozzák a felhasználókat a feladatuk végrehajtásában.

Átvezetés egy másik csatornára felugró segítségével

Gyakran látni olyan felugrót, mely a felhasználókat egy másik csatornára vezetné: például egy mobilos weboldalról átirányítani a mobilalkalmazásba. Lehet, hogy a tulajdonos azt gondolja, kényelmesebb lenne az appot használni, azonban sok esetben zavaró és problémát okoz a felhasználónak. Már csak azért is, mert azok a látogatók, akik a weboldalra érkeznek, gyakran egyszeri felhasználók, és eszük ágában sincs letölteni az alkalmazást azért, mert rá akarnak pillantani az oldalra.

A másik oldal szempontjából persze érthető, ha az alkalmazás letöltését szorgalmazza, ezt azonban nem feltétlenül egy felugróban kellene erőltetni. Még azok a felhasználók sem szívesen váltanak menet közben csatornát, akiknek megvan a telefonjukon az applikáció, ugyanis nem akarják az adott folyamatot elölről kezdeni. Így pedig a modal feleslegesen zavarja őket.

Vagyis nem egy adott feladat végrehajtása közben kellene zavarni a felhasználót az alkalmazás letöltésével, hanem jelezni azt esetleg egy normál felső bannerben, ahol kiemelésre kerülnének az app előnyei a weboldallal szemben. Ez megkönnyíteni a váltást a másik csatornára a felhasználók számára.

Ezek után lehet, hogy azon gondolkodsz, hogy egyáltalán van bármikor is értelme felugrót használni. Valójában igen ritkán. És annak ellenére, hogy mindenhol találkozol velük, Te ne zaklasd azért a felhasználóidat, mert a rövid távú mutatók esetleg jó eredményt mutatnak.

Keresd inkább az alternatív megoldásokat, melyek tiszteletben tartják a felhasználókat. És csak abban az esetben használj felugró ablakot, amikor az fontos információkat tartalmaz a megfelelő időben megjelenítve. Semmiképpen ne szakítsd félbe velük fontos feladatok végrehajtását, és ne zárd el a hozzáférést a fontos tartalmaidhoz. És ha használsz is felugrót, tesztekkel ellenőrizd, hogy nem tartják-e zavarónak az emberek, és azt is, hogy valóban hasznosak-e számodra.

Mit használhatsz felugró ablakok helyett?

Ha mindezek után úgy gondolod, hogy nem akarod idegesíteni a felhasználóidat a felugró ablakokkal, vagy érzed, hogy valami másra van szükséged, akkor a lehetőségek bőséges tárházából válogathatsz.

1. Használj oldalsávot a weboldaladon!

Habár nem olyan hatékony, mint egy felugró ablak – mivel nem kifejezetten vonzza a tekintetet -, jó megoldás lehet egy oldalsáv használata a weboldaladon. Ide helyezed azt, amit amúgy a felugró ablakba tennél. A megoldásnak pont az az előnye, hogy nem hívja fel magára erőszakosan a figyelmet, így nem is zavarja meg a felhasználókat a tartalmad fogyasztásában. És ezt sokan értékelni is fogják.

Az oldalsáv kerülhet csak a főoldalra, de akár valamennyi oldaladon jelen lehet. Utóbbinak az az előnye, hogy mivel nem mindenki a főoldaladra érkezik, így azok sem maradnak le a lehetőségről, akik a keresőből esnek be az egyik aloldaladra.

2. Egy önálló céloldal létrehozása

Akár egy önálló landing oldalt is kialakíthatsz, ahol mondjuk elhelyezed a feliratkozási űrlapodat vagy a letöltési lehetőséget. Ez a megoldás egyáltalán nem zavarja a látogatókat, hiszen csak akkor találkoznak az ajánlatoddal, ha direkt erre az oldalra lépnek. Az az előnye is megvan, hogy más csatornákon népszerűsítheted a lehetőséget egyszerűen egy linket elhelyezve a céloldalra.

3. Elhelyezés egy ragadós sávban

Mert nem csak a navigációs menü jelenhet meg ragadósként a weboldaladon, azaz mindig a kijelző felső szélére tapasztva, hanem az ajánlatod is. Akár a felső, akár az alsó részen. Nem ugrál a szemük elé, nem kell lekattintani, mégis látható, ahogy görgetnek lefelé. Nem tolakodó megoldás, nem zavarja meg a felhasználói élményt, ugyanakkor folyamatosan jelen van. Ugyanakkor tedd lehetővé, hogy a felhasználók lekapcsolhassák a sávot egy jobb oldalon elhelyezett X-szel.

4. Tedd az oldal aljára!

Ezzel a megoldással semennyire nem zavarod meg az embereket a tartalmad befogadásában. Ráadásul az az előnye is megvan, hogy nyilván azok szeretnének letölteni tőled valamit vagy feliratkozni, akiket komolyan érdekelnek a tartalmaid, vagyis végigolvassák a bejegyzésed. Így pedig eljutnak az ajánlathoz. Mert miért akkor iratkoznának fel, ha még csak éppen megérkeztek a weboldaladra? A felugrók pont így viselkednek: akkor kínálnak valamit, amikor a felhasználó még egyáltalán nem ismer, nem tudja mit kínálsz.

5. Feliratkozás a vásárlás során

Ha webáruházad van, akkor a vásárlási folyamat során is lehetőséget kínálhatsz az embereknek arra, hogy éljenek az ajánlatoddal, mondjuk feliratkozzanak a hírleveledre. Ez elég kézenfekvő, amikor egyébként is megadják az adataikat, hiszen csak egy pipát kell elhelyezniük a megfelelő tájékoztatás után megjelenő checkboxba.

6. Slider box használata

Ez majdnem olyan, mint egy felugró ablak, de mégsem annyira zavaró, mint amikor az oldal közepén, mindent kitakarva jelenik meg váratlanul egy ajánlat. Hiszen csak oldalról vagy alulról csúszik be, nem feltétlenül zavarja a tartalom befogadását, vagy legalábbis nem minden esetben. Persze, felkelti a felhasználó figyelmét, hiszen érzékeli a mozgást, így akaratlanul is rápillant. Ezzel kizökkentheted a megkezdett folyamatból, ugyanakkor elég csak egy pillantást vetnie az ajánlatra, és nem is muszáj vele többet foglalkoznia. Arra persze figyelned kell, hogy mekkora a slider box. Ha túl nagyra veszed, zavaróvá válhat.

7. Tedd a weboldalad felső részére!

Ha különösen fontos neked az ajánlatod, akkor akár a hajtás fölé is helyezheted a főoldaladon, így semmiképpen nem temeted el valahol a tartalom mélyén. Úgy fog működni, mint egy jó CTA egy céloldalon. Ennél is figyelned kell azonban arra, hogy mekkora helyet foglal el a weboldaladból. Minél nagyobb, annál zavaróbbá válhat azok számára, akik nem kívánnak élni vele.

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.

Comments are closed.