Kunden beeindrucken: 10 erstaunliche Beispiele für Produktdokumentation

Avatar of Author
Ciaran Sweet
on October 25, 2021 · · filed under Product Documentation Best Practices Technical Writing API Documentation Product Documentation Tutorials
Sehen Sie sich die beliebtesten Dokumentationsbeispiele von Docsie Teams an und erfahren Sie, wie Sie diese Beispiele in Ihrem Wissensportal nachbilden können.

Die Dokumentation ist ein wesentlicher Bestandteil des Produktentwicklungsprozesses. Während sich das Produkt von einem Proof-of-Concept zur Realität entwickelt, ist eine erklärende Dokumentation unerlässlich, um die Kunden über die Verwendung Ihres Produkts zu informieren.

Was sind die ersten Dinge, die ein Kunde wissen muss, wenn er sich für ein Produkt entscheidet? Wozu dient es, was kann es, und wie kann ich es benutzen? Lassen Sie uns Docsie als Beispiel nehmen!

Docsie ist eine Plattform für Produktdokumentation. Sie ermöglicht es Benutzern, Dokumentationen in einem Online-Wissensportal zu erstellen, zu bearbeiten, mit Anmerkungen zu versehen und zu veröffentlichen. Es ist so einfach, wie sich einzuloggen, ein neues Docsie Book zu erstellen und den ersten Inhalt zu verfassen!

Zugegeben, wir haben es einfach gehalten. Bei der Produktdokumentation erfordern komplexe Merkmale und Funktionen jedoch umfassendere Erklärungen, um das Konzept zu verdeutlichen.

In diesem Artikel stellen wir Ihnen 10 Lieblingsbeispiele des Docsie-Teams für erstaunliche Produktdokumentationen vor. Und was ist noch besser? Wir zeigen Ihnen auch, wie Sie selbst eine tolle Produktdokumentation erstellen können (inspiriert von unseren tollen Beispielen!)

Lasst uns eintauchen! 🤿

10 Erstaunliche Beispiele für Produktdokumentation

Im Folgenden finden Sie 10 erstaunliche Beispiele für Produktdokumentation, die vom Docsie-Team ausgewählt wurden. Wir werden erkunden, wie Sie Eigenschaften und Funktionen nachbilden und eine ähnlich erstaunliche Dokumentation in Docsie erstellen können!

1 - Docker

Docker ist eine Container-Virtualisierungsplattform, die das Hosting von Software in winzigen, modularen und individuell isolierten IT-Umgebungen ermöglicht. Das Konzept ermöglicht es, mehrere unterschiedliche Dienste auf einem einzigen Host-Betriebssystem zu hosten, indem die Betriebssystemressourcen zwischen Containern aufgeteilt und gemeinsam genutzt werden.

Docker-Dokumentation

Startseite des Docker-Dokumentationsportals

Docker verfügt über ein übersichtlich gestaltetes Produktdokumentationsportal, das alle wichtigen Informationen zum Herunterladen, Installieren und Einrichten von Docker-Containern enthält. Es bietet außerdem eine mehrsprachige Produktdokumentation, eine API-Referenzdokumentation und einen Abschnitt mit häufig gestellten Fragen (FAQs) am unteren Rand. Für die visuellen Lernenden gibt es auch einen Videoabschnitt unten rechts.

Um einen Abschnitt "Erste Schritte" zu erstellen, verwenden wir Docsie als Beispiel. Um mit Docsie zu beginnen, müssen Sie ein Konto erstellen, Ihre E-Mail-Adresse bestätigen, das Docsie Workspace Dashboard laden, ein neues Regal erstellen, ein neues Buch erstellen - damit sind die Grundlagen geschaffen! Erstellen Sie einen Rahmen mit Überschriften für jeden Abschnitt, schreiben Sie Anleitungen, fügen Sie Bilder und Hyperlinks hinzu und Sie werden eine ähnliche Struktur wie unten haben!

Und das Beste daran? Docsie macht das automatisch für Sie!

Beispiel für die Kopfzeilenstruktur in der Docker-Dokumentation

Um zu sehen, wie das in Docsie gemacht wird, lesen Sie den Docsie Quick Start Guide!

2 - Stripe

Stripe ist eine internationale Plattform zur Zahlungsabwicklung mit technischen Funktionen, die benutzerdefinierte Integrationen und Zahlungsparameter über die Stripe-Befehlszeilenschnittstelle (CLI) ermöglichen. Das Unternehmen hat sich zum Ziel gesetzt, das BIP des Internets zu steigern, indem es eine virtuelle Wirtschaftsinfrastruktur aufbaut, die den elektronischen Handel vereinfacht.

Lesen Sie mehr über die Stripe CLI

Stripe CLI-Dokumentationsseite mit Beispielen zur Codehervorhebung

Diese Stripe-Seite ist als technische Produktdokumentation bekannt. Sie zeigt, wie man eine CLI verwendet, um Docker-Container zu erstellen (hallo noch mal!) und mit Stripe zu kommunizieren, indem man nur Terminalbefehle verwendet. Auf der Seite finden Sie ein Inhaltsverzeichnis, Codeblöcke mit Copy-Paste-Funktionalität und Hyperlinks im Text.

Docsie hat Code-Blöcke, also lassen Sie uns herausfinden, wie man sie benutzt

Sehen Sie sich dieses Beispiel für Codeblöcke in Docsie an

Kopieren Sie diesen Code, um unserem Beispiel zu folgen - console.log('Hello World');

Öffnen Sie ein Docsie Book im Docsie Editor. Das GIF unten zeigt, wie man die Option "Code Block" in der Symbolleiste findet, und enthält ein JavaScript-Beispiel, das "Hello World!" ausgibt.

Animiertes GIF, das zeigt, wie man Codeblöcke zu Docsie Books hinzufügt

In Ihrem Docsie Portal wird Code hervorgehoben, um die Klarheit für technische Leser zu verbessern. Benutzer können den Code sogar mit dem praktischen Zwischenablage-Symbol kopieren!

Live-Docsie Portal Rendering für Code-Blöcke Beispiel

Sehen Sie, wie man das Code-Highlighting-Plugin in Docsie anwendet!

3 - Apple

Der allgegenwärtige Apfel! Nein, nicht die essbare Art!

Apple bietet eine hervorragende Produktdokumentation für seine populäre Smartphone-Reihe iPhone. In unserem Beispiel einer Apple-Produktdokumentation haben wir eine Versionsauswahl, ein Inhaltsverzeichnis, Text und Überschriften und schließlich Inline-Bilder.

Apple iPhone Dokumentationsseite

Lassen Sie uns die Versionskontrolle in Docsie erkunden!

Lesen Sie unsere Anleitung zur Versionsverwaltung in Docsie!

Beim Lesen der Dokumentation in einem Docsie-Wissensportal können die Leser eine Version mit dem Versionsauswahl-Plugin auswählen.

Versionsauswahl in Docsie Portal

Dies ermöglicht es den Lesern, historische Produktdokumentationen zu sehen - Sie wissen schon, für die langsamen Leute, die noch nicht aktualisiert haben!

Um eine neue Version in Docsie zu erstellen, verwenden Sie die Registerkarte Versionsverwaltung in Docsie Editor.

Versionsauswahlmenü in Docsie Editor

Von hier aus klicken Sie auf Version hinzufügen + .

Schaltfläche Version hinzufügen im Docsie-Editor

Wählen Sie nun eine Versionsnummer und einen Versionsnamen, bevor Sie auf die Schaltfläche Version hinzufügen klicken. So einfach geht's! Aktualisieren Sie das neue Versionsdokument mit allen Funktionsänderungen, und lassen Sie Ihre Kunden die neuesten (oder spätesten) Informationen finden!

Kontextmenü "Version hinzufügen" im Docsie Editor

4 - Parsen

Parse ist eine hervorragende Full-Stack-Softwareplattform, die Open-Source-Frameworks für Anwendungs-Backends bereitstellt. Es bietet einfach vorgefertigte Code-Ressourcen, auf die sich Entwickler bei der Integration in jedes Entwicklungsprojekt verlassen können.

Im Dokumentationsportal von Parse gibt es ein großartiges Dokumentationsbeispiel in Form von Kompatibilitätstabellen. Damit wird die Kompatibilität verschiedener Architekturen wie Node.js und MongoDB mit der Parse-Plattform überwacht.

Beispiel-Versionskompatibilitätstabelle auf der Parse-Website

Lassen Sie uns das in Docsie machen!

Wir können eine vierspaltige Tabelle ähnlich dem Parse-Beispiel mit Tabellenblöcken in Docsie erstellen.

Docsie-Tabellenblocksymbol mit hervorgehobener Vierspaltenoption

Wählen Sie das Tabellenblock-Symbol und dann die Option "Vier Spalten".

Verwenden Sie bei der Eingabe die Eingabetaste, um die Spalten zu verschieben. Verwenden Sie Strg + B auf der Tastatur, um den Text fett zu machen. Fügen Sie schließlich mit der Symboloption Emojis hinzu.

Replizierte vierspaltige Tabelle in Docsie Editor

Symbolauswahlmenü in Docsie Editor

Emoji- und Symbol-Auswahltabelle für Symbol-Kontextmenü in Docsie Editor

Lernen Sie die Symbolleiste von Docsie Editor kennen

Dies ist ein einfacher Weg, um API-Dokumentation und technische Software-Dokumentation zu schreiben. Sie können noch weiter gehen, indem Sie Hyperlinks zur Node.js-Website oder interne Links zu relevanten Benutzerhandbüchern hinzufügen. Erstellen Sie Ihre nächste API-Kompatibilitätstabelle in Docsie!

5 - Flutter

Flutter ist ein UI-Toolkit, das von Google entwickelt wurde, um die Konsistenz des Designs von Benutzeroberflächen für Mobil-, Web-, Desktop- und eingebettete Geräte zu verbessern. Es fördert die schnelle Gestaltung und Entwicklung von Benutzeroberflächen mit einem Online-Code-Editor, und eine auf Containern basierende Schichtenarchitektur ermöglicht eine vollständige Anpassung.

Flutter bietet eine Reihe von Videos, in denen sich die Nutzer über die Plattform informieren können. Da die Plattform von Google entwickelt wurde, ist YouTube die logische Wahl für unser Beispiel!

Flutter YouTube Video Beispiele auf Seite

Sie können dieses Design in Docsie mit Videoeinbettungsblöcken nachbilden!

Wie man mit der Symbolleiste des Docsie-Editors Videoeinbettungsblöcke in Docsie-Bücher einfügt

Klicken Sie einfach in Ihr Docsie Book, wählen Sie das Symbol für die Videoeinbettung und kopieren Sie dann die YouTube-URL in das Textfeld. Sie können dasselbe mit Dailymotion, Vimeo und einer Reihe anderer Video-Hosting-Websites tun.

Wir haben ein GIF, das diesen Vorgang zeigt, damit Sie Ihre eigenen Videos in Docsie einfügen können - probieren Sie es aus!

[Erfahren Sie, wie Sie die Symbolleiste des Docsie-Editors verwenden] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)

6 - Ionic Framework

Das Ionic Framework ist ein Open-Source UI-Toolkit für die Erstellung von leistungsfähigen Desktop- und Mobilanwendungen mit HTML, CSS, JavaScript und anderen Webtechnologien.

Es lässt sich in beliebte Frameworks wie Angular, React und Vue mit verschiedenen UI-Komponenten, nativen Gerätefunktionen und Theme-Unterstützung integrieren.

Ionic hat ein großartiges Beispiel für ein Mobiltelefon in seine Website eingebettet. Fügen wir ein ähnliches Beispiel zu unserem Docsie Book hinzu, indem wir iFrame-Einbettungen verwenden!

Kopieren Sie zunächst den unten stehenden Code:

<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>

Klicken Sie dann im Docsie-Editor auf den Code-Einbettungsblock. Fügen Sie den iFrame-Einbettungscode hier ein und klicken Sie dann auf Speichern, um fortzufahren. Unten finden Sie ein GIF, das diesen Vorgang veranschaulicht.

Wie man iFrame-Integrationen in Docsie Books mit der Symbolleiste des Docsie Editors einbettet

Live iFrame Beispiel im Docsie Portal

Siehe unsere offizielle Liste der Integrationen mit iFrame in Docsie!

7 - DigitalOcean

DigitalOcean ist eine Plattform für Cloud-Computing-Dienste, die es Kunden ermöglicht, Server, virtuelle Maschinen, Datenbanken und mehr zu hosten. Es bietet dedizierte Kubernetes-Dienste für skalierbare Container-Anwendungen und verwaltete Lösungen für Webhosting, mobile Anwendungen, Big Data Lakes und VPN-Dienste.

DigitalOcean bietet eine Feedback-Funktion für seine Dokumente an, um Nutzerfeedback zu sammeln und den Inhalt zu verbessern. Lassen Sie uns herausfinden, wie man das in Docsie macht!

DigitalOcean Docs-Seite mit Feedback-Sammelfunktionalität Beispiel

Vocally ist die entsprechende Funktion zum Sammeln von Feedback in Docsie. Sie ermöglicht es den Nutzern, eine Sternebewertung, Textfeedback und sogar eine Videoaufnahme zu hinterlassen - toll!

How to access Docsie Vocally in the main Docsie Workspace menu

Hier können Sie auf jedes abgegebene Docsie Vocally-Feedback zugreifen. Benutzer haben die Möglichkeit, eine 1-5-Sterne-Bewertung und eine kurze Texterklärung abzugeben. Einige Benutzer sind vielleicht bereit, eine Bildschirmaufnahme zu hinterlassen, die Ihnen hilft, das Problem genau zu lokalisieren!

Live-Beispiel für Nutzerfeedback und Videowiedergabe im Docsie Vocally Dashboard

Jeder Docsie-Kunde erhält Zugang zu Vocally, und es ist von unschätzbarem Wert, um die Stärken und Schwächen Ihrer Dokumentation aufzudecken. Sie können es nicht immer beim ersten Mal richtig machen, aber Sie können es bei der nächsten Iteration noch besser machen, wenn Ihre Autoren Docsie Vocally verwenden!

8 - Slack

Slack ist wohl das Whatsapp der Geschäftswelt geworden. Die beliebte Instant-Messaging (IM)-Plattform für Unternehmen bietet Sprach- und Videoanrufe, Bild- und GIF-Sharing, Kommentar-Antwortbäume und vieles mehr, um die Geschäftskommunikation zu organisieren und zu vereinfachen.

Slack bietet im gesamten Dokumentationsportal Tooltips, um wichtige Informationen hervorzuheben und auf damit verbundene Funktionen hinzuweisen. Lassen Sie uns dies in Docsie nachbilden!

Beispiel für Callout-Blöcke im Slack-Dokumentationsportal

Wir können einen Tooltip wie oben mit Anführungszeichenblöcken in Docsie erstellen.

Lernen Sie, wie man verschiedene Docsie-Editor-Schaltflächen verwendet

Navigieren Sie einfach zur Symbolleiste des Docsie-Editors und wählen Sie das Symbol für den Anführungszeichenblock. Hier können Sie zwischen den Blocktypen Info, Warnung und Frage wählen. Wir veranschaulichen dies im folgenden animierten GIF.

Wie man mit der Symbolleiste des Docsie-Editors Anführungszeichen oder Zitatblöcke zu Docsie Books hinzufügt

Hier sind einige Variationen zur Verwendung von Info-, Warn- und Frage-Anführungszeichenblöcken in einem Live-Docsie-Portal. Sie können zusätzlich Frage- und Warnblöcke verwenden, um Frage-und-Antwort-Statements zu erstellen - lassen Sie Ihrer Kreativität freien Lauf und verwenden Sie Zitatblöcke in Ihrem nächsten Docsie Book!

Live-Beispiel für alle drei Arten von Callout- oder Zitatblöcken in Docsie Portal

9 - Rust

Rust ist eine Programmiersprache, die auf Geschwindigkeit ausgelegt ist. Sie kann Segfaults verhindern und garantiert Prozessor-Thread-Sicherheit. Rust kann verwendet werden, um REST-API-Frameworks zu erstellen, mit Datenbanklösungen wie PostgreSQL zu kommunizieren und vieles mehr.

Die Rust-Standardbibliothek enthält Inline-Code-Snippets, die das Durchsuchen der API-Dokumentation vereinfachen. Lassen Sie es uns in Docsie anpassen!

Beispiel-Dokumentation im Rust-Portal mit Markup-Code

Die in-line Codeschnipsel beinhalten Vec<T> und Option<T> . Wir können dies in Docsie mit dem Markup-Button tun.

Markup Toggle Icon in der Symbolleiste des Docsie Editors

Um Text als Code zu markieren, klicken und ziehen Sie einfach, um den Text zu markieren, und klicken Sie dann auf die Schaltfläche "Markieren". Unten finden Sie ein GIF, das diesen Vorgang veranschaulicht.

Animiertes GIF, das zeigt, wie man in Docsie Books mit der Symbolleiste des Docsie Editors Markierungen auf Text anwendet

Der Markup-Text enthält auch Hyperlinks. Dieser Link sollte zu einem Glossar mit Begriffen weiterleiten, die erklären, was der Codeschnipsel bewirkt.

[Machen Sie einen Crash-Kurs über das Erstellen von Hyperlinks in Docsie] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/extended-formatting-options/)

10 - Yoast

Yoast ist eine Plattform zur Suchmaschinenoptimierung (SEO), die Unternehmen bei der Optimierung ihrer WordPress-Websites unterstützt und ihnen hilft, ihr Wissen über die besten SEO-Verfahren zu verbessern. Das Yoast SEO-Plugin optimiert Websites für eine bessere Leistung auf den Google-Suchmaschinenergebnisseiten (SERPS), um die Kundenbindung zu erhöhen.

Yoast bietet in seinem Dokumentationsportal Schritt-für-Schritt-Anleitungen zur Verwendung von Listenüberschriften. Wir können dies mit Listenüberschriften in Docsie replizieren!

Beispiel für Schrittüberschriften im Yoast Dokumentationsportal

Um dies in Docsie zu tun, erstellen Sie zunächst ein Book und öffnen Sie den Docsie Editor.

Klicken Sie dann in das Textfeld und wählen Sie die Option Listenüberschrift in der Symbolleiste des Docsie-Editors. Unten finden Sie ein GIF, das diesen Vorgang veranschaulicht.

Animiertes GIF, das zeigt, wie man mit der Symbolleiste des Docsie Editors Schrittüberschriften zu Docsie-Büchern hinzufügt

Listenüberschriften sind Teil der HTML-Spezifikation. In Docsie sind Listenüberschriften großartig, da sie Ihnen erlauben, direkte Links innerhalb Ihrer Dokumentation zu erstellen. Das bedeutet, dass Benutzer, wenn sie auf einen Link klicken, direkt zur Listenüberschrift gelangen (und nicht erst scrollen oder wischen müssen!)

Wie man mit der Symbolleiste des Docsie-Editors Videoeinbettungsblöcke zu Docsie Books hinzufügt

Erfahren Sie mehr über die Funktionen von Docsie Editor

Nutzen Sie diese Docsie-Funktionen zu Ihrem Vorteil! 🏆

Diese 10 Dokumentationsbeispiele zeigen, wie nützlich Benutzerhandbücher sein können. Wenn Sie das nächste Mal ein Benutzerhandbuch erstellen, nutzen Sie diese Tipps und Tricks von Docsie zu Ihrem Vorteil! Unsere ausgewählten Beispiele sind großartig, aber wir wissen, dass Ihre noch besser sein werden! 📐👌

Docsie ist eine End-to-End-Plattform für das Dokumentationsmanagement, mit der Unternehmen webbasierte FAQs, Produktdokumentationen, Benutzerhandbücher, Hilfedokumente und Benutzerhandbücher erstellen können. Die Plattform bietet kundenorientierte Zusammenarbeit, umfassende Einbettung, maßgeschneiderte Übersetzungen und leistungsstarke Veröffentlichung auf Knopfdruck.

[Beginnen Sie noch heute mit dem Onboarding (https://app.docsie.io/onboarding/) und erstellen Sie ansprechende digitale Dokumentationen mit Docsie!


Subscribe to the newsletter

Stay up to date with our latest news and products