Cómo hacer un vídeo tutorial que se pueda seguir
Si te preguntas cómo hacer un vídeo tutorial de tu producto, empieza por una regla: una tarea por vídeo, cada paso en la pantalla real, con la búsqueda escrita de verdad y el botón pulsado delante de la cámara. Escribe primero los pasos, dale a cada uno su propia escena y haz cinco vídeos cortos para cinco tareas en lugar de una grabación larga que nadie encuentra.
Esta guía es para quien lleva el soporte y responde cada semana al mismo ticket de «¿cómo hago…?», y quiere enviar el enlace a un vídeo en su lugar. Se apoya en un tutorial real de 45 segundos y explica qué puede hacer nuestro grabador en pantalla y qué no hará nunca.
Terokai Melaka Bersejarah: un tutorial de 45 segundos en 16:9, hecho a partir de una guía interactiva del patrimonio de Malaca, con 79 palabras habladas. El grabador escribe «Muzium» en la barra de búsqueda, pulsa la categoría Muzium y graba los resultados.
Elige la tarea antes de abrir nada
Un tutorial responde a una pregunta que alguien ha escrito: «¿cómo encuentro un museo en este mapa?». El vídeo lleva esa pregunta como título y no responde a nada más; en qué es un vídeo tutorial tienes la frontera con el recorrido de producto y el vídeo explicativo.
Tres pruebas antes de escribir una línea:
- El título empieza por un verbo y nombra un solo resultado: «Filtrar lugares por categoría», no «Los filtros».
- De tres a seis pasos. Siete o más son dos tareas.
- El último paso muestra un resultado que el espectador puede comprobar en su propia pantalla.
La mejor lista de tareas es tu bandeja de soporte; por eso el caso de uso de vídeos de ayuda y soporte parte del centro de ayuda, no de la página de inicio.
Un tutorial real: búsqueda, filtro y resultado en 45 segundos
Terokai Melaka Bersejarah es una guía interactiva de los lugares históricos de Malaca, en Malasia; la página está en malayo. Hicimos con ella un tutorial de 45 segundos: 16:9, 79 palabras, locución en inglés.
La tarea cabe en una frase: encontrar los museos. Tras un rótulo de título, la voz dice «Easily search for specific locations.» Hacia el segundo 15, el cursor se desliza hasta la barra de búsqueda y escribe Muzium, letra a letra. La escena siguiente pulsa la etiqueta de categoría Muzium. Después aparecen los resultados en tarjetas dentro de una ventana de navegador, con «See results update immediately.»
Por qué funciona como tutorial:
- La voz dice la etiqueta que se ve. «Muzium», no «museum»: el espectador buscará la palabra que ha oído.
- Dos caminos al resultado, una escena cada uno. Escribir y filtrar van por separado, y puedes pararte en el que necesitas.
- El resultado tiene su propio plano. Las tarjetas filtradas demuestran que los pasos funcionan.
Para un centro de ayuda, terminaríamos abriendo una ficha en lugar de con la foto de la ciudad: un tutorial acaba donde acaba la tarea.
Cómo hacer un vídeo tutorial, paso a paso
El método que seguimos. Funciona con cualquier página que se abra en un navegador.
Escribe los pasos como lista numerada
De tres a seis líneas en imperativo, un verbo en cada una y la etiqueta exacta de la pantalla: «Escribe Muzium en la barra de búsqueda.» «Pulsa la categoría Muzium.»
Empieza en la página del primer paso
Una página de búsqueda, una pantalla de ajustes, un formulario; no tu página de inicio. La página se graba en directo en un navegador real, así que ya debe mostrar los elementos que tocan los pasos.
Una escena, un elemento, una acción
Apunta cada escena a un elemento y elige su acción en la tabla de abajo. Pon la lista en el briefing y entre comillas cualquier frase que deba decirse palabra por palabra.
Cuenta las palabras
La locución es una sola toma continua que se reparten las escenas: las palabras son el tiempo (la narración es la duración). En español necesitas algo más que las 75 a 95 palabras que llenan 45 segundos en inglés, unas 12 a 16 por paso.
Revisa la escena del resultado y míralo sin sonido
¿La última escena grabada muestra el resultado? Sin sonido, los subtítulos y el cursor deben bastar para seguirlo.
Publícalo donde surge la pregunta
Inserta el vídeo en el artículo de ayuda del mismo título y añade el enlace a la respuesta guardada de tu equipo.
El primer vídeo de cualquier web es gratis y sin tarjeta. Después, un render cuesta 40 créditos con un plan, o 3,90 $ por un vídeo suelto sin suscripción (precios).
Qué puede hacer el grabador en pantalla, y qué no hará
Un tutorial depende de que la acción se vea. Estos son los planos que puede ser hoy una escena grabada en nuestro grabador.
| Plano | Qué ve el espectador | Úsalo para |
|---|---|---|
Clic | El cursor se desliza hasta el elemento, lo pulsa y el plano se queda en la reacción de la página | Menús, pestañas, filtros, botones |
Escritura | El cursor entra en el campo y escribe el texto letra a letra | Búsqueda, filtros, ventana de chat |
Cursor encima | El cursor se posa sobre el elemento y la página reacciona | Información emergente, menús al pasar el cursor |
Foco | Un zoom sobre un solo elemento | Un ajuste o un valor que hay que localizar |
Desplazamiento | Un desplazamiento tranquilo, si quieres desde una sección concreta | Listas largas de resultados |
Hay dos límites que importan. La escritura nunca pulsa Intro ni Tab, a propósito: escribe en tu web real y no debe poder enviar un formulario. Los resultados que aparecen mientras escribes, o tras pulsar un filtro, se graban bien; si no, haz que el siguiente paso sea un clic en el botón de búsqueda de la propia página. Y cada escena graba una acción: un paso con tres clics son tres escenas.
Para una tarea que recorre varias páginas, escribe un flujo una vez en la extensión de VS Code (una URL y pasos con guion); la extensión de Chrome lo reproduce, lo graba y guarda cada paso como una escena. La comparación con grabarlo tú: screencasts automáticos o manuales.
¿Una serie de vídeos cortos o un tutorial largo?
Una serie, casi siempre. Quien llega desde una búsqueda de «filtrar por categoría» no quiere el minuto cuatro de un recorrido.
Un ejemplo con números: cinco tareas en un centro de ayuda (buscar, filtrar, guardar un lugar, compartir una lista, cambiar el idioma). En un solo vídeo son casi tres minutos, cerca del techo de 15 a 180 segundos, y no puedes enlazar al paso cuatro. En cinco vídeos de 30 a 45 segundos son cinco renders a 40 créditos cada uno con un plan, uno por artículo. Cuando cambia la pantalla de filtros, rehaces un vídeo, no el curso entero.
Un vídeo largo encaja con un único proceso que solo tiene sentido en orden, como del registro a la primera factura. Mantenlo por debajo de dos minutos y di en voz alta el número de paso. El enfoque completo está en el caso de uso de vídeos tutoriales.
Tutoriales de una aplicación con inicio de sesión
Un navegador en la nube no puede iniciar sesión por ti, y una página que responde con una pantalla de acceso se rechaza sin coste para ti. La vía prevista es la sesión de captura: inicias sesión una vez en tu navegador y la extensión de PageToVid (Chrome o VS Code) pasa esa sesión al grabador. Queda ligada al origen de tu web, caduca en un máximo de tres días y está disponible desde el plan Scale.
Graba una cuenta de demostración con datos verosímiles. El grabador capta todo lo que hay en pantalla, también el nombre de un cliente real en la barra lateral.
Para la primera tarea tras el registro, mira qué es un vídeo de onboarding.
Errores que vemos en los renders de tutoriales
- Empezar en la página de inicio. Diez segundos de portada antes del primer paso.
- Etiquetas parafraseadas. La voz dice «preferencias» y el botón dice «Ajustes».
- Dos pasos en una escena. Divídela; las palabras ocupan el mismo tiempo igualmente.
- Sin plano del resultado. El espectador nunca sabe si ha funcionado.
- Una aplicación de escritorio en 9:16. El vertical graba la versión móvil de la web; un tutorial va en 16:9.
Cuándo no usar PageToVid para un tutorial
Un curso largo que se sostiene en la voz de un experto. Si la gente viene por una persona que piensa en voz alta diez minutos sobre una hoja de cálculo, grábate con OBS o Loom; en PageToVid frente a Loom verás dónde gana cada uno.
Una tarea que termina en un envío real. Pagar, borrar, mandar un correo: nuestro grabador no pulsa Intro y no debe pulsar un botón «Pagar» real. Graba tú un entorno de pruebas.
Un producto nativo o físico. Una aplicación de escritorio o de móvil, o una máquina en un banco de trabajo, no tienen página web que grabar. Usa una grabación del dispositivo o una cámara.
Convierte tu sitio web en un vídeo — gratis
Pega la página que quieres filmar. PageToVid escribe el guion, graba el sitio real, pone la voz y entrega el MP4.
Preguntas frecuentes
¿Cuánto debe durar un vídeo tutorial?
Lo que dura una tarea, que en la mayoría de productos son de 30 a 60 segundos. Un proceso que solo tiene sentido en orden puede llegar a dos minutos; a partir de ahí, divídelo en una serie.
¿El tutorial puede mostrar texto escrito y clics?
Sí. Una escena puede pulsar un elemento, pasar el cursor por encima, hacer zoom, desplazarse o escribir un texto letra a letra en un campo de búsqueda, filtro o chat. La escritura nunca pulsa Intro, así que no puede enviar un formulario en tu web.
¿Puedo hacer un tutorial de mi aplicación con inicio de sesión?
Sí, con una sesión de captura desde la extensión de PageToVid para el navegador o VS Code, desde el plan Scale. La sesión queda ligada al origen de tu web y caduca en un máximo de tres días. Usa una cuenta de demostración.
¿Qué pasa cuando cambia la interfaz?
Vuelves a renderizar. El vídeo se hace desde la página en directo, así que el nuevo render graba las pantallas de hoy con los mismos pasos y la misma locución. En una serie, solo hay que rehacer el vídeo afectado.