Voir les exemples de documentation préférés des équipes Docsie et comment reproduire ces exemples dans votre portail de connaissances.
La documentation fait partie intégrante du processus de développement d'un produit. Au fur et à mesure que le produit passe du stade de la preuve de concept à celui de la réalité, la documentation explicative est essentielle pour enseigner aux clients comment utiliser votre produit.
Quelles sont les premières choses qu'un client doit savoir lorsqu'il choisit un produit ? À quoi sert-il, que fait-il et comment puis-je le faire ? Prenons l'exemple de Docsie !
Docsie est une plateforme de documentation produit. Elle permet aux utilisateurs de créer, d'éditer, d'annoter et de publier de la documentation dans un portail de connaissances en ligne. Il suffit de se connecter, de créer un nouveau livre Docsie et de taper son premier contenu !
Il est vrai que nous avons fait simple. Cependant, dans le cas d'une documentation sur un produit, les caractéristiques et les fonctions complexes nécessitent des explications plus complètes pour bien faire comprendre le concept.
Dans cet article, nous allons explorer 10 des exemples préférés des équipes Docsie de documentation produit étonnante. Et mieux encore ? Nous vous montrerons également comment créer votre propre documentation produit (en vous inspirant de nos exemples).
Plongeons dans l'aventure ! 🤿
10 exemples étonnants de documentation produit
Ci-dessous, vous trouverez 10 exemples étonnants de documentation de produit sélectionnés par l'équipe Docsie. Nous allons explorer comment reproduire les caractéristiques et les fonctions, et créer votre propre documentation étonnante dans Docsie !
1 - Docker
Docker est une plateforme de virtualisation de conteneurs qui permet d'héberger des logiciels dans des environnements informatiques minuscules, modulaires et isolés. Le concept permet d'héberger plusieurs services disparates sur un seul système d'exploitation hôte en divisant et en partageant les ressources du système d'exploitation entre les conteneurs.
Docker dispose d'un portail de documentation produit clairement formaté et présente toutes les informations essentielles nécessaires au téléchargement, à l'installation et à la mise en service des conteneurs Docker. Il propose également une documentation multilingue sur les produits, une documentation de référence sur les API et une section FAQ (foire aux questions) au bas de la page. Pour les apprenants visuels, une section vidéo est également disponible en bas à droite.
Pour créer une section "Getting Started", prenons Docsie comme exemple. Pour commencer dans Docsie, vous devez créer un compte, confirmer votre adresse électronique, charger le tableau de bord de l'espace de travail Docsie, créer une nouvelle étagère, créer un nouveau livre - c'est l'essentiel ! Créez un cadre de titres pour chaque section, rédigez des instructions, ajoutez des images et des liens hypertextes et vous obtiendrez une structure similaire à celle présentée ci-dessous !
Et le plus beau, c'est que Docsie le fait pour vous automatiquement !
Pour voir comment cela est fait dans Docsie, lisez le guide de démarrage rapide de Docsie !
2 - Stripe
Stripe est une plateforme internationale de traitement des paiements dont les fonctionnalités techniques permettent des intégrations personnalisées et des paramètres de paiement à l'aide de l'interface en ligne de commande (CLI) de Stripe. Sa mission est d'augmenter le PIB de l'Internet en construisant une infrastructure économique virtuelle qui rationalise le commerce électronique.
Cette page Stripe est connue sous le nom de documentation technique du produit. Elle explique comment utiliser une CLI pour créer des conteneurs Docker (bonjour encore !) et communiquer avec Stripe en utilisant uniquement des commandes de terminal. Sur la page, vous verrez une table des matières, des blocs de code avec une fonctionnalité de copier-coller et des hyperliens dans le texte.
Docsie possède des blocs de code, alors explorons comment les utiliser
Consultez cet exemple de blocs de code dans Docsie
Copiez ce code prêt à suivre notre exemple -
console.log('Hello World');
Ouvrez un livre Docsie dans l'éditeur Docsie. Le GIF ci-dessous montre comment trouver l'option Bloc de code dans la barre d'outils, et contient un exemple JavaScript qui imprime "Hello World !"
Dans votre portail Docsie, la mise en évidence du code est appliquée pour améliorer la clarté pour les lecteurs techniques. Les utilisateurs peuvent même copier le code à l'aide de l'icône du presse-papiers !
Voir comment appliquer le plugin Code Highlighting dans Docsie
3 - Apple
L'omniprésente pomme ! Non, pas celle qui est comestible !
Apple propose une excellente documentation produit pour sa célèbre gamme de smartphones iPhone. Dans notre exemple de documentation produit Apple, nous avons un sélecteur de version, une table des matières, du texte et des en-têtes, et enfin des images en ligne.
Explorons le contrôle de version dans Docsie !
Lors de la lecture d'une documentation dans un portail de connaissances Docsie, les lecteurs peuvent sélectionner une version à l'aide du plugin de sélection de version.
Cela permet aux lecteurs de consulter l'historique de la documentation du produit - vous savez, pour les personnes qui n'ont pas encore fait de mise à jour !
Pour créer une nouvelle version dans Docsie, utilisez l'onglet de gestion des versions dans Docsie Editor.
A partir de là, cliquez sur Ajouter une version + .
Ensuite, choisissez un numéro de version et un nom de version avant de cliquer sur le bouton Ajouter une version. C'est aussi simple que cela ! Mettez à jour le document de la nouvelle version avec tous les changements de fonctionnalités, et permettez à vos clients de trouver les informations les plus récentes (ou les plus tardives) !
4 - Analyse
Parse est une excellente plate-forme logicielle complète qui fournit des cadres open-source pour les backends d'application. Simplement, elle offre des ressources de code préfabriquées auxquelles les développeurs peuvent faire confiance lorsqu'ils les intègrent à n'importe quel projet de développement.
Le portail de documentation de Parse offre un excellent exemple de documentation sous la forme de tableaux de compatibilité. Il permet de contrôler la compatibilité de différentes architectures telles que Node.js et MongoDB avec la plateforme Parse.
Réalisons-le en Docsie !
Nous pouvons créer un tableau à quatre colonnes similaire à l'exemple de Parse en utilisant des blocs de tableau dans Docsie.
Sélectionnez l'icône du bloc de tableau, puis l'option quatre colonnes.
Au fur et à mesure que vous tapez, utilisez la touche Entrée pour vous déplacer le long des colonnes. Utilisez les touches Ctrl + B du clavier pour mettre le texte en gras. Enfin, ajoutez des emojis à l'aide de l'option symbole.
En savoir plus sur la barre d'outils de l'éditeur de documents
Il s'agit d'un moyen simple de rédiger la documentation d'une API ou d'un logiciel technique. Vous pouvez aller plus loin en ajoutant des hyperliens vers le site web de Node.js, ou des liens internes vers des guides d'utilisation pertinents. Livrez votre prochaine table de compatibilité API en Docsie !
5 - Flutter
Flutter est une boîte à outils d'interface utilisateur créée par Google pour assurer la cohérence de la conception de l'interface utilisateur sur les appareils mobiles, web, de bureau et embarqués. Il favorise la conception et le développement rapides de l'interface utilisateur grâce à un éditeur de code en ligne, et une architecture en couches basée sur des conteneurs permet une personnalisation complète.
Flutter héberge une série de vidéos que les utilisateurs peuvent regarder pour en savoir plus sur la plateforme. Comme la plateforme est créée par Google, YouTube est le choix logique pour notre exemple !
Vous pouvez reproduire cette conception dans Docsie en utilisant des blocs d'intégration vidéo !
Il vous suffit de cliquer dans votre livre Docsie, de sélectionner l'icône d'intégration vidéo, puis de copier l'URL de YouTube dans le champ de texte. Vous pouvez faire de même avec Dailymotion, Vimeo et d'autres sites d'hébergement de vidéos.
Nous avons un GIF qui montre ce processus afin que vous puissiez ajouter vos propres vidéos dans Docsie - essayez-le !
[Apprenez à utiliser la barre d'outils de l'éditeur Docsie] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)
6 - Cadre Ionic
Ionic Framework est une boîte à outils open-source permettant de créer des applications mobiles et de bureau performantes à l'aide de HTML, CSS, JavaScript et d'autres technologies web.
Il s'intègre à des frameworks populaires comme Angular, React et Vue avec divers composants d'interface utilisateur, des fonctions natives pour les appareils et la prise en charge des thèmes.
Ionic a un excellent exemple de téléphone mobile intégré sur son site. Ajoutons un exemple similaire à notre Docsie Book en utilisant des embeds iFrame !
Tout d'abord, copiez le code ci-dessous :
<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>
Ensuite, cliquez sur le bloc de code intégré dans l'éditeur Docsie. Collez le code d'intégration iFrame ici, puis cliquez sur Enregistrer pour continuer. Vous trouverez ci-dessous un GIF illustrant ce processus.
Voir notre liste officielle d'intégrations utilisant iFrame dans Docsie !
7 - DigitalOcean
DigitalOcean est une plateforme de services de cloud computing qui permet aux clients d'héberger des serveurs, des machines virtuelles, des bases de données et plus encore. Elle propose des services Kubernetes dédiés pour des applications de conteneurs évolutives, ainsi que des solutions gérées pour l'hébergement web, les applications mobiles, les lacs de big data et les services VPN.
DigitalOcean propose une fonctionnalité de rétroaction sur ses documents afin de recueillir les commentaires des utilisateurs et d'améliorer le contenu. Explorons comment faire cela dans Docsie !
Vocally est la fonctionnalité équivalente pour la collecte de feedback dans Docsie. Elle permet aux utilisateurs de laisser une note sous forme d'étoiles, des commentaires sous forme de texte et même un enregistrement vidéo - génial !
Comment accéder à Vocally dans le menu principal de l'espace de travail Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "How to access Docsie Vocally in the main Docsie Workspace menu")
Ici, vous pouvez accéder à tous les commentaires soumis sur Docsie Vocally. Les utilisateurs ont la possibilité d'attribuer une note de 1 à 5 étoiles, ainsi qu'un court texte explicatif. Certains utilisateurs peuvent être disposés à laisser un enregistrement d'écran, ce qui vous aidera à identifier le problème exact !
Tous les clients de Docsie ont accès à Vocally, qui est un outil inestimable pour révéler les forces et les faiblesses de votre documentation. Il n'est pas toujours possible d'obtenir de bons résultats du premier coup, mais vous pouvez en obtenir de meilleurs lors de la prochaine itération lorsque vos rédacteurs utilisent Docsie Vocally !
8 - Slack
Slack est sans doute devenu le Whatsapp du monde de l'entreprise. Cette plateforme de messagerie instantanée professionnelle populaire propose des appels vocaux et vidéo, le partage d'images et de GIF, des arbres de réponse aux commentaires et bien d'autres choses encore pour organiser et simplifier les communications professionnelles.
Slack propose des infobulles sur l'ensemble de son portail de documentation afin de mettre en évidence les informations importantes et d'attirer l'attention sur les fonctionnalités connexes. Répliquons cela dans Docsie !
Nous pouvons créer une infobulle comme ci-dessus en utilisant des blocs de citation dans Docsie.
Apprendre à utiliser les différents boutons de l'éditeur Docsie
Il suffit de se rendre dans la barre d'outils de l'éditeur Docsie et de sélectionner l'icône du bloc de citation. Ici, vous pouvez choisir les types de blocs info, avertissement ou question. Nous illustrons cela dans le GIF animé ci-dessous.
Voici quelques variantes de l'utilisation des blocs d'information, d'avertissement et de citation de questions dans un portail Docsie en ligne. Vous pouvez également utiliser les blocs de question et d'avertissement pour créer des questions-réponses. Laissez libre cours à votre créativité en utilisant les blocs de citation dans votre prochain livre Docsie !
Exemple vivant des trois types de blocs d'appel ou de citation dans le portail Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/wrztunbzpesljcwarenw "Exemple vivant des trois types de blocs d'appel ou de citation dans le portail Docsie")
9 - Rouille
Rust est un langage de programmation conçu dans un souci de rapidité. Il peut prévenir les erreurs de segmentation et garantit la sécurité des threads du processeur. Rust peut être utilisé pour créer des frameworks REST-API, communiquer avec des solutions de base de données comme PostgreSQL et bien plus encore.
La bibliothèque Rust Standard contient des extraits de code en ligne qui simplifient la navigation dans la documentation de l'API. Faisons-le correspondre dans Docsie !
Les extraits de code en ligne incluent Vec<T> et Option<T> . Nous pouvons faire cela dans Docsie en utilisant le bouton markup.
Pour marquer un texte en tant que code, il suffit de cliquer et de faire glisser le texte pour le mettre en surbrillance, puis de cliquer sur le bouton de marquage. Vous trouverez ci-dessous un GIF illustrant ce processus.
Le texte balisé contient également des liens hypertextes. Ce lien devrait rediriger vers un glossaire expliquant ce que fait l'extrait de code.
[Suivez un cours accéléré sur la création d'hyperliens dans Docsie] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/extended-formatting-options/)
10 - Yoast
Yoast est une plateforme d'optimisation des moteurs de recherche (SEO) conçue pour aider les entreprises à optimiser leurs sites WordPress et à améliorer leurs connaissances des meilleures pratiques en matière de SEO. Le plugin Yoast SEO optimise les sites web pour une meilleure performance dans les pages de résultats des moteurs de recherche de Google (SERPS) afin de stimuler l'engagement des clients.
Yoast propose des guides pas à pas utilisant des en-têtes de liste dans son portail de documentation. Nous pouvons reproduire cela avec les en-têtes de liste dans Docsie !
Pour ce faire dans Docsie, créez d'abord un Livre et ouvrez l'Editeur Docsie.
Ensuite, cliquez dans le champ de texte et sélectionnez l'option d'en-tête de liste dans la barre d'outils de l'éditeur Docsie. Nous avons un GIF ci-dessous qui illustre ce processus.
Les en-têtes de liste font partie de la spécification HTML. Dans Docsie, les en-têtes de liste sont très utiles car ils vous permettent de créer des liens directs dans votre documentation. Cela signifie que lorsque les utilisateurs cliquent sur un lien, ils sont directement dirigés vers l'en-tête de la liste (plutôt que d'avoir à faire défiler la page ou à la faire glisser !)
En savoir plus sur les fonctionnalités de l'éditeur de Docsie
Utilisez ces fonctionnalités de Docsie à votre avantage ! 🏆
Ces 10 exemples de documentation montrent à quel point les guides d'utilisation peuvent être utiles. La prochaine fois que vous créerez un guide de l'utilisateur, utilisez ces trucs et astuces de Docsie à votre avantage ! Les exemples que nous avons choisis sont excellents, mais nous savons que les vôtres seront encore meilleurs ! 📐👌
Docsie est une plateforme de gestion de la documentation de bout en bout que les entreprises utilisent pour créer des FAQ en ligne, des documents sur les produits, des guides d'utilisation, des documents d'aide et des manuels d'utilisation. La plateforme propose une collaboration centrée sur le client, une intégration étendue, des traductions sur mesure et une publication puissante du bout des doigts.
[Commencez dès aujourd'hui à vous familiariser avec Docsie (https://app.docsie.io/onboarding/) et créez une documentation numérique de qualité !