Warum 4 Pixel einen Unterschied machen können

01 / GEOMETRIE UND WAHRNEHMUNG · 3 MINUTEN

Eine Zahl. Mehrere Designentscheidungen.

Nach den mobilen Datenansichten aus Lektion 5 betrachten wir eine einzelne Kennzahl. Die Ausgangskarte zeigt einen CO₂-Ausstoß und seine Veränderung. Vergleiche beide Entwürfe: Was fällt zuerst auf? Was bedeutet die Veränderung? Welche Informationen fehlen?

Zahl und Einheit gehören zusammen, haben aber verschiedene Aufgaben.

Wenn „kg“ genauso groß und schwer ist wie „8.540“, konkurriert die Einheit mit dem Messwert. Die Überarbeitung lässt die Zahl dominieren und hält die Einheit kleiner daneben. Ein gemeinsamer Absatz erhält den Zusammenhang; der Abstand darf die beiden Teile nicht auseinanderreißen.

Eine 24 × 24 px große Box sagt wenig über ihren Inhalt.

Die sichtbare Form eines Icons kann innerhalb der Box asymmetrisch liegen. Daneben wirken auch Schriftmetrik, Oberlängen und Rundungen auf die Wahrnehmung. Prüfe zuerst SVG-ViewBox, Zeichenfläche, Zeilenhöhe und Ausrichtung. Erst danach folgt bei Bedarf eine kleine, dokumentierte Korrektur. Der Titel ist keine Empfehlung, jedes Icon pauschal um vier Pixel zu verschieben.

Gleich breite Ziffern helfen bei wechselnden Werten.

font-variant-numeric: tabular-nums aktiviert bei unterstützten Schriften gleich breite Ziffern. Das kann wechselnde Zahlen ruhiger machen. Es richtet aber weder ganze Spalten noch unterschiedlich lange Zahlen automatisch aus; dafür brauchst du zusätzlich ein passendes Layout. MDN: Numerische Schriftvarianten.

Ein Plus ist noch keine gute Nachricht.

Mehr CO₂ kann einem Reduktionsziel widersprechen. Ohne Ziel, Zeitraum und fachlichen Kontext reicht das Vorzeichen nicht für eine Bewertung. Für die Musterlösung ergänzen wir deshalb ausdrücklich die Annahme: Die absoluten Emissionen sollen gegenüber dem Vormonat nicht steigen. Erst darunter ist „Reduktionsziel verfehlt“ begründet. Produktionsmenge und Effizienz werden damit noch nicht bewertet.

02 / DEINE CHALLENGE · 8 MINUTEN

Eine Karte sorgfältig ausarbeiten.

Gestalte die Ausgangskarte in Figma oder HTML/CSS neu. Ein ganzes Dashboard brauchst du nicht. Arbeite zunächst ohne Blick auf die Musterlösung.

<article class="kpi-card">
  <div class="kpi-header">
    <span class="icon" aria-hidden="true">◉</span>
    <span>CO₂-Ausstoß</span>
  </div>
  <div class="kpi-value">8.540 kg</div>
  <p class="kpi-trend">↑ +12,5 %</p>
  <button type="button">Details ansehen →</button>
</article>

.kpi-card {
  width: 280px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-family: system-ui;
}
.kpi-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.icon { font-size: 24px; }
.kpi-value {
  margin-top: 14px;
  font-size: 36px;
  font-weight: 700;
}
.kpi-trend { color: green; font-size: 13px; }

1. Hierarchie: Unterscheide Zahl und Einheit, erhalte aber ihren Zusammenhang.
2. Ausrichtung: Prüfe Icon, Label, Zahl und Einheit auf ihre optische Wirkung. Begründe jede Korrektur.
3. Abstände: Verwende wenige wiederkehrende Werte. Zeige, welche Informationen zusammengehören.
4. Bedeutung: Ergänze den Vergleichszeitraum und eine verständliche Bewertung unter der genannten Zielannahme. Farbe allein reicht nicht.
5. Robustheit: Prüfe 280 und 375 px Kartenbreite, lange Beschriftungen und 200 % Textvergrößerung. Vermeide feste Höhen und abgeschnittene Inhalte.

Notiere zwei begründete Entscheidungen und einen verbleibenden Nachteil. Prüfe große Schrift zusätzlich im Browser oder über die Texteinstellungen des Geräts. Die Simulation ist eine Hilfe beim Entwerfen.

03 / EINE MÖGLICHE MUSTERLÖSUNG

Erst ein System. Dann der Feinschliff.

"use client";

import { useId, useState } from "react";
import { Leaf } from "lucide-react";
import "./coaching-kpi-card.css";

export function CoachingKpiCard({ solution = false }: { solution?: boolean }) {
  const [improved, setImproved] = useState(solution);
  const [width, setWidth] = useState("280");
  const [largeText, setLargeText] = useState(false);
  const [longLabel, setLongLabel] = useState(false);
  const [guides, setGuides] = useState(false);
  const id = useId();
  return <div className="kpi-exercise">
    {!solution && <div className="kpi-mode" role="group" aria-label="KPI-Entwurf vergleichen">
      <button type="button" aria-pressed={!improved} onClick={() => setImproved(false)}>Ausgangsentwurf</button>
      <button type="button" aria-pressed={improved} onClick={() => setImproved(true)}>Überarbeitete Karte</button>
    </div>}
    <div className="kpi-controls">
      <label htmlFor={`${id}-width`}>Kartenbreite<select id={`${id}-width`} value={width} onChange={event => setWidth(event.target.value)}><option value="280">280 px</option><option value="375">375 px</option></select></label>
      <label><input type="checkbox" checked={largeText} onChange={event => setLargeText(event.target.checked)} /> Text auf 200 %</label>
      <label><input type="checkbox" checked={longLabel} onChange={event => setLongLabel(event.target.checked)} /> Lange Beschriftung</label>
      <label><input type="checkbox" checked={guides} onChange={event => setGuides(event.target.checked)} /> Ausrichtungslinien</label>
    </div>
    <p className="kpi-demo-caption">{improved ? "Musterlösung" : "Ausgangsentwurf"} · {width} px Zielbreite · {largeText ? "200" : "100"} % Text. Die Karte schrumpft bei weniger verfügbarem Platz.</p>
    <div className="kpi-stage">
      <article className={`kpi-study-card ${improved ? "is-refined" : "is-original"}${largeText ? " has-large-text" : ""}${guides ? " has-guides" : ""}`} style={{ width: `${width}px` }} aria-labelledby={`${id}-title`}>
        <h3 id={`${id}-title`} className="kpi-study-heading"><Leaf size={24} aria-hidden="true" /><span>{longLabel ? "CO₂-Ausstoß der standortübergreifenden Produktion" : "CO₂-Ausstoß"}</span></h3>
        <p className="kpi-study-value">{improved ? <><strong>8.540</strong><span>kg</span></> : "8.540 kg"}</p>
        <p className="kpi-study-trend"><span aria-hidden="true">↑ </span>+12,5 %{improved && <span> zum Vormonat</span>}</p>
        {improved && <p className="kpi-study-assessment"><strong>Reduktionsziel verfehlt</strong><span>Ziel im Beispiel: höchstens so viel CO₂ wie im Vormonat.</span></p>}
        <details className="kpi-study-details"><summary>Details ansehen <span aria-hidden="true">→</span></summary><p>Fiktive Monatswerte: aktuell 8.540 kg, zuvor rund 7.591 kg. Die Veränderung ist auf eine Nachkommastelle gerundet. Absolute Emissionen erlauben ohne Produktionsmenge keine Aussage über die Effizienz.</p></details>
      </article>
    </div>
    <p className="kpi-demo-caption">Fiktive Daten und ein für die Übung ergänztes Reduktionsziel. Die Textoption vergrößert nur die Karte; sie ersetzt keinen Test mit Browserzoom oder den Texteinstellungen des Geräts. Die Hilfslinien sind eine visuelle Orientierung.</p>
  </div>;
}

.kpi-exercise{max-width:900px;min-width:0;margin-top:24px}
.kpi-mode{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.kpi-mode button{min-height:44px;border:1px solid #728098;border-radius:6px;background:white;padding:10px 14px;font-size:13px;line-height:1.7}
.kpi-mode button[aria-pressed=true]{background:#2558ed;color:white;border-color:#2558ed}
.kpi-controls{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;padding:20px;border:1px solid #ccd4e1;background:white;border-radius:10px}
.kpi-controls label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;line-height:1.7}
.kpi-controls label:first-child{flex-wrap:wrap}
.kpi-controls select{max-width:100%;min-height:44px;padding:8px;border:1px solid #728098;border-radius:5px;background:white}
.kpi-controls input{width:18px;height:18px;flex-shrink:0;accent-color:#2558ed}
.lesson-content .kpi-demo-caption{font-size:12px;line-height:1.8;color:#536174;margin-top:16px}
.kpi-stage{padding:24px;background:#eaf0f8;border:1px solid #ccd4e1;border-radius:12px;margin-top:16px;min-width:0}
.kpi-study-card{max-width:100%;padding:20px;border:1px solid #aeb9cb;border-radius:12px;background:white;font-family:system-ui,sans-serif;font-size:16px;color:#172131;overflow-wrap:anywhere}
.kpi-study-card.has-large-text{font-size:32px}
.lesson-content .kpi-study-heading{display:flex;align-items:center;gap:8px;font:400 .875em/1.5 system-ui,sans-serif;margin:0}
.kpi-study-heading span{min-width:0}
.kpi-study-heading svg{width:1.5em;height:1.5em;flex-shrink:0}
.lesson-content .kpi-study-value{font-size:2.25em;font-weight:700;line-height:1.2;margin:14px 0 0;color:#172131}
.lesson-content .kpi-study-trend{font-size:.8125em;line-height:1.6;color:#17723b;margin:14px 0 0}
.kpi-study-details{margin-top:20px;border-top:1px solid #d1d9e5;padding-top:12px}
.kpi-study-details summary{cursor:pointer;min-height:44px;padding:8px 0;font-size:.875em;line-height:1.6;color:#2449b5}
.lesson-content .kpi-study-details p{font-size:.875em;line-height:1.7;margin-top:12px;color:#44526a}
.is-refined{--kpi-space-1:4px;--kpi-space-2:8px;--kpi-space-4:16px;--kpi-space-6:24px;padding:var(--kpi-space-6)}
.lesson-content .is-refined .kpi-study-heading{align-items:baseline;gap:var(--kpi-space-2);font-size:.875em;font-weight:500;color:#44526a}
.is-refined .kpi-study-heading svg{align-self:flex-start;position:relative;top:.0625em}
.lesson-content .is-refined .kpi-study-value{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--kpi-space-2);font-size:1em;font-weight:400;margin-top:var(--kpi-space-6);font-variant-numeric:lining-nums tabular-nums}
.kpi-study-value strong{font-size:2em;line-height:1.15;letter-spacing:-.025em;max-width:100%}
.kpi-study-value>span{font-size:1.125em;line-height:1.5;color:#44526a}
.lesson-content .is-refined .kpi-study-trend{color:#8b321b;font-size:.875em;margin-top:var(--kpi-space-4);font-variant-numeric:tabular-nums}
.lesson-content .kpi-study-assessment{margin-top:var(--kpi-space-2);padding-left:var(--kpi-space-2);border-left:3px solid #b54c30;font-size:.8125em;line-height:1.6;color:#8b321b}
.kpi-study-assessment>span{display:block;margin-top:var(--kpi-space-1);color:#44526a}
.is-refined .kpi-study-details{margin-top:var(--kpi-space-6);padding-top:var(--kpi-space-2)}
.has-guides .kpi-study-heading,.has-guides .kpi-study-value{outline:1px dashed #6580b8;outline-offset:3px;background-image:linear-gradient(transparent calc(100% - 1px),#6580b8 1px)}
.kpi-exercise :is(button,input,select,summary):focus-visible{outline:3px solid #2558ed;outline-offset:3px}
@media(max-width:640px){.is-refined{padding:16px}.kpi-stage{padding:12px}.kpi-controls{padding:16px;gap:10px 20px}}

04 / MESSEN UND HINSEHEN

Nicht alles lässt sich mit einem Abstandswert beantworten.

Abstände, Schriftgrößen und Kontrastverhältnisse lassen sich messen. Ob eine Hierarchie zur Aufgabe passt oder ein Icon neben einer Überschrift ausgewogen wirkt, verlangt zusätzlich eine visuelle Bewertung. Ein gemessenes Kontrastverhältnis beantwortet wiederum nicht alle Fragen zur Lesbarkeit.

Prüfe zuerst die technische Grundlage, dann die Wahrnehmung und schließlich die Bedienbarkeit. Bei wiederkehrenden Abweichungen untersuchst du das gemeinsame Icon- oder Schriftsystem. Einzelne Ausnahmen sind kein guter Grund, sämtliche Icons global zu verschieben.

• Farbe: Die Bewertung muss auch ohne Farbunterscheidung verständlich sein. W3C: Use of Color.
• Vergrößerung: Texte sollen bis 200 % ohne Verlust von Inhalt oder Funktion vergrößerbar sein. Prüfe auch das geöffnete Detailfeld und den Fokus. W3C: Resize Text.
• Vergleich: Beurteile die Karte bei normalen Größen und in ihrem späteren Dashboard-Kontext. Ein vergrößerter Ausschnitt allein sagt wenig über das Gesamtbild.

05 / REFLEXION · 2 MINUTEN

Begründe die Entscheidung hinter dem Detail.

Eine von zwölf Kennzahlen wird kritisch.

Würdest du die Karte stärker hervorheben? Wie bleibt die Darstellung konsistent, und wodurch wird klar, welche Handlung nötig ist?

Ein Icon soll zwei Pixel nach unten.

Änderst du die Komponente direkt, das globale Designsystem oder untersuchst du zunächst die Ursache?

Dein Selbstcheck

• Ist die Kennzahl zuerst erkennbar und ihre Einheit eindeutig?
• Kannst du jede optische Korrektur und jeden Abstand erklären?
• Bleiben Bewertung und Zeitraum ohne Farbe verständlich?
• Funktionieren lange Texte, große Schrift und Tastaturbedienung?
• Welchen Nachteil würdest du in einem echten Dashboard als Nächstes prüfen?