Ako vytvoriť Landing Page, ktorá funguje – 2018 update

[vc_row][vc_column][vc_column_text]Prvýkrát som zverejnil tento článok na svojom blogu v októbri 2015, teda už niečo viac ako 2 roky dozadu. Už vtedy to bol jeden z najúspešnejších článkov na mojom webe, a preto som sa rozhodol po dlhšej dobe naňho pozrieť a dať mu update, aby bol relevantný aj v roku 2018.

Pôvodne som tento článok chcel písať o wireframe tools, ktoré používam a ktoré som vyskúšal. No uvedomil som si, že ak to vezmem trochu komplexnejšie, bude to mať väčšiu pridanú hodnotu.

Čo je dôležité zdôrazniť na úvod – nie som grafik ani programátor. Som online marketér a viem, že mať iba vymakanú reklamu nestačí. V praxi to znamená, že sa často dostávam do pozície, kedy si musím navrhnúť landing page. Nejde o komplexné stránky, ale skôr o jednoduché LP, kde riešim wording, rozloženie a nejaké call-to-action prvky.

Na prípravu týchto vecí používam zopár nástrojov na inšpiráciu a tiež na samotné spracovanie. Nechcem tu vypisovať dlhé obkecy o tom, ako máte pripraviť kreatívny headline. Skôr chcem popísať praktické veci, ktoré môžu pomôcť. Snáď to tak aj bude a kľudne v komentároch vyjadrite svoj názor k veci. Prípadne, ak používate iné tools, tak ich tam môžete hodiť tiež.

Predtým, než prejdem ku konkrétnym tipom k Landing page, si ujasnime, čo to vlastne je Landing page a aký je rozdiel medzi hlavnou stránkou a landing page/cieľovou stránkou.

Rozdiel medzi Home Page/Landing Page/Cieľová URL

Home page je stránka, ktorá je hlavná stránka vášho webu. V mojom prípade sa jedná o stránku www.kamilaujesky.com. Často je táto stránka preceňovaná a gro trafficu na web chodí aj tak na podstránky a iné landing page, ktoré by mali byť ešte viac pripravené na návštevu ako Home Page.

Landing Page/Cieľová URL – je stránka alebo URL adresa konkrétnej podstránky, na ktorú cielite svoju reklamu. Príklad. Ak vytvárate reklamy na konkrétny produkt alebo službu – v mojom prípade to môže byť príklad školenia Online Marketing 2018, je dobré danú službu alebo produkt detailnejšie vysvetliť, zadefinovať si akcie, ktoré chcem, aby používateľ na webe spravil (v mojom prípade vyplnil formulár pre registráciu) a na základe toho viete vytvoriť Landing Page – teda stránku/podstránku, kde sú konkrétne informácie o danej službe alebo produkte. Pozrite si moju stránku na toto školenie, ktorá bola vytvorená čisto za účelom predávania daného školenia, a preto sú na nej informácie výhradne o školení.

1. Aký cieľ má Landing page? 

Predtým, než začnete čokoľvek kresliť, vymýšľať, riešiť akúkoľvek reklamu alebo landing page, by ste mali mať jasne definované, čo vlastne chcete dosiahnuť. Môžete chcieť, aby vám niekto nechal emailovú adresu alebo vyplnil komplexnú objednávku, vyskúšal váš online produkt alebo napríklad zavolal do vašej predajne.

V prvom rade tu chcem vyzdvihnúť službu GetSiteControl – ktorá môže byť pre vás užitočná, keď máte za cieľ zber leadov na vašej landing page. V dnešnej dobe, kedy už Google pomaličky začína penalizovať pop-up okná, môže byť pre vás GetSiteControl a ich alternatívy k popupom super nástrojom ako zbierať leady. V ich službe viete vytvoriť statický prvok, ktorý je umiestnený buď na vrchu alebo na spodku stránky, prípadne v jej rohu, a „nenásilným“ spôsobom tak zbierať leady. Tento spôsob nevadí ani Google, čiže vaša stránka nebude penalizovaná v SERPe (Search engine result page).

Príklad1: Chcem, aby si ľudia objednali moje školenie: www.kamilaujesky.com/online2018 – na tejto Landing Page som zoradil informácie tak, aby človek, ktorý ju navštívi, dostal hneď potrebné informácie a zároveň aby hneď videl možnosť registrovať sa. Nižšie na stránke som školenie podporil referenciami od reálnych ľudí z minulého roku. Ak už niekoho zaujala stránka o školení a nepozná mňa, umiestnil som na web aj informácie o mne, aby všetci vedeli, kto ich bude školiť. No a už chýbali iba informácie o tom, kde a kedy sa bude konať školenie ktoré okrem toho, že boli v úplne úvodnom texte sú aj dole zhrnuté.

Príklad2: Chcem zbierať emailové adresy. Používateľovi sa najskôr pokúsim odovzdať pridanú hodnotu a až potom si od neho vypýtam email. Môj blog môže byť zaujímavý príklad, ako sa to dá robiť bez toho, aby ste používateľov otravovali. Emailovú adresu si pýtam od človeka až v polovici článku, prípadne na jeho konci, ak je článok kratší. Takto dokážem ľudom odovzdať pridanú hodnotu, zistia, že na mojom blogu môžu nájsť relevantné informácie o digitálnom marketingu a potom mi dajú emailovú adresu.

Rozdiel medzi Príkladom 1 a 2 je teda v logickom umiestnení call-to-action prvkov podľa toho, o čom je vaša stránka, resp. čo chcete, aby vykonali používatelia.

Príklady, ktoré som vyššie uviedol, sú teoretické ukážky, ktoré neplatia vo všetkých prípadoch. Je veľmi dôležité rozlišovať produkty, cieľovky aťď. Vždy, keď idem pripravovať nejaký web, snažím sa automaticky klienta nastaviť tak, aby bol pripravený na to, že budeme A/B testovať web.

2. Rozloženie stránky

Keď už máme zadefinované ciele stránky, môžeme si ju skúsiť navrhnúť.

Aktuálne používam na wireframy už iba UXPin.

Donedávna som však pri jednoduchých wireframoch používal stále wireframe.cc, ktorý úplne stačí pre jednoduchú ilustráciu základných wireframov.

Je to online tool a bez registrácie a loginu môžete kresliť wireframy. Takto potom vyzerá ukážka rozloženia stránky cez Wireframe.cc


Keď potrebujem pripraviť niečo komplexnejšie, používam UXPin.com. Dá sa využiť 14-dňový free trial. Následne je pricing od 29 USD/mesiac. V nástroji si môžete vytvárať viac projektov, riešiť responzivitu, okrem toho sú v ňom predrobené aj rôzne templaty, ktoré sa môžu hodiť.

Keď som prednedávnom riešil online, aký tool na wireframy ľudia používajú, dostal som tip na Powerpoint. Keď si vygooglite nejaké templaty (prípadne aj bez nich), môže to byť naozaj jednoduchý a rýchly nástroj na prípravu wireframov. Samozrejme môžete – a ja to tak robím vždy, na úvodný wireframe využiť čistú A4. Tam si nakreslíte základné rozloženie 10x to preškrtáte a až potom to nahodíte do softu, kde je to už komplikovanejšie, ale krajšie a funkčnejšie (viete sa preklikávať na rôzne podstránky)

Vo všeobecnosti ešte k rozloženiu landing page: videl som už veľa heatmáp stránok a na spodok stránky sa zoscrolluje tak 10 – 15 % používateľov. Samozrejme, ak nemajú naozaj relevantné dôvody na scrollovanie. Na základe tohto poznatku by ste mali teda call-to-action prvky umiestniť vyššie, prípadne zafixovať, aby boli stále viditeľné.[/vc_column_text][/vc_column][/vc_row][vc_row css=“.vc_custom_1506520790668{margin-left: -180px !important;padding-top: 20px !important;padding-bottom: 20px !important;}“ el_id=“bg-lietadielko“][vc_column css=“.vc_custom_1506530421738{background-position: 0 0 !important;background-repeat: no-repeat !important;}“ offset=“vc_hidden-sm vc_hidden-xs“][vc_row_inner][vc_column_inner width=“1/3″ css=“.vc_custom_1507554233307{padding-top: 25px !important;}“][vc_column_text css=“.vc_custom_1506520873059{padding-left: 30px !important;}“]

Dostávaj články na email

[/vc_column_text][/vc_column_inner][vc_column_inner width=“1/3″]








[/vc_column_inner][vc_column_inner width=“1/3″][vc_single_image image=“5855″ alignment=“right“ css=“.vc_custom_1506520374924{margin-top: -80px !important;}“][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]3. Wording

V tejto časti to bude rýchle. Nepoužívajte copywriterov – resp. keď ich použijete, musíte si web aj tak skontrolovať z funkčného hľadiska. Je veľmi málo copywriterov, ktorý dokážu napísať pútavý text, ale zachovať v ňom aj pôvodný zámer.  Zo skúseností si však myslím, že pri landing pages je lepšie, keď si nawordujete stránku sami a dáte to copywriterovi iba skontrolovať.  Text by mal napísať ten, kto najlepšie pozná produkt – ten, kto najlepšie vie, čo má stránka splniť a zároveň čo by mohlo najviac na cieľovú skupinu fungovať. Toto je veľmi dôležité. Kreatívci si dokážu dosť uletieť a pointa celej stránky sa môže rýchlo stratiť.

Druhá dôležitá vec: A/B test. Je to najjednoduchšia forma testovania vôbec. Takže na to nezabúdajte.

Pri rozložení stránky, a možno čiastočne aj pri wordingu, môže pomôcť táto super stránka. Objavil som ju, keď tam bolo ešte len asi 20 tipov. Teraz ich je tam cez 70 a sú naozaj užitočné a relevantné. Opäť – treba si uvedomiť, že tam nenájdete univerzálne návody na to, ako to spraviť. Nájdete tam však nejaké tipy, ktoré je fajn skúsiť.

4. Grafika

V tomto bode nebudem rozpisovať nejake generalizované poznatky, že zelená farba je lepšia na buttone a podobne. Dôležité je, že po grafickom stvárnení vášho wireframu je dôležité to s pôvodnými myšlienkami skontrolovať a konzultovať s grafikom. To znamená, že si skontrolujete spoločne, že či rozloženie je rovnaké ako vo wireframe, a ak nie, tak prečo. Zároveň by som sa na vašom mieste moc nebrzdil tým, že či tam dať taký obrázok alebo onaký, alebo či tam dať červený alebo zelený button, ale vyriešte to A/B testami, o ktorých hovorím v ďalšom bode.

5. Spustenie stránky a A/B testov

Tak máte super stránku, ktorú ste dali von. V tomto bode si treba uvedomiť, že ste dali von „prototyp“ stránky. To znamená, že je určite veľa vecí, ktoré na nej môžete vylepšovať. Najlepší spôsob ako to robiť je, že budete skúšať rôzne A/B testy. Ja osobne využívam Visual Website Optimizer. Je to najjednoduchší tool na vytváranie A/B testov. Určený je pre marketérov, ktorí nemusia vedieť vôbec programovať. Funguje to princípom drag-and-drop a je to fakt jednoduché. Free trial a potom 49 USD/mesiac. Tie peniaze sa ale určite oplatia. Naše A/B testy, ktoré sme riešili, mali také výsledky, že návratnosť investície bola niekoľkonásobná.

Cez tento tool dokážete riešiť od základných A/B testov wordingu až po rôzne rozloženia stránky, farby buttonov, výmenu obrázkov, split testy rôznych URL adries. Viete prípadne aj testovať rôzne LP na rôzne zdroje návštevnosti. To znamená, že používateľom z AdWords ukážete inú LP ako používateľom z FB.

Prípadne pre každý zdroj môžete urobiť ešte samostatný A/B test.

Dobrý a veľmi podobný tool, ktorý som ešte pár krát použil sa volá Optimizely. Tento tool tu bol skôr ako VWO, ale ja som zvyknutý viac na ten. Poskytujú free trial a potom customizovaný plán presne na mieru. Keďže tento tool moc nepoužívam, neviem povedať, ako sa presne pohybujú ceny. Ak máte niekto skúsenosť, dajte info v komentároch pls. Vďaka.

Tieto tooly vám dokážu vyhodnotiť aj heatmapy a click mapy, z ktorých sa dá určite veľa odčítať. Výborný tool, ktorý tiež používame pre klientov je HotJar. Na základe údajov z neho sme dokázali vyhodnotiť napríklad to, že používatelia sú zmätení z nášho wordingu na stránke a nechápu cenník.

HotJar natáča používateľov na vašej stránke, vyhodnocuje heatmapy, clickmapy, scroll mapy. Okrem toho viete aj jednoducho vytvoriť anketu, ktorá vybehne na používateľov a máte relevantný feedback.

Keď to celé zhrniem jednoducho: 1. definícia cieľa 2. wireframy – rozloženie stránky 3. wording, grafika 4. príprava A/B testov 5. pravidelné úpravy

Vždy musíte byť či už vy ako agentúra alebo klient pripravení na to, že stránka nikdy nie je final verzia. To znamená, že bude potrebné obetovať trošku budgetu a času na vytváranie A/B testov, na optimalizáciu stránky a aj na človeka, ktorý bude nad tým rozmýšľať. V konečnom dôsledku by však mali tieto aktivity priniesť viac peňazí do firmy.

Ak používate iné tools/postupy, napíšte v komentároch viac.

Teraz, keď už viete, ako spraviť landing page, budete k nej potrebovať aj dobrý content. O tom, ako ho vytvoriť, si môžete prečítať v tomto článku.


Občas posielam info emailom 

© 2020 by Kamil Aujesky. Created with Wix.com.