UX-Design für E-Mails: 10 handfeste Praxisaspekte und smarte Hilfe durch die KI

Herzlichen Dank an meine liebe Kollegin Allyah J. Hamilton. Ohne ihre kompetente Unterstützung wäre dieser Text nie entstanden.

„Post für mich! Da muss ich doch gleich mal reinschauen.“ Schön wär’s … Denn angesichts der Massen von Mails, die täglich in unseren Postfächern landen, werden wir immer wählerischer. Alles, was dabei nicht auf den ersten Blick relevant ist, blenden wir aus, verschieben es auf „später“ (= nie), markieren es als Junk oder löschen es sofort.

Wie also schaffen es E-Mails unter diesen Voraussetzungen, nicht nur angeklickt, sondern tatsächlich auch gelesen zu werden – und am Ende sogar die gewünschte Handlung auszulösen?

Klar – das Stichwort ist bereits gefallen – die Grundvoraussetzung ist, dass ihr Inhalt wirklich relevant für mich ist. Und das muss ich auf den ersten Blick erkennen (siehe Praxisaspekt #1).

Aber reicht das, damit ich mich wirklich mit einer Mail beschäftige? Genau darum geht es in diesem Beitrag: Was muss eine E-Mail erfüllen, damit ein User sich von ihr gerne zum Ziel führen lässt (also idealerweise: zum Klick auf den Call-to-Action-Button und letztlich zur Conversion). Das Stichwort hierfür: UX-Design.

Doch wovon ist bei „User Experience“ (UX) und „UX-Design“ überhaupt die Rede? Lasst uns das vorab kurz zu klären!

Was ist User Experience? Was ist UX-Design?

User Experience beschreibt – grob gesagt – die Summe aller subjektiven Erlebnisse, die ein User bei der Anwendung eines Produkts oder eines Services (also auch einer E-Mail) hat. Oder, wie es ganz offiziell laut ISO 9241-210 heißt: „Die Wahrnehmungen und Reaktionen einer Person, die sich aus der Nutzung oder erwarteten Nutzung eines Produkts, eines Systems oder einer Dienstleistung ergeben.“

Dabei nimmt man eine gute UX oft nicht wahr. Ganz einfach, weil alles reibungslos läuft. Was das Ganze tatsächlich bedeutet, wird einem oft erst klar, wenn die UX hakt. Prominentes Beispiel: eine x-beliebige Fahrt mit der Deutschen Bahn. (Tut uns leid, liebe Bahn, aber es ist einfach so.)

Und UX-Design? Hierbei handelt es sich um sämtliche Techniken, mit deren Hilfe sich eine User-Erfahrung so positiv wie möglich gestalten lässt. Das umfasst u. a. die Analyse der Gegebenheiten und der Nutzerbedürfnisse (z. B. anhand von Personas), die Konzeption und Entwicklung eines Produkts, eines Services oder eines Mediums und dessen iterative Optimierung auf der Basis von Nutzer-Feedbacks.

Die Perspektive ist dabei immer nutzerzentriert (UX-Designer:innen müssen sich komplett in ihre Zielpersonen hineinversetzen) und ganzheitlich. Denn streng genommen beschäftigt sich UX-Design nicht nur mit dem eigentlichen Erlebnis, sondern umfasst auch sämtliche Touchpoints im Vorfeld und danach. Denn: „No product is an island“ wie es so schön bei Don Norman, dem „Vater der User Experience“, heißt.

So viel zu den Basics. Doch jetzt wird es höchste Zeit, ganz konkret in das UX-Design von E-Mails abzutauchen. Eine komplette Guideline mit Anspruch auf Vollständigkeit dürft Ihr jedoch nicht erwarten. Das wäre ein dickes Buch, kein Blogbeitrag.

Stattdessen konzentrieren wir uns hier auf ein paar zentrale Punkte, die uns in der Praxis immer wieder auffallen. Viel Spaß damit!

#1: Postfach und Vorschau

Der erste Eindruck hat keine zweite Chance

Bevor ein User eine E-Mail liest, muss er sie erstmal öffnen. Es lohnt sich also, sich genau anzusehen, welche UX-Design-Faktoren in dieser ersten, entscheidenden Situation eine Rolle spielen. So viel vorab: Es geht hier schon auch um die Betreffzeile, aber eben nicht nur …

1. Subject Line

„Interessiert mich das?“, „Lohnt sich das?“, „Will ich das?“, „Brauche ich das?“, „Hilft mir das weiter?“, „Versäume ich was?“ … Bohrende Fragen wie diese muss die Betreffzeile auf den ersten Blick beantworten. Maßgeblich ist dabei immer die persönliche Relevanz.

Der Spielraum, den ihr dafür habt, ist denkbar gering: 40 bis 60 Zeichen (inkl. Leerzeichen) müssen reichen. Dabei solltet Ihr Euch eher an den 40 statt an den 60 orientieren. Und: Das Wichtigste möglichst zuerst. Denn je nach individueller Postfacheinstellung können selbst kurze Betreffzeilen abgeschnitten werden.

Oft wird jedoch der Eindruck erweckt, dass allein die Betreffzeile darüber entscheidet, ob eine E-Mail geöffnet wird oder nicht. Doch aus Sicht des UX-Designs funktioniert die Subject Line im Postfach immer gemeinsam mit dem Absender, dem Preheader und – auf dem Desktop – mit der E-Mail-Vorschau. Den eigentlichen Ausschlag gibt also das schnell gescannte Zusammenspiel aus all diesen Elementen.

Anregungen für „perfekte E-Mail-Betreffzeilen“ gibt es im Netz genug. Daher hier nur ein paar Punkte, über die Ihr Euch Gedanken machen solltet:

• Zahlen fallen optisch auf und machen sich in der Betreffzeile daher eher gut. Doch Vorsicht: Aussagen wie „100 % kostenlos“ triggern die Spam-Filter!

• Und Emojis? Klares jein! Natürlich sind visuelle Elemente grundsätzlich sinnvoll. Achtet jedoch darauf, ob sie zur Zielgruppe, zur Marke und zum Inhalt passen. Ein 🚗 im Betreff einer Angebots-Mail für günstige Mietautos: OK. Wenn es jedoch um Premiumfahrzeuge mit einem Kaufpreis ab 70.000 Euro geht: Keine gute Idee.

• Absolute No-gos sind dagegen: Wörter in GROSSBUCHSTABEN, Ausrufezeichen (vor allem mehrere davon) etc. Denn darauf reagieren die Spam-Filter allergisch. Aus diesem Grund sind auch bestimmte Begriffe oder Phrasen zu vermeiden, die der Filter als unseriös einstuft. Hier findet Ihr eine umfangreiche Liste davon.

Und noch etwas: Häufig wird empfohlen, den Betreff mit dem Namen des Empfängers zu personalisieren. Ist das wirklich ratsam? Zwei Praxis-Insights dazu: Erstens empfinden das manche Menschen als aufdringlich (oder wittern dabei sogar Spam). Und zweitens: Was, wenn jemand „Henriette-Wilhelmina“ bzw. „Frau von Wengerode-Ültzinghausen“ heißt? Genau: Dann ist im Betreff kein Platz mehr für die eigentliche Botschaft.

2. Preheader

Auch wenn viele diese Kommunikations-Chance immer noch links liegen lassen: Nutzt unbedingt die Möglichkeit, den Inhalt des Preheaders selbst zu definieren! Denn: Macht Ihr das nicht, dann „ziehen“ sich viele E-Mail-Clients automatisch Text aus der E-Mail selbst. Das Ergebnis aus UX-Sicht: häufig irritierend.

Stattdessen könnt Ihr den Preheader sehr sinnvoll einsetzen, um wichtige Informationen oder aktivierende Botschaften unterzubringen, für die in der Subject Line kein Platz ist.

Und die Textmenge? Die hängt leider stark von den individuellen Einstellungen der User ab. Unsere Empfehlung: Macht den Preheader ruhig etwas länger. Denn wenn er zu kurz ist, kann es sein, dass der Client zusätzlich automatisch „gezogenen“ Text aus der E-Mail anzeigt. Ungefähre Hausnummer: 60 bis 100 Zeichen (inkl. Leerzeichen).

3. Vorschau

Zumindest auf dem Desktop bietet der obere Teil der E-Mail, der in der Vorschau angezeigt wird, weitere Chancen, um zum Öffnen und Weiterlesen zu aktivieren. Hier ein paar Punkte, die Ihr dabei beachten solltet.

Kleine Einschränkung vorab: Bilddateien werden in der Vorschau nur geladen, wenn sie von als sicher eingestuften Absendern kommen. Ansonsten erscheinen stattdessen Platzhaltersymbole. Bilder (auch Logos etc.) müssten dann aktiv heruntergeladen werden. Gehen wir hier aber davon aus, dass Eure Mails als sicher gelten …

• Logos und/oder Markenschriftzüge schaffen Vertrauen und wecken das Interesse. Sorgt dafür, dass sie in der Vorschau klar erkennbar sind.

• Catchy Header-Motive – gerne auch GIFs – machen aufmerksam und wecken Emotionen. Doch auch wenn Bilder „mehr als 1.000 Worte“ sagen: Ganz ohne Text bleiben sie oft stumm. Headlines & Co können z. B. in einem Balken über dem Bild stehen. Oder Ihr könnt die Bildhöhe so definieren, dass man die Headline und den Textanfang darunter schon in der Vorschau erkennen kann.

• Und Headlines im Header-Motiv? Klingt erst einmal nach einer guten Lösung. Kann auch funktionieren. Doch auf mobilen Geräten wird das Zusammenspiel von Headline und Bild oft anders dargestellt, als gewünscht. Das Ergebnis wirkt dann eher seltsam und unprofessionell. Daher ist hier Vorsicht angebracht. (Stichwort: Responsive Design. Siehe weiter unten.)

• Es kann immer wieder vorkommen, dass eine Mail nicht korrekt angezeigt wird. Frontend-Developer sorgen deshalb im E-Mail-Code dafür, dass für diesen Fall auch eine Browser-Version bereitgestellt wird. Diese lässt sich über einen Link oben in der E-Mail abrufen.

• Manchmal werden Bilder auch nicht geladen – oder ein User verhindert das über seine Einstellungen. Daher (und längst nicht nur deshalb, siehe #6 Barrierefreiheit) ist es sinnvoll, sie mit Alternativtext zu versehen.

• In manchen Clients erscheint oberhalb der Vorschau auch die echte Absenderadresse (im Gegensatz zum Absendernamen im Postfach). Vermeidet nach Möglichkeit „noreply“-Adressen. Sie wirken anonym, unfreundlich und abweisend.

So wirken Betreff, Absender und Preheader zusammen

Unser Beispiel: Microsoft Outlook. Doch jedes E-Mail-Programm (Client) stellt das Zusammenspiel etwas anders dar. Quelle: Vision11, Jack Wolfskin.

#2: Usability

Nein, User sind nicht dumm …

… Ihre Gehirne wollen nur so effizient wie möglich arbeiten. Aus dem Neuromarketing wissen wir: Unsere Großhirnrinde (dort, wo wir u. v. a. aktiv nachdenken) ist ein sehr beanspruchtes Areal. Deshalb lagern wir so viel wie möglich in die Bereiche der Routinen, Gewohnheiten, Automatismen etc. aus.

Für das User-Erlebnis und das UX-Design bedeutet das: Alles, was irgendwie irritiert, unklar ist, sich nicht intuitiv handhaben lässt oder uns vor Rätsel stellt, erzwingt die Aufmerksamkeit des Großhirns, nervt deshalb, säht Zweifel – und führt gegebenenfalls zum Abbruch. Der absolute Leitsatz heißt daher so wie der Titel des Usability-Bestsellers von Steve Krug:

Don’t make me think!

Setzt also – bei aller Kreativität – vor allem auf klare Strukturen und „gelernte“ Muster, die das intuitive Vorgehen des Users nicht ins Stolpern bringen.

#3: Scannability

Und ja: User sind extrem oberflächlich

Kein Mensch wartet auf Eure E-Mails, um sie dann mit ungeteilter Aufmerksamkeit Wort für Wort zu verschlingen. Ganz im Gegenteil: In der Regel werden sie eher oberflächlich überflogen. Den Ausschlag, um dranzubleiben, geben dabei immer die erbarmungslosen Leitfragen: „What’s in for me?“ Und: „Wird meine Erwartung an die Mail erfüllt?“

Und genau das macht sich UX-Design zu Nutzen: Vermittelt den Mehrwert, den die Mail zu bieten hat, so früh, so prominent und so komprimiert wie möglich.

Ist das geschafft, geht es darum, den Empfänger unmerklich an der Hand zu nehmen und zum Ziel zu führen. Vier lange Absätze hintereinander sind dafür sicher nicht das Mittel der Wahl. (Zielführende) visuelle Abwechslung dagegen schon. Hier nur ein paar Beispiele:

• Ein ausgewogenes, leicht verdauliches Bild-Text-Verhältnis
• Aussagekräftige Bilder
• Großzügige Weißräume, um Leichtigkeit und Klarheit zu vermitteln
• Kurze Sätze, kurze Absätze, Absätze mit unterschiedlichen Längen
• Klare Headline-Hierarchien
• Störer-Elemente für Highlight-Informationen
• Visuelle Orientierungspunkte: z. B. Bullet-Points, Icons, Zwischenüberschriften, farblich oder fett hervorgehobene Schlüsselbegriffe etc.
• Optische „Cues“ wie etwa Pfeile, Linien etc., die helfen, den Blick zu sortieren und zu lenken

Besteht der Inhalt aus mehreren Themen oder enthält er zusätzliche Informationen, dann empfiehlt es sich, ihn in klar abgegrenzte Module zu strukturieren. So erlaubt Ihr dem User, über für ihn weniger Interessantes hinwegzugleiten und dort hängen zu bleiben, wo es spannend für ihn wird.

Extratipp: Betrachtet ein fertiges E-Mail-Mock-up mit zugekniffenen Augen. So erkennt Ihr sehr schnell, ob Textmengen eventuell zu groß sind, wie die visuellen Ankerpunkte funktionieren und ob das Auge gut zum Ziel geführt wird.

Leicht erfassbar vs. schwer verdaulich

Schnelltest mit „zugekniffenen Augen“: Während die Struktur von E-Mail 1 zum schnellen Erfassen einlädt, baut E-Mail 2 Blockaden auf. Quelle: Vision11

#4: Interaktionsdesign (Call to Action)

Nur noch ein letzter Schritt …

Das eigentliche Herzstück jeder E-Mail ist der Call-to-Action-Button (CTA). Denn hier entscheidet sich, ob die E-Mail Wirkung zeigt – oder eben nicht. Hier ein paar Tipps dazu.

• Stellt den CTA herausstechend und prominent dar, ggf. in Kontrastfarbe (unter Einhaltung der Kontrastwerte)
• Sorgt für ausgewogene Abstände zu den Elementen davor und danach (nicht zu gering, aber auch nicht zu groß)
• Begrenzt den CTA-Text auf max. 30 Zeichen (inkl. Leerzeichen). Sonst kann es auf dem Smartphone zu verwirrenden ungewollten Zeilenumbrüchen kommen.

Der Text im Button muss dabei klar und aussagekräftig sein. “Mehr …” oder “Mehr erfahren” sind das nicht. Auch bürokratische Formulierung wie „Zur Registrierung“ schrecken eher ab.

Bei aller Kürze und Klarheit lohnt es sich jedoch, kreative Spielräume zu nutzen. Geht es z. B. um eine Skandinavien-Reise, muss dort nicht „Zur Reisestory“ stehen. „Ab in den hohen Norden“ aktiviert deutlich mehr.

Generell ist zu empfehlen, sich auf einen zentralen CTA zu fokussieren. Sollen zusätzliche Klick-Möglichkeiten angeboten werden, kann eine visuelle Hierarchie der Buttons sinnvoll sein. Verlinkungen im Text dagegen sollten nur eingesetzt werden, wenn sie notwendig, aber für das Ziel der E-Mail nicht von Bedeutung sind (z. B. Teilnahmebedingungen etc.).

Und wo soll der CTA-Button idealerweise platziert werden? Im Grunde so früh wie möglich. Also sobald der User die Botschaft verstanden hat und weiß, was ihn erwartet. Eine Sache solltet Ihr dabei jedoch abwägen: Hat ein User einmal geklickt, kehrt er häufig nicht mehr zur E-Mail zurück.

#5: Responsivität (Mobilfreundlichkeit)

Locker und flexibel bleiben

Der Anteil der mobilen Internetnutzer:innen ist seit Jahren immer weiter gestiegen. 2023 lag er in Deutschland bei 85 %. Und bereits 2020 lasen 89 % der 16- bis 24-Jährigen auch ihre E-Mails bevorzugt auf dem Smartphone.

Mobilfreundliches Responsive Design ist daher schon seit einiger Zeit ein absolutes Muss. Dabei sorgen Befehle im E-Mail-Code (Media Queries) dafür, dass sich bestimmte Elemente im Layout flexibel an das jeweilige Endgerät anpassen. An dieser Stelle würde es nun richtig technisch werden. Deshalb beschränken wir uns hier auf ein spezielles Thema, das in der Praxis immer wieder eine Rolle spielt:

Zwei Spalten, in denen Text und Bild abwechselnd nebeneinander positioniert sind, könnten theoretisch sehr dabei helfen, für Abwechslung zu sorgen und den Blick zu führen („S“- oder „Z-Kurve“). Auf dem Desktop geht das. Doch für das Smartphone müssen die Inhalte der Spalten meist untereinander platziert werden. Das Ergebnis wirkt dann oft nicht so, wie gewünscht

Die Nielsen Norman Group führt seit vielen Jahren umfangreiche Studien zur Usability auch bei E-Mails durch. Dabei stellte sie schon 2017 fest, dass sich im Zuge des „Mobile Shifts“ einspaltige Mails zunehmend als Standard durchsetzen. Mehr noch: Auch an Desktop-Geräten scheinen User mehrspaltige Layouts inzwischen als zu komplex wahrzunehmen.

Dennoch können Module mit mehreren Spalten im Sinne der Scannability optisch auflockernd und interessant wirken. Bei E-Mails im B2B-Bereich, die während der Arbeit am Desktop gelesen werden, könntet Ihr Euch diese Option also offen lassen.

Eine E-Mail – zig Erscheinungsformen

Mit Tools wie Email on Acid lässt sich testen, wie eine E-Mail auf unterschiedlichsten Endgeräten angezeigt wird (siehe auch Praxisaspekt #10). Quelle: Vision11, Email on Acid.

#6: Barrierefreiheit

E-Mails an wirklich alle!

Jede und jeder geht anders mit seinen Geräten und Benutzeroberflächen um. Dabei sollten wir nicht nur an Menschen denken, die sich z . B. digitale Inhalte per Screenreader vorlesen lassen müssen. Schon mit einer Migräne, einem leichten Tremor oder einem verstauchten Finger könnte es Probleme geben, bestimmte digitale Dienste zu nutzen.

Accessibility ist also ein UX-Kriterium, das sehr viele (eigentlich alle) Menschen betrifft. Designer:innen stehen dabei vor der Herausforderung, eine Vielzahl von Standards zu berücksichtigen. Hier nur einige Beispiele für den Bereich E-Mail:

• Sinnvolle und verständliche ALT-Texte für Bilder und GIFs
• Zugängliche Schriftarten (z. B. Arial, Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans …)
• Ausreichend große Zeilenabstände und große Schriftgrößen (min. 14px, besser 16px)
• Klare visuelle Hierarchien von Überschriften (H1, H2 …)
• Einhaltung zulässiger Kontrastwerte (z. B. hinsichtlich Bildern, Hintergrund und Text, Grafiken, interaktiven Elementen etc.)
• Verständliche Labels bei Schaltflächen und Links
• Werden Texte als Bilder dargestellt: Text als ALT-Text
• Tastaturfreundliche Bedienbarkeit
• Animationen (z. B. GIFs) dürfen nicht öfter als 3 x pro Sekunde flackern oder blitzen. Dauern sie länger als 5 Sekunden, müssen sie pausierbar sein.
• Und noch vieles mehr ….

Ausführliche Richtlinien findet Ihr in den Web Content Accessibility Guidelines des Word Wide Web Consoriums (W3C).

Hört sich alles sehr mühsam und vielleicht sogar übertrieben an? Macht aber in vielerlei Hinsicht Sinn! Denn barrierefreie E-Mails können nicht nur von möglichst vielen Menschen rezipiert werden: Sie sorgen auch generell für eine bessere Usability, tragen zur Optimierung der User Experience bei und können indirekt auch die Spam-Wertung beeinflussen (da Spam-Filter z. B. auch alternative Textversionen und klar strukturierte Inhalte erwarten).

#7: Dark Mode

Licht ins Dunkel

Immer mehr User wechseln auf die dunkle Seite – und nutzen ihre Anwendungen im Dark Mode mit schwarzem Hintergrund. Die Crux bei E-Mails: Abhängig vom E-Mail-Client funktionieren die farblichen Änderungen hier unterschiedlich.

Apple und iOS Mail etwa verändern die Farben nur im Anwendungsbereich, nicht in den Mails selbst. Andere Clients wie Outlook verändern die Farben in E-Mails teilweise. Die (häufig genutzte) Gmail-App für iOS dagegen ändert die Farben komplett.

Für das UX-Design bedeutet das: Vorsicht, Falle! Denn, wenn hier bestimmte Anpassungen nicht vorgenommen werden, kann es – je nach Client – zu Ergebnissen kommen, die im Dark Mode nach hinten losgehen. Hier die vier wichtigsten Aspekte:

Bilder und Grafiken

… sollten transparent gespeichert werden – vor allem, wenn sie rund oder asymmetrisch sind. Denn sonst erscheinen im Dark Mode jenseits des eigentlichen Bildrands weiße Ecken.

Farbige Hintergründe

… werden im Dark Mode ggf. in der Komplementärfarbe dargestellt. Definiert ein entsprechendes Element deshalb besser als Bild. Vergesst dann aber nicht, zu diesem Bild den Text als ALT-Text hinzuzufügen.

Icons und andere grafische Elemente in Schwarz

… (oder in einer anderen dunklen Farbe) benötigen einen Hintergrundraum in Weiß. Ansonsten sieht man sie im Dark Mode nicht, denn sie erscheinen Schwarz auf Schwarz.

Generell

… ist es ratsam eine E-Mail auch im Dark Mode zu testen. Ist der Text gut lesbar? Sind grafische Elemente gut zu erkennen. Stimmen die Kontraste? Und sticht der Call-to-Action-Button auch hier klar hervor?

Hell vs. dunkel

Erscheinungsbild im Dark Mode im Vergleich zum Light Mode. Quelle: Vision11.

#8: Bewegtbild und Interaktivität

Raus aus der digitalen Steinzeit?

1971 wurde die erste E-Mail versendet. Und manchmal hat man den Eindruck, dass sich seither nicht viel verändert hat. Obwohl: Technisch wäre längst eine Menge möglich. Nur müssen UX-Designer und Frontend-Developer bei E-Mails mit einer Vielzahl von Einschränkungen arbeiten. Denn: Ein durchgängiger moderner Standard seitens der E-Mail-Clients ist immer noch ein frommer Wunsch.

Das bedeutet: Spannende Dinge wie eingebettete Videos, interaktive Formulare, eingebundene Echtzeit-Daten etc. werden nur von Teilen der Clients unterstützt (oder sie werden unterschiedlich dargestellt) – und der Rest der Empfänger sieht in die Röhre.

Trotzdem werdet Ihr im Netz viele Studien finden, die z. B. besagen, dass die Einbindung von Videos oder Interaktionsmöglichkeiten die Klickraten um soundsoviel Prozent erhöhen. Doch so gerne wir es wollten: Wir können genau das immer noch nicht empfehlen. Denn tatsächlich würden die KPIs unter den aktuellen Gegebenheiten merklich leiden.

Eingebettete Videos etwa werden laut Mailjet lediglich von folgenden Clients unterstützt (Stand: 2023):

• Apple Mail
• Outlook für Mac
• Nativer Client für Apple iOS-Geräte ab Vers. 10.0
• Nativer Client für Samsung Galaxy
• Thunderbird

Das höchste der Gefühle sind aktuell dagegen GIFs. Sie werden von den meisten E-Mail-Programmen angezeigt. Damit habt Ihr zumindest eine Option, um mehr Aufmerksamkeit zu erzielen. Doch auch hier empfiehlt es sich, als Fallback ein Bild parat zu halten.

#9: Code

Clean it up!

Neben großen Datenmengen (z. B. von Bildern oder GIFs) kann auch zu üppiger Code zu langsameren Ladezeiten beitragen – und damit die User Experience beeinträchtigen. Besonders ärgerlich könnte das bei der mobilen Nutzung werden: Kein User freut sich, wenn unterwegs abgerufene E-Mails das Datenvolumen merklich schmälern.

Vor allem aber kann sich unsauberer Code auf die Zustellbarkeit (Deliverability) von E-Mails auswirken. Sprich: Dafür sorgen, dass E-Mails im Spamfilter hängen bleiben. Doch dieses große Fass wollen wir hier nicht aufmachen. Mehr dazu findet Ihr deshalb demnächst in einem eigenen Blog-Beitrag.

#10: Testing

Irgendwas ist immer

Es mögen noch so erfahrene und kompetente Profis am Werk sein: Am Ende ist immer irgendwas – und das mit fast 100-prozentiger Sicherheit. Ausführliche Tests sind daher absolute Pflicht.

Spezielle Tools testen E-Mails nicht nur hinsichtlich ihrer Spamfiltertauglichkeit und anderen Zustellbarkeitskriterien. Email on Acid etwa zeigt Euch, wie eine Mail auf den unterschiedlichsten Endgeräten bzw. deren Betriebssystemen dargestellt wird. Und es macht auch Vorschläge zur Optimierung der E-Mail.

Zu den Kriterien, die standardmäßig getestet werden sollten, gehören u. a.:

• Absender
• Domain
• Subject Line und Preheader (hinsichtlich des Spam-Trigger-Risikos)
• Responivität
• Bilder und Bildgrößen
• Kontrastwerte und generell die Accessibility
• Erscheinungsbild im E-Mail-Postfach
• Erscheinungsbild auf verschiedenen Clients

Am Ende ist jedoch der Testversand innerhalb des Teams unumgänglich. Und hier gilt: Je mehr Augenpaare im Spiel sind, umso mehr wird auch gefunden. Klar strukturierte Testing-Dokumente helfen Designern bzw. Developern dann dabei, die Mängel step by step abzuarbeiten.

Extratipp: Beim Testen im Testversand solltet Ihr Euch pro Durchgang auf ein, zwei Kriterien konzentrieren (z. B. Rechtschreibung, korrekte Abstände, Links, Fußnoten …). Mehr kann Eure Aufmerksamkeit nicht verarbeiten – und dann wird etwas übersehen.

Statt eines Fazits:

Gibt es eine Universallösung?

Ganz klar: Nein. Bestimmt ist Euch aufgefallen, dass dieser Text eine Menge Wendungen wie „könnte sein, dass“ enthält. Das liegt daran, dass jedes E-Mail-Projekt, jedes Newsletter-Programm andere Zielgruppen mit anderen Bedürfnissen und Gewohnheiten hat, andere technische Voraussetzungen, andere Kundenanforderungen etc. etc. „One size fits all“ ist da leider nicht drin. UX-Design und Frontend Development müssen sich daher immer wieder an den konkreten Gegebenheiten orientieren.

Das Rad muss dabei nicht ständig neu erfunden werden. Aber das eine Rad, das sich in einem bestimmten Fall bewährt hat, fährt leider nicht genau so gut auf allen anderen Wegen.

Special: So wird die KI zum UX-Assistenten

Nein, wir empfehlen Euch hier nicht, die Kreation von E-Mails an die KI abzugeben. Ein wirklich sinnvoller Einsatz von ChatGPT ist es dagegen, E-Mails hinsichtlich UX-Kriterien analysieren zu lassen.

Am besten entwickelt Ihr den Prompt dazu im Dialog mit dem Chatbot. Dabei könnt Ihr der KI z. B. eine Rolle zuweisen („Experte für UX-Design“), die Kriterien definieren, die Detailtiefe der Analyse bestimmen oder die KI dazu veranlassen, besonders kritisch vorzugehen. Ladet dann die E-Mail im eml-Format hoch (so kann sich die KI auch den Code ansehen) und fordert sie auf, die Mail nach den definierten Kriterien zu analysieren. Ihr werdet überrascht sein.

Achtet hier jedoch immer auf den Datenschutz: Also keine E-Mails mit vertraulichen oder noch geheimen Inhalten – und auch keine echten Namen von Kunden aus der Mailing-Liste in der Anrede.

Christian Schwenkmaier

M +4915110819027