Cómo colocar subtítulos sin tapar elementos importantes de la interfaz

La demostración llega por fin a su momento útil. Un cursor hace clic en el botón que el público quería encontrar. Justo entonces aparecen dos líneas de subtítulos encima del botón. El vídeo tiene subtítulos, las palabras son correctas y la instrucción esencial queda oculta.

Esto ocurre porque los subtítulos suelen añadirse después de aprobar la grabación de pantalla y el diseño. Para entonces, la parte inferior del fotograma ya contiene una barra de herramientas, una notificación de resultado y quizá un titular decorativo. La capa de subtítulos no tiene ningún lugar razonable donde colocarse.

Los subtítulos deben planificarse como una parte de la composición de la demostración. Su función es conservar la información audible. Deben convivir con las pruebas visuales que hacen útil la demostración. Alejarlos de una colisión es solo el principio; el verdadero trabajo es hacer legible toda la secuencia mientras cambia.

Separa los subtítulos de los demás textos

Un subtítulo representa el habla o información audible pertinente. Una anotación identifica algo de la imagen. Un titular de escena indica de qué trata la sección actual. El texto de la interfaz pertenece al propio producto. Esas funciones coinciden visualmente, pero no deberían volverse intercambiables.

Imagina un tutorial ficticio de analítica. La voz dice: «Elige una comparación mensual». Un subtítulo recoge esa frase. Una anotación junto al control podría decir «Periodo de comparación». La propia interfaz contiene la opción «Previous month». No hace falta que las tres tengan la misma prominencia, pero eliminar el subtítulo porque existe un titular también eliminaría parte de la explicación hablada.

Reescribe primero la capa editorial. Conserva el subtítulo hablado, deja que la etiqueta real de la interfaz establezca el valor seleccionado y mantén una anotación solo si resuelve una ambigüedad real. Así reduces la competencia sin pedir a la pista de subtítulos que haga otro trabajo.

Utiliza distinciones visuales coherentes. El subtítulo puede ocupar una zona de lectura previsible mientras una pequeña anotación permanece unida a su objetivo. Evita que los subtítulos parezcan controles de interfaz en los que se pueda hacer clic. El espectador no debería tener que inferir qué palabras pertenecen al producto y cuáles añadió quien editó el vídeo.

Un ejemplo consolidado de Netflix

Las pautas generales de Netflix sobre texto temporizado exigen evitar la superposición con el texto en pantalla. Su documentación de subtítulos narrativos forzados muestra ejemplos reales de texto traducido situado encima de etiquetas existentes en lugar de taparlas. También describe la reubicación de subtítulos cuando aparecen los controles de reproducción. El principio se extiende más allá del cine: el espacio disponible para los subtítulos es una relación entre texto, imagen y estado del reproductor. Netflix: comprender los subtítulos narrativos forzados

En el ejemplo izquierdo, la ubicación y la fecha en inglés siguen visibles abajo mientras el texto en español ocupa la parte superior. En un tutorial de producto, toma la misma decisión en torno al control y al resultado que el espectador necesita inspeccionar.

Observa que el ejemplo conserva dos tipos de información. No resuelve la traducción borrando la etiqueta original ni resuelve la composición haciendo demasiado pequeña la traducción. Los subtítulos de producto merecen la misma disposición a reorganizar la imagen circundante cuando sea necesario.

Identifica qué necesita ver el espectador en cada momento

Un único rectángulo de zona segura no puede describir una demostración de producto. El control importante puede empezar arriba, desplazarse a un menú abierto y generar una notificación cerca de la parte inferior. La región que debe permanecer despejada cambia con la tarea.

Crea una lista breve de acontecimientos antes de finalizar la posición de los subtítulos. Para cada uno, identifica el objetivo de la acción, el estado resultante y cualquier texto necesario para interpretarlo. No necesitas una hoja de cálculo fotograma a fotograma para un clip sencillo. Necesitas advertir los momentos en que la región previsible del subtítulo entra en conflicto con la demostración.

En el ejemplo de analítica, el desplegable de comparación puede ocupar la parte superior derecha mientras el resultado aparece en la leyenda inferior de una gráfica. Un subtítulo abajo es inocuo durante la selección y perjudicial durante la interpretación. Eso sugiere cambiar la composición o mover deliberadamente la zona de subtítulos en un punto de transición natural.

No persigas el cursor con los subtítulos. Reubicarlos constantemente vuelve imprevisible el lugar de lectura y puede crear nuevas colisiones a mitad de una frase. Es preferible contar con unas pocas zonas estables asociadas a secciones coherentes del tutorial.

Reencuadra el producto antes de reducir el subtítulo

Cuando los subtítulos tapan un control importante, resulta tentador reducir la fuente. Conserva la captura y parece resolver la colisión. Pero cambia una superposición evidente por un problema de lectura menos evidente, especialmente en pantallas pequeñas.

Prueba a mover o escalar el recorte del producto dentro de la composición. Un espacio moderado debajo de la grabación puede proporcionar una región estable para subtítulos. Un encuadre más cerrado puede ampliar la interfaz pertinente y dejar espacio suficiente para los subtítulos en otra zona. Estos cambios suelen mejorar ambas capas a la vez.

Evita colocar una ventana de escritorio completa encima de una gran banda de subtítulos si eso vuelve diminutas todas las etiquetas. El objetivo no es reservar espacio a cualquier precio. Es distribuirlo según las prioridades informativas de la escena. Una grabación de producto puede ser parcial si el área ausente no tiene relación con la acción demostrada.

Si la escena necesita realmente toda la interfaz, considera una vista general introductoria independiente seguida de un primer plano. Establece dónde está el control y después acércate para la acción. El público gana orientación sin tener que inspeccionar un escritorio completo debajo de dos líneas de discurso.

Deja que los límites de las frases guíen los cambios de posición

Un subtítulo que salta de abajo arriba a mitad de una frase obliga al espectador a buscar su continuación. Es más fácil seguir los cambios de posición cuando coinciden con un nuevo segmento de subtítulos, una escena o una fase de la tarea.

Divide la narración en un punto con sentido. «Elige una comparación mensual» puede ocupar la fase de selección. «La gráfica compara ahora el mismo periodo del mes pasado» pertenece a la fase de resultado. Separarlas crea una oportunidad razonable para mover la zona de subtítulos si el resultado necesita la parte inferior del fotograma.

Los saltos de línea también importan. La guía general de Netflix recomienda dividir los subtítulos por unidades lingüísticas en lugar de separar palabras estrechamente relacionadas. La lección general para un vídeo de producto es sencilla: no permitas que un ancho arbitrario de caja de texto divida un nombre de producto, una cifra y su unidad o una negación y la afirmación que modifica. Netflix: requisitos generales de texto temporizado

Conserva frases legibles dentro de los límites de subtítulos del destino. Un salto de línea visualmente simétrico puede seguir dividiendo un nombre de producto o separando una unidad de su cifra.

Elige subtítulos incrustados o activables para el reproductor real

No todos los formatos de subtítulos ni todas las plataformas de alojamiento conservan la información de estilo y posición. Un editor puede permitirte colocar el texto en una previsualización mientras el reproductor final aplica sus propias reglas. Prueba el proceso de entrega antes de basar un diseño en un comportamiento que no pueda conservar.

Wistia, por ejemplo, documenta que los archivos WebVTT subidos se convierten a SRT y que esa conversión no admite instrucciones de estilo ni posición. Es un motivo concreto para verificar el comportamiento de la plataforma en lugar de confiar en las posibilidades expresivas del formato de origen. Wistia: transcripciones y subtítulos

Si el destino controla la posición, reserva una región adecuada en el propio vídeo. Si necesitas etiquetas editoriales precisas, mantenlas como anotaciones visuales separadas en lugar de suponer que una pista de subtítulos se comportará como una capa de títulos diseñada.

Los subtítulos incrustados, u open captions, forman parte de la imagen y permanecen visibles; los activables, o closed captions, son una pista independiente que el espectador puede activar o desactivar en un reproductor compatible. Elegir entre ambos afecta tanto a la posición como al mantenimiento. Incrustarlos da más control sobre su ubicación exacta, pero el público no puede ocultarlos y una traducción o corrección exige volver a exportar el vídeo. Una pista independiente puede cambiar por separado, pero su posición depende del reproductor de destino. Conserva el original limpio y los archivos de subtítulos para poder cambiar la forma de entrega sin reconstruir la demostración.

Comprueba con los controles de reproducción visibles

Las grabaciones de producto suelen utilizar el borde inferior para barras de estado, pestañas de archivo o mensajes de finalización. El reproductor puede usar la misma zona para su línea de tiempo y sus controles. Añadir subtítulos crea una tercera capa que reclama el mismo espacio.

Revisa el reproductor real en pausa, reproduciendo y cerca del final. Pasa el puntero por encima para mostrar los controles cuando corresponda. En un teléfono, comprueba los controles que aparecen al tocarlo. Una captura limpia tomada después de que desaparezcan los controles no basta para establecer que la demostración sigue siendo legible durante el uso normal.

No supongas que, porque los subtítulos se mueven automáticamente, lo hacen hacia un lugar seguro. Un reproductor puede elevarlos por encima de su línea de tiempo y colocarlos directamente sobre la notificación del producto. El archivo y el reproductor se comportan razonablemente por separado y, aun así, su combinación falla.

Si un resultado importante solo aparece un instante, mantenlo fuera de la región probable de los controles o muestra después un resultado estable. Esto también ayuda a quienes pausan porque siguen el tutorial en otra ventana. Pausar debería facilitar la inspección de la instrucción.

Reserva el espacio que necesita un resultado pausado

Observa detenidamente el ejemplo pausado de Netflix. El subtítulo se sitúa justo encima de la barra de progreso y la fila de controles. El reproductor ha ocupado una franja considerable de la parte inferior de la imagen; la zona de lectura disponible ha ascendido con él.

Un tutorial de producto suele colocar su confirmación más útil precisamente en esa franja. La finalización de una exportación, los avisos de enlace copiado y los mensajes de estado guardado suelen aparecer cerca de un borde. Si alguien pausa para inspeccionar el resultado, los controles pueden aparecer en ese mismo instante y empujar los subtítulos hacia la notificación.

Planifica en torno al área que ocupa el resultado antes de grabar. Abre los controles del reproductor de destino, identifica dónde se sitúan los subtítulos y compara esa región con el estado del producto que necesitas mostrar. Si entran en conflicto, mueve la grabación dentro de la composición o elige un recorte más cerrado que coloque el resultado más arriba. Limitarse a subir el subtítulo puede tapar la siguiente fila importante de la interfaz.

Mantén visible el estado final después de que desaparezca cualquier notificación transitoria. En una exportación, muestra el archivo resultante o el elemento completado pertinente además del aviso breve. Alguien que siga el tutorial en otra ventana podrá volver entonces a un resultado estable. Es más fiable que exigirle captar una notificación en el estrecho intervalo anterior a la aparición de los controles.

Cuando la acción y el resultado ocupen esquinas distintas, trátalos como dos vistas deliberadas. Establece primero la acción y después dedica al resultado un encuadre claro con una zona estable de subtítulos. El público no debería tener que elegir entre leer la explicación y verificar que se ha completado.

Ejemplo de revisión: exportar un informe

Supongamos que la grabación muestra un editor de informes, un botón Export en la esquina inferior derecha y una confirmación de descarga en esa misma esquina. La narración explica el formato de exportación mientras se produce el clic. Los subtítulos inferiores tapan tanto el botón como la confirmación.

La primera revisión debe reducir el conflicto evitable. Adelanta ligeramente la explicación del formato, mientras su selector esté visible. Encuadra más cerca ese selector. Después muestra la acción de exportación con una frase hablada más corta y un subtítulo colocado en una región que no invada el control.

Tras el clic, mantén una vista en la que se pueda leer el archivo real resultante o la confirmación. No añadas una etiqueta decorativa gigante que diga «Éxito» sobre la interfaz si oculta la prueba real. Si un título separado resulta útil, dale otra ubicación y otra jerarquía.

Inspecciona ahora el subtítulo más largo del fragmento, no solo uno medio. Una línea adicional puede volver a introducir la colisión. Lo mismo ocurre después de traducir. Una solución de posición que solo funciona para la frase inglesa más corta todavía no es una composición estable.

Incluye el subtítulo más largo que pueda aparecer en la revisión del diseño

Un error común de revisión es elegir una frase de ejemplo que encaja a la perfección para la maqueta. La transcripción real contiene después un nombre de producto, una expresión técnica y una condición que añade otra línea. La posición aprobada nunca se probó con el material que debía alojar.

Utiliza segmentos reales de la transcripción al evaluar el diseño. Incluye el más largo, uno corto y otro que coincida con el resultado más importante. Si se prevén varios idiomas, incluye traducciones revisadas representativas en lugar de cadenas artificiales de letras repetidas. Las palabras reales producen saltos de línea reales y revelan dónde tiene problemas la tipografía.

Comprueba también el contraste sobre el fondo en movimiento. Un subtítulo claro sobre una barra de navegación oscura puede desaparecer cuando se abre un menú blanco detrás. Un tratamiento de fondo discreto puede estabilizar el contraste, pero también ocupa espacio visual. Prueba ese espacio ocupado frente a la interfaz en vez de juzgar el texto de forma aislada. El tratamiento correcto sigue siendo legible y conserva las pruebas que hay debajo.

Revisa los subtítulos como parte de la tarea

Una revisión ortográfica y una revisión de colisiones son distintas. Una frase perfectamente transcrita puede tapar lo que no debe. Un subtítulo visualmente elegante puede contener un importe o un nombre de producto incorrectos. Ambas cosas necesitan atención.

Primero compara el texto de los subtítulos con el audio y la terminología aprobada. Después mira el vídeo subtitulado a su tamaño de visualización previsto. Identifica todos los momentos en que el espectador necesita leer simultáneamente la interfaz y el subtítulo. Pausa ahí e inspecciona el fotograma combinado.

Por último, pide a alguien que realice o describa la tarea demostrada utilizando el vídeo. Si no encuentra el control, averigua si estaba oculto, era demasiado pequeño, se presentó demasiado deprisa o tenía un nombre distinto en el subtítulo. Esas causas exigen cambios diferentes.

Mantén concretas las observaciones. «El subtítulo tapó Export durante el clic» permite actuar. «Los subtítulos resultan raros» deja a la siguiente persona adivinando. Un pequeño conjunto de momentos exactos suele valer más que una larga lista de preferencias generales de estilo.

Deja espacio desde el principio en la próxima grabación

La mejor solución suele llegar antes de grabar. Coloca la ventana de modo que los controles importantes no queden pegados al borde del fotograma. Oculta paneles irrelevantes cuando el producto lo permita. Usa datos realistas que mantengan el resultado pertinente compacto y legible sin tergiversar el flujo de trabajo.

Planifica unos segundos de grabación estable alrededor de las acciones clave. Esto da al montaje margen para alinear los subtítulos con naturalidad en lugar de forzar el texto a atravesar una transición. Captura el resultado completo antes de detener la grabación, incluida cualquier confirmación necesaria o archivo generado.

Una demostración de producto subtitulada debe permitir al público leer la explicación e inspeccionar las pruebas. Ninguna capa debería tener que ganar una pelea por los mismos píxeles. Cuando la posición, los tiempos, el recorte y la entrega se consideran conjuntamente, los subtítulos se vuelven parte de cómo enseña el tutorial y la interfaz más importante sigue disponible en el momento en que se necesita.