[vc_row][vc_column][vc_column_text]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ž.
1. Definovanie akcie, ktorú chceme aby používateľ spravil
Pred tý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.
Príklad1: Chcem, aby niekto vyskúšal môj online produkt. Rozložím stránku logicky tak, aby som mu čo najjednoduchšie vysvetlil, o aký ide produkt, aké benefity mu prinášam. K tomu pridám jednoznačné call-to-action na skúšobnú verziu. Call-to-action prvky a video, ktoré vysvetľuje produkt, by som umiestnil na vrch stránky. Príkladov je viac: www.vwo.com, www.inhiro.com a ďalšie.
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. Visibility blog je presne takto spravený. Keď si rozkliknete akýkoľvek článok, až po jeho prečítaní na vás vybehne call-to-action na email.
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 2 tooly na wireframy. Keď potrebujem niečo rýchlo a jednoducho nakresliť, tak využijem wireframe.cc.
Je to online tool a bez registrácie a loginu môžete kresliť wireframy. Má základné možnosti a v prípade jednoduchých LP to stačí.
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 19 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.
Vo všeobecnosti ešte k rozloženiu: 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. Zo skúseností viem, že pri landing pages je lepšie, keď si nawordujete stránku sami (neviem, kto to vlastne číta, čiže pointa je, aby to newordoval kreatívny kopík). Text by mal napísať ten, kto najlepšie pozná produkt – ten, kto najlepšie vie, čo má stránka splniť. 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
Po príprave grafiky je potrebná kontrola stránky. Skontrolujte, či sa zachovalo rozloženie. K tomu asi viac netreba. Iba možno, že netreba zbytočne riešiť detaily v úvode a radšej skúsiť A/B test.
5. Spustenie stránky a A/B testov
Tak máte super stránku, ktorú ste dali von a vyhodnocujete, ako funguje.
Od začiatku odporúčam prípravu A/B testov. 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 49USD/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ý 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 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. Pri komplexnejších stránkach je dobrá skôr personalizácia obsahu napr. cez Optimizely alebo cez Persoo. To už je ale na samostatnú tému. Ak používate iné tools/postupy, napíšte v komentároch viac.
Teraz, keď už vieš, ako spraviť landing page, budeš k nej potrebovať aj dobrý content. O tom, ako ho vytvoriť, si môžeš prečítať v tomto článku.
[/vc_column_text][/vc_column][/vc_row]
Comments