U prošlosti su web stranice imale puno nepotrebnih elemenata, naime stranice pune kričavih i ružnih shema boja, previše teksta zaglavljenog u malim prostorima i iskačuće prozore koji iskaču i nerviraju posjetitelje.

Ali dizajneri tada nisu znali više, radije su samo radili s jedinim dizajnerskim trendovima i najboljim praksama koje su poznavali.

Vremena su se od tada dosta promenila.

Web programeri i dizajneri više nisu ograničeni tehnologijom ili tehnikom, što znači da više nema izgovora za loš dizajn. Ovo se odnosi na svaki element koji se nalazi na WordPress stranici, od slike zaglavlja početne stranice do forme kontakte, kao i od tipografije do iskačućih prozora. Sada je sve važno kada se dizajnira za korisničko iskustvo.

Danas se želim usredotočiti na ono što popup čini učinkovitim, na nešto što smatram bitnim dijelom procesa konverzije. Konkretno, želio bih pogledati anatomiju efikasnog WordPress skočnog prozora i kako ovaj uzbudljivi element može povećati vašu stopu konverzije.

Argument za upotrebu skočnih prozora na WordPressu

Skočni prozori su zanimljiv element dizajna. Iako privremeno prekidaju korisničko iskustvo (što se obično ne cijeni previše), oni koji su dobro izvedeni nude nešto toliko privlačno ili uzbudljivo da posjetiteljima ne smeta da izgube minutu da obratite pažnju.

Naravno, u ovom slučaju govorimo o iskačućim prozorima koji generiraju konverzije koji služe za prikupljanje pretplatnika na bilten ili privući posjetitelje na kupovinu. Međutim, skočni prozori se mogu koristiti u različite svrhe. Na primjer, možete podijeliti svoje kolačiće ili politiku privatnosti, preporučiti povezane artikle nakon što posjetitelji dodaju nešto u košaricu ili čak zatražiti od njih da popune brzu anketu.

Pop-up anatomija - pop-up preporuka za cilj

Ako koristite skočni prozor, uglavnom želite da posjetitelji nešto poduzmu. Uostalom, zašto prekidati njihovo iskustvo ako im poremećaj nije korisna upotreba vremena? Prema studiji na skoro dvije milijarde skočnih prozora, otkrili su da je prosječna stopa konverzije za ove vrste skočnih prozora 3,09%.

Sada se postavlja pitanje: Da li su iskačući prozori i dalje relevantni i efikasni? Ako je tržište toliko zasićeno izlaznim skočnim prozorima, pozdravnim trakama, prekrivačima na cijeloj stranici i još mnogo toga, vrijedi li ovaj alat za stvaranje konverzija na vašoj WordPress web lokaciji?

Naravno !!!

Postoji mnogo dobrih praksi web dizajna koje skočni prozori uzimaju u obzir. Na primjer:

  • Skočni prozori uklanjaju nepotrebnu gužvu sa stranica vaše web lokacije.
  • Obično su sastavljene od čistih vizuala i minimalnog teksta.
  • Pozivi na akciju dobro su osmišljeni i jednostavno ponuđeni u smislu formulacije.
  • Postoji mala krivulja učenja za vaše posjetitelje jer je većina ljudi upoznata s iskačućim prozorima i zna kako komunicirati s njima.
  • Skočni prozori pružaju zabavnu priliku da ubrizgate vašu web stranicu u animacije, videozapise ili društvene dokaze.
  • Možete ih lako kreirati sa WordPress plugins visoke kvalitete poput Hustle ili OptinMonster.

Anatomija pop-up - društveni dokaz HubSpot

Generalno, dobro dizajnirani skočni prozor sjajan je za privlačenje pažnje posjetitelja kada vam je najpotrebniji. Pomoću njih možete pravovremeno slati obavještenja ili zahtjeve. Podatke o posjetiteljima možete koristiti i da biste ih privukli da kupe.

Anatomija efikasnog WordPress skočnog prozora

Očigledno, uspjeh iskačućih prozora vaše WordPress stranice ovisi o onima koji su savršeno dizajnirani i imaju tako uvjerljive ponude da posjetitelji ne mogu a da ne komuniciraju. Pa hajde da pogledamo kako izgleda pobednička formula za efikasan iskačući prozor.

1. stil

Različite vrste skočnih prozora teže su učinkovitije u pretvaranju posjetilaca u pretplatnike:

  • Skočni prozori s pretplatom na e-poštu imaju stopu konverzije od 2,9%.
  • Skočni prozori dobrodošlice (oni koji popune cijelu stranicu pri ulasku) konvertiraju na 2,6%.
  • Skočni prozori koji se pokreću pretvaraju 1,9%.
  • Smart ili Hello pop-up prozori prikazuju konverziju 0,5%.

To ne znači da uvijek morate koristiti tradicionalni skočni prozor za pretplatu na e-poštu. Evo primjera sa stranice Neila Patela.

Anatomija pop-up - Neil Patel's bar Hello

Ovaj je dobro izveden, jer je jednostavno dizajniran, nenametljiv, et koristi zabavnu animaciju kako bi privukla pažnju u slučaju da njen minimalni otisak ostane neprimijećen. Imajte na umu da se odabirom stila ne radi o korištenju najpopularnijeg ili najpoznatijeg po višim stopama konverzije. Radi se o pronalaženju stila koji odgovara vašoj web lokaciji, vašim posjetiteljima i koji je osmišljen tako da nadopuni iskustvo između.

2. boja

Boja će, naravno, uvijek igrati glavnu ulogu u dizajnu web stranica. Razumijevanjem psihologije iza izabranih boja možete stvoriti učinkovitije skočne prozore koji se konvertiraju. Naravno, ne možete zaboraviti ni na uspostavljenu šemu boja za vaš brend, tako da je sve u pronalaženju ravnoteže između dizajniranja skočnog prozora koji dobro izgleda na web lokaciji, ali koji takođe primorava posetioce na akciju.

3. sastav

Važno je napraviti korak unazad i vidjeti skočni prozor u cjelini. Iako je dizajn svakog pokretnog dijela u skočnom prozoru važan, kao i cjelokupna šminka skočnog prozora.

Vaš skočni prozor bi trebao:

  • biti jednostavan i lagan za praćenje.
  • Dizajnirane su sa čistim linijama i moraju biti uravnotežene.
  • Uključite relevantne slike u visokoj rezoluciji; idealno bi bilo da jedna slika sažme predmet ponude.
  • Čini se da je produžetak vaše stranice i očito nije napravljen od skočnog prozora s ograničenim mogućnostima prilagodbe.
  • Koristite veliku tipografiju koju je lako pročitati.

4. tekst

Zatim imamo iskačuću poruku. Iako ne razvijate jezik za ove stvari, postoji niz najboljih praksi kojih biste ipak trebali biti svjesni kada je riječ o popunjavanju skočnih prozora tekstom.

Imajte na umu sljedeće:

  • Uvijek uključite naslov, kratku poruku (jedna rečenica će biti dovoljna) i poziv na akciju.
  • Koristite jak jezik koji privlači emocije posjetitelja.
  • Budite kratki. Ako je ne možete napisati u manje od 30 riječi, ova poruka ne pripada skočnom prozoru.
  • Upotrijebite isti ton i osobnost koji koristite na svojoj web stranici.
  • Ponudite nešto vrijedno što vaši posjetitelji neće pronaći drugdje na mjestu.
  • Koristite hitnost ako je moguće. Ako to ne možete učiniti riječima, učinite to bojom.

Pop-up anatomije - prekrivanje ekrana s jastucima

5. CTA

Ovih dana postoji neobičan trend rasta gdje web stranice posjetiteljima nude dvije opcije poziva na akciju. Razumijem zašto ovaj trend raste, ali vidio sam da se pogrešno primjenjuje na toliko web lokacija da se nadam da će trend s vremenom izumrijeti.

Vjerovatno ste i sami vidjeli ovu lošu aplikaciju:

  1. Pozitivna opcija : Ovaj kaže, „Oh, hvala, hvala! Znam da će ova ponuda uskoro promijeniti moj život na bolje! " 
  2. Negativna opcija : Ovaj kaže, "Volim donositi loše životne odluke i cijenim što me trljate po licu." Dopustite mi da kliknem na ovu samoponižavajuću opciju samo da bih dobio još jedan prozor koji me ponovo pita želim li donijeti ovu strašnu odluku. " 

To ne znači da su svi iskačući prozori s dvije CTA opcije loše dizajnirani ili namijenjeni sramoti posjetitelja. Tim Ferris ima dobar primjer CTA dvostruke opcije:

Pop-up anatomija - Tim Ferris pozitivan negativan

Sve u svemu, međutim, rekao bih da ako pokušavate biti sarkastični ili zastrašiti svoje posjetitelje njihovom odlukom, onda napustite svoju stranicu i stavite je na Twitter. Vaša web lokacija nije mjesto za to i nadamo se da će je Twitter potpuno progutati.

Osim toga, također predlažem da poziv na akciju bude jednostavan. Koristite jednostavan jezik koji jasno pokazuje šta će posjetitelji dobiti ako unesu e-poštu ili kliknu na gumb. Također, zadatka svedite na minimum: ne više od dva polja za popunjavanje (tj. E-adresa i možda ime) i jedno dugme za klik.

To je sve za ovaj vodič, nadam se da vam omogućava da dobro dizajnirate tipke za poziv na akciju.