V minulosti mali webové stránky veľa nepotrebných prvkov, konkrétne stránky plné okázalých a škaredých farebných schém, príliš veľa textu uviaznutého v malých priestoroch a vyskakovacie okná, ktoré sa vyskakujú a otravujú návštevníkov.

Dizajnéri však vtedy ešte nevedeli viac, respektíve iba pracovali s jedinými návrhárskymi trendmi a osvedčenými postupmi, ktoré poznali.

Odvtedy sa časy veľa zmenili.

Weboví vývojári a dizajnéri už nie sú obmedzovaní technológiou alebo technikou, čo znamená, že už neexistujú žiadne výhovorky pre zlý dizajn. Týka sa to každého prvku nájdeného na webe WordPress, od obrázka hlavičky domovskej stránky až po formuláre kontakty, ako aj od typografie po kontextové okná. Pri navrhovaní pre používateľskú skúsenosť je teraz dôležité všetko.

Dnes sa chcem zamerať na to, čo robí vyskakovacie okno efektívnym, niečo, čo považujem za podstatnú súčasť procesu premeny. Konkrétne by som chcel preskúmať anatómiu efektívneho vyskakovacieho okna WordPress a ako tento vzrušujúci prvok môže zvýšiť váš konverzný pomer.

Argument pre použitie vyskakovacích okien na WordPress

Vyskakovacie okná sú zaujímavým dizajnovým prvkom. Aj keď dočasne prerušia používateľskú skúsenosť (čo sa zvyčajne veľmi neoceňuje), tie, ktoré sa robia správne, ponúkajú niečo také príťažlivé alebo vzrušujúce, že návštevníkom neprekáža strata minútu venovať pozornosť.

Samozrejme, v tomto prípade hovoríme o kontextových oknách generujúcich konverzie, ktoré slúžia na zhromažďovanie predplatiteľov newsletter alebo lákať návštevníkov na nákupy. Vyskakovacie okná však možno použiť na rôzne účely. Môžete napríklad zdieľať súbory cookie alebo zásady ochrany osobných údajov, odporúčať súvisiace položky potom, čo návštevníci niečo pridajú do košíka, alebo ich dokonca požiadať, aby sa zúčastnili rýchleho prieskumu.

Pop-up anatómia - vyskakovanie cielených odporúčaní

Ak používate vyskakovacie okno, pravdepodobne budete chcieť, aby návštevníci začali konať. Napokon, prečo prerušovať ich skúsenosti, ak rušenie nie je užitočným využitím ich času? Podľa štúdie zameranej na takmer dve miliardy automaticky otváraných okien zistili, že priemerný konverzný pomer pre tieto typy automaticky otváraných okien bol 3,09%.

Teraz si treba položiť otázku: Sú vyskakovacie okná stále relevantné a efektívne? Ak je trh tak presýtený vyskakovacími oknami, ahoj panelmi, prekrytiami celej stránky a ďalšími, oplatí sa tento nástroj na generovanie konverzií použiť na vašom webe WordPress?

Samozrejme !!!

Vyskakovacie okná zohľadňujú veľa dobrých postupov pri navrhovaní webu. Napríklad:

  • Vyskakovacie okná odstraňujú nepotrebný neporiadok zo stránok vášho webu.
  • Zvyčajne sa skladajú z čistých vizuálov a minimálneho textu.
  • Výzvy na akciu sú dobre navrhnuté a jednoducho ponúkané z hľadiska znenia.
  • Pre vašich návštevníkov existuje malá krivka učenia, pretože väčšina ľudí ovláda kontextové okná a vie, ako s nimi komunikovať.
  • Vyskakovacie okná poskytujú zábavnú príležitosť vložiť vaše stránky do animácií, videí alebo do sociálnych sietí.
  • Môžete ich ľahko vytvoriť pomocou WordPress pluginy vysoká kvalita ako Hustle alebo OptinMonster.

Anatómia pop-up - sociálny dôkaz HubSpot

Dobre navrhnuté vyskakovacie okno je vo všeobecnosti ideálne na upútanie pozornosti návštevníkov, keď to najviac potrebujete. Môžete ich použiť na zasielanie včasných oznámení alebo žiadostí. Môžete tiež použiť údaje o návštevníkoch, aby ste ich nalákali na nákup.

Anatómia efektívneho vyskakovacieho okna WordPress

Je zrejmé, že úspech vyskakovacích okien vašich stránok WordPress závisí od tých, ktoré sú perfektne navrhnuté a majú také presvedčivé ponuky, že návštevníci si nemôžu pomôcť, ale interagujú. Poďme sa teda pozrieť, ako vyzerá víťazný vzorec pre efektívne vyskakovacie okno.

1. štýl

Rôzne typy kontextových okien bývajú účinnejšie pri konverzii návštevníkov na účastníkov:

  • Vyskakovacie okná na odber e-mailov majú konverzný pomer 2,9%.
  • Vítané kontextové okná (tie, ktoré pri vstupe zaberú celú stránku) s konverziou 2,6%.
  • Vyskakovacie kontextové okná konvertujú 1,9%.
  • Inteligentné alebo Hello pop-up zobrazujú konverziu 0,5%.

To neznamená, že musíte vždy používať tradičné vyskakovacie okno na odber e-mailov. Tu je príklad zo stránky Neila Patela.

Pop-up anatómia - Bar Neil Patel Dobrý deň

Tento je dobre vykonaný, pretože je jednoducho navrhnutý a nerušivý. et používa zábavnú animáciu na upútanie pozornosti v prípade, že jej minimálna stopa zostane nepovšimnutá. Pamätajte, že pri výbere štýlu nejde o použitie štýlu, ktorý je najpopulárnejší alebo ktorý je najznámejší pre vyššie konverzné pomery. Ide o hľadanie štýlu, ktorý funguje pre vaše stránky, vašich návštevníkov a ktorý je navrhnutý tak, aby dopĺňali skúsenosti medzi nimi.

2. farba

Farba samozrejme bude vždy hrať hlavnú rolu v dizajne webových stránok. Pochopením psychológie, ktorá sa skrýva za vašimi vybranými farbami, môžete vytvoriť efektívnejšie kontextové okná, ktoré konvertujú. Samozrejme tiež nemôžete zabudnúť na zavedenú farebnú schému pre vašu značku, takže je to všetko o nájdení rovnováhy medzi návrhom vyskakovacieho okna, ktoré na webe vyzerá dobre, ale ktoré tiež núti návštevníkov konať.

3. zloženie

Je dôležité urobiť krok späť a vidieť vyskakovacie okno ako celok. Aj keď záleží na dizajne každej pohyblivej časti vo vyskakovacom okne, rovnako ako na celkovom zložení vyskakovacieho okna.

Vaše kontextové okno by malo:

  • byť jednoduchý a ľahko sledovať.
  • Navrhnuté s čistými líniami a sú dobre vyvážené.
  • Zahrňte relevantné obrázky a obrázky vo vysokom rozlíšení; v ideálnom prípade jediný obrázok, ktorý sumarizuje predmet ponuky.
  • Vyzerajú ako rozšírenie vášho webu a zjavne nie sú vyrobené z kontextového okna s obmedzenými možnosťami prispôsobenia.
  • Použite veľkú, ľahko čitateľnú typografiu.

4. text

Potom máme pop-up správu. Aj keď ešte stále nie ste v procese vývoja jazyka, ktorý sa týmto veciam venuje, existuje množstvo osvedčených postupov, na ktoré by ste si mali pamätať pri vypĺňaní kontextových okien textom.

Nezabudnite na toto:

  • Vždy zahrňte nadpis, krátku správu (urobí sa jedna veta) a výzvu na akciu.
  • Používajte silný jazyk, ktorý oslovuje emócie návštevníkov.
  • Buďte stručný. Ak ju nemôžete napísať menej ako 30 slovami, táto správa nepatrí do vyskakovacieho okna.
  • Použite rovnaký tón a osobnosť, aké používate na svojich stránkach.
  • Ponúknite niečo hodnotné, čo vaši návštevníci nenájdu inde na webe.
  • Ak je to možné, použite urgentnosť. Ak to nejde slovami, urobte to farebne.

Vyskakovacie okno Anatómia - prekrytie obrazovky Wishpond

5. CTA

V dnešnej dobe existuje zvláštny rastúci trend, keď webové stránky dávajú návštevníkom dve možnosti výzvy na akciu. Chápem, prečo tento trend rastie, ale videl som ho nesprávne uplatnený na toľkých webových stránkach, že dúfam, že tento trend nakoniec vyhynie.

Pravdepodobne ste sami videli túto zlú aplikáciu:

  1. Pozitívna možnosť : Tento hovorí: „Ó, ďakujem, ďakujem! Viem, že táto ponuka má zmeniť môj život k lepšiemu! „ 
  2. Negatívna možnosť : Tento hovorí: „Rád robím zlé životné rozhodnutia a oceňujem, že si ma pretieraš po tvári.“ Dovoľte mi kliknúť na túto možnosť automatického ukončenia podpory, aby som dostal ďalšie okno, ktoré sa ma znova opýta, či chcem urobiť toto hrozné rozhodnutie. „ 

To neznamená, že všetky automaticky otvárané okná s dvoma možnosťami CTA sú zle navrhnuté alebo určené na to, aby hanbili návštevníka. Tim Ferris má dobrý príklad dobre vykonanej CTA s dvojitou možnosťou:

Vyskakovacia anatómia - pozitívna negatíva Tima Ferrisa

Celkovo by som však povedal, že ak sa snažíte byť sarkastickí alebo zastrašiť svojich návštevníkov pri rozhodovaní, potom vypadnite zo svojej stránky a umiestnite ju na Twitter. Váš web na to nie je miesto a Twitter ho, dúfajme, úplne pohltí.

Okrem toho chlácholenia domácich miláčikov tiež navrhujem, aby bola výzva na akciu jednoduchá. Používajte jednoduchý jazyk, ktorý objasňuje, čo návštevníci dostanú za zadanie svojho e-mailu alebo kliknutie na tlačidlo. Snažte sa tiež obmedziť prácu na minimum: nie viac ako dve polia na vyplnenie (napr. E-mail a možno meno) a jedno tlačidlo na kliknutie.

To je pre tento návod všetko, dúfam, že vám umožní dobre navrhnúť tlačidlá výzvy na akciu.