Ontwerp de perfecte e-mailtemplate

3 juli 2017

Nieuwsbrieven zijn een goede manier om je doelgroep te bereiken en je verkoop te verhogen. Hierin is het belangrijk dat je qua inhoud waardevol bent voor je abonnees en dat je opvalt in de mailbox. Dit betekent goede inhoud en een perfect ontwerp. In dit blog duik ik in de UX-kant van een e-mailontwerp. Dit gaat namelijk veel verder dan een goede titel en een overzichtelijke opmaak.

1-koloms opmaak
E-mails moeten steeds kleiner worden. E-mailclients, zoals Outlook, maar ook smartphones hebben meer beperkingen dan webbrowsers. Dit betekent dat de gemiddelde nieuwsbrief zelden groter is dan 600px breed. Kijk je naar het aantal kolommen, dan is een 1-koloms opmaak of maximaal 2-koloms aan te raden. Wanneer je nadenkt over de inhoud, kijk dan of je dit kunt samenstellen voor een 1-koloms opmaak, zodat de tekst lekker doorloopt op de pagina en gemakkelijk leest.

   

In het eerste voorbeeld hierboven, zie je een 1-kolomsopmaak. Waar je denkt dat een 1-koloms opmaak saai wordt, blijkt niks minder waar. De schuine hoeken en platte opmaak geven het geheel een modern en lekker leesbaar tintje. Het tweede voorbeeld laat een 2-koloms opmaak zien. Doordat er meerdere producten op dezelfde manier worden weergegeven, leent zich hier een 2-koloms opmaak. Zorg er dan wel voor dat deze opmaak ruim is opgezet en goed responsive is. Bij smallere schermen moet de informatie dan wel mooi onder elkaar klappen.

Zorg voor een sterke call-to-action
Wanneer je wilt dat je nieuwsbrief converteert, bijvoorbeeld doordat een bezoeker naar je website gaat of een aankoop doet, heb je een sterke call-to-action (CTA) nodig.
Een CTA is een button die een gebruiker aanmoedigt om te klikken. Deze button linkt mensen door naar je website of bijvoorbeeld een download- of bestellink. Wat voor een e-mail je ook stuurt, als het goed is heeft deze altijd een doel en wil je dat de gebruiker, naar aanleiding van je e-mail, iets doet.

Hieronder zie je een e-mail met een duidelijke CTA; Stuur $100. In dit geval om je vrienden $100 korting te geven op hun bestellingen bij Postmates. Besteed aandacht aan de tekst in je CTA. Zorg dat je een korte omschrijving gebruikt (maximaal 5 woorden), dat duidelijk is wat de button doet en dat men aangespoord wordt om dit nu te doen. Nog een mooi voorbeeld: na het zien van de mailing van American Airlines weet je ook precies waar je moet klikken om in te checken.

   

Informatie boven de vouw
Websites en smartphones kennen een zogeheten vouw. Dit is het bovenste gedeelte van je scherm en is het eerste dat men ziet. Informatie onder de vouw kan uit beeld verdwijnen en niet gezien worden door de gebruiker. Zet belangrijke content, of afbeeldingen die de aandacht trekken, altijd bovenaan. Dat haalt de gebruiker over om door te lezen en door te scrollen naar beneden.

Grid
Als je veel nieuwsbrieven ontvangt herken je terugkerende elementen. E-mails zijn vaak opgemaakt in vaste grids (roosters). Dit zorgt namelijk voor herkenbaarheid en biedt een snelle manier van werken; het wiel hoeft niet constant opnieuw te worden uitgevonden. Door de herkenbaarheid in je e-mailings door te voeren, kan een gebruiker de mailing snel scannen en de relevante informatie er gemakkelijk uithalen. Zie bijvoorbeeld deze e-mail van Google:

Door gebruik te maken van een grid probeer je de aandacht te pakken en het doel van je nieuwsbrief te verduidelijken. Combineer dit met een sterke opmaak (goed ontworpen en het liefst in 1 kolom) en een goede call-to-action. J hebt dan de basis voor een goede e-mailing.

Dit blog verscheen eerst op Designmodo


Comments

  1. Buy proxies - 8 april 2018 at 10:25 -

    For most recent information you have to go to see the web and on internet I found this website as a finest
    site for newest updates.

  2. site - 8 april 2018 at 07:16 -

    I was more than happy to find this great site.

    I want to to thank you for ones time due to this wonderful
    read!! I definitely really liked every little bit
    of it and i also have you book marked to see new things on your web site.|

  3. local seo company brooklyn - 8 april 2018 at 03:37 -

    Hello! I know this is somewhat off topic but I
    was wondering if you knew where I could locate a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  4. get followers on Instagram - 7 april 2018 at 05:37 -

    Hey There. I discovered your blog using msn. That is a very neatly written article.
    I’ll be sure to bookmark it and come back to learn more
    of your helpful information. Thanks for the post.
    I will definitely comeback.

  5. ECom Success Academy 2018 Review - 6 april 2018 at 19:56 -

    The eCom Success Academy is in its matchless league.

  6. Forex Master Method Evolution Review - 5 april 2018 at 22:38 -

    Forex Master method is launching on twenty seventh March
    2018.

  7. Hindi Mp3 Songs - 5 april 2018 at 22:33 -

    naturally like your web site however you need to test the spelling on quite a
    few of your posts. Several of them are rife with spelling problems and I in finding it very troublesome to inform the truth
    then again I will definitely come back again.

  8. 123movies.one - 5 april 2018 at 16:10 -

    Its like you read my mind! You seem to know a lot about this,
    like you wrote the book in it or something. I think that
    you could do with a few pics to drive the message home a little
    bit, but instead of that, this is excellent blog.
    A great read. I’ll definitely be back.

  9. услуги разнорабочих - 5 april 2018 at 03:26 -

    Excellent post. I used to be checking continuously this blog and I am inspired!
    Very useful info specially the closing phase 🙂 I care for such info
    much. I used to be looking for this certain info for a very lengthy time.
    Thanks and best of luck. http://www.jobref.at/node/24170