mailinapp
Documentation menu

KPI-Kennzahlkarte-Block

Eine große Schlagzeilen-Zahl für die Kennzahl, über die eine E-Mail berichtet — Umsatz, Anmeldungen, NPS, was auch immer der Empfänger zuerst sehen soll. Es ist der Block, mit dem die meisten Digest- und Dashboard-E-Mails beginnen, meist drei davon nebeneinander über einem Diagramm.

Wie es funktioniert

Eine Kennzahlkarte besteht aus einer Beschriftung, einem großen Wert, einem optionalen Trendindikator und einem optionalen Sparkline-Verlauf — in genau dieser visuellen Reihenfolge, von oben nach unten. Der Wert und die Beschriftung werden immer als echter HTML-Text gerendert, in welcher Schriftgröße und Farbe Sie auch immer eingestellt haben; das Lesen der Schlagzeilen-Zahl hängt in keiner Weise davon ab, ob ein Bild geladen wird. Nur der Sparkline-Verlauf ist ein gerendertes PNG, und selbst dann ist er nur Dekoration über einer Zahl, die auch ohne ihn bereits lesbar ist.

Der Trendindikator (das „Δ“) erscheint erst, sobald sowohl ein vorheriger Wert als auch eine Trendrichtung gesetzt sind. Der Block behandelt beide als eine zusammengehörige, erfasste Einheit statt als zwei unabhängige optionale Felder, sodass es nie einen mehrdeutigen Zustand gibt, in dem ein Δ-Prozentsatz ohne Pfeil angezeigt wird, der erklärt, welche Richtung gut ist. Der Prozentsatz selbst wird immer aus value gegenüber previousValue berechnet; die Richtung (auf/ab/gleich) wird nicht daraus abgeleitet, ob die Zahl gestiegen ist — Sie legen sie selbst fest.

Das ist wichtig, weil „gestiegen“ nicht immer eine gute Nachricht ist. Eine steigende Anzahl an Support-Tickets oder eine steigende Abwanderungsrate ist schlecht, und eine Kennzahlkarte, die darüber berichtet, muss das mit einem abwärts eingefärbten Pfeil zeigen, auch wenn die Rohzahl gestiegen ist. Die Farbe des Pfeils folgt der von Ihnen gewählten Richtung (grün für aufwärts, rot für abwärts, gelb für gleichbleibend) und verwendet dabei die eigenen Statusfarben des Projekts, keine fest codierte Palette.

Der Sparkline-Verlauf ist ein kleines Trendlinien-Bild, das die Werte darstellt, die Sie in das Feld Sparkline-Werte eintippen — oder, im gebundenen Modus, die Werte des gebundenen Felds pro Zeile, begrenzt auf 60 Punkte. Er wird erst gerendert, sobald mindestens zwei Punkte vorhanden sind, zwischen denen eine Linie gezogen werden kann. Seine Linienfarbe folgt der Farbe des Δ, sofern eines vorhanden ist, sodass ein ernst aussehender Abwärtstrend auf den ersten Blick buchstäblich rot erscheint; ohne konfiguriertes Δ fällt sie auf die Markenfarbe des Projekts zurück.

Konfigurierbare Felder:

  • Beschriftung — der Name der Kennzahl, plus eigener Farbe und Schriftgröße.
  • Wert — die Schlagzeilen-Zahl, als literale Zeichenkette (kann daher auch ein Merge-Tag enthalten).
  • Format — Zahl, Währung (USD, ohne Nachkommastellen) oder Prozent — steuert, wie value und previousValue zur Anzeige formatiert werden, nicht wie sie gespeichert werden.
  • Vorheriger Wert — der Vergleichspunkt für das Δ. Erforderlich zusammen mit der Trendrichtung, damit überhaupt ein Δ angezeigt wird.
  • Trendrichtung — Keine / Aufwärts / Abwärts / Gleichbleibend. Bestimmt sowohl das Pfeilsymbol als auch dessen Farbe.
  • Sparkline-Werte — eine manuell eingegebene Liste von Zahlen, die von links nach rechts dargestellt wird.
  • Hintergrundfarbe, Innenabstand, Rahmen, Eckenradius der Karte.
  • Unabhängige Farb-/Schriftgrößen-Paare für den Wert-Text und den Beschriftungs-Text.

Über selbst erfasste Werte hinaus kann eine KPI-Kennzahlkarte ihren Wert an eine verbundene Datenquelle oder an die eigenen Antwortergebnisse einer vergangenen Kampagne binden. Eine Datenquellen-Verknüpfung verbindet ein Wertfeld mit einem Aggregat (Summe, Durchschnitt, Anzahl oder letzte Zeile), das jede gebundene Zeile zu der einen Schlagzeilen-Zahl zusammenfasst. Die Bindung ersetzt nur value und die Quelldaten des Sparkline-Verlaufs; previousValue und trendDirection bleiben immer selbst erfasst, da ein gebundener „vorheriger“ Wert historische Momentaufnahmen benötigen würde, die dieses Schema nicht vorhält. Die vollständige Funktionsweise beider Modi finden Sie unter Diagramme an echte Daten binden.

Beispiele

Subject

Your July performance summary

Der schnellste Weg, diesen Block im Kontext zu sehen, ist ein Projekt mit dem Zweck Dashboard zu starten. Es bereitet eine Überschrift „Wöchentliche Performance“ und drei KPI-Kennzahlkarten nebeneinander in Spalten vor: Umsatz als Währung mit einem aufwärts gerichteten Δ, Neue Anmeldungen als einfache Zahl mit einem aufwärts gerichteten Δ, Conversion-Rate als Prozent mit einem gleichbleibenden Δ. Es folgt ein Balkendiagramm (das Dashboard-Raster-Preset). Es ist ein Ausgangspunkt mit plausiblen Beispielzahlen, an nichts gebunden, bis Sie es selbst verbinden.

Ein wöchentlicher Betriebs-Digest könnte mit drei Kennzahlkarten beginnen (offene Tickets, durchschnittliche Reaktionszeit, CSAT), jede mit einem Δ gegenüber der Vorwoche, sodass der Leser die Schlagzeile sieht, bevor er zu einem Diagramm scrollt. Ein Bericht nach einer Kampagne kann eine einzelne große Kennzahlkarte für „Gesamtumsatz“ verwenden, gebunden an die Bestellungen des Produkt-Blocks dieser Kampagne über ein Datenquellen-Aggregat, mit einem Sparkline-Verlauf, der den Tag-für-Tag-Anstieg bis zum Versand zeigt. Der monatliche Rückblick eines Abonnement-Unternehmens könnte MRR, abgewanderte Konten und neu hinzugekommene Konten zusammen als Kennzahlkarten darstellen: drei Karten, drei unterschiedliche Δ-Richtungen, jede korrekt eingefärbt, weil die Richtung pro Karte selbst erfasst wird, statt aus dem Vorzeichen der Veränderung erraten zu werden.

So sieht der statische Fallback aus

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    $24,800
    <span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
       alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
       style="display:block;max-width:100%;height:auto;margin:4px 0" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>

Der Wert, die Beschriftung und das Δ sind bereits vollständig als echter Text vorhanden, bevor überhaupt das Sparkline-<img> erscheint; die kleine graue Zeile darunter wiederholt dieselben drei Fakten als reinen Text, sodass die Karte auch bei deaktivierten Bildern vollständig lesbar ist.

Siehe auch