Layout

Die Titel bilden eine Gliederung

Geltung

universal · web, react-native

Warum

Die Größe eines Titels sagt, wie viel er umfasst. Der Seitentitel umfasst alles, ein Abschnittstitel nur seinen Abschnitt. Liest Du nur die Titel von oben nach unten, kennst Du den Aufbau der Seite, bevor Du ein Feld gelesen hast.

Steht derselbe Titel zweimal da, einmal groß im Kopf und einmal kleiner über dem Formular, zeigt die Seite zwei Titelstufen für eine Sache. Der Nutzer liest dasselbe zweimal und fragt sich, ob es zwei Dinge sind. Ändert später jemand nur einen der beiden, weiß niemand mehr, wie die Seite heißt.

Screenreader lesen dieselbe Gliederung vor. Wer von Überschrift zu Überschrift springt, hört nur die Struktur. Ein doppelter Titel oder eine übersprungene Titelstufe ist dort ein Fehler in der Navigation.

Jede Stufe ist sichtbar

Die Gliederung muss man auch sehen. Jede Titelstufe unterscheidet sich von der darunter durch Größe, Gewicht oder beides. Titelstufen dürfen beide Mittel zusammen nutzen, anders als Kennzahlen in Betone mit einem Mittel, nicht mit zweien. Das gilt auch für die unterste Stufe: Ein Titel über einer Liste hebt sich von ihren Einträgen ab. Hat er dieselbe Größe und dasselbe Gewicht, liest er sich als erster Eintrag. Ein zusätzliches Icon oder eine Einrückung ersetzt Größe und Gewicht nicht. Beides fügt nur eine Kante hinzu.

Hart und weich

Woran Du den Verstoß erkennst

• Kopfleiste und erste Überschrift der Ansicht nennen dasselbe.
• Eine Karte direkt unter dem Titel trägt ihn noch einmal als Kopf.
• Titel und Untertitel sagen dasselbe mit anderen Worten.
• Auf einen Titel in Titelstufe 1 folgt direkt einer in Titelstufe 3.
• Ein Titel ist nur über Größe und Gewicht gesetzt, ohne Überschriften-Element.
• Ein Titel hat dieselbe Größe und dasselbe Gewicht wie die Einträge darunter.
• Ein Titel hebt sich nur über ein zweites Icon oder eine Einrückung ab.
• Jeder Browser-Tab der Anwendung heißt gleich, der Titel ändert sich beim Seitenwechsel nicht.

Richtig / falsch

        RICHTIG                             FALSCH

  1 Stammdaten bearbeiten             1 Stammdaten bearbeiten
    2 Anstellung                      1 Stammdaten bearbeiten   ← doppelt
    2 Daten                               3 Anstellung          ← Titelstufe 2 fehlt
    2 Gehalt und Abfindung              2 Daten

Grenzen

Ein Abschnittstitel darf ein Wort mit dem Seitentitel teilen. Ein Pfad im Kopf der Anwendung („Bereich › Objekt“) ist Navigation und kein Titel. Dann trägt die Ansicht den Namen des Objekts als Titelstufe 1.

Druckansichten und Exporte brauchen Titelstufe 1 im Dokument, weil dort der Kopf der Anwendung fehlt.

Verwandt

• Betone mit einem Mittel, nicht mit zweien
• Jeder Textstil hat eine Rolle