Cómo grabar con claridad estados hover, arrastres y microinteracciones

La mayoría de los consejos sobre grabación de pantalla se centran en lo grande: elegir la resolución, planificar el guion, recortar los tiempos muertos. Pero lo que más suele confundir a quien mira son los momentos pequeños: un tooltip que aparece medio segundo, una tarjeta arrastrada por un tablero, un interruptor que cambia de estado discretamente en una esquina.

En esas microinteracciones vive el cuidado de tu producto, y son también lo más fácil de perder en una grabación. Esta guía explica cómo capturarlas para que quien te vea observe exactamente lo mismo que tú.

Por qué las microinteracciones cuestan tanto de capturar

Hay tres factores en tu contra:

• Son breves. Un tooltip puede estar visible 400 milisegundos. De pasada, el espectador ni lo percibe.
• Son pequeñas. Una casilla que cambia de estado ocupa una fracción mínima de un fotograma en 1080p.
• Tú ya sabes dónde mirar. Hiciste la acción, así que tus ojos la siguieron con precisión. Los de quien mira, no.

Cada técnica de este artículo resuelve uno de esos tres problemas: hacer que dure más, que se vea más grande o indicarle al ojo hacia dónde ir.

Empieza por una tasa de fotogramas más alta

Las interacciones rápidas necesitan fotogramas para siquiera verse. A 30 fps, un arrastre veloz por la pantalla es un puñado de posiciones borrosas. A 60 fps, ese mismo movimiento se lee como un recorrido continuo.

Para cualquier grabación con arrastrar y soltar, transiciones animadas o estados hover rápidos, graba a 60 fps. El archivo pesa más, pero siempre puedes comprimir al exportar: lo que no se capturó no se puede añadir después.

Frena las manos

La mejora más grande no cuesta nada: muévete con intención. Un recorrido de ratón que cruza la pantalla en medio segundo es difícil de seguir. Ese mismo recorrido en segundo y medio resulta fácil.

Reglas prácticas mientras grabas:

• Lleva el cursor al objetivo y detente antes de hacer clic
• Deja que el clic se refleje visualmente antes de continuar
• Evita pasarte y corregir: acércate en un solo arco suave
• No muevas el cursor mientras explicas algo; déjalo aparcado

Da aire a los estados hover

Cuando muestres un tooltip, la vista previa de un desplegable o un botón que aparece al pasar el ratón, mantén el hover al menos un segundo y medio o dos. Grabando parecerá absurdamente lento; al reproducirlo será exactamente lo adecuado.

Un hábito útil: cuenta en silencio mientras mantienes el hover. Si no llegas a “dos”, te has movido demasiado rápido.

La regla de los tres tiempos para arrastrar y soltar

Arrastrar y soltar es la interacción que peor se interpreta, porque se ve el resultado sin ver la intención. Divide cada arrastre en tres tiempos claros:

1. Agarrar: apoya el cursor sobre el elemento, pulsa y haz una pausa breve para que se vea el estado de agarre
2. Desplazar: muévete despacio y en línea recta y legible hacia el destino
3. Soltar: detente sobre la zona de destino antes de liberar, para que se registre el resaltado

Entre cada tiempo, una pausa corta hace el trabajo de una frase entera de narración.

Ancla la atención con efectos de cursor

Las herramientas de cursor de Recorded existen justo para estos momentos:

• El suavizado de cursor elimina el temblor que dificulta seguir los movimientos rápidos. El nivel medio encaja en casi todas las demos.
• Los destellos de clic dejan clarísimo el instante exacto del clic, algo clave cuando el efecto en pantalla es sutil.
• El tamaño del cursor puede aumentarse para que el puntero siga siendo legible tras exportar, sobre todo en móvil.

En grabaciones con muchos arrastres, los destellos de clic son imprescindibles: son lo que indica que el botón sigue pulsado.

Haz zoom, pero deja el destino en cuadro

El zoom hace visibles las interacciones pequeñas, con una salvedad propia de los arrastres: si te acercas demasiado al elemento que agarras, el destino puede quedar fuera de cuadro y se pierde la conexión entre ambos.

Dos enfoques que funcionan:

• Incluye los dos extremos. Encuadra una región con el origen y el destino, aunque eso implique un zoom más suave.
• Haz zoom por tiempos. Acércate al agarrar, retrocede un poco durante el desplazamiento y vuelve a acercarte al soltar.

En interruptores, casillas y cambios de estado sin recorrido, acércate todo lo que quieras: no hay una segunda ubicación que vigilar.

Cámara lenta para interacciones realmente rápidas

Algunas interacciones no se pueden ejecutar despacio: un gesto de deslizamiento, una paleta de comandos abierta con el teclado, una animación que corre a su propia velocidad. Grábalas a velocidad normal y ralentiza el clip al editar.

Una región de velocidad a 0,5x sobre una animación de un segundo da dos segundos al espectador, sin pausas raras en la narración. Combínala con un zoom en ese mismo tramo y hasta una transición de 200 milisegundos se vuelve perfectamente legible.

Narra lo que no se ve

Parte de lo que haces nunca aparece en pantalla: mantener una tecla modificadora, hacer clic derecho, una pulsación larga. Si la entrada es invisible, el resultado parece magia.

Cúbrelo de dos formas:

• Dilo en voz alta: “Mantengo Mayús mientras arrastro para seleccionar todo el rango”
• Añade un texto superpuesto en ese momento con la tecla o el gesto, para que se entienda incluso sin sonido

Errores habituales

• Grabar a 30 fps y luego preguntarse por qué el arrastre se ve a tirones
• Seguir de inmediato tras un clic, antes de que la interfaz termine de responder
• Demostrar un hover con un cursor que ya se está alejando
• Acercarse tanto que el espectador pierde la referencia espacial
• Dar por hecho que la animación se ve, porque tú la has visto cien veces

Lista rápida antes de grabar

Antes de grabar una demo centrada en microinteracciones:

1. Configura la tasa de fotogramas a 60 fps
2. Activa el suavizado de cursor y los destellos de clic
3. Aumenta el tamaño del cursor si el destino son pantallas pequeñas
4. Ensaya una vez el arrastre o el hover a la mitad de la velocidad natural
5. Planifica dónde irán las regiones de zoom y comprueba que el destino queda en cuadro
6. Anota las entradas ocultas que necesitarán narración o texto superpuesto

Conclusión

Las microinteracciones son los detalles que hacen que un software parezca cuidado, y desaparecen de las grabaciones salvo que las protejas a conciencia. Frena las manos, concede dos segundos completos a los estados hover, divide los arrastres en agarrar-desplazar-soltar y deja que los efectos de cursor y el zoom hagan el resto.

La próxima vez que grabes una demo, elige una interacción que normalmente despacharías rápido y trátala como el plato principal. La diferencia de claridad suele notarse ya en la primera reproducción.