# Prüffragen für die Gestaltungsabnahme

Für Reviews ohne Designerauge. Die Fragen sind so gestellt, dass man sie am
Bildschirm beantworten kann — jede hat ein nachprüfbares Ja oder Nein, keine
Geschmacksfrage.

Reihenfolge nach Wirkung: Wer nur zehn Minuten hat, nimmt Abschnitt 1.

---

## 1. Die vier Fragen, die die meisten Fehler finden

**1. Nenne die Aussage der Seite in einem Satz.**
Geht das nicht, fehlt die Hierarchie. Auf jeder Seite muss genau ein Block
dominieren. Sehen alle Karten gleich aus, ist keiner wichtig.

**2. Gibt es ein Diagramm, dessen Balken oder Segmente alle etwa gleich groß sind?**
Dann trägt es keine Information. Typische Ursachen: Werte in einem engen Band
(74–96 %) auf einer Skala ab null, oder eine Rangfolge aus 5/4/3/3/3.
Entweder die Kodierung wechseln oder die Karte streichen.

**3. Steht dieselbe Zahl zweimal auf der Seite?**
Kennzahl oben und Fußzeile unter dem Diagramm sind der übliche Fall. Eine
Wiederholung ist kein Beleg, sondern verbrauchter Platz.

**4. Was soll der Betrachter danach tun?**
Findet sich darauf keine Antwort, ist es ein Bericht, kein Dashboard. Eine
Handlungsliste braucht je Zeile einen Betrag und ein Verb.

---

## 2. Diagramme

| Frage | Wenn nein |
|---|---|
| Beginnt jede Balkenachse bei null? | Balken kodieren über Länge — abgeschnitten lügen sie. Bei engen Wertebändern Punktdiagramm statt Balken |
| Hat jede Achse runde Werte (0/50/100, nicht 0/55/110)? | Der Leser rechnet bei jedem Blick mit |
| Trägt eine Achse genau eine Einheit? | „0 €" neben „10 T€" ist ein Einheitenwechsel mitten in der Skala |
| Belegt in einem Ring kein Segment mehr als etwa 80 %? | Dann ist die Bezugsgröße falsch gewählt, nicht der Diagrammtyp |
| Hat der Ring höchstens fünf Segmente? | Alles darüber gehört zu „Sonstige" zusammengefasst |
| Zeigt jede Legende eine Reihe, die es im Bild wirklich gibt? | Tote Legendeneinträge sind ein häufiger und peinlicher Fehler |
| Sind Kategorie- und Ampelfarben getrennt? | Eine grüne Kategorie neben einem grünen Positiv-Status ist nicht mehr lesbar |
| Behält eine Kategorie ihre Farbe über alle Seiten? | Sonst muss jede Legende neu gelesen werden |
| Ist bei jeder Karte erkennbar, ob sie den Zeitfilter beachtet? | Stichtagswerte neben gefilterten Werten ohne Kennzeichnung erzeugen falsche Schlüsse |

---

## 3. Zahlen und Text

- Tausendertrennung überall gleich? (`1.900`, nie `1900`)
- Dieselbe Zahl im selben Format? (`177 T€` und `177.010 €` auf einer Seite ist ein Bruch)
- Singular und Plural korrekt? („1 Tag", nicht „1 Tage")
- Spaltenköpfe einheitlich geschrieben?
- Bricht irgendwo Text ab, der nicht abbrechen dürfte? (Beträge, Kartenuntertitel)

---

## 4. Layout, Raster und Zustände

**Vor jedem Review `npm run verify:layout` laufen lassen.** Der Prüfer findet
kollidierenden und überlaufenden Text über sieben Fensterbreiten — das ist die
eine Fehlerklasse, die man mit dem Auge zuverlässig übersieht, weil sie nur in
bestimmten Breiten auftritt.

Von Hand: das Fenster einmal von 1024 auf 1920 px aufziehen und dabei auf
Ringlegenden, Achsenbeschriftungen und Tabellenköpfe achten.


- Erzeugt eine Karte tote Fläche, weil die Nachbarkarte höher ist?
  Gleiche Höhe ist nur bei gleicher Struktur richtig (Kennzahlenreihe), nicht bei
  Diagramm neben Tabelle.
- Was passiert, wenn die Filter alles wegschneiden? Jede Ansicht braucht einen
  Leerzustand.
- Ist der Tastaturfokus sichtbar? Mit Tab durch die Seite gehen.
- Schließt jedes Menü mit Escape?
- Verspricht ein Hover-Effekt eine Interaktion, die es nicht gibt?

---

## 5. Womit man das Auge trainiert

Kurz und ergiebig, in dieser Reihenfolge:

1. **FT Visual Vocabulary** — ein Poster, das Diagrammtypen nach Aussageabsicht
   ordnet (Vergleich, Verteilung, Anteil, Veränderung …).
   Das beste Verhältnis von Aufwand zu Ertrag überhaupt.
   `github.com/Financial-Times/chart-doctor` → `visual-vocabulary`
2. **IBCS — International Business Communication Standards**, die SUCCESS-Regeln.
   Das ist der ausgearbeitete Standard für *Geschäfts*grafik, den Carbon nicht
   ersetzt: einheitliche Notation, Ist/Plan/Vorjahr, Informationsdichte.
   Frei unter CC BY-SA auf `ibcs.com`.
3. **Cleveland & McGill (1984)**, „Graphical Perception". Die Studie, aus der die
   Rangfolge der Kodierungen stammt: Position wird genauer gelesen als Länge,
   Länge genauer als Winkel, Winkel genauer als Fläche. Erklärt in einer Seite,
   warum Ringe schwach und Punktdiagramme stark sind.
4. **Stephen Few, „Information Dashboard Design"**. Das Standardwerk zur
   Dashboard-Kritik; die ersten beiden Kapitel reichen für ein geschultes Auge.
5. **Datawrapper Academy** (`academy.datawrapper.de`) — kurze, gut belegte
   Artikel zu einzelnen Fragen („Wann Balken, wann Linien", „Warum keine zwei
   Y-Achsen").

Zum Zielsystem passend:

6. **Carbon Data Visualization** (`carbondesignsystem.com/data-visualization/`)
   für Farben, Achsen und Diagrammtypen — mit der Einschränkung aus
   [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) Abschnitt 0: Abstände regelt Carbon nicht.
7. **Carbon Spacing und 2x-Grid** (`carbondesignsystem.com/elements/spacing/`)
   für genau diese Abstände.

---

## 6. Was hier bewusst nicht geprüft wird

Layout und Anordnung sind im Zielsystem **Entscheidung des Designers**
(siehe [LEITPLANKEN.md](LEITPLANKEN.md)). Verbindlich zu übergeben sind
Kennzahl-Definitionen, Diagrammregeln und Verhalten. Wer diese Liste im Review
benutzt, prüft die Substanz — nicht, ob eine Karte 40 px weiter links sitzt.