Zum Hauptinhalt springen

Design-Tipps

Gerade in der öffentlichen Verwaltung müssen komplexe Sachverhalte präzise und für alle verständlich vermittelt werden. Eine klare Struktur und ein leserfreundliches Design sind daher keine rein ästhetischen Fragen, sondern eine Grundvoraussetzung für Barrierefreiheit und Bürgernähe.

Helfen Sie Ihren Leser:innen, Informationen schnell zu erfassen, indem Sie optische Hürden abbauen und Inhalte übersichtlich gliedern. Die folgenden Hinweise unterstützen Sie dabei, Dokumentationen zu erstellen, die inhaltlich korrekt und gleichzeitig leicht zugänglich sind.

Zusammenfassung

Auf dieser Seite finden Sie konkrete Design-Tipps, um Texte und Strukturen so aufzubereiten, dass Leser:innen Inhalte schnell finden und verstehen. Sie erhalten Hinweise zu Sprache, Typografie, Struktur, Listen, Bildern, Links sowie zu technischen Markdown-Konventionen.

Verständliche Sprache​

  • Sätze schlank halten: Orientieren Sie sich an 9 Wörtern für optimale Verständlichkeit, 20 Wörter als Obergrenze und 30 Wörter als absolutes Limit.
  • Aufspaltung prüfen: Untersuchen Sie lange Sätze vor dem Veröffentlichen darauf, ob sie geteilt oder durch eine Aufzählung ersetzt werden können.
  • Aktiv formulieren: Vermeiden Sie unpersönliche passive Formulierungen ("Der Antrag wird geprüft"). Sprechen Sie die Leser:innen direkt an oder benennen Sie die handelnde Instanz ("Wir prüfen Ihren Antrag"), um zugewandter und verständlicher zu wirken.

Textauszeichnungen und Typografie​

  • Fettschrift sparsam nutzen: Markieren Sie nur zentrale Begriffe oder Zwischenüberschriften fett, damit der Signal-Effekt erhalten bleibt.
  • Kursivschrift gezielt verwenden: Nutzen Sie Kursivschrift für Werktitel, technische Termini oder Fremdwörter.
  • Typografische Anführungszeichen setzen: Verwenden Sie für Zitate und Begriffe korrekte Anführungszeichen („ und “) statt der doppelten Anführungszeichen ("). Tastenkombination Windows: [ALT] 0132 für unten, [ALT] 0147 für oben. HTML: „ für unten, ” für oben.

Struktur und Lesbarkeit​

  • Visuelle Anker setzen: Sorgen Sie für regelmäßige Unterbrechungen, bevor ein Textabschnitt zur "Textwüste" wird.
  • Elemente variieren: Nutzen Sie Bilder, Zwischenüberschriften, Zitate, Admonitions (spezielle Textblöcke, die wichtige Hinweise, Warnungen oder Tipps hervorheben und sich vom Haupttext abheben, z. B. mit Icons; ausführliche Infos dazu in der Docusaurus-Dokumentation (öffnet in neuem Tab)) oder Trennlinien, um längere Passagen in logische Einheiten zu gliedern.
  • Überladung vermeiden: Kombinieren Sie maximal zwei dieser Elemente pro Abschnitt, damit das Seitenbild ruhig bleibt.
  • Hierarchie einhalten: Überspringen Sie keine Überschriften-Ebenen (auf H2 folgt zwingend H3, nicht H4), da Screenreader-Nutzer:innen anhand dieser Struktur navigieren.

Listen und Tabellen​

  • Nummerierung für Reihenfolgen nutzen: Verwenden Sie nummerierte Listen (1., 2., 3.) nur, wenn die Abfolge zwingend ist (z. B. Schritt-für-Schritt-Anleitungen).
  • Aufzählungszeichen für Aufzählungen verwenden: Nutzen Sie Aufzählungszeichen (engl. bullets), wenn die Reihenfolge der Punkte inhaltlich austauschbar ist.
  • Tabellen zweckgebunden nutzen: Verwenden Sie Tabellen ausschließlich für strukturierte Daten (z. B. Zeitpläne), niemals für Layout-Zwecke.
  • Mobile Lesbarkeit prüfen: Bedenken Sie, dass breite Tabellen auf Smartphones schwer lesbar sind. Prüfen Sie deshalb, ob eine Liste denselben Zweck erfüllt.

Bilder und Infografiken​

  • Alt-Texte schreiben: Versehen Sie jedes bildliche Element mit einem Alternativtext, der beschreibt, was zu sehen ist (für Screenreader).
  • Dekorative Bilder markieren: Geben Sie Bildern ohne Informationsgehalt einen leeren Alt-Text ([](Link-zum-Bild)), damit sie von Hilfstechnologien ignoriert werden.
  • Farbe ergänzen: Nutzen Sie Farbe nie als alleiniges Merkmal (z. B. "rot markierte Felder sind Pflichtfelder"), sondern ergänzen Sie Symbole oder Text, um auch farbenblinde Menschen zu erreichen.
  • Brand Guide beachten: Berücksichtigen Sie bei Produkten des IT-Planungsrats den entsprechenden Brand Guide.
Tipp

Die IT-PLR-Farbpalette ist in der Datei /tailwind.config.js hinterlegt. Die darin enthaltenen Farbwerte können beispielsweise für die Erstellung von Grafiken verwendet werden.

  • Aussagekräftige Texte wählen: Vermeiden Sie nichtssagende Formulierungen wie „hier klicken“ oder „mehr erfahren“.
  • Ziel beschreiben: Integrieren Sie das Ziel in den Linktext: Statt „Für den Antrag hier klicken“ schreiben Sie „Zum [Antragsformular für Wohngeld]“.
  • Nackte URLs vermeiden: Schreiben Sie keine rohen Internetadressen (www.beispiel.de) in den Fließtext, da diese den Lesefluss stören.

Technische Dokumentation (Code)​

  • Inline-Code markieren: Nutzen Sie für Variablennamen oder Dateipfade im Fließtext den Akzent grave (engl. backtick). Beispiel: `mein inline-code`
  • Sprache angeben: Verwenden Sie für Code-Blöcke drei Backticks (```); geben Sie ggf. direkt dahinter die Sprache an (z. B. bash, json), um Syntax-Highlighting zu aktivieren.

Formale Markdown-Konventionen​

  • Mit H2 beginnen: Starten Sie im Textkörper mit Überschriften der zweiten Ebene (##), da der title im Front Matter bereits als H1 fungiert.
  • Markdown-Syntax sauber halten: Setzen Sie nach dem Hash-Zeichen genau ein Leerzeichen vor dem Titel und lassen Sie eine Leerzeile vor dem folgenden Fließtext.
  • Absätze trennen: Halten Sie zwischen Textabsätzen jeweils eine Leerzeile frei.
  • Zeilenumbrüche erzwingen: Nutzen Sie für Umbrüche innerhalb eines Absatzes das <br/>-Tag oder beenden Sie die Zeile mit zwei Leerzeichen.
  • Trailing Spaces entfernen: Löschen Sie überflüssige Leerzeichen am Ende einer Zeile.
  • Dateiende markieren: Schließen Sie jede Datei mit exakt einer abschließenden Leerzeile ab.