Ir al contenido principal
Ingeniería

Un clic es un clic: imágenes que parecen grabadas a mano

· 4 min de lectura

Cuando un vídeo de PageToVid muestra a alguien pulsando un botón, deberías ver exactamente lo que vería una persona: una pulsación, la página respondiendo, la cámara quedándose lo justo para notarlo. El 14 de septiembre auditamos nuestra grabadora midiendo lo que hacía de verdad, fotograma a fotograma, en lugar de razonar sobre el código. Las imágenes se volvieron mucho más humanas.

Una pulsación debe ser un clic

Una escena de clic llevaba el cursor al botón, lo pulsaba y luego, como red de seguridad, lanzaba también el clic propio del elemento. Esa red nunca hacía falta, y provocaba que una escena de clic pudiera registrar dos clics. En un contador, el número saltaba de dos en dos. En un botón de menú, el menú se abría y se volvía a cerrar antes de terminar la escena.

Ahora la grabadora marca su objetivo y pide a la página que cuente las pulsaciones que de verdad le llegan. La red de seguridad solo actúa cuando la pulsación claramente no llegó, por ejemplo porque el diseño se movió bajo el cursor, y no se abrió ninguna página nueva. Un test abre un navegador real y comprueba los dos casos.

Un plano tan largo como sus palabras

Cada grabación duraba lo que había calculado el planificador, mientras que el vídeo mantiene una escena narrada mientras habla su voz. Cuando la voz duraba más, el último fotograma simplemente se congelaba. En nuestro conjunto de pruebas eran de 0,7 a 3,6 segundos de imagen fija por vídeo de 45 segundos, con el cursor inmóvil.

Ahora la grabadora filma al menos la duración prevista de la narración, con algo de margen, hasta 15 segundos, para que la imagen siga viva hasta que termine la frase.

También comprobamos la sospecha de que los planos estuvieran congelados al principio. Medir el movimiento fotograma a fotograma en planos reales mostró que empieza entre 0,03 y 0,17 segundos, en páginas quietas y animadas por igual. Medir primero nos ahorró arreglar un problema que no existía.

Toda la página y la imagen más nítida

Los planos generales de escritorio perdían cerca de un 11 % de su altura. La ventana de navegador que dibujamos alrededor de las imágenes era algo más ancha que la grabación, así que se recortaban arriba y abajo, justo donde están el titular y la primera pantalla. Ahora la ventana tiene la forma de la propia grabación y ves la página entera.

También probamos una idea que parece obvia: grabar al tamaño final del vídeo debería verse más nítido que grabar el navegador y ampliarlo. No es así. Una captura más grande no aporta más detalle; rodea la página de bordes vacíos. Comparado con la página tal como se muestra, el tamaño del navegador más una buena ampliación puntuó 0,93 en una medida de similitud estándar, y la captura grande 0,65. Ese resultado quedó escrito en el código, para que se mantenga el mejor método.

Pequeños detalles que se notan

El resto de la auditoría fue una lista de mejoras pequeñas y visibles:

  • la cámara espera hasta 0,8 segundos después de un clic, para que veas responder a la página antes del corte
  • los vídeos verticales muestran una suave yema de dedo en lugar de una flecha de escritorio
  • se ocultan las burbujas de chat de terceros, porque no son el producto y tapan una pantalla de móvil; la barra de llamada propia de la web se queda
  • un aviso de cookies que aparece tarde se revisa una vez más justo antes de la acción
  • un vídeo en pausa en una página muestra una imagen real, no su primer fotograma negro
  • cada plano grabado se guarda de forma fiable, con un reintento, antes de que la escena siga

Ninguno de estos puntos es espectacular por sí solo. Juntos marcan la diferencia entre imágenes que parecen grabadas por una persona e imágenes que parecen grabadas por un script.

Buscadores que responden y palabras que nunca escribimos

El día antes, escribir se había convertido en un plano de verdad. Un buscador que responde mientras escribes es el momento en que un producto hace su trabajo ante la cámara, así que los campos de búsqueda y las cajas de chat, el corazón de cualquier producto de IA, se reconocen ahora en siete idiomas, se sitúan justo por debajo de una llamada a la acción, y la cámara espera la respuesta antes de seguir.

Escribir en una web real ante la cámara viene con una regla firme, y la convertimos en código con tests. La grabadora rechaza cualquier campo de un formulario con contraseña, cualquier campo que pida datos de una persona y todo lo que parezca un correo, un nombre, una tarjeta o un código. Hay veintidós casos de rechazo probados. Escribe búsquedas y preguntas, nunca nada personal.

Puedes ver la grabadora en acción en los vídeos de nuestra página de vídeos.

Míralo en tu propia web

Pega una página y obtén el vídeo narrado del que habla este blog. El primero es gratis.

Primer vídeo gratis · sin tarjeta · listo en minutos

← Todos los artículos