dejanandClaude Opus 5
6a0b36ddcc
467 Stellen. Nicht durch einen anderen Strich ersetzt, sondern durch das
Satzzeichen, das an der jeweiligen Stelle richtig ist: Doppelpunkt, wo eine
Erlaeuterung folgt; Komma, wo der Satz weiterlaeuft; Punkt, wo zwei
Hauptsaetze aneinanderstiessen. Ein Halbgeviertstrich waere nur derselbe
Griff mit kuerzerem Strich gewesen.
Regelbasiert ersetzt und danach nachgeprueft, weil eine Regel allein nicht
reicht. Gefunden und einzeln korrigiert:
- Eingeschobene Saetze mit Strichpaar. Nur der oeffnende Strich passte ins
Muster, der schliessende blieb als "—," stehen. Drei Stellen, jetzt mit
Klammern oder als eigener Satz.
- Doppelte Doppelpunkte, wo beide Striche eines Paars zu Doppelpunkten wurden
("Globale Regeln: Schrift, Groessen, Abstaende: kommen aus HiveGrid").
Sieben Stellen in Doku und Oberflaeche, jetzt in Klammern.
- Pfade, denen ein Komma statt eines Doppelpunkts folgte.
- Ausgerichtete Kommentartabellen, in denen der Strich eine Spalte war.
Nicht angefasst: drei Geviertstriche, die keine Prosa sind, sondern
Tabellenplatzhalter fuer "kein Wert" (Trichter, Auftraege, Kunden). Dort ist
der Strich die Angabe selbst; ihn zu entfernen liesse leere Zellen zurueck.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
118 lines
5.5 KiB
Markdown
118 lines
5.5 KiB
Markdown
# 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.
|