Checklist voor optimaal ontwerp van de e-mailnieuwsbrief

17

Door van Jungle Minds

Print

op dinsdag 3 augustus 2010 om 08:00 uur

thumbnailDe 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-mail nieuwsbrief

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

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

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 mail; informatief, verkoopgericht en loyaliteitgericht

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

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

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-mail adres van de oprichter van Trendwatching

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

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.

De e-mail nieuwsbrief is een belangrijk online marketingmiddel. Vanuit ontwerpers perspectief 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-mail nieuwsbrief.
In de afbeelding hieronder vind je een schets van hoe de ideale nieuwsbrief opgebouwd is. Tips per onderdeel worden hieronder besprok

Anne-Roos HassingAnne-Roos Hassing werkt als Interactie Ontwerper bij internet advies bureau Jungle Minds. Hier houdt zij zich bezig met de interactie tussen gebruiker en website, gebaseerd op inzichten behaald uit usability tests. Zij studeerde Design for Interaction aan de TU Delft.

Meer over deze auteur: profiel, website

  1. Joke op 3 augustus 2010 om 08:49 uur

    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.

  2. Evert Albers van streeff.nl op 3 augustus 2010 om 09:42 uur

    Nog een aanvulling: stop altijd iets *onverwachts* in de nieuwsbrief.

  3. Remco de Vries van telfort.nl op 3 augustus 2010 om 09:44 uur

    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!

  4. Wilbert van createaclang.com op 3 augustus 2010 om 10:25 uur

    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)

  5. Remco de Vries van telfort.nl op 3 augustus 2010 om 10:53 uur

    Opt in/out informatie moet gewoon makkelijk en duidelijk te benaderen zijn.

  6. Michel H op 3 augustus 2010 om 11:04 uur

    @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.

  7. Wilbert van createaclang.com op 3 augustus 2010 om 11:30 uur

    @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.

  8. Michael van youbedo.com op 3 augustus 2010 om 12:43 uur

    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!

  9. Riny Groeneveld van yourzine.nl op 3 augustus 2010 om 15:27 uur

    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!

  10. Hans de Ligt van startdedialoog.nl op 5 augustus 2010 om 09:41 uur

    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.

  11. Pascal Waanders van degroteoptimist.nl op 5 augustus 2010 om 15:33 uur

    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.

  12. Evert Littooy van op 8 augustus 2010 om 12:39 uur

    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

  13. Anne-Roos Hassing
    Anne-Roos Hassing van jungleminds.nl op 9 augustus 2010 om 11:48 uur

    @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.

  14. Anne-Roos Hassing
    Anne-Roos Hassing van jungleminds.nl op 9 augustus 2010 om 13:09 uur

    @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.

  15. Optimaal ontwerp van je e-mailnieuwsbrief | Geld Verdienen op Internet van geldverdienenblog.nl op 11 augustus 2010 om 19:15 uur

    [...] te gaan aanschaffen. Het opmaken van een nieuwsbrief gericht op conversie is erg belangrijk. Op Frankwatching.com staat een interessant artikel [...]

  16. Sophie op 28 december 2010 om 15:34 uur

    Wat is de gemiddelde afmeld ratio? Weet iemand dit toevallig?
    Alvast bedankt. Groet, Sophie

  17. Marco van op 6 juli 2011 om 16:03 uur

    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)?

Schrijf een reactie


Opmaak uitschakelen