Tidigare hade webbplatser många onödiga element, nämligen sidor fulla av flashiga och fula färgscheman, för mycket text fast i små utrymmen och popup-fönster som dyker upp och irriterar besökare.

Men designarna visste inte mer då eller, snarare, de arbetade bara med de enda designtrenderna och bästa praxis som de visste.

Tiderna har förändrats mycket sedan dess.

Webbutvecklare och designers begränsas inte längre av teknik eller teknik, vilket innebär att det inte längre finns några ursäkter för dålig design. Detta gäller varje element som finns på en WordPress-webbplats, från startsidans huvudbild till former kontakter, såväl som från typografi till popup-fönster. Allt spelar roll nu när du designar för användarupplevelse.

Idag vill jag fokusera på vad som gör en popup effektiv, något som jag anser vara en viktig del av konverteringsprocessen. Specifikt vill jag ta en titt på anatomi för en effektiv WordPress-popup och hur detta spännande element kan öka din omvandlingsfrekvens.

Argumentet för att använda popup-fönster på WordPress

Pop-ups är ett intressant designelement. Medan de tillfälligt avbryter användarupplevelsen (vilket vanligtvis inte uppskattas mycket), erbjuder de som görs rätt något så tilltalande eller spännande att besökarna inte har något emot att förlora en minut att uppmärksamma.

Naturligtvis, i det här fallet talar vi om konverteringsgenererande popup-fönster som tjänar till att samla in prenumeranter på nyhetsbrev eller locka besökare att göra inköp. Men popup-fönster kan användas för olika ändamål. Du kan till exempel dela dina cookies eller integritetspolicy, rekommendera relaterade artiklar efter att besökare lagt något i kundvagnen, eller till och med be dem att göra en snabb undersökning.

Pop-up-anatomi - Pop-up av målrekommendationer

För det mesta, om du använder ett popup-fönster, vill du förmodligen att besökare ska vidta åtgärder. När allt kommer omkring, varför avbryta deras upplevelse om störningen inte är en användbar användning av deras tid? Enligt en studie av nästan två miljarder popup-fönster fann de att den genomsnittliga omvandlingsfrekvensen för dessa typer av popup-fönster var 3,09%.

Nu är det fråga om: Är popup-fönster fortfarande relevanta och effektiva? Om marknaden är så övermättad med popup-popup-fönster, hej-staplar, helsidesöverlägg med mera, är det här ett verktyg för konverteringsgenerator som är värt att använda på din WordPress-webbplats?

Naturligtvis !!!

Pop-ups tar hänsyn till många bra webbdesignpraxis. Till exempel:

  • Pop-ups tar bort onödig röran från webbplatsens sidor.
  • De består vanligtvis av rena bilder och minimal text.
  • Uppmaningarna till handling är väl utformade och erbjuds enkelt i termer av ordalydelsen.
  • Det finns en liten inlärningskurva för dina besökare eftersom de flesta är bekanta med popup-fönster och vet hur man interagerar med dem.
  • Pop-ups ger en rolig möjlighet att införa din webbplats med animationer, videor eller sociala bevis.
  • Du kan enkelt skapa dem med Wordpress plugins hög kvalitet som Hustle eller OptinMonster.

Anatomi popup - socialt bevis HubSpot

I allmänhet är en väldesignad pop-up perfekt för att fånga besökarnas uppmärksamhet när du behöver det mest. Du kan använda dem för att skicka meddelanden eller begäranden i rätt tid. Du kan också använda besökardata för att locka dem att göra ett köp.

Anatomi för en effektiv WordPress-popup

Uppenbarligen beror framgången för dina WordPress-webbplatsers popup-fönster på de som är perfekt designade och har så övertygande erbjudanden att besökarna inte kan låta bli att interagera. Så låt oss ta en titt på hur en vinnande formel för en effektiv popup ser ut.

1. stil

De olika typerna av popup-fönster tenderar att vara effektivare när det gäller att konvertera besökare till prenumeranter:

  • Pop-ups för e-postprenumerationer har en konverteringsfrekvens på 2,9%.
  • Välkomst popup-fönster (de som fyller hela sidan vid inträde) konverteras till 2,6%.
  • Rulning-utlösta popup-fönster konverterar 1,9%.
  • Smart eller Hello popup-fönster visar en omvandling av 0,5%.

Det betyder inte att du alltid måste använda en traditionell popup-popup för e-postprenumeration. Här är ett exempel från Neil Patels webbplats.

Popup-anatomi - Neil Patel's Bar Hej

Den här är bra gjort, eftersom den är enkelt utformad, icke-påträngande, et använder rolig animering för att fånga uppmärksamhet om dess minimala fotavtryck går obemärkt förbi. Tänk på att välja stil inte handlar om att använda den som är den mest populära eller mest kända för högre omvandlingsfrekvenser. Det handlar om att hitta en stil som fungerar för din webbplats, dina besökare, och som är utformad för att komplettera upplevelsen däremellan.

2. färg

Färg spelar naturligtvis alltid en viktig roll i webbdesign. Genom att förstå psykologin bakom dina valda färger kan du skapa mer effektiva popup-fönster som konverterar. Naturligtvis kan du inte heller glömma det etablerade färgschemat för ditt varumärke, så det handlar om att hitta en balans mellan att designa ett popup-fönster som ser bra ut på webbplatsen, men som tvingar också besökare att vidta åtgärder.

3. komposition

Det är viktigt att ta ett steg tillbaka och se popup-fönstret som helhet. Även om utformningen av varje rörlig del i popup-fönstret spelar roll, liksom pop-upens övergripande smink.

Ditt popup-fönster ska:

  • vara enkel och lätt att följa.
  • Designad med rena linjer och vara välbalanserad.
  • Inkludera relevanta och högupplösta bilder; helst en enda bild som sammanfattar ämnet för erbjudandet.
  • Verkar vara en förlängning av din webbplats och uppenbarligen inte gjord av ett popup-fönster med begränsade anpassningsalternativ.
  • Använd en stor, lättläst typografi.

4. text

Sedan har vi popup-meddelandet. Även om du inte är i färd med att utveckla språket som ingår i dessa saker, finns det ett antal bästa metoder som du fortfarande bör vara medveten om när det gäller att fylla popup-fönster med text.

Tänk på följande:

  • Inkludera alltid en rubrik, ett kort meddelande (en mening kommer att göra) och en uppmaning till handling.
  • Använd ett starkt språk som tilltalar besökarnas känslor.
  • Var kortfattad. Om du inte kan skriva det med mindre än 30 ord tillhör detta meddelande inte ett popup-fönster.
  • Använd samma ton och personlighet som du använder på din webbplats.
  • Erbjuda något värdefullt som dina besökare inte hittar någon annanstans på webbplatsen.
  • Använd brådskande om möjligt. Om du inte kan göra det med ord, gör det med färg.

Anatomi pop-up - Wishpond-skärmöverlägg

5. CTA

Det finns en underlig växande trend idag där webbplatser erbjuder besökare två alternativ för uppmaning till handling. Jag förstår varför den här trenden växer, men jag har sett den tillämpas fel på så många webbplatser att jag hoppas att trenden kommer att dö ut så småningom.

Du har förmodligen sett den här dåliga applikationen själv:

  1. Det positiva alternativet : Den här säger, ”Åh, tack, tack! Jag vet att detta erbjudande håller på att förändra mitt liv till det bättre! " 
  2. Det negativa alternativet : Den här säger: "Jag gillar att göra dåliga livsval och jag uppskattar att du gnuggar mitt ansikte." Låt mig klicka på det här alternativet för automatisk avskrivning för att få ett annat fönster som frågar mig igen om jag vill fatta detta fruktansvärda beslut. " 

Detta betyder inte att alla popup-fönster med två CTA-alternativ är dåligt utformade eller avsedda att skämma besökaren. Tim Ferris har ett bra exempel på en väl gjort dual option CTA:

Pop-up Anatomy - Tim Ferris Positive Negative

Sammantaget skulle jag dock säga att om du försöker vara sarkastisk eller skrämma dina besökare till sitt beslut, gå sedan ut från din webbplats och lägg den på Twitter. Din webbplats är inte en plats för det och Twitter kommer förhoppningsvis att svälja upp det helt.

Bortsett från den sällskapsdjuret, föreslår jag också att uppmaningen till handling är enkel. Använd ett enkelt språk som gör det tydligt vad besökarna får för att skriva in sin e-post eller klicka på knappen. Håll också jobbet till ett minimum: högst två fält att fylla i (t.ex. e-post och kanske ett namn) och en knapp att klicka på.

Det är det för den här självstudien, jag hoppas att det låter dig utforma dina uppmaningsknappar väl.