Dieser Leitfaden hilft bei der Erstellung von technischen Anleitungen.

• Mit einer kurzen Einleitung holen wir Laien ab, ohne Fortgeschrittene zu belasten.
• Zweck der Anleitung beschreiben.
• Relevante Begriffe definieren.
• Welche Voraussetzungen müssen gegeben sein, um die Anwendungen zu nutzen.

Sich vorher klar machen: Jede Anleitung muss verständlich sein.

• Was ist für Nutzende wichtig? Welches Vorwissen hat die Person?
• Welche Zielgruppe wollen wir ansprechen?

Ziel der Anleitung:

• weniger Fehler bei der Anwendung
• weniger Reklamationen
• Verweismöglichkeit für den Support

Webseite für eine Anleitung anlegen Webseitenlink definieren

Beim Anlegen der Seite wird aus der Überschrift automatisch eine URL erstellt.

• Definiere die URL so, dass sie später nicht mehr geändert werden muss.
• Ist der Titel lang, ist auch die URL lang.
• Eine kurze URL ist sinnvoll, wenn diese per E-Mail oder telefonisch weitergegebenw wird.
• Enthält der Titel Sonderzeichen, werden diese ersatzlos aus dem Permalink entfernt. Das kann den Sinn verfälschen.

Beispiel: Titel einer Seite ist Redaktionsleitfaden des Zentrums für Datenverarbeitung.
Nachdem Speichern, lautet der Permalink: redaktionsleitfaden-des-zentrums-fuer-datenverarbeitung

Besser: redaktionsleitfaden-des-zdv

Relevant für Übersichtsseiten für Schlagworte und Kategorien: Stand 2025/09 werden Seiten nicht in den Beitragslisten angezeigt, daher ist es nicht sinnvoll oder nötig, die Taxonomie zu verwenden.

Template für eine Übersichtsseite und eine Anleitungsseite sind in cms-test oder -stage in Vorbereitung

• Der Fließtext lässt sich besser lesen, wenn er schmaler ist.
• Akkordeon-items kann man verlinken.

Eine optimale Anleitung enthält nicht mehr als sieben:

• Punkte
• Links
• Bilder

• Kurze Beschreibung des Dienstes
• Zielgruppe definieren (bspw. für JGU-Mitarbeitende, für Studierende)
• Voraussetzungen
• Anmelden
• Anwendungsbereiche
• Hintergrundinformationen
• Support
  • Abgrenzungen (was supporten wir genau)
  • Schulungen
  • Fragestunde
  • Kontakt für Rückfragen
  • Aufforderung an user: 3 wichtigsten Infos zu einem Problem mitschicken
    • Betriebssystem, verwendete Programme
    • Benutzername
    • Fehlermeldung angeben (Screenshot und Datum)
    • Was hätte passieren sollen?
    • Was ist passiert?

Gutes Beispiel: https://zdv.uni-mainz.de/service/cms/ Konkrete Anleitung

• Jede Seite beginnt mit einem einem Einleitungssatz zum Dienst inkl. Link zur Überblicksseite.
• Welche Voraussetzungen sind nötig?
  • JGU-Account
  • Aktuelle Browserversion
  • Hardware
• Schritte durchnummerieren, ansonsten Liste.
• Screenshots (so wenig wie möglich) nur bei relevanten/interessanten Stellen und/oder bei einem Ergebnis.

• Schnellen Zugang zu den Inhalten des Dokuments ermöglichen.
• Je prägnanter und klarer, desto besser erfüllen Überschriften diese Funktion.
• Beschränke die Überschrift auf einen thematischen Aspekt.

Negativbeispiel: Ihr Betriebssystem?
Besser: Android / iOS / macOS / Unix

• Gleichlautende Überschriften für gleichartige Inhalte finden.

• VPN unter Windows 10
• VPN unter Linux
• …

Negativbeispiel: Daher muss diesem System die Zugehörigkeit zur jeweiligen Uni mitgeteilt werden, damit das Netzwerk vor Ort die Zughörigkeit beim Rechenzentrum der JGU verifizieren kann. Dies erfolgt, indem man seinen Nutzernamen mit der Erweiterung @uni-mainz.de ergänzt. WICHTIG! Dies gilt für alle Nutzer, auch Studenten. Die Erweiterung @students.uni-mainz.de funktioniert NICHT!

Besser: Teilen Sie dem System Ihre Zugehörigkeit zur Universität mit, in dem Sie Ihren Benutzername mit @uni-mainz.de erweitern. 💡 Dies gilt für alle JGU-Angehörigen, auch für Studierende.
Die Erweiterung mit @students.uni-mainz.de funktioniert nicht.

• Aktiv ist besser verständlich „jemand tut etwas“.
• Passiv nur im Ausnahmefall, wenn die Person nicht aktiven Einfluss nehmen kann.

Negativbeispiel: Hier sucht man sich dann Eduroam heraus. Zu Illustrationszwecken ist dies hier ganz oben aufgelistet, in der Regel versteckt es sich irgendwo in der Liste. Hier muss eventuell ein wenig gesucht werden.

Besser: Klicken Sie auf Eduroam. Normalerweise erscheint das Netzwerk nicht ganz oben. Gehen Sie die komplette Auflistung der Netzwerke durch.

• Sprechen Sie LeserInnen direkt an. So wissen diese, was zu tun ist.
• „Sie“ immer groß schreiben.

Negativbeispiel: Es ist dabei zu beachten, dass die Eingabeaufforderung als administrative Eingabeaufforderung geöffnet werden muss, da ansonsten die Rechte nicht ausreichen!

Besser: Beachten Sie bei der Eingabeaufforderung, dass Sie diese als administrative Eingabeaufforderung öffnen. Sie haben ansonsten nicht alle Rechte.

• Mögliche Beispiele: Mitarbeitende, Studierende, Mitarbeiterinnen und Mitarbeiter; MitarbeiterInnen, Ansprechperson
  • wir haben uns aus Gründen der Barrierefreiheit (Vorlesefunktion) dafür entschieden
  • Stern wird vorgelesen und Doppelpunkt erzeugt eine Pause
• In Beispielen, im Text und in Screenshots erscheint neben Beispielstudent Johannes Gutenberg auch Frau Prof. Dr. Testerin … und umgekehrt.
• zur Anregung: https://geschicktgendern.de/
• Die JGU gibt vor, geschlechtsneutrale Formulierungen zu verwenden: https://gleichstellung.uni-mainz.de/geschlechtergerechte-sprache/
• JGU Handreichung diskriminierungsarme Sprache
• SEO: Wenn der Begriff gesucht wird, zusätzlich diese Fassung verwenden.

• Vergleichbare Sachverhalte bei Aufzählungen und Handlungsanleitungen vergleichbar beschreiben; Beispiel: Anmelden
• Das Wichtigste steht am Satzanfang.
• Pro Satz nur eine Aussage; lange Sätze erschweren die Textverständlichkeit.
• Schachtel- und Nebensätze vermeiden, da Lesefluss unterbrochen wird.
• Abkürzungen, beim ersten Mal ausschreiben, danach nur noch als Abkürzung.
• Klammereinschübe vermeiden; nur für Abkürzungen
  • Werden meist nicht gelesen und unterbrechen Lesefluss

Negativbeispiel: Mit der unten gezeigten Phishing-Mail wird versucht, den Empfänger dazu zu bringen, die angegebene Webseite aufzurufen, auf der er sich mit Benutzername und Passwort einloggen soll – die JGU-Accountdaten werden dabei dann abgefangen.

Besser: Die abgebildete E-Mail ist ein Beispiel für eine Phishing-Mail. Sie versucht den Empfänger dazu zu bringen, die angegebene Webseite aufzurufen. Auf der Webseite soll man sich dann mit Benutzername und Passwort einloggen. Die JGU-Accountdaten werden dabei abgefangen.

• Sätze mit Verben (Bsp. installieren) und wenig substantivierten Verben (Bsp. Installation) bilden.

Negativbeispiel: Erstellung des Teams

Besser: Ein Team erstellen

• Verben im Indikativ oder Imperativ verwenden

Negativbeispiel: Sie können jede Änderung mit Hilfe der Pfeiltasten in der Werkzeugleiste rückgängig machen.

Besser: Um eine unerwünschte Änderung zurückzunehmen, klicken Sie auf den Pfeil in der Werkzeugleiste nach links.

• Punkte als Aufzählungszeichen 
• Ab vier Elementen in eine Liste darstellen
• Bei Anleitungen: Schritte durchnummerieren, wenn diese abgearbeitet werden sollen.
• „ich bin nur ein vierter Punkt zur Illustration“

• „Wenn“- oder „Falls“-Sätze als kürzeste Form, die allen anderen Formen wie „für den Fall, dass“ vorzuziehen sind.
• Der Bedingungssatz nennt die Bedingung, die erforderlich ist, damit das Ereignis im Hauptsatz eintritt.

Negativbeispiel: Sollten Sie sich das erste Mal in ILIAS einloggen, …

Besser: Wenn Sie sich zum ersten Mal in ILIAS einloggen, …

• Unnötige Adjektive, Attribute und Füllwörter streichen.
• Der Text wirkt dadurch aufgebläht und ist weniger verständlich.

Negativbeispiel: Grundsätzlich werden Take-Home-Klausuren genauso angelegt wie vor-Ort-E-Klausuren, sie sind gewissermaßen ein Spezialfall.

Besser: Take-Home-Klausuren werden genauso angelegt wie Vor-Ort-E-Klausuren, sie sind nur ein Spezialfall (oder: Sie haben nur einige Besonderheiten).

• Streichen Sie Floskeln wie: bitte, wie gesagt, ausgerechnet, bekanntlich, im Prinzip, mehr, oder weniger, in gewisser Weise, in gewisser Hinsicht, bei Bedarf, diesbezüglich
• Floskeln lassen die zugehörige Aussage unverbindlich erscheinen

Negativbeispiel: Des Weiteren sollten Sie die mit einem roten Sternchen versehen Felder korrekt ausfüllen.

Besser: Füllen Sie die mit einem roten Sternchen versehenen Felder korrekt aus.

Negativbeispiel: Bitte loggen Sie sich nicht mit Accounts ein, die speziell für ABC erstellt wurden.

Besser: Verwenden Sie keine Accounts, die speziell für ABC erstellt wurden.

• Zwei Morpheme immer ohne Bindestrich schreiben: Dateiauswahl.
• bei Abkürzungen und Akronymen wird ein Bindestrich auch bei zwei Morphemen gesetzt: ZDV-Hotline.
• Drei Morpheme immer mit Bindestrich: Dateiauswahl-Dialog.

Mehr erfahren

Bindestrich setzen im Duden erklärt

Negativbeispiel: Klicken Sie auf „Anmelden“
Besser: Klicken sie auf Anmelden.

• Für die Abfolge von Klicks in einer bestimmten Reihenfolge einen Haken (größer als) verwenden.

Beispiel: Datei → Drucken → Druckereigenschaften → Erweitert → XYZ
rechter Pfeil: Alt + 26

• Befehle, die auf einer Bildschirmansicht/screenshot zu sehen sind, in der Beschreibung fetten.

• Wenn der user einen Text wörtlich kopieren soll Icon <> nutzen oder im Textmodus auf crayon klicken.

Beispiel: Das ist ein Beispiel für crayon.

• für kurze Eingaben inline formatieren (weniger als eine halbe Zeile)

Beispiel: crayon eingabe inline

• für Eingaben länger als eine halbe Zeile Blockformatierung verwenden
• dies ist inline und nicht hervorgehoben.

Beispiel: crayon inline und nicht hervorgehoben

• Programmcodes mit dem Tag code erzeugen. Zunächst den Abschnitt markieren und im Textmodus auf code klicken.

Beispiel: echo "Data error x=0;"

Mehr erfahren

Vom Screenreader JAWS hervorgehobene HTML Tags

• Ein umbruchgeschütztes Leerzeichen verhindert einen automatischen Zeilenumbruch.
• Verwenden Sie umbruchgeschützte Leerzeichen, z. B. bei Zahl, Einheit, Operationszeichen, Abkürzungen.
• In Word: Strg+Shift+Leer
• Kein Zeilenbruch bei zusammengehörigen Wörtern.

• Für eine folgende Verlinkung Mehr erfahren verwenden; nicht hier oder weitere Informationen, kein icon

Negativbeispiel: Mehr Informationen finden Sie hier.

Besser: Melden sie sich bei Panopto an: https://video.uni-mainz.de/. Das ist nur beim Ausdruck hilfreich. Machen das die Leute noch? Funktioniert ausdrucken in dem neuen Layout ***

Mehr erfahren
Anleitung für Beispielanwendung (Link setzen)

• Interne Links werden automatisch unterstrichen

Beispiel: Webhosting an der JGU

• Externe Links werden automatisch mit einem Icon versehen: kleines Quadrat mit Pfeil. Das erscheint direkt hinter den externen Links.

Beispiel: Ministerium für Wissenschaft und Gesundheit

Mehr erfahren Automatische Kennzeichnung externer Links

• Besonders wichtige Informationen in Textboxen stellen.
• So wenig wie möglich einsetzen.
• Diese Formate stehen als Textblöcke zur Verfügung: fett und kursiv

Beispiel:  💡 Tipp: Die Textboxen immer mit dem gleichen Wort und dem entsprechenden Icon einleiten.

Immer die Originalgröße verwenden. So wenig wie möglich

• Anleitung muß auch ohne Bilder verständlich sein.
• Wesentliche Infos dürfen nicht ausschließlich in Screenshots enthalten sein.

Test: Bilder laden im Browser abstellen und Anleitung lesen. Echt, heut noch? ***

• Bilder werden immer mit Hilfe des Feldes Beschriftung näher beschrieben.

• Screenshots mitteils einer Beschriftung als solche kenntlich machen. Warum? *** Screenshots kannst du im Feld Beschriftung näher beschreiben, so wie Beschreibung und Alt-Text.

• Unter einem Bild folgt in einem neuen Absatz der nächste Schritt.
• Die Beschreibung eines Bildes kommt in die Beschriftung.

• 900 Pixel werden in den häufig verwendeten 960- und 1024 Pixel-Layouts von Webseiten komplett angezeigt.
• Die Höhe muss kleiner sein als der Seitenbereich des Browsers, damit die letzten Zeilen vor und die ersten Zeilen nach dem Bild gleichzeitig zu sehen sind.
• So wird der Lesefluss durch das Bild nicht komplett unterbrochen und es fällt leichter, Bild und Text in einem Kontext zu setzen.

• Fotos auf das gewünschte Format skalieren
• als JPG mit einer Qualität von 80% einfügen
• Bilder von Digitalkameras sind normalerweise mehr als 10-mal größer als das Bild, das für eine Webseite benötigt wird. Wenn unskalierte Bilder übertragen werden, dauert es viel länger, bis die Webseite angezeigt wird.

• Bei Bildern mit einheitlichen Farbflächen und harten Farbübergängen sind JPG-Kompressionsartefakte mit dem bloßen Auge zu erkennen und beeinträchtigen die Qualität des Bildes erheblich.
• Im PNG-Format bleiben Farbflächen bis zu ihrem Rand einheitlich und beeinflussen keine Nachbarfarben.
• Zudem komprimiert das PNG-Format einheitliche Farbflächen stärker als mit einem JPEG.
• Skalierung und Kompression reduzieren die Bildgröße und sorgen für eine schnellere Anzeige der Webseite.

Screenshots nicht skalieren, als PNG einfügen, ggf. unskalierter Ausschnitt

• Screenshots enthalten Text und Bedienelemente, die in Originalgröße auf gute Les- bzw. Erkennbarkeit ausgelegt sind.
• Jede Skalierung führt zu unleserlich kleinen und verschwommenen Schriften und ist daher zu vermeiden.
• Bei Screenshots die Fenster vor der Aufnahme des Fotos entsprechend skalieren.
• Bei Webseiten nur den eigentlichen Seiteninhalt verwenden und Bedienelemente und Fensterrahmen des Browsers entfernen.
• Ist es doch notwendig, größere Bildschirmfotos zu skalieren, sind zusätzlich unskalierte Ausschnitte zu verwenden.
• Kenntlich machen mit einem grauen Rand.
• Um den grauen Rahmen zu erzeugen, auf das Bild und dann auf das Stift-Icon klicken.
• bei Beschriftung nähere Beschreibung des Screenshots einfügen.

Mehr erfahren
https://www.blogs.uni-mainz.de/widgets-alle-auf-einen-blick/

• Bildschirmfotos sind häufig sehr komplex.
• Wichtige Elemente sind daher durch einen eingefügten Pfeil hervorzuheben bzw. zu kennzeichnen.
• Bei mehreren Elementen verschiedenfarbige Kennzeichnungen verwenden und diese im Text erwähnen.

Beispiel: Geben Sie zunächst ihren Namen (grün) und anschließend ihre Mailadresse (rot) ein.

• Betriebsunabhängiges tool einsetzen: flameshot: https://flameshot.org/

Alle Bildelemente haben gleiche Breite

• Durch gleich breite Elemente wirkt die Seite deutlich ruhiger und ist besser zu lesen.
• Umläufe, d.h. die Darstellung mehrerer Elemente (Text, Grafik) nebeneinander vermeiden. Ausnahme: Tabellen.
• Wenn notwendig und nicht durch CSS-Anweisungen erzwingbar, können Grafiken durch einen transparenten Rahmen auf die notwendige Größe gebracht werden.
  • Bei Fotografien ist dies nicht möglich, da das JPEG-Format keine Transparenz unterstützt.
  • Rahmen in der Farbe des Seitenhintergrunds haben den Nachteil, dass bei einer Änderung der Hintergrundfarbe der Rahmen sichtbar wird.