Cómo hacer vídeos comparativos de antes y después

Algunas mejoras son difíciles de explicar y fáciles de enseñar. Una página que tardaba ocho segundos en cargar ahora tarda uno. Un panel abarrotado ahora se lee de un vistazo. Un proceso de pago confuso ha perdido tres pasos. Describir esos cambios con palabras ocupa un párrafo; enseñarlos ocupa seis segundos de vídeo.

Los comparativos de antes y después son uno de los formatos más persuasivos que puedes crear con un grabador de pantalla, y también uno de los más fáciles de estropear. Si las dos grabaciones no coinciden, el espectador gastará su atención en las diferencias que no pretendías mostrar en lugar de en la que sí.

Esta guía explica cómo planificar, grabar y editar vídeos comparativos en Recorded para que la mejora hable por sí sola.

Cuándo usar un vídeo comparativo

• Mejoras de rendimiento: tiempos de carga, tiempos de compilación, velocidad de renderizado, duración de la sincronización
• Rediseños: un nuevo diseño, navegación o estilo visual junto al anterior
• Cambios de flujo de trabajo: siete clics reducidos a dos
• Corrección de errores: primero el comportamiento roto, después el corregido
• Antes y después de tu propio trabajo: limpiezas de diseño, refactorizaciones, migraciones, reescrituras de contenido

Si tu cambio es invisible en pantalla —una refactorización de backend con idéntico resultado—, un comparativo no ayudará. Úsalo cuando la diferencia sea algo que el espectador pueda ver de verdad.

La regla de oro: cambia una sola cosa

Toda la fuerza persuasiva de una comparación viene de que todo, salvo la mejora, permaneció igual. Eso significa que ambas grabaciones deben compartir:

• El mismo tamaño de ventana y la misma resolución de pantalla
• El mismo modo de captura y la misma tasa de fotogramas
• El mismo estado inicial (misma página, mismos datos, misma cuenta)
• Las mismas acciones, en el mismo orden y al mismo ritmo
• El mismo tema — no grabes el «antes» en modo claro y el «después» en modo oscuro

Cualquier desajuste le da al espectador un motivo para dudar del resultado. Fija todo esto antes de pulsar grabar por primera vez.

Planificar la comparación

1. Escribe el guion exacto de acciones. No la narración: los clics. «Abrir el panel, hacer clic en Informes, seleccionar los últimos 30 días, hacer clic en Exportar».
2. Decide qué vas a medir. Tiempo, número de pasos, número de errores o claridad subjetiva. Dilo en voz alta en el vídeo.
3. Prepara datos de prueba idénticos. Una cuenta de demostración con los mismos registros en ambos entornos elimina la objeción de «es que ahí había menos datos».
4. Fija un tamaño de ventana. Ajústalo una vez y no lo toques entre tomas.
5. Ensaya cada versión. Titubear en una toma y ser fluido en la otra exagera tu resultado sin que se note.

Grabar ambas versiones

Graba el «antes» y el «después» como dos grabaciones separadas, no como una toma larga. Los archivos independientes son más fáciles de recortar, alinear y volver a grabar si uno sale mal.

1. Configura la captura en Recorded: elige el mismo monitor, ventana o área para ambas
2. Elige una tasa de fotogramas y mantenla en las dos tomas
3. Graba la versión «antes» siguiendo tu guion de acciones al pie de la letra
4. Cambia de entorno: la nueva compilación, el nuevo diseño, la URL de staging
5. Comprueba que la ventana sigue teniendo el mismo tamaño
6. Graba la versión «después» con el guion de acciones idéntico

Consejo: si comparas tiempos de carga, empieza a grabar un instante antes del clic que dispara la carga y detén la grabación un instante después de que termine. Esos fotogramas extra facilitan mucho recortar a un punto de partida justo.

Editar la comparación

Recorta al mismo punto de inicio

Abre cada grabación en el editor y recórtalas para que empiecen exactamente en el mismo momento desencadenante, normalmente el fotograma del clic. Una comparación que arranca medio segundo antes en un lado se percibe como más lenta aunque no lo sea.

Etiqueta cada lado con claridad

Usa superposiciones de texto para marcar Antes y Después en pantalla. Mantenlas:

• En la misma posición en ambos clips
• Visibles durante todo el segmento, no solo el primer segundo
• Con alto contraste, para que sobrevivan a la compresión y a las pantallas pequeñas

Añadir una duración en marcha o un contador de pasos como segunda superposición convierte la mejora en algo medible y no solo perceptible.

Usa el zoom para dirigir la atención

Si la diferencia ocurre en una esquina de la pantalla —un indicador de carga, un contador, un menú—, añade un efecto de zoom en el mismo momento en ambos clips. Ampliar en un lado y no en el otro rompe la simetría, así que replica las regiones de zoom en las dos grabaciones.

Cuidado con los cambios de velocidad

Acelerar es estupendo para tutoriales y arriesgado para comparativas. Si aceleras cualquiera de los clips, el espectador ya no puede fiarse de los tiempos. Si necesitas comprimir una espera larga, aplica exactamente la misma velocidad a ambos clips y dilo en pantalla.

Elige una disposición

• Secuencial: primero el «antes» y luego el «después». Sencillo, honesto y válido para cualquier relación de aspecto: la opción por defecto más segura.
• En paralelo: ambos clips a la vez, ideal cuando las duraciones son similares y las pantallas se leen bien a media anchura.
• Corte en el momento clave: enseña ambos hasta el instante decisivo y luego alterna. Muy eficaz con diferencias de rendimiento espectaculares.

Para formatos verticales o de redes sociales, apila los clips arriba y abajo en lugar de a izquierda y derecha, para que cada uno mantenga un tamaño legible.

Mantener la honestidad

Los comparativos son marketing, pero también son pruebas. Un resultado que se cuestiona y no se sostiene cuesta más confianza de la que ganó el vídeo.

• No vacíes la caché en una ejecución y en la otra no
• No ejecutes el «antes» con la conexión limitada
• No te saltes discretamente un paso en el «después»
• Sí menciona las condiciones: qué equipo, qué red, cuántos datos
• Sí enseña un caso típico, no tu intento más afortunado

Exportar y compartir

• MP4 para cualquier sitio donde vayas a incrustar o subir un vídeo
• GIF para comparativas cortas en un README, un changelog o un mensaje de chat: no pases de unos pocos segundos
• Recorte vertical para redes sociales, con la disposición apilada descrita arriba

Ponle al archivo un nombre que sobreviva a la descarga: checkout-flow-before-after-2026-09.mp4 es mejor que comparativa-final-v3.mp4.

Lista rápida de comprobación

[ ] Mismo tamaño de ventana, resolución, tasa de fotogramas y tema en ambas tomas
[ ] Mismo estado inicial y mismos datos de prueba
[ ] Guion de acciones idéntico, ensayado en las dos versiones
[ ] Ambos clips recortados al mismo fotograma desencadenante
[ ] Superposiciones de Antes/Después en posiciones coincidentes
[ ] Efectos de zoom replicados en los dos clips
[ ] Ningún cambio de velocidad aplicado solo a un lado
[ ] Condiciones indicadas en pantalla o en la descripción

Conclusión

Un buen vídeo comparativo no argumenta que algo ha mejorado: deja que el espectador lo vea y lo decida por sí mismo. Iguala las dos grabaciones todo lo que puedas, cambia solo aquello que quieres demostrar y etiqueta el resultado con claridad. La próxima vez que lances un rediseño, una mejora de velocidad o un flujo más simple, graba ambos lados antes de que la versión antigua desaparezca. Ese es el plano que ya no puedes recuperar.