Como gravar com clareza estados de hover, arrastos e microinterações

A maioria dos conselhos sobre gravação de tela trata do que é grande: escolher a resolução, planejar o roteiro, cortar o tempo morto. Mas o que mais confunde quem assiste são os momentos pequenos: uma dica que aparece por meio segundo, um cartão arrastado por um quadro, um botão de alternância que muda de estado discretamente num canto da tela.

É nessas microinterações que mora o cuidado do seu produto — e elas também são a coisa mais fácil de se perder numa gravação. Este guia mostra como capturá-las para que quem assiste veja exatamente o que você viu.

Por que microinterações são difíceis de capturar

Três fatores jogam contra você:

• São breves. Uma dica de hover pode ficar visível por 400 milissegundos. De relance, quem assiste simplesmente não percebe.
• São pequenas. Uma caixa de seleção mudando de estado ocupa uma fração mínima de um quadro em 1080p.
• Você já sabe para onde olhar. Você executou a ação, então seus olhos a acompanharam perfeitamente. Os de quem assiste, não.

Cada técnica a seguir resolve um desses três problemas: fazer durar mais, fazer parecer maior ou dizer ao olho para onde ir.

Comece com uma taxa de quadros maior

Interações rápidas precisam de quadros para serem sequer visíveis. A 30 fps, um arrasto veloz pela tela vira um punhado de posições borradas. A 60 fps, o mesmo movimento se lê como um percurso contínuo.

Para qualquer gravação com arrastar e soltar, transições animadas ou estados de hover rápidos, grave a 60 fps. O arquivo fica maior, mas você sempre pode comprimir na exportação — não dá para acrescentar quadros que nunca foram capturados.

Desacelere as mãos

A maior melhoria não custa nada: mova-se com intenção. Um percurso de mouse que cruza a tela em meio segundo é difícil de acompanhar. O mesmo percurso em um segundo e meio fica fácil.

Regras práticas durante a gravação:

• Leve o cursor até o alvo e então pare antes de clicar
• Deixe o clique produzir seu efeito visual antes de seguir em frente
• Evite passar do alvo e corrigir — aproxime-se em um único arco suave
• Nunca mova o cursor enquanto explica algo; deixe-o parado

Dê fôlego aos estados de hover

Ao demonstrar uma dica, uma prévia de menu suspenso ou um botão revelado no hover, mantenha o hover por pelo menos um segundo e meio a dois segundos. Durante a gravação vai parecer absurdamente lento. Na reprodução, vai parecer exatamente certo.

Um hábito útil: conte mentalmente enquanto mantém o hover. Se não chegar ao “dois”, você se moveu rápido demais.

A regra dos três tempos para arrastar e soltar

Arrastar e soltar é a interação mais mal interpretada, porque as pessoas veem o resultado sem ver a intenção. Divida cada arrasto em três tempos distintos:

1. Pegar — apoie o cursor sobre o item, pressione e faça uma pausa curta para que o estado de pegar apareça
2. Percorrer — mova devagar, em linha reta e legível, rumo ao destino
3. Soltar — pause sobre o alvo antes de liberar, para que o destaque da área de soltura seja percebido

Entre cada tempo, uma pausa curta faz o trabalho de uma frase inteira de narração.

Use efeitos de cursor para ancorar a atenção

As ferramentas de cursor do Recorded existem exatamente para esses momentos:

• A suavização do cursor elimina a trepidação que torna movimentos rápidos difíceis de acompanhar. O nível médio serve para a maioria das demos.
• Os destaques de clique tornam inconfundível o instante exato do clique, o que importa quando o efeito na tela é sutil.
• O tamanho do cursor pode ser aumentado para que o ponteiro continue legível após a exportação, principalmente no celular.

Em gravações com muitos arrastos, os destaques de clique são essenciais — são eles que dizem que o botão continua pressionado.

Amplie, mas mantenha o destino no quadro

O zoom torna visíveis as interações pequenas, com uma ressalva específica dos arrastos: se você aproximar demais no item que está sendo pego, o destino pode ficar fora do quadro e quem assiste perde a ligação entre os dois.

Duas abordagens que funcionam:

• Inclua as duas pontas. Enquadre uma região que contenha origem e destino, mesmo que isso exija um zoom mais suave.
• Amplie em tempos. Aproxime na hora de pegar, recue um pouco durante o percurso e aproxime de novo ao soltar.

Para alternâncias, caixas de seleção e mudanças de estado sem deslocamento, amplie o quanto quiser — não há um segundo lugar com que se preocupar.

Câmera lenta para interações realmente rápidas

Algumas interações não podem ser feitas devagar: um gesto de deslize, uma paleta de comandos aberta pelo teclado, uma animação que roda na velocidade dela. Grave-as em velocidade normal e desacelere o clipe na edição.

Uma região de velocidade a 0,5x sobre uma animação de um segundo dá dois segundos para quem assiste, sem pausa estranha na narração. Combine com um zoom no mesmo trecho e até uma transição de 200 milissegundos fica totalmente legível.

Narre as partes invisíveis

Parte do que você faz nunca aparece na tela: segurar uma tecla modificadora, clicar com o botão direito, um toque longo. Se a entrada é invisível, o resultado parece mágica.

Cubra isso de duas formas:

• Diga em voz alta: “Estou segurando Shift enquanto arrasto para selecionar o intervalo inteiro”
• Adicione um texto sobreposto naquele momento com a tecla ou o gesto, para ficar claro mesmo sem som

Erros comuns

• Gravar a 30 fps e depois estranhar o arrasto travado
• Seguir em frente na hora após um clique, antes de a interface terminar de responder
• Demonstrar um hover com um cursor que já está se afastando
• Ampliar tanto que quem assiste perde a noção espacial
• Supor que a animação é óbvia porque você já a viu cem vezes

Checklist rápido antes de gravar

Antes de gravar uma demo baseada em microinterações:

1. Defina a taxa de quadros em 60 fps
2. Ative a suavização do cursor e os destaques de clique
3. Aumente o tamanho do cursor se o destino forem telas pequenas
4. Ensaie o arrasto ou o hover uma vez, na metade da velocidade natural
5. Planeje onde ficarão as regiões de zoom e confirme que o destino permanece no quadro
6. Anote as entradas ocultas que exigirão narração ou texto sobreposto

Conclusão

Microinterações são os detalhes que fazem um software parecer bem pensado — e somem das gravações a menos que você as proteja de propósito. Desacelere as mãos, dê dois segundos completos aos estados de hover, divida os arrastos em pegar-percorrer-soltar e deixe os efeitos de cursor e o zoom cuidarem do resto.

Na próxima gravação, escolha uma interação que você normalmente atropelaria e trate-a como a atração principal. A diferença de clareza costuma aparecer logo na primeira reprodução.