De e-mail nieuwsbrief is een belangrijk online marketingmiddel. Vanuit ontwerpersperspectief is het de uitdaging om de nieuwsbrief elke keer weer zo aantrekkelijk mogelijk te maken. In mijn vorige artikel ging ik in op het optimaal bereik. In dit artikel tips voor het optimaliseren van het ontwerp van de e-mailnieuwsbrief.
In de afbeelding hieronder vind je een schets van hoe de ideale nieuwsbrief opgebouwd is. Tips per onderdeel worden hieronder besproken.

Figuur 1. De e-mailnieuwsbrief
1.Linker bovenhoek: bevat de belangrijkste call for action
De linker bovenhoek is het belangrijkste gedeelte van de nieuwsbrief. Dit is wat de ontvanger als eerste onder ogen krijgt. Dit geldt vooral voor zakelijke ontvangers, aangezien Outlook-gebruikers vaak een leesvenster rechts of beneden in beeld zien. Plaats daarom de belangrijkste call for action in de eerste 10 centimeter (±380 pixels) van de linker bovenhoek. Lees hierover en over hoe om te gaan met de header, pre-header, onderwerp, afzender en linker bovenhoek in mijn vorige artikel.
2.Banner header: plaats sitenavigatie
Overweeg om het logo en de navigatie in de e-mail op te nemen. Hiermee bied je lezers de mogelijkheid meer over jouw bedrijf te ontdekken dan alleen de content in de mail. Neem niet zomaar de navigatie van de site over, maar plaats alleen items die relevant voor de lezer zijn. Zo triggert een ‘Alle aanbiedingen’ wel, maar ‘Over ons’ minder. Het voorbeeld hieronder van Sjopze.nl speelt hier goed op in door alleen triggerende navigatie-items zoals ‘Aanbiedingen’ en ‘kortingscodes’ te presenteren.

Figuur 2. Sjopze nieuwsbrief met triggerende navigatie en goed onderwerp
3.Het content gedeelte: tips
Schrijf tekst kort en bondig
Een lezer scant een e-mailnieuwsbrief gemiddeld 51 seconden. Maak daarom de tekst zo kort en scanbaar mogelijk door gebruik te maken van:
- Bullets met maximaal 1 regel tekst erachter
- Nummers en tekens (niet voluit geschreven: € is veel beter scanbaar dan ‘euro’)
- Vetgedrukte tekst voor de belangrijkste boodschap
- Links en ‘call for action’-buttons (gebruik geen ‘klik hier’ of ‘lees meer’, maar veelzeggende teksten als ‘bekijk de aanbiedingen’)
- 1 onderwerp per paragraaf (noem het onderwerp in de eerste zin)
- Een samenvatting van maximaal 25 woorden bovenaan de e-mail
- Een maximale breedte van 500 a 600 pixels, om horizontaal scrollen te vermijden
- Afbeeldingen. Ook deze versterken de focus van de lezer: de tekst naast een afbeelding wordt meer gelezen.
- Vergeet ook niet dat veel gebruikers de mail op een mobiele telefoon bekijken. Het eerste mobiele scherm toont gemiddeld 100 karakters, ongeveer 20 tot 25 woorden.
Vermijd het gebruik van rich media of formulieren
Houd de opmaak zo simpel mogelijk. Gebruik geen rich media of formulieren, omdat deze geblokkeerd kunnen worden door mailservers. Wil je wel rich media of formulieren gebruiken, plaats dan een preview in de mail en een link naar de site.
Laat de vormgeving aansluiten bij die van de site
Gebruik voor herkenning en consistentie na het doorlinken herkenbare visuele elementen uit je website, overeenkomstig met de merkwaarden.
Het gebruik van afbeeldingen
Afbeeldingen worden veelal gebruikt om de nieuwsbrief een aantrekkelijkere uitstraling te geven. Sommige nieuwsbrieven hebben de gehele content in een afbeelding staan. Een groot probleem bij het gebruik van afbeeldingen is echter dat mailservers afbeeldingen standaard kunnen blokkeren. In plaats van de afbeelding staat er een kruis. Enkele tips om slim om te gaan met afbeeldingen:
- Gebruik afbeeldingen ter ondersteuning van de content en niet als basis. De hele nieuwsbrief moet te begrijpen zijn zonder de afbeeldingen
- Zorg voor goede alt-teksten als compensatie voor geblokkeerde afbeeldingen
- Voeg in de code van afbeeldingen de hoogte en breedte toe, zodat de lay-out van de e-mail niet verandert bij blokkering van afbeeldingen

Figuur 3. Geblokkeerde afbeeldingen zorgen ervoor dat de boodschap van de Skype-mail in eerste instantie niet overkomt.
De opmaak van het contentgedeelte
Voor de opmaak van het contentgebied zijn meerdere mogelijkheden. Zorg er in ieder geval voor dat de e-mail start met een samenvatting in maximaal 25 woorden. Hierop baseert de lezer of hij verder leest of niet.
KPN varieert in de opmaak van haar nieuwsbrieven: van tekstueel tot visueel. Door niet steeds voor dezelfde opmaak te kiezen, trekt een mail weer opnieuw de aandacht van zijn lezer.

Figuur 4. KPN varieert in de opmaak, afhankelijk van het doel van de e-mail: informatief, verkoopgericht of loyaliteitgericht.

Figuur 5. NS: informatieve manier van presenteren.
De NS stuurt een e-mail die er nogal informatief uit ziet, terwijl deze wel acties bevat. ‘Lees meer’ als tekst op de knoppen helpt niet bij het versterken van de boodschap. Content naast de afbeeldingen plaatsen helpt wel om de aandacht naar de titels te trekken.

Figuur 6. Neiman Marcus speelt helemaal in op 'hurry up marketing' en exclusiviteit voor de lezer.
Het voorbeeld van Neiman Marcus is helemaal gericht op conversie. Door de actie als exclusief te bestempelen en door de tikkende klok, weet de lezer dat hij snel tot actie over moet gaan. Bij deze actie bestaat echter het gevaar dat het gehele bericht niet zichtbaar is doordat de afbeelding geblokkeerd wordt. Nieuwe abonnees zullen dus slechts een kruis te zien krijgen in hun e-mail. Abonnees die jouw bedrijf als ‘veilige afzender’ hebben bestempeld, krijgen wel direct de afbeelding te zien. Je zou dus kunnen overwegen om twee versies van je e-mailnieuwsbrief te verzenden.
4.Aanhef en sign off : persoonlijk
Maak de e-mail zo persoonlijk mogelijk. Dit kan door de naam van de ontvanger in de aanhef te gebruiken. En door een persoonlijke sign off the plaatsen. De sign off is de afsluiting van de e-mail. Herhaal hier de call for action en maak duidelijk van wie de mail komt, het liefst persoonlijk ondertekend.

Figuur 7. Persoonlijk ondertekende sign off van Crutchfield en een e-mailadres van de oprichter van Trendwatching.
5.De footer: adres en uitschrijfopties
Geef het fysieke adres van je bedrijf weer. Dit toont aan dat het om een ‘echt’ bedrijf gaat, waar je bij problemen ook mensen te spreken krijgt. Plaats een link waarmee de lezer zich kan uitschrijven. Bied naast uitschrijven de optie om een e-mailadres en de voorkeuren van de ontvanger aan te passen. Als de gebruiker slechts iets aan zijn instellingen wil veranderen of niet zo vaak een e-mail wil ontvangen, verlies je zonder deze optie de lezer. Een andere optie is het bieden van een pauze-optie. Steven Fockema Andreae schrijft hierover in zijn artikel. Dit biedt de gebruiker de optie om geen nieuwsbrieven tijdens zijn vakantie te krijgen of juist alleen wintersportnieuwsbrieven te ontvangen in de maanden voor het wintersportseizoen.
In de footer kunnen ook functionaliteiten als ‘share with friends’, ‘follow us on twitter’ of ‘become our fan on facebook’ opgenomen worden.

Figuur 8. Persoonlijke sign off en footer met opties om e-mailadres aan te passen of uit te schrijven.
Tot slot
Gebruik deze tips om het ontwerp van je e-mailnieuwsbrief te optimaliseren. Onderzoek daarnaast welke mailservers het meest gebruikt worden door jouw abonnees en optimaliseer de nieuwsbrief hiervoor. De e-mail staat zeker niet op zich. De landingspagina waar de gebruiker na doorklik op terechtkomt, moet goed aansluiten bij je nieuwsbrief. En uiteindelijk gaat het natuurlijk om de conversie. Meet waar de bezoekers (mogelijk) uitvallen. Als je weet waar de flow niet goed loopt, kun je in een usability-test uitzoeken waarom het daar fout gaat.











Goeie tips. Ik mis alleen een tip over de ideale lengte en frequentie van een nieuwsbrief. Zelf houd ik max 5 items aan, maar zie ook regelmatig naar mijn smaak veel te lange nieuwsbrieven.
Nog een aanvulling: stop altijd iets *onverwachts* in de nieuwsbrief.
Goedemorgen!
De frequentie valt niet echt onder het ontwerp.
Wat ik wel mis:
- het benadrukken van een goede visuele hiërarchie
- het is goed om dezelfde stijl als de website te gebruiken, echter mag het absoluut geen kopie worden (gebeurt vaak!)
- voldoende gebruik witruimte (vind ik het belangrijkste ontwerp-aspect)
- de waarde van een vreselijk goede onderwerpregel
- geplaatste content is voorzien van een eigen visie op het onderwerp (hoeft niet altijd).
- het gebruik van alt/title tags. Zeker met het blokkeren van plaatjes door diverse e-mailclients is dit aan te raden.
Verder een prima artikel! Goed leesvoer zo op de vroege morgen!
Misschien wel een leuke om over na te denken:
Zet je je afmeld link onderin, omdat je eigenlijk niet wilt dat mensen zich afmelden.
of…
Zet je je afmeld link bovenin, omdat je niet wilt dat mensen je nieuwsbrief als spam/ongewenst markeren (ze moeten namelijk naar beneden scrollen om af te melden)
Opt in/out informatie moet gewoon makkelijk en duidelijk te benaderen zijn.
@Wilbert
“Zet je je afmeld link onderin, omdat je eigenlijk niet wilt dat mensen zich afmelden.”
Ik denk dat veel mensen de afmeld link onderin plaatsen, omdat dat de plaats is waar mensen de afmeld link verwachten. Daarom komt het ook steeds vaker voor dat men zowel bovenin als onderin een afmeldlink plaatst, en een list-unsubscribe header toevoegt.
@Michel H
Beide is ook een optie idd.
@Joke Een te lange nieuwsbrief is natuurlijk nooit goed, maar wanneer het niet anders kan kun je altijd anchorlinks gebruiken in een soort van inhoudsopgave.
Het is ook verstandig om een split-test uit te voeren (indien mogelijk) zo kun je zelf onderzoeken welke nieuwsbrieven het meeste succes hebben!
Leuk artikel!
Een wireframe is zeker een belangrijk aspect, dat niet vergeten mag worden bij het beginnen of optimaliseren van e-mail marketing. Heel goed artikel om het op deze manier te bespreken, kan eigenlijk maar 1 aanvulling geven en dat is dat je niet moet vergeten om de call-to-action ook met alleen tekst te vullen. Als button (is vaak een plaatjes) niet goed wordt geladen door de mailclient, verwdijnt de call to action. (Sluit een beetje aan op de reactie van Remco).
Je kan allerlei meningen hebben over de indelingen van de contentblokken. Niet relevant, alle belangrijke onderdelen zitten er in. Op basis van de (communicatie)doelstellingen en KPI’s wordt de indeling gemaakt. @Joke : Als je ellenlange nieuwsbrieven sturen wilt voorkomen, moet je de profielen gaan verrijken voor gediffrentieerde content of je frequentie gaan verhogen met relefvante content, is mijn mening. Groeten!
Erg ingewikkeld allemaal. Schieten we niet erg ver door met email communicatie? Neem als uitgangspunt een email die je naar een collega of relatie stuurt, deze wordt (bijna) altijd geopend. Waarom? Hij/zij heeft het idee dat dit bericht voor hem/haar is. Met andere woorden; kort en bondig met een uitnodiging tot actie, 1 onderwerp per keer en zo vaak mailen, desnoods 5x per dag, als je maar relevant bent.
Geweldig verhaal Anne-Roos, ben al een tijdje bezig om een nieuwsbrief te ontwikkelen voor ‘de Grote Optimist’. Contextuele waarde en ervaring over ‘personal branding’ is aanwezig, het concept staat als een huis en de cartoons en de blog slaan aan. Maar, dit alles gieten in een juiste nieuwsbrief is een grote uitdaging omdat ik mijn bezoekers gewoon niet wil teleurstellen. Het verwachtingspatroon is hoog, juist daarom moet de nieuwsbrief gelijk goed en keurig opgesteld zijn. Dit artikel van jou is inspirerend en erg waardevol.
Interessant verhaal, Anne-Roos.
Wij hebben bij onze laatste campagne ook getest met mailings. We hebben gekeken of video (in de vorm van animated gifs) het beter doet dan een afbeelding in een mailing. Op landingspagina’s werkt video vaak goed, maar uiteindelijk was het toch de statische afbeelding met de hoogste openingsratio en CTR.
Vraagje: hebben jullie al wel eens een usability test gedaan met een nieuwsbrief? Scannen mensen een nieuwsbrief op dezelfde wijze als website? Of zijn er duidelijke verschillen? Lijkt me namelijk zeer relevant voor de indeling.
Groet Evert
@Remco. Goede toevoeging! De onderwerpregel is van ontzettend groot belang, zie ook mijn vorige artikel over het bereik van e-mail nieuwsbrieven.
@Michel H. Helemaal mee eens; plaats in ieder geval de afmeldlink helemaal onderin, omdat lezers het daar verwachten. Bovenin plaatsen waar het meer aandacht trekt, kan de ook geruststellend werken. Het is dus eenvoudig om me weer uit te schrijven, dus ik ik kan de nieuwsbrief nog wel even door laten lopen.
@Evert. Mooi inzicht uit jullie test. Blijkt dus dat e-mail nieuwsbrieven vooral plain moeten blijven.
Wij hebben zeker meerdere usability tests op nieuwsbrieven gedaan. Het scannen van een e-mail gebeurt redelijk overeenkomstig aan het scannen van een website. Alleen zal dit vooral op het preview pane (=het gedeelte wat in het leesvenster zichtbaar is) of het bovenstuk van de e-mail gebeuren. Maar vergelijkbaar aan het observeren van een webpagina; afbeeldingen (indien ze geladen zijn) vallen op, net als de tekst naast een afbeelding of links en knoppen. Wat ook van groot belang bleek te zijn was de flow vanuit de nieuwsbrief naar de landingspagina. Als dit niet soepel aansluit (bijvoorbeeld door doorlink naar een overzichtspagina in plaats van de verwachte productpagina), zorgt dit snel voor verwarring en dus voor conversieverlies.
[...] te gaan aanschaffen. Het opmaken van een nieuwsbrief gericht op conversie is erg belangrijk. Op Frankwatching.com staat een interessant artikel [...]
Wat is de gemiddelde afmeld ratio? Weet iemand dit toevallig?
Alvast bedankt. Groet, Sophie
Ik zou zo graag zo’n nieuwsbrief ergens in html kunnen vinden zodat ik deze makkelijk kan integreren. Zou dit ergens te vinden zijn (zelf gezocht maar niet gevonden)?