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 skočne prozore koji se pojavljuju i smetaju posjetiteljima.

No, 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 puno promijenila.

Web programeri i dizajneri više nisu ograničeni tehnologijom ili tehnikom, što znači da više nema isprika za loš dizajn. To se odnosi na svaki element koji se nalazi na web-mjestu WordPress, od slike zaglavlja početne stranice do obrasci kontakata, kao i od tipografije do skočnih prozora. Sada je sve važno kada dizajnirate za korisničko iskustvo.

Danas se želim usredotočiti na ono što popup čini učinkovitim, na nešto što smatram bitnim dijelom procesa pretvorbe. Konkretno, želio bih pogledati anatomiju učinkovitog 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 zanimljiv su element dizajna. Iako privremeno prekidaju korisničko iskustvo (što se obično ne cijeni previše), oni koji su ispravno izvedeni nude nešto toliko privlačno ili uzbudljivo da posjetiteljima ne smeta da izgube minuta da obratite pažnju.

Naravno, u ovom slučaju govorimo o skočnim prozorima koji generiraju konverzije i služe za prikupljanje pretplatnika na newsletter ili potaknuti posjetitelje na kupnju. Međutim, skočni prozori mogu se koristiti u razne svrhe. Na primjer, možete podijeliti svoje kolačiće ili pravila o privatnosti, preporučiti povezane artikle nakon što posjetitelji dodaju nešto u košaricu ili ih čak zamoliti da popune kratku anketu.

Pop-up anatomija - pop-up preporuka za ciljanje

Ako većinom koristite skočni prozor, vjerojatno želite da posjetitelji nešto poduzmu. Uostalom, zašto prekidati njihovo iskustvo ako poremećaj nije korisno korištenje njihovog vremena? Prema studiji na gotovo dvije milijarde skočnih prozora, utvrdili su da je prosječna stopa konverzije za ove vrste skočnih prozora 3,09%.

Sada se postavlja pitanje: Jesu li skočni prozori i dalje relevantni i učinkoviti? 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 pretvorbe koristiti na svojoj WordPress stranici?

Naravno !!!

Skočni prozori uzimaju u obzir mnoge dobre prakse web dizajna. Na primjer:

  • Skočni prozori uklanjaju nepotrebnu gužvu sa stranica vašeg web mjesta.
  • 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 većina ljudi poznaje skočne prozore i zna kako s njima komunicirati.
  • Skočni prozori pružaju zabavnu priliku da vašoj web lokaciji dodate animacije, videozapise ili društvene provjere.
  • Možete ih jednostavno stvoriti s WordPress plugins visoke kvalitete poput Hustlea ili OptinMonster.

Anatomija pop-up - društveni dokaz HubSpot

Općenito, dobro dizajnirani skočni prozor idealan je za privlačenje pozornosti posjetitelja kada vam je najpotrebniji. Pomoću njih možete pravovremeno slati obavijesti ili zahtjeve. Također možete upotrijebiti podatke o posjetiteljima kako biste ih privukli na kupnju.

Anatomija učinkovitog WordPress skočnog prozora

Očito, uspjeh vaših WordPress skočnih prozora web-mjesta ovisi o onima koji su savršeno dizajnirani i imaju tako uvjerljive ponude da posjetitelji ne mogu pomoći da ne komuniciraju. Dakle, pogledajmo kako izgleda dobitna formula za učinkovit skočni prozor.

1. stil

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

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

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

Anatomija pop-up - Neil Patel's bar Pozdrav

Ovaj je dobro izveden, jer je jednostavno dizajniran, nenametljiv, et koristi zabavnu animaciju da privuče pažnju u slučaju da njezin 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. Riječ je o pronalaženju stila koji odgovara vašoj web lokaciji, posjetiteljima i koji je osmišljen kao nadopuna iskustvu između.

2. boja

Boja će, naravno, uvijek igrati glavnu ulogu u dizajnu web stranica. Razumijevanjem psihologije iza odabranih boja možete stvoriti učinkovitije skočne prozore koji se pretvaraju. Naravno, također ne možete zaboraviti ustaljenu shemu boja za svoju marku, tako da je sve u pronalaženju ravnoteže između dizajniranja skočnog prozora koji dobro izgleda na web mjestu, ali koji također prisiljava posjetitelje na akciju.

3. sastav

Važno je napraviti korak unatrag 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 trebao bi:

  • biti jednostavan i lako slijediti.
  • Dizajniran je sa čistim linijama i mora biti uravnotežen.
  • Uključite relevantne slike u visokoj razlučivosti; u idealnom slučaju, jedna slika koja sažima predmet ponude.
  • Čini se kao proširenje vaše web stranice i očito nisu napravljeni od skočnih prozora s ograničenim mogućnostima prilagodbe.
  • Koristite veliku tipografiju koju je lako pročitati.

4. tekst

Tada imamo iskačuću poruku. Iako niste u procesu razvijanja jezika koji ulazi u te stvari, postoji niz najboljih praksi kojih biste trebali biti svjesni kad 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 web mjestu.
  • Ako je moguće, upotrijebite hitnost. Ako to ne možete učiniti riječima, učinite to bojom.

Pop-up anatomije - prekrivanje zaslona s željama

5. HAT

Ovih je dana čudan 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.

Vjerojatno 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 opciju automatskog ukidanja samo da bih dobio još jedan prozor koji me ponovno pita želim li donijeti ovu strašnu odluku. " 

To ne znači da su svi skočni prozori s dvije CTA opcije loše dizajnirani ili namijenjeni sramoti posjetitelja. Tim Ferris ima dobar primjer CTA s dvostrukom opcijom:

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, maknite se sa svoje stranice i stavite je na Twitter. Vaša web stranica nije mjesto za to i nadamo se da će je Twitter potpuno progutati.

Osim ovog kućnog ljubimca, predlažem i da poziv na akciju bude jednostavan. Koristite jednostavan jezik koji jasno pokazuje što će posjetitelji dobiti ako uđu u svoju e-poštu ili kliknu gumb. Također, zadatka svedite na minimum: ne više od dva polja za popunjavanje (tj. E-adresa i možda ime) i jedan gumb za klik.

To je sve za ovaj vodič, nadam se da vam omogućuje dobro oblikovanje gumba za poziv na akciju.