E-mail CTA-ontwerp: verhoog je click-through rate

Een effectief ontwerp voor de call-to-action in e-mails combineert contrastrijke kleuren, actiegerichte tekst met sterke werkwoorden en robuuste HTML-codering. Dit is essentieel om de aandacht van de lezer te sturen en de click-through rate te maximaliseren. Je kunt de omzet van je e-commerce business niet verhogen als abonnees je campagnes wel openen, maar vervolgens direct langs het belangrijkste aanbod scrollen.

Bij het opzetten van promotionele campagnes bij Flizz beschouwen we de call-to-action als het belangrijkste element op het scherm. De button vormt de brug tussen een incidentele lezer en een betalende klant. Als die brug slecht ontworpen is, keldert de conversie naar nul, ongeacht hoe overtuigend de productfoto's ook zijn.

De visuele hiërarchie van een converterende button

Een primaire call-to-action in een e-mail dient boven de vouw op mobiele apparaten te staan en een contrasterende hex-kleur te hebben die het visuele patroon van de omliggende lay-out doorbreekt.

Wanneer je naar een gemiddelde e-commerce nieuwsbrief kijkt, zoeken je ogen automatisch naar de makkelijkste weg vooruit. Als de achtergrond van een e-mail wit is en de productafbeeldingen gedempte aardetinten bevatten, trekt een felblauwe of dieporanje button direct de aandacht. Lezers willen niet hoeven zoeken naar de volgende stap. Als de belangrijkste actie niet binnen drie seconden duidelijk is, verwijderen ze het bericht.

We raden aan om voldoende witruimte rondom de primaire button te plaatsen. Wanneer je een button omringt met blokken tekst, social media-iconen of secundaire links, ontstaat er visuele ruis. Isolatie zorgt voor focus. Door een button aan alle kanten 30 pixels padding te geven, zorg je ervoor dat deze duidelijk afsteekt tegen de omringende tekst.

Waarom HTML-buttons beter werken dan afbeeldingen

E-mailclients, en dan met name Microsoft Outlook, blokkeren afbeeldingen standaard. Als je call-to-action een afbeelding is, zien veel abonnees een leeg vak in plaats van je aanbod.

We zien deze fout regelmatig bij het auditen van nieuwe e-commerce accounts. Merken huren grafisch ontwerpers in om prachtige e-mails te maken die uit één afbeelding bestaan, waarbij de button direct in het JPEG-bestand is verwerkt. Wanneer de privacyinstellingen van Outlook of Apple Mail die afbeelding blokkeren, lijkt de hele e-mail kapot. De abonnee kan simpelweg niet op de link klikken omdat de button niet bestaat.

Robuuste HTML-buttons laden direct en behouden hun vorm, zelfs als een e-mailclient afbeeldingen standaard blokkeert. Ze vertrouwen op standaard webcode (HTML en CSS) in plaats van gedownloade afbeeldingen.

Door je templates om te zetten naar standaard HTML-buttons stel je de basis van je click-through rate veilig. Je kunt nog steeds gebruikmaken van merkkleuren en afgeronde hoeken, maar de button zelf blijft functioneel onder alle omstandigheden.

Het structureren van primaire en secundaire acties

Eén e-mail zou slechts één primaire call-to-action button moeten bevatten om keuzestress te voorkomen en lezers naar je meest waardevolle aanbod te leiden.

Wanneer een webshop een wekelijkse nieuwsbrief verstuurt, bevat deze meestal meerdere items. Je wilt misschien een nieuw product lanceren, een uitverkoop promoten én een link naar je blog delen. Als je al deze drie links dezelfde grote buttons geeft, raakt de lezer in de war. Als alles belangrijk is, is niets meer belangrijk.

Dit is de volgorde die wij gebruiken om keuzes effectief te structureren:

1. Plaats de actie die de meeste omzet genereert bovenaan de lay-out om lezers te vangen die snel langs je introductie scrollen. We maken hier een HTML-button over de volledige breedte van in de belangrijkste accentkleur van de huisstijl.
2. Formatteer alternatieve productcategorieën als tekstlinks met een standaard onderstreping, zodat ze visueel niet concurreren met de hoofdbutton. Dit geeft geïnteresseerde kopers opties zonder af te leiden van het hoofddoel.
3. Groepeer administratieve links, zoals accountinstellingen of het retourbeleid, strikt in de footer. Klanten weten waar ze moeten zoeken naar supportlinks, dus deze hoeven geen waardevolle ruimte in de header in te nemen.

Als je moeite hebt om deze visuele hiërarchie in je eigen templates door te voeren: ons team van e-mailmarketing specialisten bouwt op maat gecodeerde lay-outs waarin deze regels automatisch worden toegepast.

Touch-targets en plaatsing op mobiel

Bij de e-commerce accounts die we bij Flizz beheren, zien we consequent dat mobiele apparaten verantwoordelijk zijn voor meer dan 60% van de unieke opens. Als je call-to-action niet is ontworpen voor een duim, negeer je feitelijk meer dan de helft van je potentiële kopers.

Veel e-mails die voor desktop zijn ontworpen, schalen proportioneel mee wanneer ze op een telefoon worden bekeken. Een button die er enorm uitziet op een 27-inch monitor, verandert op een mobiel scherm in een minuscuul, onklikbaar streepje. Je kunt niet van een abonnee verwachten dat hij gaat pinchen en zoomen om op een kleine tekstlink te tikken.

"Touch-targets moeten ten minste 44 bij 44 punten zijn om te garanderen dat gebruikers ze nauwkeurig kunnen aantikken op mobiele schermen." — Apple Human Interface Guidelines, 2024

Wij hanteren deze minimale hoogte van 44 pixels voor elke button die we inzetten. Bovendien plaatsen we primaire buttons vaak over de volledige breedte van het mobiele scherm. Een button over de volle breedte stelt zowel links- als rechtshandige gebruikers in staat om comfortabel te klikken zonder hun duimen te forceren.

Frameworks voor call-to-action teksten

Actiegerichte teksten veranderen passieve lezers in actieve kopers. De tekst in je button is net zo belangrijk als de kleur erachter.

De meest gemaakte fout is de generieke button met "Klik hier". "Klik hier" vertelt de lezer welke fysieke beweging hij moet maken, maar zegt niets over de waarde die het oplevert. Wanneer je vage instructies vervangt door specifieke, waardevolle werkwoorden, stijgt de click-through rate.

In een welcome series waarin 10% korting wordt aangeboden, gebruiken we niet "Shop nu", maar "Gebruik je code voor 10% korting". De tweede optie herinnert de abonnee er precies aan waarom hij zou moeten klikken.

In een flow voor een verlaten winkelwagen voelt "Terug naar winkelwagen" als een verplichting. Door de tekst te veranderen in "Stel je artikelen veilig", verschuift de toon van een administratieve taak naar een exclusief voordeel. Houd de tekst kort: streef naar maximaal drie of vier woorden. Als de tekst in de button op een mobiel apparaat over twee regels loopt, is deze te lang.

Prestaties testen en meten

Je kunt het ontwerp van je buttons niet verbeteren als je de resultaten niet bijhoudt. Voordat je ingrijpende wijzigingen doorvoert in je volledige e-mailprogramma, is het raadzaam een gecontroleerde split-test uit te voeren op je flow met het hoogste volume.

Voor webshops genereert de checkout-flow (voor een verlaten winkelwagen) meestal de meeste omzet per ontvanger. In april 2024 testten we voor een klant een standaard button in de huisstijlkleur tegenover een contrastrijk neon-alternatief. We veranderden verder niets aan de e-mail. Omdat we die ene variabele isoleerden, konden we de resulterende stijging in betrokkenheid direct toeschrijven aan de kleurverandering.

Meet bij het testen van button-ontwerpen altijd de click-to-open rate in plaats van de ruwe click-through rate. De click-to-open rate vertelt je hoeveel mensen hebben geklikt nadat ze de e-mail daadwerkelijk hebben gezien. Hiermee isoleer je de prestaties van je button van de prestaties van je onderwerpregel.

Als je meer wilt lezen over hoe wij prestatietests structureren en rapportages voor klanten afhandelen, kun je de antwoorden op veelgestelde vragen over onze diensten bekijken in onze FAQ-sectie.

---

Veelgestelde vragen

Wat is de beste kleur voor een call-to-action in een e-mail?

De beste kleur is de contrastrijke tint die het visuele patroon van jouw specifieke e-mailtemplate doorbreekt. Er is geen universeel perfecte kleur, maar feloranje, groen en blauw presteren doorgaans het best omdat ze goed afsteken tegen standaard witte achtergronden en donkere tekst.

Hoeveel buttons moet ik in een e-commerce e-mail plaatsen?

Gebruik precies één primaire button per e-mail om keuzestress te voorkomen. Als je secundaire acties moet toevoegen, formatteer deze dan als tekstlinks of als kleinere 'ghost buttons' (omlijnd met een transparante achtergrond) onder het hoofdaanbod.

Waarom ziet mijn e-mailbutton er in Outlook niet goed uit?

De button is waarschijnlijk opgebouwd als een afbeelding, en Microsoft Outlook blokkeert het downloaden van afbeeldingen standaard. Om dit op te lossen, moet je de button opnieuw opbouwen met standaard HTML en CSS, waarbij specifiek gebruik wordt gemaakt van Vector Markup Language (VML) voor oudere Outlook-versies.

Hoe lang moet de tekst van mijn call-to-action zijn?

Houd de tekst op je button tussen de twee en vier woorden. De tekst moet kort genoeg zijn om op kleine mobiele schermen op één regel te passen, maar beschrijvend genoeg om de specifieke actie over te brengen, zoals "Claim je korting" in plaats van het generieke "Verzenden".

Waar moet ik de belangrijkste button in mijn e-mail plaatsen?

Plaats je primaire button hoog genoeg in de lay-out zodat deze op mobiele apparaten boven de vouw verschijnt. Lezers zouden niet langs meerdere alinea's en grote sfeerbeelden moeten scrollen om te ontdekken wat je van hen verwacht.

De meest effectieve aanpassing die je vandaag kunt doorvoeren, is het omzetten van je buttons op basis van afbeeldingen naar robuuste HTML met een minimale hoogte van 44 pixels.