Como posicionar legendas sem cobrir partes importantes da interface

A demonstração finalmente chega ao momento útil. Um cursor clica no botão que o público veio encontrar. Exatamente nesse instante, duas linhas de legenda aparecem sobre o botão. O vídeo tem legendas, as palavras estão corretas e a instrução essencial está escondida.

Isso acontece porque as legendas costumam ser adicionadas depois que a gravação de tela e o layout já foram aprovados. Nesse ponto, a parte inferior do quadro já contém uma barra de ferramentas, uma notificação de resultado e talvez um título decorativo. A camada de legendas não tem um lugar razoável para ocupar.

As legendas de vídeo precisam ser planejadas como participantes da composição da demonstração. Sua função é preservar informações audíveis. Elas precisam coexistir com a evidência visual que torna a demonstração útil. Afastá-las de uma colisão é apenas o começo; a tarefa real é tornar a sequência inteira legível enquanto ela muda.

Separe as legendas dos outros textos

Uma legenda representa a fala ou informações audíveis relevantes. Uma anotação identifica algo na imagem. Um título de cena informa sobre o que trata o trecho atual. O texto da interface pertence ao próprio produto. Essas funções se sobrepõem visualmente, mas não devem se tornar intercambiáveis.

Imagine um tutorial fictício de análise de dados. O narrador diz: “Escolha uma comparação mensal.” Uma legenda registra essa frase. Uma anotação ao lado do controle pode dizer “Período de comparação”. A própria interface contém a opção “Previous month” (mês anterior). Mostrar as três com o mesmo destaque é desnecessário, mas remover a legenda porque já existe um título também eliminaria uma parte da explicação falada.

Reescreva primeiro a camada editorial. Mantenha a legenda da fala, deixe o rótulo real da interface estabelecer o valor selecionado e preserve uma anotação apenas se ela resolver uma ambiguidade real. Isso reduz a competição sem pedir que a faixa de legendas cumpra outra função.

Use distinções visuais consistentes. A legenda pode ficar em uma região previsível de leitura, enquanto uma anotação pequena permanece ligada ao seu alvo. Evite fazer as legendas parecerem controles clicáveis da interface. Quem assiste não deve precisar deduzir quais palavras pertencem ao produto e quais foram adicionadas na edição.

Um exemplo consolidado da Netflix

As orientações gerais da Netflix para texto sincronizado exigem evitar a sobreposição com textos na tela. Sua documentação de legendas de narrativa forçada mostra exemplos reais de texto traduzido posicionado acima de rótulos existentes, em vez de cobri-los. Ela também descreve o reposicionamento das legendas quando os controles de reprodução aparecem. O princípio vai além do cinema: o espaço disponível para legendas é uma relação entre texto, imagem e estado do player. Netflix: como entender as legendas de narrativa forçada

No exemplo à esquerda, a localização e a data em inglês na parte inferior continuam visíveis enquanto o texto em espanhol ocupa a parte superior. Em um tutorial de produto, tome a mesma decisão considerando o controle e o resultado que a pessoa precisa examinar.

Observe que o exemplo preserva dois tipos de informação. Ele não resolve a tradução apagando o rótulo original, nem resolve a composição tornando a tradução pequena demais. As legendas de produto merecem a mesma disposição para reorganizar a imagem ao redor quando necessário.

Mapeie o que a pessoa precisa ver ao longo do tempo

Um único retângulo de área segura não consegue descrever uma demonstração de produto. O controle importante pode começar no alto, se deslocar para um menu aberto e produzir uma notificação perto da parte inferior. A região que precisa permanecer livre muda com a tarefa.

Crie uma lista curta de acontecimentos antes de finalizar o posicionamento das legendas. Para cada um, identifique o alvo da ação, o estado resultante e qualquer texto necessário para interpretá-lo. Você não precisa de uma planilha quadro a quadro para um clipe simples. Precisa perceber os momentos em que a região previsível da legenda entra em conflito com a demonstração.

No exemplo de análise de dados, o menu de comparação pode ocupar o canto superior direito, enquanto o resultado aparece na legenda de um gráfico na parte inferior. Uma legenda embaixo é inofensiva durante a seleção e prejudicial durante a interpretação. Isso sugere uma mudança de composição ou uma mudança deliberada de posição da legenda em uma divisão natural.

Não faça as legendas perseguirem o cursor. Reposicioná-las constantemente torna o lugar de leitura imprevisível e pode criar novas colisões no meio de uma frase. Prefira algumas regiões estáveis associadas a trechos coerentes do tutorial.

Reenquadre o produto antes de reduzir a legenda

Quando as legendas cobrem um controle importante, diminuir a fonte é tentador. Isso preserva a captura de tela e parece resolver a colisão. Mas troca uma sobreposição evidente por um problema de leitura menos evidente, especialmente em telas menores.

Experimente mover ou redimensionar o recorte do produto dentro da composição. Um pouco de espaço abaixo da gravação pode criar uma região estável para as legendas. Um recorte mais fechado pode ampliar a interface relevante e deixar espaço suficiente para as legendas em outro lugar. Muitas vezes, essas mudanças melhoram as duas camadas ao mesmo tempo.

Evite colocar uma janela inteira de desktop acima de uma faixa grande de legendas se isso torna todos os rótulos minúsculos. A ideia não é reservar espaço a qualquer custo. É distribuí-lo de acordo com as prioridades de informação da cena. Uma gravação de produto pode ser parcial se a área ausente não tiver relação com a ação demonstrada.

Se a cena realmente precisa da interface inteira, considere uma visão geral introdutória separada, seguida de um detalhe. Mostre onde o controle fica e depois aproxime para a ação. O público ganha orientação sem precisar examinar um desktop inteiro embaixo de duas linhas de fala.

Deixe os limites das frases orientarem as mudanças de posição

Uma legenda que salta de baixo para cima no meio de uma frase obriga a pessoa a procurar a continuação. É mais fácil acompanhar mudanças de posição quando coincidem com um novo evento de legenda, uma cena ou uma fase da tarefa.

Divida a narração em um ponto significativo. “Escolha uma comparação mensal” pode ocupar a fase de seleção. “Agora o gráfico compara o mesmo período do mês passado” pertence à fase de resultado. A separação cria uma oportunidade razoável para mover a região de legendas se o resultado precisar da parte inferior do quadro.

As quebras de linha também importam. O guia geral da Netflix recomenda quebrar as legendas em unidades linguísticas, em vez de separar palavras fortemente relacionadas. A lição geral para vídeos de produto é direta: não deixe uma largura arbitrária de caixa de texto separar um nome de produto, um número de sua unidade ou uma palavra negativa da afirmação que ela modifica. Netflix: requisitos gerais de texto sincronizado

Preserve grupos de palavras legíveis dentro dos limites de legenda do destino. Uma quebra visualmente simétrica ainda pode dividir um nome de produto ou separar uma unidade do seu número.

Escolha legendas abertas ou ocultas para o player real

Nem todo formato de legenda ou plataforma de hospedagem preserva informações de estilo e posicionamento. Um editor de legendas pode permitir posicionar o texto na prévia, enquanto o player final usa suas próprias regras. Teste o fluxo de entrega antes de construir um design em torno de um comportamento que ele não consegue manter.

A Wistia, por exemplo, documenta que os arquivos WebVTT enviados são convertidos para SRT e que instruções de estilo ou posicionamento não são compatíveis com essa conversão. Esse é um motivo concreto para verificar o comportamento da plataforma, em vez de depender das possibilidades expressivas do formato de origem. Wistia: transcrições e legendas

Se o destino controla o posicionamento, reserve uma região adequada no próprio vídeo. Se precisar de rótulos editoriais precisos, mantenha-os como anotações visuais separadas, em vez de presumir que uma faixa de legendas se comportará como uma camada de título desenhada.

As legendas abertas são embutidas na imagem e permanecem visíveis; as legendas ocultas são uma faixa separada que a pessoa pode ativar ou desativar em um player compatível. A escolha afeta tanto o posicionamento quanto a manutenção. Embutir as legendas dá mais controle sobre sua posição exata, mas a pessoa não pode escondê-las, e uma tradução ou correção exige outra exportação de vídeo. Uma faixa separada pode mudar de forma independente, mas seu posicionamento depende do player de destino. Mantenha a versão principal limpa e os arquivos de legenda para poder mudar a forma de entrega sem reconstruir a demonstração.

Confira com os controles de reprodução visíveis

Gravações de produto costumam usar a borda inferior para barras de status, abas de arquivos ou mensagens de conclusão. O player pode usar a mesma área para a linha do tempo e os controles. Adicionar legendas cria um terceiro concorrente pelo mesmo espaço.

Revise o player real pausado, em reprodução e perto do fim. Passe o ponteiro sobre ele para revelar os controles quando esse comportamento se aplicar. Em um celular, confira os controles que aparecem com um toque. Uma captura limpa feita depois que os controles desaparecem não basta para demonstrar que a apresentação continua legível durante o uso normal.

Não presuma que, por se moverem automaticamente, as legendas se movem para um lugar seguro. Um player pode elevá-las acima da linha do tempo e colocá-las diretamente sobre a notificação do produto. O arquivo e o player se comportam de forma razoável isoladamente, mas a combinação falha.

Se um resultado importante aparece apenas por um instante, mantenha-o longe da provável região de controles ou mostre depois um resultado estável. Isso também ajuda quem pausa porque está seguindo o tutorial em outra janela. Pausar deve facilitar a inspeção da instrução.

Reserve o espaço necessário para um resultado pausado

Examine de perto o exemplo pausado da Netflix. A legenda fica logo acima da barra de progresso e da linha de controles. O player consumiu uma faixa considerável da parte inferior da imagem; a região disponível para leitura subiu junto com ela.

Um tutorial de produto muitas vezes coloca sua confirmação mais útil exatamente nessa faixa. A conclusão de exportação, os avisos de link copiado e as mensagens de estado salvo costumam aparecer perto de uma borda. Se a pessoa pausa para examinar o resultado, os controles podem surgir ao mesmo tempo e empurrar as legendas para cima da notificação.

Planeje considerando a área ocupada pelo resultado antes de gravar. Abra os controles do player de destino, identifique onde as legendas ficam e compare essa região com o estado do produto que precisa mostrar. Se houver conflito, mova a gravação dentro da composição ou escolha um recorte mais próximo que posicione o resultado mais acima. Simplesmente levantar a legenda pode cobrir a próxima linha importante da interface.

Mantenha o estado final visível depois que qualquer notificação transitória desaparecer. Em uma exportação, mostre o arquivo resultante ou o item concluído relevante, além do aviso breve. Assim, quem segue o tutorial em outra janela pode voltar a um resultado estável. Isso é mais confiável do que exigir que a pessoa capte uma notificação no intervalo estreito antes de os controles aparecerem.

Quando a ação e o resultado ocupam cantos diferentes, trate-os como duas visualizações deliberadas. Estabeleça a ação primeiro e depois dê ao resultado um enquadramento claro, com uma região estável para legendas. O público não deve precisar escolher entre ler a explicação e verificar a conclusão.

Um exemplo de revisão: exportar um relatório

Suponha que a gravação mostre um editor de relatórios, um botão Export no canto inferior direito e uma confirmação de download no mesmo canto. A narração explica o formato de exportação enquanto o clique acontece. As legendas inferiores cobrem tanto o botão quanto a confirmação.

A primeira revisão deve reduzir conflitos evitáveis. Antecipe um pouco a explicação do formato de exportação, enquanto o seletor correspondente está visível. Faça um recorte mais próximo desse seletor. Depois, mostre a ação de exportação com uma frase falada mais curta e uma legenda em uma região que permaneça livre do controle.

Depois do clique, mantenha uma visualização em que o arquivo real resultante ou a confirmação estejam legíveis. Não adicione um rótulo decorativo gigante de “Sucesso” sobre a interface se ele esconder a evidência real. Se um título separado for útil, dê a ele outro local e outra hierarquia.

Agora, inspecione a legenda mais longa do trecho, e não apenas a média. Uma linha extra pode reintroduzir a colisão. O mesmo vale depois da tradução. Uma solução de posicionamento que só funciona para a frase mais curta em inglês ainda não é uma composição estável.

Inclua a legenda plausível mais longa na revisão do layout

Um erro comum de revisão é escolher uma frase de exemplo bem ajeitada para o mockup. Mais tarde, a transcrição real contém um nome de produto, uma expressão técnica e uma ressalva que acrescenta outra linha. O posicionamento aprovado nunca foi testado com o material que precisava comportar.

Use eventos reais da transcrição ao avaliar o layout. Inclua o evento mais longo, um evento curto e um evento que coincida com o resultado mais importante. Se houver vários idiomas previstos, inclua traduções representativas já revisadas, em vez de sequências artificiais de letras repetidas. Palavras reais produzem quebras reais e revelam onde a tipografia encontra dificuldades.

Confira também o contraste sobre o fundo em movimento. Uma legenda clara sobre uma barra de navegação escura pode desaparecer quando um menu branco se abre atrás dela. Um tratamento discreto de fundo pode estabilizar o contraste, mas também ocupa espaço visual. Teste esse espaço ocupado em relação à interface, em vez de julgar o texto isoladamente. O tratamento correto continua legível e preserva a evidência por baixo.

Revise as legendas como parte da tarefa

Uma revisão ortográfica e uma revisão de colisões são diferentes. Uma frase perfeitamente transcrita pode cobrir o elemento errado. Uma legenda visualmente elegante pode conter um valor ou nome de produto incorreto. Ambas precisam de atenção.

Primeiro, compare o texto da legenda com o áudio e a terminologia aprovada. Depois, assista ao vídeo legendado no tamanho esperado de exibição. Identifique todos os momentos em que a pessoa precisa ler a interface e a legenda simultaneamente. Pause nesses pontos e inspecione o quadro combinado.

Por fim, peça a alguém que execute ou descreva a tarefa demonstrada usando o vídeo. Se não encontrar o controle, descubra se ele estava escondido, pequeno demais, foi apresentado rápido demais ou recebeu outro nome na legenda. Essas causas exigem mudanças diferentes.

Mantenha as observações específicas. “A legenda cobriu Export durante o clique” permite agir. “As legendas parecem estranhas” deixa quem editar a seguir tentando adivinhar. Um conjunto curto de momentos exatos costuma valer mais do que uma lista longa de preferências gerais de estilo.

Abra espaço cedo na próxima gravação

A melhor correção muitas vezes acontece antes de gravar. Posicione a janela de modo que os controles importantes não fiquem colados à borda do quadro. Oculte painéis irrelevantes quando o produto permitir. Use dados realistas que mantenham o resultado relevante compacto e legível sem deturpar o fluxo de trabalho.

Planeje alguns segundos de gravação estável ao redor das ações principais. Isso dá à edição espaço para alinhar as legendas naturalmente, em vez de forçar texto sobre uma transição. Capture o resultado completo antes de encerrar a gravação, incluindo qualquer confirmação ou arquivo gerado necessário.

Uma demonstração de produto legendada deve permitir que o público leia a explicação e examine a evidência. Nenhuma camada deveria precisar disputar os mesmos pixels para prevalecer. Quando posicionamento, tempo, recorte e entrega são considerados em conjunto, as legendas se tornam parte de como o tutorial ensina, e a interface mais importante continua disponível no momento em que as pessoas precisam dela.