0 Fork 0

Files

T

dejanandClaude Opus 5 351a26efa4 fix(layout): kollidierenden und überlaufenden Text beseitigen

Gemeldeter Fehler: In der Ringlegende klebten Bezeichnung und Wert aneinander
("Gestellt189,1 T€"). Ursache war eine eigene Regression — beim Beheben der
abgeschnittenen Legendennamen war das truncate entfallen, ohne Ersatz. Damit
schrumpft die Namensspalte durch min-w-0 + grow auf null Breite, und der Text
läuft sichtbar über seinen Kasten hinaus:

  1280 px  Kastenbreite 0 px, Text 43 px darüber hinaus
  1440 px  Kastenbreite 25 px, Text 18 px darüber hinaus
  1600 px  unauffällig

Genau deshalb war es auf den Screenshots nicht zu sehen: Der Fehler tritt nur in
bestimmten Fensterbreiten auf.

Neu: scripts/verify-layout.mjs + npm run verify:layout. Lädt alle sechs Seiten in
sieben Breiten (1024–1920) und misst jede Textzeile über Range.getClientRects.
Gemessen wird auf Textzeilen, nicht auf Elementkästen — sonst melden benachbarte
Tabellenzellen mit Innenabstand falsch positiv. Mindestabstand 8 px = Carbon
$spacing-03. Der Lauf fand 110 Fehler; alle behoben:

- Ringlegende: Container-Query statt fester Zweispaltigkeit. Legende sitzt rechts
  vom Ring, wenn Platz ist, sonst darunter — Carbon: "positioned to the right of
  the chart when space is plentiful". Namen brechen um statt überzulaufen.
- Auslastungs-Achse: Beschriftungsdichte staffelt sich über drei Container-Stufen,
  vorher überlappten die Zahlen in schmalen Karten um bis zu 16 px.
- Handlungsbedarf und Kennzahl-Labels: break-words statt Überlauf.
- Kartentitel und -untertitel: break-words, weil Dateipfade keine Leerzeichen
  zum Umbrechen haben.

Dokumentiert als DESIGN-SYSTEM.md §9 mit Begründung, warum das ein gemessener
Prüfer sein muss und keine Sichtprüfung.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

2026-08-29 19:32:55 +02:00

5.5 KiB

Raw Blame History

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:

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
IBCS — International Business Communication Standards, die SUCCESS-Regeln. Das ist der ausgearbeitete Standard für Geschäftsgrafik, den Carbon nicht ersetzt: einheitliche Notation, Ist/Plan/Vorjahr, Informationsdichte. Frei unter CC BY-SA auf ibcs.com.
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.
Stephen Few, „Information Dashboard Design". Das Standardwerk zur Dashboard-Kritik; die ersten beiden Kapitel reichen für ein geschultes Auge.
Datawrapper Academy (academy.datawrapper.de) — kurze, gut belegte Artikel zu einzelnen Fragen („Wann Balken, wann Linien", „Warum keine zwei Y-Achsen").

Zum Zielsystem passend:

Carbon Data Visualization (carbondesignsystem.com/data-visualization/) für Farben, Achsen und Diagrammtypen — mit der Einschränkung aus DESIGN-SYSTEM.md Abschnitt 0: Abstände regelt Carbon nicht.
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). 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.

5.5 KiB Raw Blame History Unescape Escape