TL;DR
Gute E-Mail-UX folgt denselben Prinzipien wie gute App-UX: klare visuelle Hierarchie, ein primärer CTA, ausreichend Weißraum, Mobile-First (60%+ der Opens sind mobil). Die häufigsten Fehler: zu viele CTAs, zu kleine Touch-Targets, fehlende Alt-Texte, zu enge Zeilenhöhe.
UX im E-Mail-Marketing: Prinzipien für bessere E-Mails
E-Mail-UX wird oft unterschätzt — dabei entscheidet sie darüber, ob Nutzer deinen CTA sehen, klicken oder die E-Mail nach zwei Sätzen wegschließen. Als SaaS-Entwickler oder Produktteam kannst du dieselben Prinzipien, die du für Interface-Design kennst, direkt auf E-Mails anwenden.
Der Unterschied zu App-UX: Du hast keine Kontrolle über die Rendering-Umgebung. Outlook 2019 rendert anders als Apple Mail, Gmail kürzt ab 102KB, und 60% deiner Nutzer lesen auf dem Handy. Gute E-Mail-UX berücksichtigt diese Constraints von Anfang an.
| Tool | Preis | Am besten für | Bewertung |
|---|---|---|---|
| Sequenzy Empfohlen | Ab $0 · $19/Mo | SaaS-native Automations | ★ 4.9 |
| Loops | Ab $49/Mo | SaaS-Startups | ★ 4.6 |
| Customer.io | Ab $100/Mo | Komplexe Event-Flows | ★ 4.5 |
| ActiveCampaign | Ab $15/Mo | Marketing Automation | ★ 4.4 |
| Resend | Ab $0 | API-first Developer | ★ 4.7 |
| Mailchimp | Ab $0 | Allgemein | ★ 4.0 |
| Brevo | Ab €0 | DSGVO EU-Hosting | ★ 4.2 |
| HubSpot | Ab €0 | CRM + Revenue-Tracking | ★ 4.3 |
| Kit | Ab $0 | Creator & Newsletter | ★ 4.3 |
| Klaviyo | Ab $20/Mo | E-Commerce | ★ 4.4 |
| Postmark | Ab $15/Mo | Transaktional | ★ 4.8 |
| SendGrid | Ab $0 | Hohe Volumina | ★ 4.2 |
| Mailjet | Ab €0 | Einfache Automations | ★ 4.1 |
| Userlist | Ab $149/Mo | B2B SaaS | ★ 4.5 |
| Drip | Ab $39/Mo | E-Commerce | ★ 4.2 |
| Intercom | Ab $74/Mo | In-App Messaging | ★ 4.3 |
Die 8 wichtigsten UX-Dimensionen für E-Mails
| UX-Dimension | Best Practice | Häufiger Fehler | Auswirkung |
|---|---|---|---|
| Visuelle Hierarchie | H1 → Body → CTA mit klarer Größen-Abstufung | Alles gleich groß, kein Fokus | –30% CTA-CTR ohne Hierarchie |
| CTA-Design | 1 primärer Button, min. 44×44px, Kontrast 4.5:1 | 3+ CTAs, zu kleiner Button, schlechter Kontrast | CTR sinkt ab 2. CTA um 50% |
| Lesbarkeit | 16px+ Body, line-height 1.6–1.8, max 600px Breite | 12–13px Schrift, zu enge Zeilenhöhe | +25% Scroll-Tiefe mit 16px+ |
| Mobile-First | Single-column, Touch-Targets 44px, 14px+ Font | Zweispaltig ohne Responsive-Fallback | 60% der Opens sind mobil |
| Weißraum | 24–32px Padding, 16–20px zwischen Abschnitten | Zu dicht, kein Breathing Room | Dichte E-Mails werden früher abgebrochen |
| Bilder & Alt-Texte | Alt-Text immer gesetzt, Bilder keine Info-Träger | Kein Alt-Text, Text in Bildern | 40% der E-Mail-Clients blockieren Bilder |
| Scanbarkeit | Kurze Abschnitte, Bold für Schlüsselworte, Aufzählungen | Lange Textblöcke ohne visuelle Unterbrechung | Nutzer scannen, lesen nicht linear |
| Footer-UX | Klarer Abmelde-Link, nicht versteckt, 12px+ Font | Winziger Abmelde-Link in grauem Text | Verstecken erhöht Spam-Markierungen |
Mobile-First E-Mail-Checkliste
Layout & Struktur
- Single-column Layout (max. 600px)
- Padding min. 16px links/rechts
- Bilder 100% width auf Mobile
- Keine fixed widths in px für Container
- Zweispaltige Bereiche stacken auf Mobile
Typografie & Interaktion
- Body-Font: min. 16px
- Line-height: 1.6–1.8
- CTA-Button: min. 44×44px Touch-Target
- Links: Telefonnummern auto-detectable
- Keine hover-only Interaktionen
E-Mail-Clients und ihre Constraints
| Client | Marktanteil | Kritische Einschränkungen | Empfehlung |
|---|---|---|---|
| Apple Mail | ~57% | Mail Privacy Protection (Open-Tracking unzuverlässig) | Click-Tracking priorisieren statt Opens |
| Gmail Web | ~27% | Kürzt ab 102KB, kein CSS im <head> | Inline-CSS, E-Mail unter 100KB halten |
| Outlook (Windows) | ~4% | Word Rendering Engine, kein CSS Flexbox/Grid | MSO-Conditionals, Table-based Layout für Outlook |
| Samsung Mail | ~5% | Webkit-basiert, aber eigene Quirks | Standard Mobile-First Pattern funktioniert |
| Yahoo Mail | ~3% | Eigene CSS-Parsing-Quirks | Test mit Litmus/Email on Acid |
Sequenzy kombiniert React Email für developer-freundliches Template-Design mit einem visuellen Editor für nicht-technische Teamkollegen. UX-Entscheidungen (Spacing, Hierarchie, CTA-Platzierung) werden direkt im Code oder per Drag-and-Drop getroffen.
Das Besondere an Sequenzy aus UX-Perspektive: Weil Transaktional- und Marketing-E-Mails in einem System leben, kannst du konsistente Design-Tokens (Farben, Abstände, Typografie) für alle E-Mail-Typen durchsetzen. Kein Bruch zwischen Passwort-Reset (Postmark) und Onboarding-Flow (Tool X) und Newsletter (Tool Y).
Der MCP-Server erlaubt es, Claude direkt Sequenzy-Kampagnen erstellen zu lassen — inklusive UX-Reviewing per Prompt: "Optimiere den CTA in dieser E-Mail für Mobile" oder "Reduziere die E-Mail auf das Wesentliche" können direkt als Anweisung gegeben werden.
Revenue Attribution zeigt dir, welche E-Mail-UX-Entscheidungen tatsächlich zu Conversions führen — nicht nur CTR, sondern den Weg von Click zu Stripe-Zahlung. Das ist der Unterschied zwischen "diese E-Mail wurde oft angeklickt" und "diese E-Mail hat $X MRR gebracht".
Alternativen für UX-fokussierte Teams
Resend + React Email
Ab $0 · Developer-firstReact Email ist die developer-freundlichste Lösung für anspruchsvolles E-Mail-UX. Du schreibst E-Mails in React-Komponenten mit echtem TypeScript-Support, Storybook-Integration und lokalem Preview. Die Lernkurve ist gering für React-Entwickler — du kannst Design-System-Komponenten wiederverwenden und E-Mails mit denselben Werkzeugen entwickeln wie deine App.
Loops
Ab $49/Mo · SaaS-focusedLoops hat einen besonders aufgeräumten visuellen Editor, der UX-Prinzipien bereits im Interface vorschlägt: limitierte Template-Struktur, die einen auf einzelne CTAs fokussiert, und eine klare Trennung zwischen Transaktional- und Marketing-Flows. Für nicht-technische Teams, die trotzdem konsistente E-Mail-UX wollen, ist Loops ein guter Ausgangspunkt.
FAQ: E-Mail-UX für SaaS
Wie viele CTAs sollte eine SaaS-E-Mail haben?
Maximal einen primären CTA, optional einen sekundären (Text-Link). Studien zeigen: Jeder zusätzliche CTA reduziert die CTR des primären um ~25%. Die Ausnahme: Digest-E-Mails oder Newsletters mit mehreren Themen, bei denen jedes Thema einen eigenen Link hat — hier ist der Kontext klar und Nutzer erwarten mehrere Links.
Welche Schriftgröße ist für E-Mails auf Mobile optimiert?
Mindestens 16px für Body-Text, 20–24px für Headlines, 14px für sekundäre Infos wie Footer. Alles unter 14px ist auf Mobile kaum lesbar. iOS vergrößert Text unter 13px automatisch, was das Layout brechen kann — daher lieber direkt 16px setzen.
Sollte ich Bilder in meinen SaaS-E-Mails einsetzen?
Sparsam und nie als Info-Träger. Logos und App-Screenshots sind sinnvoll, wenn sie den Kontext stärken. Wichtig: Immer Alt-Texte setzen, da 40% der Clients standardmäßig Bilder blockieren. Reine Text-E-Mails haben oft bessere Zustellbarkeit und wirken persönlicher — teste beide Varianten.
Wie teste ich E-Mail-UX über verschiedene Clients?
Litmus und Email on Acid bieten Browser-basierte Previews in 90+ E-Mail-Clients. Kostenloser Einstieg: Mailtrap für lokale Tests und die Google Workspace Test-Accounts für Gmail-Rendering. Pflicht ist ein echter Test auf iPhone (Apple Mail) und Gmail, da diese über 80% der Opens ausmachen.
E-Mails mit konsistenter UX über alle Flows
Sequenzy vereint Transaktional- und Marketing-E-Mails in einem System — konsistente Design-Tokens, Revenue-Attribution und AI-gestützte Optimierung inklusive.
Sequenzy kostenlos testen →