Werten Sie Ihre Knowledge-Base-Artikel mit visuellen Elementen auf. Das Hinzufügen von Screenshots verdeutlicht komplexe Konzepte, vereinfacht Anleitungen und bietet den Nutzern eine klare Ansicht der Oberflächenelemente. Diese Anleitung zeigt Ihnen, wie Sie Bilder sauber und effektiv einbinden und so die Verständlichkeit der Inhalte und das Engagement der Leser verbessern.

Erstellen von Screenshots auf einem Computer oder Mobilgerät

Informationen zum Erstellen von Screenshots für die Knowledge Base und welche Bearbeitungswerkzeuge Sie verwenden können, erhalten Sie im Artikel Wie Sie Bildschirmfotos (engl. Screenshots) erstellen können.

Hinzufügen von Screenshots und anderen Bildern zu Knowledge-Base-Artikeln

Ein Bild in die Mediengalerie hochladen

1. Rufen Sie die Mediengalerie auf.
2. Klicken Sie unten rechts auf die Schaltfläche Upload.
3. Der Dialog „Hochladen“ öffnet sich. Klicken Sie auf die Schaltfläche Browse…, um die Dateien auf Ihrem Computer zu durchsuchen und das Bild auszuwählen, das Sie hochladen möchten.
4. Nach der Auswahl des Bildes werden Sie in einem Dialogfeld aufgefordert, einen Titel und eine Beschreibung für Ihr Bild einzugeben. Geben Sie diese Daten ein und klicken Sie dann auf die Schaltfläche Upload, um den Hochladevorgang abzuschließen.

Ein Bild direkt aus dem Artikel-Editor hochladen

Wenn Sie gerade einen Artikel bearbeiten und ein Bild hinzufügen müssen, können Sie es auch direkt aus der Symbolleiste hochladen:

1. Erstellen Sie entweder einen neuen Artikel oder bearbeiten Sie einen bereits vorhandenen.
2. Klicken Sie im Artikel-Editor auf die Schaltfläche „Medien einfügen“ in der Symbolleiste.

   

   • Dadurch wird der Dialog „Medien einfügen“ aufgerufen.
3. Wählen Sie unten im angezeigten Dialog die Schaltfläche Upload Media, um fortzufahren.
4. Klicken Sie im Dialog „Hochladen“ auf die Schaltfläche Browse…, um die Dateien auf Ihrem Computer zu durchsuchen und das Bild auszuwählen, das Sie hochladen möchten.
5. Nach der Auswahl des Bildes werden Sie in einem Dialogfeld aufgefordert, einen Titel und eine Beschreibung für Ihr Bild einzugeben. Geben Sie diese Daten ein und klicken Sie dann auf die Schaltfläche Upload, um den Hochladevorgang abzuschließen.

Ein Bild zu einem Artikel hinzufügen

1. Sie können entweder einen neuen Artikel erstellen oder einen bereits vorhandenen bearbeiten.
2. Suchen und klicken Sie in der Symbolleiste auf die Schaltfläche „Medien einfügen“ .
3. Wählen Sie in der Galerie das Bild aus, das Sie hinzufügen möchten, und klicken Sie dann auf Insert Media, um es in den Artikel einzubetten.

Effektive Verwendung von Inline-Bildern

Die direkte Einbindung von Inline-Screenshots in Knowledge-Base-Artikel verbessert die Übersichtlichkeit und Navigation, indem Oberflächenelemente wie Schaltflächen und Menüs visuell dargestellt werden. Dieser Ansatz optimiert die Artikel, macht sie durch die Reduzierung des Bild- und Textumfangs leichter verständlich und führt die Nutzer mit prägnanten, relevanten visuellen Elementen direkt durch die Benutzeroberfläche. Richtlinien zur Optimierung der Integration von Inline-Bildern:

• Klarheit hat Vorrang: Verwenden Sie Inline-Bilder, um Texthinweise durch präzise, visuelle Darstellungen zu ersetzen. Konzentrieren Sie sich auf die Darstellung interaktiver Elemente wie Menüs und Schaltflächen und stellen Sie sicher, dass diese Bilder direkt relevant sind und eine schnelle Erkennung und Interaktion durch den Nutzer ermöglichen.
• Strategische Platzierung: Integrieren Sie Screenshots neben dem relevanten Text, um Anleitungen nahtlos mit visuellen Hilfen zu verbinden. So können Nutzer den Anweisungen leichter folgen, ohne sich in langen Beschreibungen zu verlieren.
• Die Größe ist wichtig: Wählen Sie bei Inline-Bildern eine maximale Höhe von 16 Pixeln. Dadurch wird sichergestellt, dass die visuellen Elemente informativ, aber unaufdringlich sind und zu einem übersichtlicheren, besser zugänglichen Layout für die Nutzer beitragen, die durch den Inhalt navigieren.

Effektive Verwendung von Bildern für Schritt-für-Schritt-Anleitungen

Das Einbetten von Screenshots zwischen den Sätzen in Knowledge-Base-Artikeln veranschaulicht Aktionen oder Aufgaben visuell und überbrückt die Lücke zwischen Textanweisungen und ihrer praktischen Anwendung. Dieser Ansatz verbessert das Verständnis und das Engagement der Nutzer, indem er wichtige Schritte eines Prozesses illustriert und die Artikel interaktiver und für die Leser leichter verständlich macht. Die Richtlinien zur Optimierung der Bildverwendung in Schritt-für-Schritt-Anleitungen umfassen:

• Selektive Verwendung: Binden Sie Screenshots nur für Konzepte ein, die wirklich von einer visuellen Hilfe profitieren. Vermeiden Sie eine übermäßige Verwendung, um Unübersichtlichkeit zu vermeiden.
• Direkter Zusammenhang: Wählen Sie Screenshots aus, die in direktem Zusammenhang mit dem Begleittext stehen, und stellen Sie sicher, dass jedes Bild die beschriebene Aktion oder Aufgabe klar veranschaulicht.
• Logische Reihenfolge: Ordnen Sie die Screenshots so an, dass sie dem natürlichen Ablauf der Schritte folgen und die tatsächliche Erfahrung des Nutzers widerspiegeln. Diese chronologische Reihenfolge unterstützt einen logischen Fluss und ermöglicht eine Schritt-für-Schritt-Anleitung, der die Leser leicht folgen können.
• Genauigkeit ist entscheidend: Stellen Sie sicher, dass die Screenshots genau das wiedergeben, was die Nutzer auf ihren Bildschirmen sehen werden. Da das Erscheinungsbild je nach Betriebssystem variieren kann, passen Sie Ihre Screenshots entsprechend an. Eine Anleitung zur Anpassung von Screenshots für Windows-, macOS- und Linux-Nutzer finden Sie im Artikel Wie For verwendet wird.

Beispiele

Halten Sie es einfach!

• Wenn Sie ein Bild in eine Textzeile einfügen (Inline-Bild), sollte es nicht höher als 16 Pixel sein.
• Wenn Sie ein Bild zwischen zwei Sätzen in einer Reihe von Schritten oder einer Liste (geordnet oder ungeordnet) platzieren, sollte es durch ein Semikolon abgetrennt werden. Es ist nicht notwendig, Zeilenumbrüche um Bilder herum einzufügen.

Markup für ein Inline-Bild

So sieht das Wiki-Markup für ein Inline-Bild aus:

This is the text, followed by [[Image:The Image]], and this is the continuation of the text.

Beispiel für ein Inline-Bild

Hier ist ein Textausschnitt. Genau in der Mitte haben wir ein Inline-Bild der Firefox-Menüschaltfläche eingefügt. Danach haben wir zusätzlichen Text hinzugefügt.

Markup für ein Bild in einer Reihe von Schritten

So sieht das Wiki-Markup aus, um ein Bild mit einem Semikolon abzutrennen:

# This is a step.
#;[[Image:The Image]]
# This is the next step.


Beispiel für ein Bild in einer Reihe von Schritten

Dies ist ein Beispiel mit längerem Text und einem längeren Bild:

1. Dies ist ein Schritt. Und hier sind einige zusätzliche Wörter, damit Sie sehen können, wie sie über dem Bild verlaufen.

   

2. Dies ist der nächste Schritt, wieder mit zusätzlichen Wörtern, damit Sie sehen können, wie sie unter dem Bild verlaufen.

Richtlinien für die Knowledge Base

Wenn Sie mehr über das Schreiben und Bearbeiten von Knowledge-Base-Artikeln erfahren möchten, finden Sie hier die Richtlinien.