Egy hatékony landoló oldal nélkülözhetetlen elemei

Akár B2C-ben, akár B2B-ben tevékenykedünk, szükségünk van landoló oldalakra, azaz ahová az érdeklődőket szeretnénk terelni. Sok esetben viszont ez az elem nem kap elég fókuszt, hiszen “Miért is fektetnénk egy landoló oldal létrehozásába időt és energiát, amikor minden elérhető a weboldalon?” – hangozhat el a kérdés.

A válasz egyszerű: ha nem a megfelelő tartalmat látja a felhasználó, akkor nem várhatjuk el tőle, hogy elvégezze az általunk elvárt cselekvést, például vásárlás, feliratkozás, vagy egy könyv letöltése.

Mi az a landoló oldal?

Mi is az a landoló oldal? A fogalmat tekintve azokat az oldalakat nevezzük landoló oldalaknak, amelyek 1 konkrét célt hivatottak kielégíteni és ahova a látogatók valamilyen külső forrásból érkeznek. Ilyen külső forrás lehet például egy e-mail vagy egy PPC kampány.

Egy webáruházat tekintve, gyakorlatilag bármilyen oldal funkcionálhat landoló oldalként, azonban egy főoldal vagy kategória oldal egyszerűen nem fog olyan magas konverziós számokat hozni, mint egy landoló oldal. Amíg egy klasszikus értelemben vett főoldalnak 3-4 különböző célja is lehet, addig a landoló oldalnak csupán 1 célja van, csak 1 célt hivatott kielégíteni, viszont azt extrém hatékonyan csinálja.



A landoló oldalak létrehozását és a legfontosabb pontjait 4 fő szakaszba csoportosítom, amelyek a következők: tervezés, megvalósítás, marketing és ellenőrzés. Lássuk is az elsőt!

1. Landoló oldal tervezés

Tény: A legtöbb landoló oldal már a tervezésnél halálra van ítélve. Ha nincs a tervezés mögött következetesség, akkor az egésznek semmi értelme. A tervezés során a következő pontokra kell ügyelned:

1. Cél meghatározása: Minden landoló oldalnak kell, hogy legyen egy célja. Határozd meg, hogy ez pontosan mi, és azt, hogy milyen cselekvésre szeretnéd ösztönözni a látogatóidat (példa: Forgalom irányítása, Csali letöltése, Jelentkezés egy eseményre, Árajánlat kérése, Próbaidőszak igénylése, Termék megvásárlása…) Ezt a célt kell, kommunikálnod a landoló oldalon és törekedj arra, hogy ettől eltérő célok NE szerepeljenek rajta.
2. Buyer Persona meghatározása: A kommunikáció hatékonyságának érdekében elengedhetetlen, hogy ismerd a Buyer Persona-dat. A Buyer Persona testesíti meg azt az embert, akit potenciális vásárlónak szánsz, akinek a terméket állítod elő, akinek a terméket értékesíted vagy akinek a szolgáltatást ajánlod. Határozd meg azt a 2-3 max 4 személyt, akik a tipikus vásárlóid. Ha nincs ennyi akkor fordítsd meg az elméletet és határozd meg azokat a személyeket, akiket ügyfeleidnek szeretnél tudni. Képzeld el magad előtt őket és írd le a demográfiai, viselkedési és egyéb jellemzőit, hogy egy teljes képet kapj a személyéről. Ezt követően már csak egy lépés lesz meghatározni a fájdalompontjait, a kommunikáció, illetve az ajánlat stílusát és tartalmát. Ha megválaszolod a problémáit úgy, hogy ezzel el tudod adni a termékedet, mint megoldást, akkor nyert ügyed van!
3. Inspiráció: Valljuk be, sok esetben nehéz tartani a fókuszt. Ha erre nem figyelsz tudatosan, akkor rengeteg időt fog igényelni egy landoló oldal lérehozása. Rengeteg időt és energiát spórolhatsz azzal, hogy ha végigpásztázol olyan oldalakat, ahol konkrét landoló oldal példákat, template-eket találsz. Személy szerint a themeforest.com-ot szoktam használni inspirációs célokra, de sok esetben az is tökéletesen működik, ha ráguglizol a “landing page examples” vagy “landing page templates” kulcsszavakra és kiválasztasz egy szimpatikus találatot.
4. Wireframe: Ha megvan a cél, ha megvan a Buyer Persona és inspirálódtál is, akkor nincs más hátra, mint felvázolni a landoló oldal tervét! A wireframe lényegében a landoló oldalad strukturális váza, a vázlata. Ha még nem készítettél wireframe-et akkor először csak egy plusz feladatnak tűnhet, de vedd figyelembe azt is, hogy ha csak úgy nekiállsz tervezés nélkül egy weboldal létrehozásának, akkor eléggé szedett-vedett lesz a megoldás. Maximum 1-2 óra alatt fel tudjuk vázolni a fejléceket, címsorokat, alcímsorokat, a fő tartalmi blokkokat, az egyéb tartalmi blokkokat, a call-to-action-t és az egyéb részeket. Ha a papír és ceruza a szimpatikus, akkor használd azt, ha word-ben vagy powerpointban szeretnél dolgozni, akkor dolgozz abban. Azt viszont fontos megemlíteni, hogy a legjobb eredményt akkor fogod elérni, hogy ha egy arra a célra létrehozott programban dolgozol. Ilyen például: mockflow.com, wireframe.cc vagy az axure.com szoftvere.

2. Megvalósítás

1. Platform választása: Rengeteg segédprogram áll rendelkezésünkre, ilyenek például az Unbounce, Instapage, Quickpages és még sorolhatnám. Fontos, hogy amikor platformot választasz akkor olyat válassz, amelyekhez megfelelő mennyiségű leírás és support van, illetve lehetőséged lesz követőkódok elhelyezésére is.
2. Beazonosítható design: Jelenítsd meg a logót, tedd egyértelművé, hogy melyik cégről van szó. Ugyanitt érdemes már a PPC kampányok kreatívjaival is számolnod, hiszen fontos, hogy ha Facebook hirdetésről irányítod a landolóra a forgalmat, akkor a hirdetés képének passzolnia kell a landoló oldal designjához.
3. Hero image: Hero image-nek azt a képet nevezzük, ami jellemzően a landoló oldal első képernyőjén jelenik meg, azaz még nem kell görgetni ahhoz, hogy lássuk. Az ilyen képek adják meg a design irányvonalát. Legyen nagy felbontású, kis méretű, figyelemkeltő és releváns. A tömörítéshez használhatsz szoftvereket vagy olyan online megoldásokat is mint például a Compressor.io. Ha nincs saját fotód, ami megfelel minden feltételnek, akkor nyugodtan gondolkodhatunk stock fotókban is.
4. Egységes tipográfia: Az ökölszabály az, hogy egységes, talpatlan betűtípust használj a landoló oldaladon, egységes méretben, egységes színnel. Természetesen, különböző szövegblokkok esetében eltérhetsz ettől, hiszen egy cím és egy tartalmi szövegblokk más-más formázást igényel. Itt is inspirálódhatsz, egyszerűen csak keress rá a “font pairing” kulcsszavakra.
5. Egységes whitespace: A tipográfiához hasonlóan itt is törekedj az egységesítésre. A címsorok alatt és felett ugyanakkora térközöket használj. A bekezdések között is szintén egységes térközöket alkalmazz.
6. CTA button: A gombok a landoló elemek legfontosabb részei. Ha nem jó a szöveg rajta, akkor ezen sok százaléknyi konverziót bukhatsz. Manapság az már alapvető, hogy egy gomb kattintható, jól olvasható, egységes és kontrasztos színű, de figyelni kell arra is, hogy megfelelő mennyiségben szerepeljen az oldalon. Ha hosszabb az oldal akkor 2, maximum 3  CTA még belefér, de az első képernyőn, a látványvonal felett mindenképpen helyezz el egy gombot! Ügyesen felhívhatod rá a figyelmet azzal is, ha a gomb körül egységes térközöket alkalmazol. Ha pedig a színekkel szeretnél varázsolni, akkor a paletton.com-ot ajánlom, ahol a saját színűnk komplementer, azaz kiegészítő színét is legeneráltathatod teljesen ingyen.
7. Form design és integráció: Ha csak forgalmat terelsz, validálsz és tesztelsz akkor valószínűleg nem kell form-ot elhelyezned a landoló oldalra. Ha viszont a terméked vagy a szolgáltatásod igényli, akkor szükséged lesz rá. Mindenképpen ügyelj arra, hogy csak annyi információt kérj be, amennyit feltétlenül muszáj, hiszen minden egyes plusz mező 7%-al csökkenti a konverziós rátát.

Ha szeretnél a marketing és az ellenőrzés szakaszáról is tanulni, nézd meg ezt az előadást, amelyre a cikkünk is épült:

Elemezzünk néhány jól felépített landoló oldalt…

1. No-code coffee

A No-Code Coffee egy hírlevél olyan no-code fanoknak, akik más tehetséges no-code megoldásokat használók munkái alapján szeretnének inspirálódni, és még jobban el szeretnének merülni ebben a témában, technológiában.

Miért jó ez az oldal?

1. Lényegretörő címsorok, amiből a látogató azonnal megérti, hogy mit kínál számára az oldal.
2. Rövid bemutatkozás, ami kielégíti az emberek kíváncsiságát
3. Csak egy célja van, hogy az egyik csomagra előfizessen az, aki erre a landolóra érkezett
4. A testimoniálok bizalmat sugallnak, és megmutatják a látogatónak, hogy mások már sikeresen használják megoldásukat, és nagy előnyük is származott belőle.
5. Nincsenek külső linkek, nincsen footer, vagy menü oldal, ami elvonná a látogató figyelmét, nem engedi, hogy máshová navigáljon erről az oldalról.
6. A statisztikákkal, és számokkal a logikus vevőkre hat, míg a testimonialokkal és a szövegekkel az érzelmi alapon döntő érdeklődőkre.

Hogyan lehetne még jobbá tenni?

1. A csomag árakat mutató 3 oszlop háttérszínét meg lehetne változtani egy élénkebb színre, hogy kitűnjön a háttérből, és még inkább oda vonzza a látogató tekintetét.

2. Healthy Living – Facebook Live

Miért jó ez az oldal?

1. Egységes a betűtípus, a színséma, és megfelelően olvashatóak a leírások.
2. Nincs rajta túl sok szöveg, de mégis megválaszolja a látogató fejében felmerülő kérdéseket, és bemutatja a Facebook Live tartalmát részletesen.
3. Képekkel támasztja alá a mondanivalóját, és arcokat is mutat, ami bizalomkeltő hatással van a látogatóra.
4. Csak egy típusú CTA van, a live-ra való helyfoglalás, de ennek a form-ját többször is behelyezik a landoló oldalra, így nem kell vissza-, vagy legörgetnie túl sokat annak, aki olvasás közben akar regisztrálni.
5. Olyan visszaszámlálót is találunk rajta, ami határidőhöz köti a regisztrációt, így nyomást helyez a látogatóra, hogy minél hamarabb kitöltse a form-ot.
6. Annak ellenére, hogy elég hosszú ez a landoló oldal, szépen, és logikusan van struktúrálva, és ennek megfelelően többször is elhelyezik a CTA-t rajta.

Hogyan lehetne még jobbá tenni?

1. Videó használatával még meggyőzőbbé tehetnék az oldalt, sőt, úgy akár még rövidebb is lehetne, mert abban az esetben a videó beszélhetne a szavak helyett.
2. A betűméret minimális kisebbítésével még kompaktabbá tehetnék az oldalt.
3. Testimonialok, vagy megjelenések logóinak kihelyezésével még inkább bizalomgerjesztő látványt nyújthatnának.