Betreffzeile – Vorgehensweise beim E-Mail-Design

Ein erheblicher Prozentsatz der Verbraucher – 99 % – überprüft täglich ihre E-Mails. Einige Bevölkerungsgruppen, einschließlich Millennials, bevorzugen die E-Mail-Kommunikation von Unternehmen gegenüber anderen Kommunikationsformen wie Telefonanrufen oder Textnachrichten. Und mit mehr als 5 Milliarden aktiven E-Mail-Konten auf der ganzen Welt ist E-Mail ein wesentlicher Bestandteil jeder Strategie für digitale Produkte.

Während Marketingfachleuten Tausende von E-Mail-Vorlagendesigns zur Verfügung stehen, ist E-Mail-Design ein wichtiges Fachgebiet für Webdesigner. Dies gilt insbesondere für diejenigen, die mit größeren Marken, Kreativunternehmen und anderen zusammenarbeiten möchten, die vor Vorlagen zurückschrecken.

Es gibt mehrere Dinge, die Designer beim Entwerfen von E-Mails beachten sollten, von den Einschränkungen der meisten E-Mail-Plattformen (mit eingeschränkter Unterstützung für Dinge wie Webfonts von einer der größten – Gmail) bis hin zu dem, was Verbraucher erwarten, wenn sie eine E-Mail von a öffnen Unternehmen, mit denen sie möglicherweise bereits Geschäfte tätigen.

Die Bedeutung des mobilen E-Mail-Designs

Da mittlerweile mindestens die Hälfte aller E-Mails auf Mobilgeräten geöffnet und gelesen werden, ist es für Designer unverantwortlich, mobilfreundliche E-Mail-Designs zu ignorieren. Vor allem wenn man bedenkt, dass mobile E-Mail-Konversionsraten in der Regel deutlich höher sind als Desktop-Raten.

Dieses mobile E-Mail-Design von PiperJaffray hält die Dinge einfach und elegant. Es ist auf einem Mobilgerät einfach zu lesen, mit sauberen Links und dezentem Branding. Es stellt die Bedürfnisse des Benutzers in den Vordergrund und verbessert die allgemeine Benutzererfahrung und Wahrnehmung des Unternehmens.

Dribbble hält seine „Popular Shots“-E-Mail auf den Punkt und konzentriert sich ganz auf den Inhalt. Dieser Fokus macht die E-Mail auf mobilen Geräten einfach zu navigieren. Während ein einfaches Layout, das sich auf den Inhalt konzentriert, eine gute Idee für viele Arten von E-Mails ist, eignet es sich besonders gut für mobile E-Mails, wo es sowohl das Konsumieren des Inhalts als auch die Interaktion mit ihm erleichtert.

Konzentration auf Inhalte

Als Best Practice sollten sich Designer beim Entwerfen von E-Mails oder anderen digitalen Produkten immer auf den Inhalt konzentrieren. Einige E-Mail-Designs treiben diese Best Practice mit minimalistischem Design, bei dem der Inhalt das Design ist , auf die Spitze.

Bei der Arbeit an den meisten E-Mail-Designs profitieren Designer davon, dass zuerst der Inhalt erstellt wird, bevor sie sich mit dem Design befassen. Gerade bei minimalistischen Designs ist es jedoch noch wichtiger zu wissen, was der Inhalt im Voraus sein wird.

Marvel legt den Fokus mit einem minimalistischen Design direkt auf den Inhalt. Der weiße Hintergrund und Bilder, die nur den Text auf der Seite unterstützen, heben den Inhalt wirklich hervor.

Alle E-Mails von Unsplash konzentrieren sich direkt auf die Bilder, die sie bewerben. Die Schaltfläche „Sammlung anzeigen“ und die Einblendung am unteren Rand der Bilder können die Klickrate auf die Website erhöhen, da die Benutzer mehr sehen möchten.

Branding stärken

Wenn ein Besucher auf eine Website gelangt, ist dies (idealerweise) ein immersives Branding-Erlebnis. Alles steht unter der Kontrolle des Designers der Website. Aber E-Mail-Design ist anders. Der Benutzer sieht sich die E-Mails in einer anderen App an, und nicht alle E-Mail-Apps geben alle E-Mails gleichermaßen wieder.

Aus diesem Grund ist das Branding in E-Mail-Designs entscheidend, um das richtige Erlebnis für den Benutzer zu schaffen, der die E-Mail liest. Das Branding muss jedoch oft einfach gehalten werden, um auf verschiedenen Geräten und E-Mail-Clients effektiv für den höchsten Prozentsatz von Benutzern wiedergegeben zu werden.

Ein einfaches Logo oben in der E-Mail, die Verwendung derselben Header-Bilder über mehrere Bilder hinweg und die Beibehaltung möglichst vieler Elemente, die mit den anderen digitalen Produkten der Marke übereinstimmen, tragen wesentlich dazu bei, die Wahrnehmung der Marke gegenüber den Verbrauchern zu unterstützen und zu stärken.

Das Branding von Everlane ist in seinen E-Mails und auf der Website von Natur aus einfach. Ihr Logo, das prominent oben in dieser E-Mail angezeigt wird, verstärkt dieses Branding.

Das Middle Finger Project verwendet ein konsistentes Header-Bild für alle seine E-Mails, zusammen mit der leuchtend violetten Akzentfarbe. Dadurch sind ihre E-Mails für jeden Abonnenten sofort erkennbar und das Branding wird auf der Website fortgeführt.

Aufmerksamkeit erregen mit Farbe

Farbe hat einen starken Einfluss auf den menschlichen Geist, mit der Fähigkeit, Emotionen, Wahrnehmungen und sogar das Verhalten zu beeinflussen. Der effektive Einsatz von Farbe in E-Mails kann die Klick- und Konversionsraten erhöhen. In einigen Tests kann der Unterschied in der Farbe der Schaltflächen einen Unterschied von mehr als 20 % bei den Conversion-Raten ausmachen.

Aber nicht nur Calls-to-Action profitieren von der Verwendung von Farbe. Das Erstellen einer farbenfrohen E-Mail kann von den Erwartungen abweichen und ein völlig anderes Erscheinungsbild als andere E-Mails im Posteingang einer Person erzeugen.

Die Aufmerksamkeit auf ein Verkaufsbanner mit leuchtendem Rot zu lenken, erinnert an echte Verkaufsschilder, die oft auch in derselben Farbe ausgeführt werden. Das Auge des Lesers wird sofort von Rot angezogen.

Article, eine skandinavische E-Commerce-Website für Möbel, verwendet ein gedecktes Farbschema aus Rot und Grün, wobei das Rot die Aufmerksamkeit auf den wichtigsten Teil lenkt – den Call-to-Action-Button für den Verkauf.

Während einige E-Mail-Designs Farbe verwenden, um die Aufmerksamkeit auf einen bestimmten Teil des Inhalts zu lenken, verwendet diese E-Mail vom Houston Zoo leuchtende Farben, um ein lustiges und energiegeladenes Design zu schaffen. Die leuchtende Farbgebung in Orange und Pink fällt sofort ins Auge und zieht den Leser in seinen Bann.

Beeindruckende Bilder verwenden

Menschen sind visuelle Wesen und beeindruckende Bilder können eine E-Mail hervorheben und die Aufmerksamkeit des Lesers auf sich ziehen. Bilder können auch die Botschaft der E-Mail und die Marke des Unternehmens verstärken.

Fernsehsendungen scheinen in der Kategorie „atemberaubende Bilder“ einen Vorteil zu haben, da diese Netflix-E-Mail ein lebendiges, aber mysteriöses Standbild aus Stranger Things verwendet. Die Kombination des auffälligen Bildes mit dem „Play“-Call-to-Action direkt darunter ist aus UX-Perspektive sinnvoll, da es für die Leser einfach ist, die beworbene Show sofort anzusehen.

Atemberaubende Bilder sind nicht nur auf Fotos beschränkt. Ein Cartoon oder eine Illustration, wie sie WePresent in seinen E-Mails verwendet, ist genauso auffällig wie ein Foto und kann dazu beitragen, die Leser in den Inhalt zu ziehen.

Diese Deadliest Catch -E-Mail, die für die Dokumentationsserie Discovery Channel wirbt, zeigt ein atemberaubendes Header-Bild, das sich in den darunter liegenden Inhalt einfügt. Dies ist eine nützliche Technik, die den Betrachter zum Weiterlesen animiert.

Experimentieren mit unkonventionellen Layouts

Viele E-Mail-Designs haben ein ziemliches Standardformat: Kopfzeile oben, einspaltiger Inhalt, mit Handlungsaufforderungen oben und unten. Aber es gibt keine Regel, die besagt, dass Designer diesem bestimmten Muster folgen müssen.

Unkonventionelle Layouts sind eine großartige Möglichkeit, die Aufmerksamkeit des Lesers zu erregen und ihn dazu zu bringen, den Inhalt zu lesen. Es gibt eine Vielzahl von Möglichkeiten, ungewöhnliche Designs zu erstellen. Eine beliebte Methode ist die Verwendung von Bildern zum Erstellen von E-Mail-Layouts, die nicht unbedingt mit vielen E-Mail-Plattformen kompatibel wären.

Unkonventionelle Grundrisse müssen nicht unbedingt von der Wand fallen. Dieses von Mailchimp verwendet ein zweispaltiges Design, wobei eine Spalte von Farbblöcken eingenommen wird. Was es unvergesslich macht, ist, dass es optisch ansprechend und unerwartet ist.

Die Verwendung von Bildern ermöglicht unerwartetere E-Mail-Layouts wie dieses für KLM. Designer müssen nur bedenken, dass einige E-Mail-Clients das automatische Laden von Bildern immer noch blockieren, was es notwendig macht, Fallback-Text zu haben, der immer noch den Kern der Nachricht vermittelt.

Arbeiten mit Schriftarten

Die meisten gängigen E-Mail-Clients unterstützen Webfonts, aber leider nicht alle – Gmail ist die bemerkenswerteste Ausnahme (obwohl Gmail Roboto und Google Sans als Teil der Gmail-Oberfläche unterstützt). Designer können jedoch weiterhin Webfonts verwenden, solange sie bedenken, dass eine große Anzahl von E-Mail-Clients Fallback-Fonts verwenden.

Die Alternative zur Verwendung von Webfonts ist natürlich die Verwendung von Bildern, die die Schriftarten enthalten. Viele E-Mail-Designer entscheiden sich dafür, insbesondere in Kopfzeilen, in denen Fallback-Schriftarten wahrscheinlich fehl am Platz aussehen würden.

Dieser FabFitFun-Newsletter verwendet eine lustige Schreibschrift, um die Aufmerksamkeit auf den Inhalt zu lenken, und kombiniert ihn mit einer gut lesbaren serifenlosen Schrift. Das Experimentieren mit Schriftkombinationen in E-Mail-Designs ist eine großartige Idee und kann sogar als Testlauf verwendet werden, bevor Sie Schriftarten auf einer Website ändern oder sie in anderen Markenmaterialien verwenden.

Sickbubble verwendet eine Vielzahl von Schriftarten in ihrem E-Mail-Design, was schwierig sein kann. Aber in diesem Fall funktioniert es, weil sie jeden Abschnitt voneinander trennen. Die Anzeigeschrift in der Kopfzeile fühlt sich sehr kantig an, während der Haupttext eine leicht lesbare serifenlose Schrift ist. Die handgeschriebenen Schriftarten im Produkt-Werbebereich funktionieren, da sie vom Text der E-Mail abgesetzt sind.

Spaß mit Animationen

Animationen verleihen E-Mails zusätzliches visuelles Interesse und ziehen sofort die Aufmerksamkeit des Lesers auf sich. Animierte GIFs sind eine beliebte Wahl, um E-Mails Bewegung hinzuzufügen und werden von den meisten E-Mail-Clients unterstützt.

Designer sollten beim Einbetten von Animationen unbedingt die Dateigrößen im Auge behalten, da so viele Menschen E-Mails auf mobilen Geräten lesen. Sie sollten auch darauf achten, dass die Animationen den Inhalt unterstützen und nicht nur Füllmaterial sind.

Die Verwendung von animierten GIFs, um einen Punkt zu verdeutlichen oder den auf unterhaltsame Weise präsentierten Inhalt besser zu veranschaulichen, ist eine fantastische Ergänzung zu einem E-Mail-Design, wie in diesem E-Mail-Beispiel von Product Hunt.

The Hustle verwendet in seinen E-Mails ein animiertes GIF, um sowohl den Sinn der Nachricht zu veranschaulichen als auch einem ansonsten minimalistischen E-Mail-Design visuelles Interesse zu verleihen.

Aufrufe zum Handeln

Der Call-to-Action ist wohl der wichtigste Teil fast jeder E-Mail, die ein Unternehmen versendet. Die meisten E-Mails werden gesendet, um eine Aktion zu veranlassen, unabhängig davon, ob es sich bei dieser Aktion um das Lesen eines Artikels, den Kauf eines Produkts oder die Ausführung eines anderen Verhaltens handelt.

Designer sind gut bedient, wenn sie dem Design ihrer Calls-to-Action große Aufmerksamkeit schenken und A/B-Tests an ihnen durchführen, um sicherzustellen, dass sie für die Leistung optimiert sind.

Die Verwendung einer hellen Farbe für den Aufruf zum Handeln, wie es Litmus hier getan hat, hebt ihn vom Rest des Inhalts ab. Designer sollten in Erwägung ziehen, mit verschiedenen Farben zu experimentieren, um herauszufinden, welche für ihr Publikum am besten geeignet sind, indem sie beim Versenden von E-Mail-Kampagnen A/B-Tests durchführen.

Die Verwendung einer Farbe, die sich völlig vom restlichen Inhalt einer E-Mail für den Call-to-Action unterscheidet, hebt sie hervor. Da das Limonengrün in der E-Mail von Campaign Monitor eine geteilte Komplementärfarbe zum Violett ist, aus dem der Hintergrund besteht, hebt es sich hervor, ohne zu kollidieren.

Achten Sie auf Best Practices für das E-Mail-Design

Während es beim E-Mail-Design viel Raum für Kreativität und Experimente gibt, müssen Designer auch die Best Practices und Einschränkungen des Mediums im Auge behalten.

Einer der wichtigsten Schritte beim E-Mail-Design ist das Testen von E-Mails auf verschiedenen E-Mail-Plattformen, bevor sie versendet werden. Obwohl es wahrscheinlich kleine Abweichungen zwischen ihnen gibt und es immer Leute gibt, die weniger verbreitete Plattformen verwenden, die Designs anders rendern, ist es klug sicherzustellen, dass E-Mails für die meisten Benutzer akzeptabel angezeigt werden.

Es gibt mehrere E-Mail-Testdienste, die Designer verwenden können, um zu sehen, wie ihre E-Mails auf einer Vielzahl von E-Mail-Plattformen aussehen werden. Lackmus ist eine der beliebtesten, aber andere Optionen wie Mailgun, Email on Acid, Mailtrap und Preview My Email sind ebenfalls einen Blick wert, um zu sehen, welche die Anforderungen des jeweiligen Projekts am besten erfüllt.

Darüber hinaus ist es aufgrund der Anzahl der auf Mobilgeräten geöffneten E-Mails unerlässlich, Bildgrößen und Bandbreitennutzung im Auge zu behalten. Responsive Designs sind aus dem gleichen Grund praktisch eine Notwendigkeit.

Die besten E-Mail-Designs sind für die Leute auf jedem Gerät leicht lesbar und – was am wichtigsten ist – werden sie dazu auffordern, auf den Call-to-Action in der E-Mail zu klicken (oder auf andere Weise die angeforderte Aktion auszuführen). Das Befolgen dieser Best Practices für das E-Mail-Design verschafft Webdesignern einen Vorteil beim Erstellen von E-Mails, die dies effektiv tun.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Erfahrung ist alles – Der ultimative UX-Leitfaden
• Lohnen sich alle Trends? Die 5 häufigsten UX-Fehler, die Designer machen
• UI vs. UX – Entdecken Sie die Kernunterschiede [Infografik]
• Mobile UX-Designprinzipien und Best Practices
• Der grundlegende Leitfaden zur mobilen Usability