Inhaltshierarchie in der Benutzeroberfläche

1) Warum wir Hierarchie brauchen

• beantwortet drei Fragen in 3-5 Sekunden: Was ist das? → was ist wichtig? → was ist zu tun?
• macht die Schnittstelle vorhersehbar und leicht zu scannen;
• reduziert Fehler und steigert die Conversion.

Prinzipien: Signale> Rauschen, Konsistenz> Vielfalt, Kontext> absolute Regeln.

2) Bedeutungsebenen und Struktur

1. Navigationskontext (Marke, Abschnitt, Krümel/Brotkrümel).

2. H1 ist das Ziel des Bildschirms (so kurz wie möglich, bei Bedarf verbal).

3. Lead/Untertitel (eine Gewinn- oder Statuszeile).

4. Primäre Aktionen (1-2 Schlüssel-CTAs).

5. Primärdaten (Hauptkennzahlen, „First Line“ -Karten).

6. Sekundärdaten (Teile, Filter, Hilfstabellen).

7. Meta/Hilfe (Hinweise, Hinweise, Gesetzestext).

Regel: ein H1 auf einem Bildschirm, nicht mehr als zwei primäre CTAs.

3) Typografie und Rhythmus

Schriftarten Skala: H1 28-32, H2 22-24, H3 18-20, Körper 14-16, Mikro 12 (px/pt Äquivalent im Web).
Zeilenabstände: 1. 3–1. 5 für den Körper, 1. 2–1. 3 für die Überschriften.
Einrückungsrhythmus: Vielfaches der Basiseinheit (4/8 px). Zagolovok↔blok: 16-24; Absätze: 8 bis 12.
Kontrast: Minimum WCAG AA; der Titel ist immer kontrastierender als die Beschriftungen/Meta.
Farbe vs Gewicht: Farbe - Akzent, nicht „Krücke“ statt Größe/Fett.

4) Raster und Layout

Raster 12 Spalten (Desktop )/4-6 (Mobile) mit festen Gattern.
Visuell zuerst = zuerst im DOM: hilft Screenreader und SEO.
Leseachse: von links nach rechts (LTR) oder von rechts nach links (RTL) - Spiegeln Sie die Reihenfolge der Signale.
„Aufmerksamkeitszonen“: oben links/Mitte - Überschrift und Leitung; „Aktionsstreifen“ - daneben/darunter.

5) Visuelle Prioritätssignale

Größe und Gewicht (Typografie) ist das primäre Signal.
Position (oben/links = wichtiger bei LTR).
Farbe (Akzent für CTA, Status - auf einer festen Palette).
Ikonographie (nur als Textunterstützung).
Einzüge/Rahmen (eine Karte mit viel „Luft“ wird als wichtiger wahrgenommen).
Dynamik (Animation ≤ 200 ms, um Aufmerksamkeit ohne Irritation zu erregen).

6) Progressive Offenlegung

• Above the fold - nur Kontext, Zweck und primäre Aktion.
• Akkordeon/Taba-Abschnitte sind Sekundärdaten.
• Drill-Down: Karte → Panel → Modal.
• Inline-Hinweise statt überforderter „Helps“.
• Skeletons/Platzhalter behalten die Struktur für die Ladezeit.

7) Hierarchie in Typenschildern

7. 1 Dashboard

H1 + Zeitfilter oben.
Die KPI-Leiste (3-5 Karten) ist die erste Zeile.
Graphen/Tabellen - zweite Zeile, Sortierung/Filter nebeneinander.
Anomalien/Alerts - separate Spalte/Band, nicht mit KPIs mischen.

7. 2 Katalog/Lobby

H1 + Schnellfilter/Chips.
Sortierung näher an der Überschrift, CTA „Play/Buy“ in der Karte.
Tags (neu/oben/Jackpot) - visuell zweitrangig in Bezug auf den Namen.

7. 3 Entitätskarte (Spiel/Ware)

Hero-Zone: Name (H1), wichtige Fakten (RTP/Volatilität/Rating), primäre CTA.
Details: Registerkarten „Beschreibung/Merkmale/Bewertungen“.
Metadaten: Tags und Gesetzestext sind unten.

7. 4 Formulare/Master

Schrittkopf + kurze Führung („2 Minuten, Karte wird nicht abgeschrieben“).
Reihenfolge der Felder nach Häufigkeit/Obligation.
CTA rechts/unten, Hilfsaktionen - Links unten/links.
Fehler - neben dem Platz, kurz und auf den Punkt.

8) Priorisierung der Zustände

• Norm → Download → Erfolg/Leer → Fehler.
• Im Download - speichern Sie den Rahmen (Skeletons), CTA springt nicht.
• Im Fehler - H1 wechselt zu „was ist passiert“, CTA - „wiederholen/kontaktieren“.

9) Content-Token und Design-System

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Textrollen: 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Farbrollen: 'accent/neutral/success/warn/danger' + 'levels' (100-900).
• Komponenten: 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Messung und Qualität

• Scan Time (Median bis zum ersten sinnvollen Klick/Aktion).
• Focus Order Errors (wie oft der Benutzer den Blick „verfehlt“).
• CTA Visibility% (wie viele haben gesehen CTA vs geklickt).
• INP/CLS (Hierarchie darf beim Laden nicht „springen“).
• A/B: größer als H1 vs stärkerer Kontrast; Chip-Filter oben vs in der Seitenleiste.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Praktiken für iGaming (Beispiel)

Casino Lobby: H1 „Lobby“, Chips „Neu/Live/Jackpots/Favoriten“, dann Kacheln. In jeder Karte - der Name, das Symbol des Anbieters, CTA „Play“; Neue/Jackpot-Tags sind sekundär.
Operator Dashboard: Die erste Zeile ist NGR/GGR/DAU/CR, die zweite sind Trends und Anomalien, die dritte sind Tabellen.
Zahlungsschritt: H1 „Nachschub“, Lead „Keine Provision, sofort“, Liste der Konvertierungsmethoden, Minimum an Metatext oben.

12) Antipatterns

Zehn Akzente gleicher Stärke auf dem Bildschirm („visueller Schrei“).
Überschriften als Bilder/Icons ohne Text (bricht Zugänglichkeit und Suche).
„Ergebnisse im Kleingedruckten“ und Aushänge mit Riesenbannern.
Unterstützende Links neben dem primären CTA mit dem gleichen visuellen Gewicht.
Unkoordinierte Reihenfolge: heute „Filter von oben“, morgen „links“.

13) Checkliste Umsetzung

1. Bestimmen Sie das Ziel des Bildschirms (H1 + 1-2 primäre Aktionen).
2. Stufen markieren: primär/sekundär/meta; in DS-Token verankern.
3. Sammeln Sie die Typografie-Skala und den Grundrhythmus der Einzüge.
4. Debuggen Sie die Zustände (Booten/Leer/Fehler) ohne STA/Header-Sprünge.
5. Führen Sie einen 5-minütigen „Scan-Test“ mit 3-5 Personen durch: Was Sie bemerkt haben, wo Sie geklickt haben.
6. Telemetrie anschließen (Exposure CTA, Scan Time, Focus Order).
7. Fixieren Sie das Muster in den Haydlines mit Vorher/Nachher-Beispielen.

14) Das Ergebnis

Die Inhaltshierarchie ist keine „Großschrift für den Master“, sondern ein Entscheidungssystem: Typografie, Raster, Farbe, Einrückrhythmus, Reihenfolge im DOM und Verhalten in verschiedenen Zuständen. Wenn jede Ebene ihre eigene Rolle und ihr eigenes Gewicht hat, wird die Schnittstelle klar, schnell und vorhersehbar und die Benutzer sind zuversichtlich in ihrem Handeln.