Cómo grabar demos de extensiones de navegador que invitan a instalar

Las extensiones de navegador son difíciles de mostrar. Todo el producto vive en un popup de 300 píxeles, un icono de barra de herramientas de 16 píxeles y unos cuantos cambios en una página que construyó otra persona. No hay ventana de aplicación que lucir, ni pantalla de bienvenida, ni panel de control. Y sin embargo, el vídeo de demostración suele ser lo único que separa a un visitante curioso de la instalación.

La buena noticia es que las limitaciones son predecibles. Cuando sabes dónde suelen fallar las demos de extensiones, una grabación corta puede resultar notablemente persuasiva.

Por qué las demos de extensiones son distintas

Casi todos los consejos sobre grabación de pantalla dan por hecho que tu producto es dueño de la ventana. Una extensión no lo es. Eso cambia cuatro cosas:

• Tu interfaz es diminuta: popups, distintivos y menús contextuales ocupan una fracción del encuadre, así que con el encuadre por defecto son invisibles
• La página anfitriona es el escenario: quien mira necesita reconocer el sitio que estás mejorando antes de poder ver qué has cambiado
• El valor es la diferencia: no estás mostrando una función, estás mostrando una página que ha mejorado
• La instalación es parte del producto: los avisos de permisos y el anclaje son lo primero que encuentra un usuario nuevo, y ahí se produce el abandono real

Planifica la grabación en torno a esos cuatro hechos y el resto es oficio corriente.

Crea primero un perfil de demo limpio

Nunca grabes una demo de extensión en tu navegador de uso diario. Crea un perfil dedicado y úsalo solo para grabar.

• Vacía la barra de herramientas: cualquier otro icono de extensión compite con el tuyo. Quítalos u ocúltalos todos
• Ancla solo tu extensión: un único icono en una barra por lo demás vacía es inconfundible
• Cierra la sesión de tus cuentas personales: avatares, nombres y correos aparecen en una cantidad sorprendente de fotogramas
• Limpia los marcadores y su barra: o sustitúyelos por marcadores neutros y seguros para la demo
• Restablece la página de nueva pestaña: por defecto suele mostrar tu historial en miniaturas
• Desactiva las notificaciones ajenas: tanto del navegador como del sistema
• Ajusta un zoom sensato: 100 % de zoom de página y un tamaño de ventana acorde a tu relación de aspecto de exportación

Hazlo una vez y guarda el perfil. Todas las grabaciones futuras partirán del mismo estado limpio, lo que además hace que tus vídeos se vean coherentes como serie.

Elige el modo de captura adecuado

Hay tres opciones razonables y la elección depende de si la interfaz del navegador importa.

• Captura de ventana: la opción por defecto para extensiones. Se ve la barra de herramientas, donde viven tu icono y tu distintivo, y además queda oculto tu escritorio
• Captura de área: buena para un plano cerrado del popup y la parte de la página que afecta. Útil para clips sociales cortos, pero recorta la barra de herramientas y se pierde la referencia de dónde vive tu interfaz
• Pantalla completa: solo cuando necesitas mostrar algo fuera del navegador — un diálogo de archivos del sistema, un permiso del sistema operativo u otra aplicación

Para la mayoría de las demos, graba la ventana del navegador con un tamaño cercano al 16:9 y haz los primeros planos con zoom en el editor, en lugar de cambiar de modo de captura a mitad del vídeo.

Muestra la instalación con honestidad

Es tentador saltarse la instalación y pasar directamente a la extensión funcionando. Haz lo contrario en al menos un vídeo. Los usuarios nuevos se preocupan por los permisos, y ver a alguien atravesar ese aviso con calma tranquiliza.

• Empieza en la ficha de la tienda o en tu botón de instalación: el camino exacto que recorre un usuario real
• No ocultes el diálogo de permisos: deja que aparezca y explica en una frase por qué hace falta. «Necesita acceso a este sitio porque lee los precios de la página» responde la pregunta antes de que se convierta en duda
• Muestra el paso de anclar el icono: mucha gente instala una extensión y luego no la encuentra. Diez segundos de anclaje evitan muchos mensajes al soporte
• Usa un perfil nuevo para que el flujo sea real: un permiso ya concedido se salta el diálogo en silencio y vuelve engañoso tu vídeo

Si además quieres un clip breve centrado solo en la función, recórtalo por separado de la misma grabación en vez de sacrificar el recorrido completo.

Haz legible una interfaz minúscula

Aquí se ganan o se pierden las demos de extensiones. Tu popup es pequeño en tu monitor y microscópico en un móvil.

• Haz zoom cada vez que se abre el popup: un zoom centrado en el popup mientras está abierto es la edición más rentable de un vídeo de extensión
• Haz zoom en el icono cuando cambie el distintivo: un contador que pasa de 0 a 12 no significa nada si nadie puede leer el número
• Resalta el cursor: los clics sobre un icono de 16 píxeles son invisibles de otro modo. El resalte del cursor y los efectos de clic indican exactamente dónde ocurrió la interacción
• Quédate quieto tras abrir el popup: dale un segundo completo antes de mover el ratón. El movimiento sobre una interfaz pequeña se lee como borrón tras la compresión
• Usa superposiciones de texto para etiquetas que no puedes ampliar: un rótulo corto es mejor que forzar la vista con letra de 10 píxeles
• No confíes en los tooltips de hover: son pequeños, lentos y a menudo no se ven en la grabación. Di la etiqueta en voz alta

Estructúralo como antes y después

Las extensiones mejoran una experiencia que ya existe, así que empieza por el dolor.

1. Muestra la página sin la extensión durante cinco a diez segundos: el trabajo manual, la información que falta, el paso tedioso
2. Activa la extensión o pulsa su icono, de forma visible
3. Muestra la misma página transformada, idealmente con el mismo encuadre para que la diferencia sea obvia
4. Haz una tarea realista de principio a fin usando la función
5. Cierra con la ruta de instalación y con dónde están los ajustes

Mantener el encuadre idéntico entre los pasos 1 y 3 hace mucho trabajo por ti: la vista compara los dos fotogramas directamente en lugar de intentar recordar cómo era la página hace un minuto.

Ajustes de grabación y exportación

• 30 fps son suficientes para interacciones de página e interfaz de popup; el texto se mantiene nítido y los archivos pequeños
• Graba a resolución nativa y deja que el editor recorte o amplíe, en lugar de grabar pequeño y escalar
• Mantén fija la ventana del navegador: redimensionarla durante la grabación reordena la página y arruina tus fotogramas clave de zoom
• Graba audio del sistema si la extensión emite sonidos, si no, solo micrófono
• Exporta a 1080p para la web y considera un recorte vertical de los mejores 20 segundos

Lista de comprobación previa

[ ] Perfil de navegador de demo activo, otras extensiones ocultas
[ ] Solo tu extensión anclada en la barra de herramientas
[ ] Sesión cerrada en cuentas personales, nueva pestaña limpia
[ ] Datos de demo preparados en la página anfitriona
[ ] Zoom de página al 100 %, ventana con la proporción de exportación
[ ] Permisos aún sin conceder, si vas a mostrar la instalación
[ ] Notificaciones desactivadas, distintivos de aviso limpios
[ ] Prueba de diez segundos revisada al tamaño de un móvil

Errores habituales

• Hacer la demo en un navegador con quince extensiones más: nadie distingue cuál es tu icono
• No hacer zoom nunca: la causa más común de que fallen estos vídeos
• Recortar el aviso de permisos: se interpreta como si escondieras algo
• Usar una cuenta real con sesión iniciada: los datos personales se filtran en fotogramas que no revisarás con cuidado
• Explicar el popup mientras mueves el ratón: primero una cosa y luego la otra
• Olvidar el contexto de la página anfitriona: hay que saber qué sitio es antes de que importe qué cambió

Conclusión

Una demo de extensión tiene que lograr dos cosas en menos de dos minutos: demostrar que instalarla es seguro y sencillo, y hacer que un trozo pequeño de interfaz parezca importante. Lo primero lo resuelve un perfil limpio. Lo segundo, los efectos de zoom, el resalte del cursor y una estructura antes-después bien ajustada. Graba la ventana del navegador, mantenla quieta, amplía cada popup y deja que la página transformada argumente por ti.