Imponera på kunderna: 10 fantastiska exempel på produktdokumentation

Avatar of Author
Ciaran Sweet
on October 25, 2021 · · filed under Product Documentation Best Practices Technical Writing API Documentation Product Documentation Tutorials
Se Docsie Teams favoritexempel på dokumentation och hur du kan kopiera dessa exempel i din kunskapsportal.

Dokumentation är en integrerad del av produktutvecklingsprocessen. När produkten går från konceptbevis till verklighet är förklarande dokumentation viktig för att utbilda kunderna i hur de ska använda produkten.

Vilka är de första saker en kund behöver veta när han eller hon väljer en produkt? Vad är den till för, vad gör den och hur gör jag det? Låt oss använda Docsie som ett exempel!

Docsie är en plattform för produktdokumentation. Den gör det möjligt för användare att skapa, redigera, kommentera och publicera dokumentation i en kunskapsportal online. Det är så enkelt som att logga in, skapa en ny Docsie-bok och skriva ditt första innehåll!

Vi har visserligen hållit det enkelt. När det gäller produktdokumentation kräver dock komplexa funktioner och egenskaper mer omfattande förklaringar för att få fram konceptet.

I den här artikeln kommer vi att utforska 10 av Docsie-teamets favoritexempel på fantastisk produktdokumentation. Ännu bättre? Vi kommer också att visa dig hur du själv kan göra fantastisk produktdokumentation (inspirerad av våra fantastiska exempel!).

Låt oss dyka in! 🤿

10 fantastiska exempel på produktdokumentation

Nedan hittar du 10 fantastiska exempel på produktdokumentation som valts ut av Docsie-teamet. Vi kommer att utforska hur du kan kopiera egenskaper och funktioner och skapa liknande fantastisk dokumentation av din egen i Docsie!

1 - Docker

Docker är en virtualiseringsplattform för behållare som möjliggör programvaruhosting i små, modulära och individuellt isolerade IT-miljöer. Konceptet gör det möjligt att hysa flera olika tjänster på ett enda värdoperativsystem genom att dela upp och dela operativsystemresurser mellan containrar.

[Dockerdokumentation] (https://docs.docker.com/)

Docker Documentation Portal Homepage

Docker har en tydligt formaterad portal för produktdokumentation och presenterar all viktig information som behövs för att ladda ner, installera och komma igång med Docker-containrar. Här finns också flerspråkig produktdokumentation, API-referensdokumentation och ett avsnitt med vanliga frågor (FAQ) längst ner. För de visuella lärarna finns det också en videosektion längst ner till höger.

Låt oss använda Docsie som ett exempel för att skapa ett avsnitt för att komma igång. För att börja i Docsie måste du skapa ett konto, bekräfta din e-postadress, ladda instrumentpanelen för Docsie Workspace, skapa en ny hylla, skapa en ny bok - det är det grundläggande gjort! Skapa ett ramverk med rubriktitlar för varje avsnitt, skriv instruktioner, lägg till bilder och hyperlänkar och du kommer att få en liknande struktur som nedan!

Och det bästa? Docsie gör det här åt dig på automatisk väg!

![Exempel på rubrikstruktur i Dockerdokumentation] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ohzwitemzfuhcekepxex "Exempel på rubrikstruktur i Dockerdokumentation")

[Se hur detta görs i Docsie, läs Docsie Quick Start guide!] (https://help.docsie.io/?doc=/using-docsie/quick-start/)

2 - Stripe

Stripe är en internationell plattform för betalningshantering med teknisk funktionalitet som möjliggör anpassade integrationer och betalningsparametrar med hjälp av Stripes kommandoradsgränssnitt (CLI). Företagets uppdrag är att öka internets BNP genom att bygga virtuell ekonomisk infrastruktur som effektiviserar e-handeln.

[Läs mer om Stripe CLI] (https://stripe.com/docs/stripe-cli)

Stripe CLI-dokumentationssida med exempel på kodmarkering

Den här Stripe-sidan är känd som teknisk produktdokumentation. Den utforskar hur man använder ett CLI för att skapa Docker-containrar (hallå igen!) och kommunicera med Stripe genom att bara använda terminalkommandon. På sidan ser du en innehållsförteckning, kodblock med funktion för att kopiera och klistra in funktionalitet och hyperlänkar i texten.

Docsie har kodblock, så låt oss utforska hur man använder dem.

[Kolla in detta exempel på kodblock i Docsie] (https://help.docsie.io/?doc=/publish-documentation-portal/plugins-extensions/add-code-highlighting/)

Kopiera den här koden för att följa vårt exempel - console.log('Hello World');

Öppna en Docsie Book i Docsie Editor. GIF:en nedan visar hur du hittar alternativet Kodblock i verktygsfältet och innehåller ett JavaScript-exempel som skriver ut "Hello World!".

![Animerad GIF som visar hur man lägger till kodblock i Docsie Books] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/dvofsbntefhpqxzetglx "Animerad GIF som visar hur man lägger till kodblock i Docsie Books")

I din Docsie-portal används kodmarkering för att förbättra tydligheten för tekniska läsare. Användarna kan till och med kopiera koden med den praktiska ikonen för urklipp!

Live Docsie Portal rendering för kodblock exempel

[Se hur du använder insticksmodulen för kodmarkering i Docsie!] (https://portals.docsie.io/docsie/docsie-documentation/publish-documentation-portal/?doc=/plugins-extensions/add-code-highlighting/)

3 - Apple

Det allestädes närvarande Apple! Nej, inte det ätbara!

Apple erbjuder utmärkt produktdokumentation för sina populära smartphones i iPhone-serien. I vårt exempel på produktdokumentation från Apple har vi en versionshämtare, en innehållsförteckning, text och rubriker och slutligen inline-bilder.

Apple iPhone Documentation Page

Låt oss utforska versionskontroll i Docsie!

Läs vår guide om hantering av versioner i Docsie!

När du läser dokumentation i en Docsie-kunskapsportal kan du välja en version med hjälp av insticksmodulen för versionsval.

Versionsplockare i Docsie Portal

Detta gör det möjligt för läsarna att visa historisk produktdokumentation - du vet, för de långsamma plockarna i ryggen som inte har uppdaterats ännu!

För att skapa en ny version i Docsie använder du fliken Versionshantering i Docsie Editor.

![Meny för versionsval i Docsie Editor] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cidsyyjlzvzipcoogjrn "Meny för versionsval i Docsie Editor")

Härifrån klickar du på Lägg till version + .

Lägg till versionsknappen i Docsie Editor

Välj sedan ett versionsnummer och ett versionsnamn innan du klickar på knappen Lägg till version. Så enkelt är det! Uppdatera dokumentet för den nya versionen med eventuella funktionsändringar och låt dina kunder hitta den senaste (eller sena) informationen!

![Lägg till en meny med kontextalternativ för version i Docsie Editor] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ozelvlpwguxzksamascl "Lägg till en meny med kontextalternativ för version i Docsie Editor")

4 - Parse

Parse är en utmärkt mjukvaruplattform med full stack som tillhandahåller ramar med öppen källkod för applikationsbaksidor. Den erbjuder helt enkelt förtillverkade kodresurser som utvecklare kan lita på när de integrerar med något utvecklingsprojekt.

I Parse dokumentationsportal finns ett bra dokumentationsexempel i form av kompatibilitetstabeller. Här övervakas kompatibiliteten hos olika arkitekturer som Node.js och MongoDB med Parse-plattformen.

![Exempel på kompatibilitetstabell för versioner på Parse-webbplatsen] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/hkytunqwvoqlcsnwymgk "Exempel på kompatibilitetstabell för versioner på Parse-webbplatsen")

Låt oss göra detta i Docsie!

Vi kan skapa en tabell med fyra kolumner som liknar Parse-exemplet med hjälp av tabellblock i Docsie.

Docsie table block icon with four column option highlighted

Välj ikonen för tabellblock och sedan alternativet med fyra kolumner.

När du skriver använder du Enter-tangenten för att flytta dig längs kolumnerna. Använd Ctrl + B på tangentbordet för att göra texten fet. Slutligen kan du lägga till emojis med hjälp av symbolalternativet.

![Replikerad tabell med fyra kolumner i Docsie Editor] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/awevjvzwxxxmspzcsesz "Replikerad tabell med fyra kolumner i Docsie Editor")

Symbolvalsmeny i Docsie Editor

Emoji- och symbolvalstabell för symbolkontextmenyn i Docsie Editor

[Lär dig mer om verktygsfältet i Docsie Editor] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)

Detta är ett enkelt sätt att skriva API-dokumentation och teknisk programvarudokumentation. Du kan gå längre genom att lägga till hyperlänkar till Node.js-webbplatsen eller interna länkar till relevanta användarhandböcker. Leverera din nästa API-kompatibilitetstabell i Docsie!

5 - Flutter

Flutter är en verktygslåda för användargränssnitt som skapats av Google för att skapa enhetlighet i utformningen av användargränssnitt i mobiler, på webben, på skrivbordet och i inbyggda enheter. Den främjar snabb utformning och utveckling av användargränssnitt med en online-kodredigerare, och en skiktad containerbaserad arkitektur möjliggör fullständig anpassning.

Flutter är värd för en rad videor som användarna kan titta på och lära sig mer om plattformen. Eftersom plattformen är gjord av Google är YouTube det logiska valet för vårt exempel!

![Flutter YouTube-videoexempel på sidan] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/gdcgtpfnocqjnrjxmffb "Flutter YouTube-videoexempel på sidan")

Du kan efterlikna den här designen i Docsie med hjälp av block för inbäddning av video!

![Hur man lägger till block för videoinbäddning i Docsie-böcker med hjälp av verktygsfältet Docsie Editor] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/aomjofizmdvjafyfpean "Hur man lägger till block för videoinbäddning i Docsie-böcker med hjälp av verktygsfältet Docsie Editor")

Klicka helt enkelt på din Docsie Book, välj ikonen för videobäddning och kopiera sedan YouTube-adressen till textfältet. Du kan göra samma sak med Dailymotion, Vimeo och en rad andra webbplatser med videor.

Vi har en GIF som visar processen så att du kan lägga till dina egna videor i Docsie - prova!

[Lär dig använda verktygsfältet Docsie Editor.] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)

6 - Ionic Framework

Ionic Framework är en verktygslåda med öppen källkod för att bygga effektiva skrivbords- och mobilapplikationer med hjälp av HTML, CSS, JavaScript och annan webbteknik.

Det integreras med populära ramverk som Angular, React och Vue med olika UI-komponenter, funktioner för inbyggda enheter och stöd för teman.

Ionic har ett bra exempel på en mobiltelefon inbäddat på sin webbplats. Låt oss lägga till ett liknande exempel i vår Docsie Book med hjälp av iFrame-bäddar!

Först kopierar du koden nedan:

```.

Klicka sedan på blocket för inbäddning av koden i Docsie Editor. Klistra in koden för iFrame-inbäddning här och klicka sedan på Spara för att fortsätta. Vi har en GIF som illustrerar denna process nedan.

![Hur man bäddar in iFrame-integrationer i Docsie Books med hjälp av Docsie Editor-verktygsfältet] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/vrigdonkwnbamjjpkfwu "Hur man bäddar in iFrame-integrationer i Docsie Books med hjälp av Docsie Editor-verktygsfältet")

Live iFrame-exempel i Docsie Portal

Se vår officiella lista över integrationer som använder iFrame i Docsie!

7 - DigitalOcean

DigitalOcean är en plattform för molntjänster som gör det möjligt för kunder att vara värd för servrar, virtuella maskiner, databaser med mera. Företaget erbjuder dedikerade Kubernetes-tjänster för skalbara containerapplikationer och hanterade lösningar för webbhotell, mobilappar, stora datasjöar och VPN-tjänster.

DigitalOcean erbjuder feedbackfunktionalitet på sina dokument för att samla in användarfeedback och iterera innehållet. Låt oss utforska hur man gör detta i Docsie!

![DigitalOcean Docs page with feedback collection functionality example] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/qtyaynqicnsfojxakxtl "DigitalOcean Docs page with feedback collection functionality example")

Vocally är den motsvarande funktionen för att samla in feedback i Docsie. Den gör det möjligt för användare att lämna ett stjärnbetyg, textfeedback och till och med en videoinspelning - toppen!

![Hur man får tillgång till Docsie Vocally i huvudmenyn för Docsie Workspace] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "Hur man får tillgång till Docsie Vocally i huvudmenyn för Docsie Workspace")

Här kan du få tillgång till all feedback som skickats in till Docsie Vocally. Användarna har möjlighet att ge 1-5 stjärnor och en kort textförklaring. Vissa användare kan vara villiga att lämna en skärminspelning, vilket hjälper dig att lokalisera det exakta problemet!

![Liveexempel på användarfeedback och videouppspelning i Docsie Vocally instrumentpanel] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/ktpgmveuafsztjjvigjx "Liveexempel på användarfeedback och videouppspelning i Docsie Vocally instrumentpanel")

Alla Docsie-kunder får tillgång till Vocally, och det är ovärderligt för att avslöja styrkor och svagheter i din dokumentation. Du kan inte alltid göra rätt från början, men du kan göra det rättare i nästa iteration när dina skribenter använder Docsie Vocally!

8 - Slack

Slack har utan tvekan blivit affärsvärldens Whatsapp. Den populära plattformen för snabbmeddelanden för företag erbjuder röst- och videosamtal, delning av bilder och GIF:er, träden för kommentarssvar med mera för att organisera och förenkla företagskommunikationen.

Slack erbjuder verktygstips i hela sin dokumentationsportal för att lyfta fram viktig information och för att visa upp relaterade funktioner. Låt oss replikera detta i Docsie!

![Exempel på utlysningsblock i Slack-dokumentationsportalen] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/rbxmfuwtimoecutilfjs "Exempel på utlysningsblock i Slack-dokumentationsportalen")

Vi kan göra en tooltip som ovan med hjälp av citatblock i Docsie.

[Lär dig använda olika knappar i Docsie Editor] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)

Navigera helt enkelt till verktygsfältet Docsie Editor och välj ikonen för citatblock. Här kan du välja blocktyperna info, varning eller fråga. Vi illustrerar detta i den animerade GIF:en nedan.

![Hur man lägger till block för utrop eller citat i Docsie Books med hjälp av Docsie Editor-verktygsfältet] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cientdcamlnfozadvsgw "Hur man lägger till block för utrop eller citat i Docsie Books med hjälp av Docsie Editor-verktygsfältet")

Här är några variationer med hjälp av block för information, varning och citat i en levande Docsie-portal. Du kan också använda fråge- och varningsblock för att skapa frågor och svar - använd din kreativitet med hjälp av citatblock i din nästa Docsie-bok!

![Liveexempel på alla tre typerna av block för utrop eller citat i Docsie Portal] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/wrztunbzpesljcwarenw "Liveexempel på alla tre typerna av block för utrop eller citat i Docsie Portal")

9 - Rust

Rust är ett programmeringsspråk som har utformats med snabbhet i åtanke. Det kan förhindra segfel och garanterar processortrådsäkerhet. Rust kan användas för att skapa REST-API-ramverk, kommunicera med databaslösningar som PostgreSQL och mycket mer.

Rust Standard-biblioteket innehåller kodutdrag på rad som fungerar för att förenkla bläddringen i API-dokumentationen. Låt oss matcha det i Docsie!

![Exempel på dokumentation i Rust-portalen med markeringskod] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/hpcrwxzsnkqkojtoemru "Exempel på dokumentation i Rust-portalen med markeringskod")

De inline-kodutdrag som används inkluderar Vec<T> och Option<T> . Vi kan göra detta i Docsie med hjälp av markup-knappen.

![Ikon för markeringsomkoppling i verktygsfältet för Docsie-redigeraren] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/fgijgjarucvswdawsewg "Ikon för markeringsomkoppling i verktygsfältet för Docsie-redigeraren")

För att markera text som kod klickar och drar du bara för att markera texten och klickar sedan på knappen Markera. Vi har en GIF som illustrerar denna process nedan.

![Animerad GIF som visar hur man tillämpar markeringen på text i Docsie Books med hjälp av Docsie Editor-verktygsfältet] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/diaerrmtfvogmuvqfylo "Animerad GIF som visar hur man tillämpar markeringen på text i Docsie Books med hjälp av Docsie Editor-verktygsfältet")

Markeringstexten innehåller också hyperlänkar. Denna länk bör leda till en ordlista som förklarar vad kodutdraget gör.

[Ta en snabbkurs i hur man skapar hyperlänkar i Docsie.] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/extended-formatting-options/)

10 - Yoast

Yoast är en plattform för sökmotoroptimering (SEO) som är utformad för att hjälpa företag att optimera sina WordPress-webbplatser och förbättra kunskapen om bästa metoder för SEO. Yoast SEO-pluginet optimerar webbplatser för bättre prestanda på Googles sökmotorresultatsidor (SERPS) för att öka kundernas engagemang.

Yoast erbjuder steg för steg-guider med hjälp av listrubriker i sin dokumentationsportal. Vi kan replikera detta med listrubriker i Docsie!

![Exempel på stegöverskrifter i Yoasts dokumentationsportal] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/okmupunyophvijddimng "Exempel på stegöverskrifter i Yoasts dokumentationsportal")

För att göra detta i Docsie skapar du först en bok och öppnar Docsie Editor.

Klicka sedan i textfältet och välj alternativet listheader i verktygsfältet Docsie Editor. Vi har en GIF nedan som illustrerar denna process.

![Animerad GIF som visar hur man lägger till stegvisa rubriker i Docsie-böcker med hjälp av verktygsfältet i Docsie Editor] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jyzdfkehfmaxtlegporx "Animerad GIF som visar hur man lägger till stegvisa rubriker i Docsie-böcker med hjälp av verktygsfältet i Docsie Editor")

Listrubriker är en del av HTML-specifikationen. I Docsie är listrubriker utmärkta eftersom de gör det möjligt att skapa direktlänkar i dokumentationen. Det betyder att när användarna klickar på en länk kommer de direkt till listrubriken (istället för att behöva scrolla eller svepa!).

![Hur man lägger till block för videoinbäddning i Docsie Books med hjälp av Docsie Editor-verktygsfältet] (https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/lradwltxuqolxfmzxxwr "Hur man lägger till block för videoinbäddning i Docsie Books med hjälp av Docsie Editor-verktygsfältet")

[Lär dig mer om Docsie Editor-funktioner] (https://help.docsie.io/?doc=/using-docsie/docsie-editor/understanding-docsie-editor/)

Använd dessa Docsie-funktioner till din fördel! 🏆

De här 10 exemplen på dokumentation visar hur fördelaktiga användarhandböcker kan vara. Nästa gång du skapar en användarhandbok, använd dessa Docsie-tips och -tricks till din fördel! Våra utvalda exempel är bra, men vi vet att dina kommer att bli ännu bättre! 📐👌

Docsie är en plattform för dokumentationshantering från början till slut som företag använder för att skapa webbaserade vanliga frågor och svar, produktdokument, användarhandböcker, hjälpdokument och användarhandböcker. Plattformen har kundcentrerat samarbete, omfattande inbäddning, skräddarsydda översättningar och kraftfull publicering till hands.

Start onboarding idag, och leverera härlig digital dokumentation med Docsie!


Subscribe to the newsletter

Stay up to date with our latest news and products