Design

Hogyan készítsünk profi landoló oldalt?

4 perc olvasási idő Hogyan-keszitsunk-profi-landolo-oldalt

A landoló oldalak a jól felépített marketing kampányok nélkülözhetetlen alkotóelemei. A látogatók itt találkoznak az ajánlatunkkal, és itt döntik el, hogy élni fognak-e a lehetőséggel. Más szóval, a landoló oldalak jelenti a látogatók figyelméért vívott csata fő frontját, ezért mindent bele kell adnunk, hogy itt helytálljunk.

A landoló oldal készítésekor az első és legfontosabb szabály, hogy az üzenetünk tiszta és érthető legyen. A látogatók figyelmét ma már számtalan minden vonja el, hiszen annyi inger éri az embert, hogy nehéz valóban kiharcolni, hogy a sok marketing üzenet közül a miénkre kapja fel a fejét.

A helyzetünk azonban nem reménytelen. Sokat tehetünk azért, hogy megragadjuk a látogató figyelmét, miközben hatékonyan és gyorsan célba ér üzenetünk. Cikkünkben az egyik saját landolónkat vesszük górcső alá, amelyen keresztül bemutatjuk a landoló oldal készítés legfontosabb alapelveit.

1. Világos üzenet a látványvonal felett

landoló oldal példa

A webshopkeszites.org landoló oldala három dolgot azonnal közöl a látogatóval. Az első, hogy a landoló oldalon egy tudásanyaghoz (könyvhöz) lehet hozzájutni. A második, hogy egy ingyenesen letölthető anyagról van szó, amely az e-kereskedelemről szól. A harmadik információ pedig maga a letöltés lehetősége, amit a jobb oldali űrlapon tehetünk meg. 

Hogyan értük el mindezt a landoló oldalon?

  • Először is a bal oldali kép már a kritikus első három másodpercben elmondja, hogy miről szól az oldal. Egyértelműen látszik, hogy egy könyvről van szó, amely az e-kereskedelemről szól.
  •  A látványos kép mellett a nevezési űrlap vizuálisan jól vonzza a tekintetet.
  • A tartalom rendezett, a látványvonal felett az üzenet legfontosabb elemei már láthatóak. A landoló oldal egészére igaz, hogy a tartalom jól átlátható, a szöveg könnyen olvasható.
  • A landoló nincs túlzsúfolva mindenféle képpel vagy ábrával, mindenhol csak a tartalom megerősítésére szolgáló design elemek vannak.

2. Egyértelmű Call-to-Action (CTA) gomb

Egy landoló oldal lelke a Call-to-Action gomb. A jó CTA gomb két összetevőből áll: a figyelemfelkeltő designból és a cselekvésre ösztönző szövegből.

Nézzük meg, mitől lesz az E-kereskedelemben a gyakorlatban c. e-book oldalának Call-to-Action gombja figyelemfelkeltő és cselekvésre ösztönző:

  • A gomb kontrasztos a háttéren. Feltűnő, a látogatók könnyen észreveszik.
  • Szövege egybecseng a főcímmel. A gombon és a főcímben is szerepel az ingyenes szó, illetve az útmutató – anyag szinonima.
  • A szöveg egy cselekvésre ösztönző igét tartalmaz. 
  • A gomb feltűnő helyen van, közel az oldal tetejéhez.
  • Lentebb görgetésnél is találkozunk 2 további CTA-val, amelyek visszanavigálják a látogatót az űrlaphoz.
CTA gomb

3. Az előnyökre koncentrál

Bármilyen landolóra is legyen szó, a látogatókat az fogja érdekelni, hogy miért is éri meg neki élnie az ajánlattal/lehetőséggel. Nem igazán hajlandók pénzt, időt vagy személyes adatokat (név, e-mail cím) áldozni olyan dolgokra, ami utána nem nyújt számukra előnyöket, nem látják benne a hasznot.

Éppen ezért be kell mutatnunk nekik, hogy milyen előnyökhöz jutnak hozzá a CTA gomb megnyomásával. Ez a landoló oldal jó példa arra, hogyan lehet kommunikálni ezeket az előnyöket.  

Előnykommunikáció
  • Az előnyök egyszerűen, átláthatóan vannak összefoglalva.
  • A rövid összefoglaló által a látogató betekintést nyer abba, hogy milyen tudáshoz fog hozzáférni az ingyenes útmutató letöltésével.

4. Social proof

A látogatók nagy része szkeptikus, hiszen bárki mondhat magáról bármit, így ne is várjuk el, hogy a látogató azonnal bizalmat szavazzon nekünk. Adjunk neki okot arra, hogy elhiggye, hogy amit mi állítunk magunkról, az valóban hiteles.

Erre szolgál az úgynevezett social proof, amivel alátámasztjuk, hogy mások is előnyüket lelték már az ajánlatunkban. 

A webshopkeszites.org oldalán 2 szekció is ezt erősíti. 

  • A kontrasztos zöld háttéren a szakmai hozzáértést erősítjük, miszerint már több mint 5.500 webáruház tapasztalataira alapoztuk az e-bookban szereplő tudást.
  • Az alatta szereplő blokkban pedig olyan olvasók visszajelzéseit mutatjuk meg, akik már elolvasták és hasznosították az útmutatóban leírtakat.
social proof

Ezek által még jobban ráerősítünk a látogatóban arra, hogy neki is érdemes igényelni a tudásanyagot és hasznára fog válni.

5. Professzionális dizájn

A látogatók figyelmének fenntartása érdekében csak a legrelevánsabb tartalmat szabad meghagynunk a landoló oldalon, a többit kíméletlenül törölnünk kell. Mindezt a mai kor webdesign trendjeinek megfelelő formátumba kell “becsomagolni”.

landoló oldal minta

Nézzük meg, hogy a mi landoló oldalunk dizájnja mit tesz a látogató figyelmének megtartására:

  • A látványvonal feletti nagy kép erősen vonzza a tekintetet, miközben hatékonyan átadja a landoló legfontosabb üzenetét.
  • A letöltési űrlap a látványvonal felett, könnyen hozzáférhető módon van beépítve az oldalba.
  • A címsor alatt egy mozgó nyilacska irányítja a látogató tekintetét az űrlapra.
  • A CTA gomb megfelelő méretű és könnyen észrevehető, kontrasztos.
  • A tudásanyag tartalma és az útmutatóval elérhető tudás átláthatóan van összefoglalva és csak a legfontosabb 6 van kiemelve. Így nem terheljük a látogatót túl sok szakmai leírással.
  • Az egyes blokkok eltérő háttérszínnel vannak egyértelműen elszeparálva egymástól
  • A landoló oldalon nem használtunk túl sok színt, nagyrészt a zöld és a fehér dominál.
  • A színvilág és az oldal minden egyes eleme jól harmonizál a cégünk brandjével.

+1 Kilépési popup

Mi van azokkal, akiket mégsem győztünk meg a landolónkkal és el akarják hagyni az oldalt? Rájuk is gondoltunk, így a kilépésre megjelenő teljes képernyős popuppal próbáljuk meg őket egy másik cselekvésre ösztönözni.

Lehet, hogy az ingyenes útmutatónk őt nem annyira érdekli, de az ingyenes webináriumunkra szívesen jelentkezne. Mindenképp érdemes egy ilyen exit-intent popupot beállítani, hisz az utolsó pillanatban még megragadhatjuk azon látogatók figyelmét, akiket a landolón lehet elveszítettünk volna.

A mi példánkban ez a popup 5-15%-os konverzióval teljesít, azaz az oldalt elhagyni kívánók egy részétől nem kell végleg elbúcsúznunk, hanem egy másik landoló oldalon tudjuk meggyőzni őket.

kilépési popup

A fenti példából látszik, hogy a látogatók figyelméért vívott harc komoly tervezőmunkát és felkészültséget igényel. Ha ismersz más bizonyított technikát a landoló oldalak optimalizálására vagy kérdésed merült fel a cikkel kapcsolatban, kérjük, oszd meg velünk kommentben!

Ha pedig Shoprenteres webáruházadhoz szeretnél landoló oldalakat készíteni, akkor keresd fel csapatunkat, és elképzeléseid szerint elkészítjük Neked.

Legfrissebb bejegyzések

Előző bejegyzés:
Shoprenter újdonságok, fejlesztések
Újdonságok: 4 új alkalmazás, Google Shopping Reviews feed, új funkciók az admin felületen

Bejegyzésünkben összefoglaljuk az elmúlt időszakban véghez vitt fejlesztéseket és változtatásokat, amelyek a Shoprentert érintették. ...Elolvasom

Close