Veja os exemplos de documentação favoritos das equipes Docsie e como replicar esses exemplos em seu portal de conhecimento
A documentação é parte integrante do processo de desenvolvimento de produtos. À medida que o produto passa de uma prova de conceito para uma realidade, a documentação explicativa é essencial para instruir os clientes sobre como usar o produto.
Quais são as primeiras coisas que um cliente precisa saber ao escolher um produto? Para que ele serve, o que ele faz e como faço? Vamos usar o Docsie como exemplo!
O Docsie é uma plataforma de documentação de produtos. Ela permite que os usuários criem, editem, façam anotações e publiquem documentação em um portal de conhecimento on-line. É tão simples quanto fazer o login, criar um novo Docsie Book e digitar seu primeiro conteúdo!
É claro que mantivemos a simplicidade. No entanto, para a documentação do produto, os recursos e as funções complexos exigem explicações mais abrangentes para que o conceito seja entendido.
Neste artigo, exploraremos 10 dos exemplos favoritos das equipes do Docsie de documentação de produtos incríveis. Melhor ainda? Também mostraremos como criar sua própria documentação de produto incrível (inspirada em nossos exemplos incríveis!)
Vamos mergulhar de cabeça! 🤿
10 exemplos incríveis de documentação de produtos
Abaixo, você encontrará 10 exemplos incríveis de documentação de produtos selecionados pela equipe do Docsie. Exploraremos como replicar recursos e funções e criar sua própria documentação incrível no Docsie!
1 - Docker
O Docker é uma plataforma de virtualização de contêineres que permite a hospedagem de software em ambientes de TI minúsculos, modulares e isolados individualmente. O conceito permite que vários serviços diferentes sejam hospedados em um único sistema operacional host, dividindo e compartilhando recursos do sistema operacional entre contêineres.
Página inicial do portal de documentação do Docker](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/oywtjgyzfpsynkqslptj "Página inicial do portal de documentação do Docker")
O Docker tem um portal de documentação do produto claramente formatado e apresenta todas as informações essenciais necessárias para fazer download, instalar e começar a trabalhar com os contêineres do Docker. Ele também compartilha a documentação multilíngue do produto, a documentação de referência da API e uma seção de perguntas frequentes (FAQs) na parte inferior. Para os alunos visuais, há também uma seção de vídeo no canto inferior direito.
Para criar uma seção Getting Started, vamos usar o Docsie como exemplo. Para começar a usar o Docsie, você deve criar uma conta, confirmar seu endereço de e-mail, carregar o painel do Docsie Workspace, criar uma nova prateleira, criar um novo livro - isso é o básico! Crie uma estrutura de títulos de cabeçalho para cada seção, escreva instruções, adicione imagens e hiperlinks e você terá uma estrutura semelhante à abaixo!
A melhor parte? O Docsie faz isso para você de forma automática e mágica!
Veja como isso é feito no Docsie, leia o guia de início rápido do Docsie!
2 - Stripe
O Stripe é uma plataforma internacional de processamento de pagamentos com funcionalidade técnica que permite integrações personalizadas e parâmetros de pagamento usando a interface de linha de comando (CLI) do Stripe. Sua missão é aumentar o PIB da Internet criando uma infraestrutura econômica virtual que agiliza o comércio eletrônico.
Página de documentação da CLI do Stripe com exemplos de destaque de código](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/zpxindusvnjuriyzpock "Página de documentação da CLI do Stripe com exemplos de destaque de código")
Esta página do Stripe é conhecida como documentação técnica do produto. Ela explora como usar uma CLI para criar contêineres do Docker (olá de novo!) e se comunicar com o Stripe usando apenas comandos de terminal. Na página, você verá um Índice, blocos de código com funcionalidade de copiar e colar e hiperlinks no texto.
O Docsie tem blocos de código, portanto, vamos explorar como usá-los
Confira este exemplo de blocos de código no Docsie
Copie este código pronto para seguir nosso exemplo -
console.log('Hello World');
Abra um Docsie Book no Docsie Editor. O GIF abaixo mostra como localizar a opção Code Block na barra de ferramentas e contém um exemplo de JavaScript que imprime "Hello World!"
Em seu Docsie Portal, o destaque de código é aplicado para melhorar a clareza para os leitores técnicos. Os usuários podem até mesmo copiar o código com o prático ícone da área de transferência!
3 - Apple
A onipresente Apple! Não, não do tipo comestível!
A Apple oferece uma excelente documentação de produto para sua popular linha de smartphones iPhone. Em nosso exemplo de documentação de produto da Apple, temos um seletor de versão, índice, texto e cabeçalhos e, finalmente, imagens em linha.
Vamos explorar o controle de versão no Docsie!
Ao ler a documentação em um portal de conhecimento do Docsie, os leitores podem selecionar uma versão usando o plug-in de seleção de versão.
Isso permite que os leitores visualizem o histórico da documentação do produto - você sabe, para aqueles lentos que ainda não foram atualizados!
Para criar uma nova versão no Docsie, use a guia de gerenciamento de versões no Docsie Editor.
Aqui, clique em Add version + .
Em seguida, escolha um número de versão e um nome de versão antes de clicar no botão Add version (Adicionar versão). É muito fácil! Atualize o documento da nova versão com todas as alterações de recursos e permita que seus clientes encontrem as informações mais recentes (ou atrasadas)!
4 - Analisar
O Parse é uma excelente plataforma de software de pilha completa que fornece estruturas de código aberto para back-ends de aplicativos. Simplesmente, ele oferece recursos de código pré-fabricados nos quais os desenvolvedores podem confiar ao se integrarem a qualquer projeto de desenvolvimento.
No portal de documentação do Parse, há um ótimo exemplo de documentação na forma de tabelas de compatibilidade. Isso monitora a compatibilidade de diferentes arquiteturas, como Node.js e MongoDB, com a plataforma Parse.
Vamos fazer isso no Docsie!
Podemos criar uma tabela de quatro colunas semelhante ao exemplo do Parse usando blocos de tabela no Docsie.
Selecione o ícone de bloco de tabela e, em seguida, a opção de quatro colunas.
Ao digitar, use a tecla Enter para mover-se ao longo das colunas. Use Ctrl + B no teclado para deixar o texto em negrito. Por fim, adicione emojis usando a opção de símbolo.
Essa é uma maneira fácil de escrever documentação de API e documentação técnica de software. Você pode ir além, adicionando hiperlinks ao site do Node.js ou links internos para guias de usuário relevantes. Entregue sua próxima tabela de compatibilidade de API no Docsie!
5 - Flutter
O Flutter é um kit de ferramentas de interface do usuário criado pelo Google para promover a consistência no design da interface do usuário em dispositivos móveis, Web, desktop e incorporados. Ele promove o design e o desenvolvimento rápidos da interface do usuário com um editor de código on-line, e uma arquitetura baseada em contêineres em camadas permite a personalização total.
O Flutter hospeda uma série de vídeos para os usuários assistirem e aprenderem sobre a plataforma. Como a plataforma é criada pelo Google, o YouTube é a escolha lógica para o nosso exemplo!
Você pode emular esse design no Docsie usando blocos de incorporação de vídeo!
Basta clicar em seu Docsie Book, selecionar o ícone de incorporação de vídeo e copiar o URL do YouTube no campo de texto. Você pode fazer o mesmo com o Dailymotion, o Vimeo e vários outros sites de hospedagem de vídeo.
Temos um GIF mostrando esse processo para que você possa adicionar seus próprios vídeos ao Docsie - experimente!
Saiba como usar a barra de ferramentas do Docsie Editor](https://help.docsie.io/?doc=/using-docsie/docsie-editor/adding-media/)
6 - Estrutura Ionic
O Ionic Framework é um kit de ferramentas de interface do usuário de código aberto para a criação de aplicativos móveis e de desktop de alto desempenho usando HTML, CSS, JavaScript e outras tecnologias da Web.
Ele se integra a estruturas populares como Angular, React e Vue com vários componentes de interface do usuário, funções de dispositivo nativo e suporte a temas.
O Ionic tem um ótimo exemplo de telefone celular incorporado em seu site. Vamos adicionar um exemplo semelhante ao nosso Docsie Book usando incorporações de iFrame!
Primeiro, copie o código abaixo:
<iframe loading="lazy" importance="low" src="https://ionic-docs-demo.herokuapp.com/?ionic:mode=ios"></iframe>
Em seguida, clique no bloco de incorporação de código no Docsie Editor. Cole o código de incorporação do iFrame aqui e clique em Save para continuar. Temos um GIF que ilustra esse processo abaixo.
Veja nossa lista oficial de integrações usando iFrame no Docsie!
7 - DigitalOcean
A DigitalOcean é uma plataforma de serviços de computação em nuvem que permite aos clientes hospedar servidores, máquinas virtuais, bancos de dados e muito mais. Ela oferece serviços Kubernetes dedicados para aplicativos de contêineres escaláveis e soluções gerenciadas para hospedagem na Web, aplicativos móveis, lagos de big data e serviços de VPN.
A DigitalOcean oferece a funcionalidade de feedback em seus documentos para coletar feedback do usuário e iterar no conteúdo. Vamos explorar como fazer isso no Docsie!
O Vocally é o recurso equivalente para coletar feedback no Docsie. Ele permite que os usuários deixem uma classificação com estrelas, comentários em texto e até mesmo uma gravação de vídeo - ótimo!
Aqui, você pode acessar qualquer feedback enviado pelo Docsie Vocally. Os usuários têm a opção de atribuir uma classificação de 1 a 5 estrelas e uma breve explicação em texto. Alguns usuários podem estar dispostos a deixar uma gravação de tela, ajudando-o a identificar o problema exato!
Todos os clientes da Docsie têm acesso ao Vocally, e ele é de grande valia para revelar os pontos fortes e fracos de sua documentação. Nem sempre é possível acertar na primeira vez, mas é possível acertar ainda mais na próxima iteração quando seus redatores usam o Docsie Vocally!
8 - Slack
O Slack se tornou, sem dúvida, o Whatsapp do mundo dos negócios. A popular plataforma de mensagens instantâneas (IM) para empresas oferece chamadas de voz e vídeo, compartilhamento de imagens e GIFs, árvores de respostas a comentários e muito mais para organizar e simplificar as comunicações empresariais.
O Slack oferece dicas de ferramentas em todo o seu portal de documentação para destacar informações importantes e chamar a atenção para recursos relacionados. Vamos replicar isso no Docsie!
Podemos criar uma dica de ferramenta como a acima usando blocos de citação no Docsie.
Basta navegar até a barra de ferramentas do Docsie Editor e selecionar o ícone de bloco de citação. Aqui, você pode escolher os tipos de bloco de informação, aviso ou pergunta. Ilustramos isso no GIF animado abaixo.
Aqui estão algumas variações usando blocos de informações, avisos e citações de perguntas em um Docsie Portal ativo. Além disso, você pode usar os blocos de perguntas e avisos para criar declarações de perguntas e respostas - dê asas à sua criatividade usando blocos de citação em seu próximo Docsie Book!
9 - Ferrugem
Rust é uma linguagem de programação projetada com a velocidade em mente. Ela pode evitar segfaults e garante a segurança de thread do processador. O Rust pode ser usado para criar estruturas REST-API, comunicar-se com soluções de banco de dados como o PostgreSQL e muito mais.
A biblioteca Rust Standard contém trechos de código em linha que funcionam para simplificar a navegação na documentação da API. Vamos combiná-la no Docsie!
Os trechos de código em linha incluem Vec<T> e Option<T>. Podemos fazer isso no Docsie usando o botão de marcação.
Para marcar o texto como código, basta clicar e arrastar para realçar o texto e, em seguida, clicar no botão de marcação. Temos um GIF que ilustra esse processo abaixo.
O texto da marcação também contém hiperlinks. Esse link deve redirecionar para um glossário de termos que explique o que o trecho de código faz.
Faça um curso intensivo sobre como criar hiperlinks no Docsie.
10 - Yoast
O Yoast é uma plataforma de otimização de mecanismos de busca (SEO) criada para ajudar as empresas a otimizar seus sites WordPress e melhorar o conhecimento sobre as práticas recomendadas de SEO. O plug-in Yoast SEO otimiza os sites para obter um melhor desempenho nas páginas de resultados dos mecanismos de pesquisa do Google (SERPS), a fim de impulsionar o envolvimento do cliente.
O Yoast oferece guias passo a passo usando cabeçalhos de lista em seu portal de documentação. Podemos replicar isso com cabeçalhos de lista no Docsie!
Para fazer isso no Docsie, primeiro crie um Book e abra o Docsie Editor.
Em seguida, clique no campo de texto e selecione a opção de cabeçalho de lista na barra de ferramentas do Docsie Editor. Temos um GIF abaixo que ilustra esse processo.
Os cabeçalhos de lista fazem parte da especificação HTML. No Docsie, os cabeçalhos de lista são ótimos, pois permitem a criação de links diretos na documentação. Isso significa que, quando os usuários clicam em um link, eles são levados diretamente para o cabeçalho da lista (em vez de ter que rolar ou deslizar!)
Use esses recursos do Docsie a seu favor! 🏆
Esses 10 exemplos de documentação mostram como os guias do usuário podem ser úteis. Da próxima vez que você criar um guia do usuário, use essas dicas e truques do Docsie a seu favor! Nossos exemplos escolhidos são ótimos, mas sabemos que os seus serão ainda melhores! 📐👌
A Docsie é uma plataforma de gerenciamento de documentação de ponta a ponta que as empresas usam para criar FAQs baseadas na Web, documentos de produtos, guias de usuário, documentos de ajuda e manuais de usuário. A plataforma apresenta colaboração centrada no cliente, incorporação extensiva, traduções personalizadas e publicação avançada na ponta de seus dedos.
Comece a se integrar hoje mesmo e forneça uma documentação digital encantadora com a Docsie!