In het verleden hadden websites veel onnodige elementen, namelijk pagina's vol flitsende en lelijke kleurenschema's, te veel tekst in kleine ruimtes en pop-ups die opduiken en bezoekers irriteren.
Maar de ontwerpers wisten toen niet meer, of liever, ze werkten gewoon met de enige designtrends en best practices die ze kenden.
Sindsdien zijn de tijden veel veranderd.
Webontwikkelaars en ontwerpers worden niet langer beperkt door technologie of techniek, wat betekent dat er geen excuses meer zijn voor een slecht ontwerp. Dit betreft elk element dat op een WordPress-site wordt aangetroffen, van de afbeelding van de koptekst van de startpagina tot vormen contacten, maar ook van typografie tot pop-ups. Alles is nu belangrijk bij het ontwerpen voor gebruikerservaring.
Vandaag wil ik me concentreren op wat een pop-up effectief maakt, iets dat ik beschouw als een essentieel onderdeel van het conversieproces. In het bijzonder zou ik de anatomie van een effectieve WordPress-pop-up willen onderzoeken en hoe dit opwindende element uw conversieratio kan verhogen.
Het argument voor het gebruik van pop-ups op WordPress
Pop-ups zijn een interessant ontwerpelement. Hoewel ze de gebruikerservaring tijdelijk onderbreken (wat meestal niet erg op prijs wordt gesteld), bieden degenen die goed worden gedaan iets dat zo aantrekkelijk of opwindend is dat bezoekers het niet erg vinden om een minuut om op te letten.
In dit geval hebben we het natuurlijk over conversiegenererende pop-ups die dienen om abonnees te verzamelen voor de nieuwsbrief of bezoekers verleiden tot het doen van aankopen. Pop-ups kunnen echter voor verschillende doeleinden worden gebruikt. U kunt bijvoorbeeld uw cookies of privacybeleid delen, gerelateerde items aanbevelen nadat bezoekers iets aan de winkelwagen hebben toegevoegd, of hen zelfs vragen om een ​​korte enquête in te vullen.
Als u een pop-upvenster gebruikt, wilt u waarschijnlijk dat bezoekers actie ondernemen. Waarom zou je immers hun ervaring onderbreken als de verstoring geen zinvolle besteding van hun tijd is? Volgens een onderzoek onder bijna twee miljard pop-ups vonden ze het gemiddelde conversiepercentage voor dit soort pop-ups 3,09%.
Nu rijst de vraag: zijn pop-ups nog steeds relevant en effectief? Als de markt zo oververzadigd is met exit-pop-ups, hallo-balken, paginagrote overlays en meer, is dit dan een tool voor het genereren van conversies de moeite waard om te gebruiken op uw WordPress-site?
Natuurlijk !!!
Pop-ups houden rekening met veel goede webdesignpraktijken. Bijvoorbeeld:
- Pop-ups verwijderen onnodige rommel van de pagina's van uw site.
- Ze zijn meestal samengesteld uit schone visuals en minimale tekst.
- De oproepen tot actie zijn goed ontworpen en worden eenvoudigweg aangeboden in termen van bewoordingen.
- Er is een kleine leercurve voor uw bezoekers, aangezien de meeste mensen bekend zijn met pop-ups en weten hoe ze ermee moeten omgaan.
- Pop-ups bieden een leuke mogelijkheid om uw site te voorzien van animaties, video's of social proof.
- Je kunt ze eenvoudig maken met WordPress plugins hoge kwaliteit zoals Hustle of OptinMonster.
Over het algemeen is een goed ontworpen pop-up ideaal om de aandacht van bezoekers te trekken wanneer u deze het meest nodig heeft. U kunt ze gebruiken om tijdige meldingen of verzoeken te verzenden. Je kunt bezoekersgegevens ook gebruiken om ze tot een aankoop te verleiden.
De anatomie van een effectieve WordPress-pop-up
Vanzelfsprekend hangt het succes van de pop-ups van uw WordPress-site af van die perfect zijn ontworpen en zulke aantrekkelijke aanbiedingen hebben dat bezoekers niet anders kunnen dan interactie hebben. Laten we dus eens kijken hoe een winnende formule voor een effectieve pop-up eruitziet.
1. stijl
De verschillende soorten pop-ups zijn meestal efficiënter in het omzetten van bezoekers in abonnees:
- Pop-ups van e-mailabonnementen hebben een conversieratio van 2,9%.
- Welkomstpop-ups (die de volledige pagina vullen bij binnenkomst) converteren met 2,6%.
- Scroll-geactiveerde pop-ups converteren 1,9%.
- Smart- of Hello-pop-ups geven een conversie van 0,5% weer.
Dat betekent niet dat u altijd een traditionele pop-up voor een e-mailabonnement moet gebruiken. Hier is een voorbeeld van de site van Neil Patel.
Deze is goed gedaan, omdat hij eenvoudig is ontworpen, niet opdringerig is, et gebruikt leuke animatie om de aandacht te trekken voor het geval de minimale voetafdruk onopgemerkt blijft. Houd er rekening mee dat het kiezen van een stijl niet gaat over het gebruik van de stijl die het populairst is of die het meest bekend is vanwege de hogere conversieratio's. Het gaat erom een ​​stijl te vinden die werkt voor uw site, uw bezoekers, en die is ontworpen als aanvulling op de ervaring daartussenin.
2. kleur
Kleur zal natuurlijk altijd een grote rol spelen bij het ontwerpen van websites. Door de psychologie achter de door u gekozen kleuren te begrijpen, kunt u effectievere pop-ups maken die converteren. Natuurlijk mag je ook het gevestigde kleurenschema voor je merk niet vergeten, dus het gaat erom een ​​balans te vinden tussen het ontwerpen van een pop-upvenster dat er goed uitziet op de site, maar dat dwingt bezoekers ook om actie te ondernemen.
3. samenstelling
Het is belangrijk om een ​​stapje terug te doen en de pop-up als geheel te zien. Hoewel het ontwerp van elk bewegend onderdeel in de pop-up ertoe doet, net als de algehele samenstelling van de pop-up.
Uw pop-upvenster moet:
- wees eenvoudig en gemakkelijk te volgen.
- Ontworpen met strakke lijnen en goed in balans.
- Voeg relevante afbeeldingen en afbeeldingen met een hoge resolutie toe; idealiter een enkele afbeelding die het onderwerp van de aanbieding samenvat.
- Het lijkt een uitbreiding van uw site en is duidelijk niet gemaakt vanuit een pop-up met beperkte aanpassingsmogelijkheden.
- Gebruik een grote, gemakkelijk te lezen typografie.
4. tekst
Dan hebben we het pop-upbericht. Hoewel u nog niet bezig bent met het ontwikkelen van de taal die in deze dingen wordt gebruikt, zijn er een aantal best practices waarvan u zich bewust moet zijn als het gaat om het vullen van pop-ups met tekst.
Houd rekening met het volgende:
- Voeg altijd een kop, een kort bericht (één zin is voldoende) en een oproep tot actie toe.
- Gebruik krachtige taal die de emoties van bezoekers aanspreekt.
- Wees kort. Als u het niet in minder dan 30 woorden kunt schrijven, hoort dit bericht niet bij een pop-upvenster.
- Gebruik dezelfde toon en persoonlijkheid die u op uw site gebruikt.
- Bied iets waardevols aan dat uw bezoekers niet elders op de site zullen vinden.
- Gebruik indien mogelijk urgentie. Als je het niet met woorden kunt doen, doe het dan met kleur.
5. CTA
Er is tegenwoordig een vreemde groeiende trend waarbij websites bezoekers twee call-to-action-opties bieden. Ik begrijp waarom deze trend groeit, maar ik heb gezien dat het op zoveel websites verkeerd wordt toegepast dat ik hoop dat de trend uiteindelijk zal verdwijnen.
Je hebt deze slechte toepassing waarschijnlijk zelf gezien:
- De positieve optie : Deze zegt: “Oh, bedankt, bedankt! Ik weet dat dit aanbod mijn leven ten goede zal veranderen! "
- De negatieve optie : Deze zegt: "Ik vind het leuk om slechte levenskeuzes te maken en ik waardeer het dat je over mijn gezicht wrijft." Laat me op deze auto-deprecation-optie klikken om een ​​ander venster te krijgen dat me opnieuw vraagt ​​of ik deze vreselijke beslissing wil nemen. "
Dit wil niet zeggen dat alle pop-ups met twee CTA-opties slecht zijn ontworpen of bedoeld om de bezoeker te schamen. Tim Ferris heeft een goed voorbeeld van een goed uitgevoerde dubbele optie CTA:
Over het algemeen zou ik echter zeggen dat als u sarcastisch probeert te zijn of uw bezoekers probeert te intimideren bij hun beslissing, u uw site verlaat en deze op Twitter zet. Je website is daar geen plek voor en Twitter zal het hopelijk volledig opslokken.
Afgezien van deze ergernis over huisdieren, raad ik ook aan om de oproep tot actie eenvoudig te houden. Gebruik eenvoudige taal die duidelijk maakt wat bezoekers krijgen als ze hun e-mailadres invoeren of op de knop klikken. Beperk de taak ook tot een minimum: niet meer dan twee velden om in te vullen (bijv. E-mail en misschien een naam) en één knop om te klikken.
Dat is alles voor deze tutorial, ik hoop dat je hiermee je call-to-action-knoppen goed kunt ontwerpen.
