Impresione a sus clientes: 10 asombrosos ejemplos de documentación de productos

Avatar of Author
Ciaran Sweet
on October 25, 2021 · · filed under Product Documentation Best Practices Technical Writing API Documentation Product Documentation Tutorials
Vea los ejemplos de documentación favoritos de Docsie Teams y cómo reproducirlos en su portal del conocimiento.

La documentación es una parte integral del proceso de desarrollo de un producto. A medida que el producto pasa de una prueba de concepto a una realidad, la documentación explicativa es esencial para educar a los clientes sobre cómo utilizar su producto.

¿Qué es lo primero que necesita saber un cliente cuando elige un producto? ¿Para qué sirve, qué hace y cómo lo hago? Utilicemos Docsie como ejemplo.

Docsie es una plataforma de documentación de productos. Permite a los usuarios crear, editar, anotar y publicar documentación en un portal de conocimiento en línea. Es tan sencillo como iniciar sesión, crear un nuevo Docsie Book y escribir el primer contenido.

Es cierto que lo hemos simplificado. Sin embargo, en el caso de la documentación de productos, las características y funciones complejas requieren explicaciones más completas para que el concepto quede claro.

En este artículo, exploraremos 10 de los ejemplos favoritos de los equipos de Docsie de documentación de productos asombrosa. ¿Y aún mejor? También le mostraremos cómo crear su propia documentación de producto (inspirada en nuestros increíbles ejemplos).

¡Vamos a sumergirnos! 🤿

10 increíbles ejemplos de documentación de productos

A continuación, encontrarás 10 increíbles ejemplos de documentación de productos seleccionados por el equipo de Docsie. Exploraremos cómo replicar características y funciones, ¡y crear una documentación igualmente asombrosa por su cuenta en Docsie!

1 - Docker

Docker es una plataforma de virtualización de contenedores que permite alojar software en entornos informáticos diminutos, modulares y aislados individualmente. El concepto permite alojar múltiples servicios dispares en un único sistema operativo anfitrión dividiendo y compartiendo los recursos del sistema operativo entre contenedores.

Documentación de Docker

Página de inicio del portal de documentación de Docker](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/oywtjgyzfpsynkqslptj "Página de inicio del portal de documentación de Docker")

Docker cuenta con un portal de documentación del producto con un formato claro, y presenta toda la información esencial necesaria para descargar, instalar y ponerse en marcha con los contenedores Docker. También comparte documentación multilingüe del producto, documentación de referencia de la API y una sección de preguntas frecuentes (FAQ) en la parte inferior. Para los estudiantes visuales, también hay una sección de vídeos en la parte inferior derecha.

Para crear una sección de introducción, utilicemos Docsie como ejemplo. Para empezar en Docsie, debes crear una cuenta, confirmar tu dirección de correo electrónico, cargar el panel de Docsie Workspace, crear una nueva estantería, crear un nuevo libro... ¡eso es lo básico! Cree un marco de títulos de cabecera para cada sección, escriba las instrucciones, añada imágenes e hipervínculos y terminará con una estructura similar a la de abajo.

¿Y lo mejor? Docsie lo hace por ti automáticamente.

Ejemplo de estructura de cabecera en la documentación de Docker

Para ver cómo se hace esto en Docsie, lea la guía de inicio rápido de Docsie

2 - Stripe

Stripe es una plataforma internacional de procesamiento de pagos con funcionalidad técnica que permite integraciones personalizadas y parámetros de pago utilizando la interfaz de línea de comandos (CLI) de Stripe. Su misión es aumentar el PIB de Internet mediante la creación de una infraestructura económica virtual que agilice el comercio electrónico.

Más información sobre la CLI de Stripe

Página de documentación de Stripe CLI con ejemplos de resaltado de código](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/zpxindusvnjuriyzpock "Stripe CLI documentation page with code highlighting examples")

Esta página de Stripe se conoce como documentación técnica del producto. Explora cómo usar una CLI para crear contenedores Docker (¡hola de nuevo!) y comunicarse con Stripe usando nada más que comandos de terminal. En la página verás una Tabla de Contenidos, bloques de código con funcionalidad de copiar y pegar, e hipervínculos en el texto.

Docsie tiene bloques de código, así que vamos a explorar cómo usarlos

Echa un vistazo a este ejemplo de bloques de código en Docsie

Copia este código listo para seguir nuestro ejemplo - console.log('Hola Mundo');

Abra un Libro Docsie en el Editor Docsie. El GIF de abajo muestra cómo encontrar la opción Bloques de Código en la barra de herramientas, y contiene un ejemplo JavaScript que imprime "¡Hola Mundo!"

GIF animado que muestra cómo añadir bloques de código a Docsie Books

En su Portal Docsie, el resaltado de código se aplica para mejorar la claridad para los lectores técnicos. Los usuarios pueden incluso copiar el código con el práctico icono del portapapeles.

Ejemplo de representación en vivo de bloques de código en el Portal Docsie

Vea cómo aplicar el complemento de resaltado de código en Docsie](https://portals.docsie.io/docsie/docsie-documentation/publish-documentation-portal/?doc=/plugins-extensions/add-code-highlighting/)

3 - Apple

La omnipresente manzana. No, no es comestible.

Apple ofrece una excelente documentación de producto para su popular línea de teléfonos inteligentes iPhone. En nuestro ejemplo de documentación de productos Apple, tenemos un selector de versiones, una tabla de contenidos, texto y encabezados y, por último, imágenes en línea.

Página de documentación del iPhone de Apple](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/xvuspkjrqcaxcncgqzbq "Página de documentación del iPhone de Apple")

¡Exploremos el control de versiones en Docsie!

¡Lea nuestra guía sobre la gestión de versiones en Docsie!

Al leer documentación en un portal de conocimiento Docsie, los lectores pueden seleccionar una versión utilizando el plugin de selección de versiones.

Selector de versiones en el portal Docsie

Esto permite a los lectores ver la documentación histórica del producto - ¡ya sabe, para esos lentos que aún no se han actualizado!

Para crear una nueva versión en Docsie, utilice la pestaña de gestión de versiones en Docsie Editor.

Menú de selección de versiones en Docsie Editor

Desde aquí, haga clic en Añadir versión + .

Botón Añadir versión en Docsie Editor

A continuación, elija un número de versión y un nombre de versión antes de hacer clic en el botón Añadir versión. Así de fácil. Actualice el documento de la nueva versión con cualquier cambio en las funciones y permita que sus clientes encuentren la información más reciente (o más tardía).

Añadir menú de opciones contextuales de versión en Docsie Editor

4 - Analizar

Parse es una excelente plataforma de software de pila completa que proporciona marcos de código abierto para backends de aplicaciones. Sencillamente, ofrece recursos de código prefabricados en los que los desarrolladores pueden confiar a la hora de integrarlos en cualquier proyecto de desarrollo.

En el portal de documentación de Parse, hay un gran ejemplo de documentación en forma de tablas de compatibilidad. En ellas se controla la compatibilidad de diferentes arquitecturas como Node.js y MongoDB con la plataforma Parse.

Ejemplo de tabla de compatibilidad de versiones en el sitio web de Parse

¡Hagamos esto en Docsie!

Podemos hacer una tabla de cuatro columnas similar al ejemplo de Parse usando bloques de tabla en Docsie.

Icono de bloque de tabla Docsie con la opción de cuatro columnas resaltada

Seleccione el icono de bloque de tabla y, a continuación, la opción de cuatro columnas.

Mientras escribe, utilice la tecla Intro para desplazarse por las columnas. Utiliza Ctrl + B en el teclado para poner el texto en negrita. Por último, añade emojis utilizando la opción de símbolos.

Tabla de cuatro columnas replicada en Docsie Editor

Menú de selección de símbolos en Docsie Editor](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cunoxhrnzcfkcuncyqlq "Menú de selección de símbolos en Docsie Editor")

Tabla de selección de símbolos y emoji para el menú contextual de símbolos en Docsie Editor

Conozca la barra de herramientas de Docsie Editor

Esta es una forma sencilla de escribir documentación de API y documentación técnica de software. Puedes ir más allá añadiendo hipervínculos al sitio web de Node.js, o enlaces internos a guías de usuario relevantes. ¡Entrega tu próxima tabla de compatibilidad de API en Docsie!

5 - Flutter

Flutter es un conjunto de herramientas de interfaz de usuario creado por Google para impulsar la coherencia en el diseño de interfaces de usuario en dispositivos móviles, web, de escritorio e integrados. Promueve el diseño y desarrollo rápido de la interfaz de usuario con un editor de código en línea, y una arquitectura basada en contenedores por capas permite una personalización completa.

Flutter alberga una serie de vídeos para que los usuarios vean y aprendan sobre la plataforma. Como la plataforma está creada por Google, YouTube es la elección lógica para nuestro ejemplo.

Flutter YouTube video examples on page](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/gdcgtpfnocqjnrjxmffb "Flutter YouTube video examples on page")

Puedes emular este diseño en Docsie utilizando bloques de incrustación de vídeo.

Cómo añadir bloques de incrustación de vídeo a Docsie Books utilizando la barra de herramientas del editor de Docsie

Simplemente haga clic dentro de su Docsie Book, seleccione el icono de incrustación de vídeo y, a continuación, copie la URL de YouTube en el campo de texto. Puede hacer lo mismo con Dailymotion, Vimeo y otros sitios web de alojamiento de vídeos.

Tenemos un GIF que muestra este proceso para que puedas añadir tus propios vídeos a Docsie: ¡pruébalo!

Aprende a utilizar la barra de herramientas del editor de Docsie

6 - Ionic Framework

Ionic Framework es un conjunto de herramientas de interfaz de usuario de código abierto para crear aplicaciones móviles y de escritorio de alto rendimiento utilizando HTML, CSS, JavaScript y otras tecnologías web.

Se integra con marcos populares como Angular, React y Vue con varios componentes de interfaz de usuario, funciones de dispositivos nativos y soporte de temas.

Ionic tiene un gran ejemplo de teléfono móvil incrustado en su sitio. ¡Vamos a añadir un ejemplo similar a nuestro Docsie Book usando incrustaciones iFrame!

Primero, copia el código de abajo:

```

A continuación, haz clic en el bloque de incrustación de código en el editor de Docsie. Pega aquí el código de incrustación iFrame y haz clic en Guardar para continuar. Tenemos un GIF que ilustra este proceso a continuación.

Cómo incrustar integraciones iFrame en Docsie Books utilizando la barra de herramientas del Editor Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/vrigdonkwnbamjjpkfwu "Cómo incrustar integraciones iFrame en Docsie Books utilizando la barra de herramientas del Editor Docsie")

Ejemplo de iFrame en vivo en el Portal Docsie

¡Vea nuestra lista oficial de integraciones que utilizan iFrame en Docsie!

7 - DigitalOcean

DigitalOcean es una plataforma de servicios de computación en la nube que permite a los clientes alojar servidores, máquinas virtuales, bases de datos y mucho más. Ofrece servicios Kubernetes dedicados para aplicaciones de contenedores escalables, y soluciones gestionadas para alojamiento web, aplicaciones móviles, lagos de big data y servicios VPN.

DigitalOcean ofrece la funcionalidad de feedback en sus documentos para recoger los comentarios de los usuarios e iterar sobre el contenido. ¡Vamos a explorar cómo hacer esto en Docsie!

DigitalOcean Docs page with feedback collection functionality example

Vocally es la función equivalente para recoger opiniones en Docsie. Permite a los usuarios dejar una calificación con estrellas, comentarios de texto e incluso una grabación de vídeo - ¡genial!

Cómo acceder a Docsie Vocally en el menú principal de Docsie Workspace](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/jobysqxbnhuglnpjbkoe "Cómo acceder a Docsie Vocally en el menú principal de Docsie Workspace")

Aquí puede acceder a los comentarios enviados a Docsie Vocally. Los usuarios tienen la opción de dar una puntuación de 1 a 5 estrellas, y una breve explicación de texto. Algunos usuarios pueden estar dispuestos a dejar una grabación de pantalla, lo que le ayudará a localizar el problema exacto.

Ejemplo en directo de la opinión de un usuario y reproducción de vídeo en el panel de control de Docsie Vocally

Todos los clientes de Docsie tienen acceso a Vocally, y su valor es incalculable a la hora de revelar los puntos fuertes y débiles de tu documentación. No siempre puede hacerlo bien a la primera, pero puede hacerlo mejor en la siguiente iteración si sus redactores utilizan Docsie Vocally.

8 - Slack

Podría decirse que Slack se ha convertido en el Whatsapp del mundo empresarial. La popular plataforma de mensajería instantánea para empresas ofrece llamadas de voz y vídeo, uso compartido de imágenes y GIF, árboles de respuesta a comentarios y mucho más para organizar y simplificar las comunicaciones empresariales.

Slack ofrece información sobre herramientas en todo su portal de documentación para resaltar la información importante y las funciones relacionadas. Reproduzcámoslo en Docsie.

Ejemplo de bloques de llamada en el portal de documentación de Slack

Podemos hacer un tooltip como el anterior utilizando bloques de llamada en Docsie.

Aprenda a utilizar varios botones del editor de Docsie

Simplemente navegue hasta la barra de herramientas del Editor de Docsie y seleccione el icono del bloque de cita. Aquí puede elegir los tipos de bloque de información, advertencia o pregunta. Lo ilustramos en el GIF animado siguiente.

Cómo añadir bloques de llamada o de cita a Docsie Books utilizando la barra de herramientas del Editor de Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/cientdcamlnfozadvsgw "Cómo añadir bloques de llamada o de cita a Docsie Books utilizando la barra de herramientas del Editor de Docsie")

Estas son algunas variaciones del uso de los bloques de información, advertencia y pregunta en un portal Docsie activo. También puede utilizar los bloques de pregunta y advertencia para crear enunciados de pregunta y respuesta. ¡Dé rienda suelta a su creatividad utilizando los bloques de cita en su próximo Docsie Book!

Ejemplo en vivo de los tres tipos de bloques de llamada o de cita en el Portal Docsie

9 - Óxido

Rust es un lenguaje de programación diseñado pensando en la velocidad. Puede prevenir segfaults y garantiza la seguridad de los hilos del procesador. Rust se puede utilizar para crear marcos REST-API, comunicarse con soluciones de bases de datos como PostgreSQL y mucho más.

La biblioteca Rust Standard contiene fragmentos de código en línea que sirven para simplificar la navegación por la documentación de la API. ¡Vamos a emparejarlo en Docsie!

Ejemplo de documentación en el portal de Rust con código de marcado

Los fragmentos de código en línea incluyen Vec<T> y Option<T> . Podemos hacer esto en Docsie usando el botón markup.

Icono de marcado en la barra de herramientas del editor Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/fgijgjarucvswdawsewg "Icono de marcado en la barra de herramientas del editor Docsie")

Para marcar texto como código, basta con hacer clic y arrastrar para resaltar el texto y, a continuación, hacer clic en el botón de marcado. A continuación se muestra un GIF que ilustra este proceso.

GIF animado que muestra cómo aplicar marcas al texto en Docsie Books utilizando la barra de herramientas del Editor Docsie](https://docsie-app-media.s3.amazonaws.com/image/7093/doc_GzKTESk1IUWjA77hg/diaerrmtfvogmuvqfylo "GIF animado que muestra cómo aplicar marcas al texto en Docsie Books utilizando la barra de herramientas del Editor Docsie")

El texto de marcado también contiene hipervínculos. Este enlace debería redirigir a un glosario de términos que explique lo que hace el fragmento de código.

Tome un curso intensivo sobre cómo crear hipervínculos en Docsie.

10 - Yoast

Yoast es una plataforma de optimización de motores de búsqueda (SEO) diseñada para ayudar a las empresas a optimizar sus sitios de WordPress, y mejorar el conocimiento sobre las mejores prácticas de SEO. El plugin Yoast SEO optimiza los sitios web para un mejor rendimiento en las páginas de resultados del motor de búsqueda de Google (SERPS) para impulsar el compromiso del cliente.

Yoast ofrece guías paso a paso utilizando encabezados de lista en su portal de documentación. ¡Podemos replicar esto con encabezados de lista en Docsie!

Ejemplo de encabezados de paso en el portal de documentación de Yoast

Para hacer esto en Docsie, primero cree un Libro y abra el Editor de Docsie.

A continuación, haga clic en el campo de texto y seleccione la opción de encabezado de lista en la barra de herramientas del Editor de Docsie. A continuación tenemos un GIF que ilustra este proceso.

GIF animado que muestra cómo añadir cabeceras de paso a los Libros de Docsie utilizando la barra de herramientas del Editor de Docsie

Los encabezados de lista forman parte de la especificación HTML. En Docsie, los encabezados de lista son muy útiles porque permiten crear enlaces directos dentro de la documentación. Esto significa que cuando los usuarios hacen clic en un enlace, son llevados directamente al encabezado de la lista (en lugar de tener que desplazarse o deslizarse).

Cómo añadir bloques de incrustación de vídeo a Docsie Books utilizando la barra de herramientas del Editor de Docsie

Más información sobre las funciones de Docsie Editor

¡Utiliza estas funciones de Docsie a tu favor! 🏆

Estos 10 ejemplos de documentación muestran lo beneficiosas que pueden ser las guías de usuario. La próxima vez que crees una guía de usuario, ¡utiliza estos consejos y trucos de Docsie a tu favor! Nuestros ejemplos elegidos son geniales, ¡pero sabemos que los tuyos serán aún mejores! 📐👌

Docsie es una plataforma de gestión de documentación integral que las empresas utilizan para crear preguntas frecuentes basadas en web, documentos de producto, guías de usuario, documentos de ayuda y manuales de usuario. La plataforma ofrece colaboración centrada en el cliente, amplia incrustación, traducciones a medida y una potente publicación al alcance de la mano.

(https://app.docsie.io/onboarding/) hoy mismo y ofrezca documentación digital de calidad con Docsie.


Subscribe to the newsletter

Stay up to date with our latest news and products