Como gravar demos de extensões de navegador que dão vontade de instalar

Extensões de navegador são difíceis de demonstrar. O produto inteiro vive num popup de 300 pixels, num ícone de barra de ferramentas de 16 pixels e em algumas mudanças numa página que outra pessoa construiu. Não há janela de aplicativo para exibir, nem tela de abertura, nem painel. Ainda assim, o vídeo de demonstração muitas vezes é a única coisa entre um visitante curioso e a instalação.

A boa notícia é que as limitações são previsíveis. Quando você sabe onde as demos de extensão costumam desandar, uma gravação curta pode ser bastante persuasiva.

Por que demos de extensão são diferentes

Quase todo conselho sobre gravação de tela pressupõe que seu produto é dono da janela. Uma extensão não é. Isso muda quatro coisas:

• Sua interface é minúscula: popups, selos e menus de contexto ocupam uma fração do quadro, então o enquadramento padrão os torna invisíveis
• A página hospedeira é o palco: quem assiste precisa reconhecer o site que você está melhorando antes de conseguir ver o que mudou
• O valor é a diferença: você não está mostrando um recurso, está mostrando uma página que ficou melhor
• A instalação faz parte do produto: os pedidos de permissão e a fixação do ícone são a primeira coisa que um usuário novo encontra, e é ali que a desistência acontece de verdade

Planeje a gravação em torno desses quatro fatos e o resto é ofício comum.

Crie primeiro um perfil de demonstração limpo

Nunca grave uma demo de extensão no seu navegador do dia a dia. Crie um perfil dedicado e use-o só para gravações.

• Esvazie a barra de ferramentas: todo outro ícone de extensão compete com o seu. Remova ou oculte todos
• Fixe apenas a sua extensão: um único ícone numa barra vazia é inconfundível
• Saia das contas pessoais: avatares, nomes e e-mails aparecem num número surpreendente de quadros
• Limpe os favoritos e a barra de favoritos: ou troque-os por favoritos neutros e seguros para a demo
• Redefina a página de nova aba: por padrão ela costuma mostrar seu histórico em miniaturas
• Desligue notificações não relacionadas: no navegador e no sistema
• Defina um zoom sensato: 100% de zoom de página e um tamanho de janela que combine com a proporção de exportação

Faça isso uma vez e salve o perfil. Toda gravação futura começa do mesmo estado limpo, o que também deixa seus vídeos consistentes como série.

Escolha o modo de captura certo

Há três opções razoáveis, e a escolha depende de a interface do navegador importar ou não.

• Captura de janela: o padrão para demos de extensão. A barra de ferramentas aparece, e é ali que vivem seu ícone e seu selo; capturar só a janela também esconde sua área de trabalho
• Captura de área: boa para um plano fechado do popup mais a parte da página que ele afeta. Útil para clipes curtos de redes sociais, mas corta a barra de ferramentas e o espectador perde a noção de onde sua interface mora
• Tela cheia: só quando você precisa mostrar algo fora do navegador — um diálogo de arquivos do sistema, uma permissão do sistema operacional ou outro aplicativo

Na maioria das demos, grave a janela do navegador num tamanho próximo de 16:9 e faça os close-ups com zoom no editor, em vez de trocar de modo de captura no meio do vídeo.

Mostre o fluxo de instalação com honestidade

É tentador pular a instalação e ir direto para a extensão funcionando. Faça o contrário em pelo menos um vídeo. Usuários novos se preocupam com permissões, e ver alguém passar tranquilamente por aquele aviso é reconfortante.

• Comece na página da loja ou no seu botão de instalação: exatamente o caminho que um usuário real percorre
• Não esconda o diálogo de permissão: deixe-o aparecer e explique numa frase por que ele é necessário. “Ela precisa de acesso a este site porque lê os preços da página” responde à dúvida antes que ela vire desconfiança
• Mostre o passo de fixar o ícone: muita gente instala uma extensão e depois não consegue achá-la. Dez segundos de fixação evitam muitas mensagens de suporte
• Use um perfil novo para que o fluxo seja real: uma permissão já concedida pula o diálogo silenciosamente e torna seu vídeo enganoso

Se você também quiser um clipe curto só sobre o recurso, corte-o separadamente da mesma gravação em vez de comprometer o passo a passo completo.

Torne legível uma interface minúscula

É aqui que demos de extensão são ganhas ou perdidas. Seu popup é pequeno no seu monitor e microscópico num celular.

• Dê zoom a cada abertura do popup: um zoom centrado no popup enquanto ele está aberto é a edição de maior valor num vídeo de extensão
• Dê zoom no ícone quando o selo mudar: um contador que vai de 0 a 12 não significa nada se ninguém consegue ler o número
• Destaque o cursor: cliques num ícone de 16 pixels são invisíveis de outra forma. Destaque de cursor e efeitos de clique mostram exatamente onde a interação aconteceu
• Fique parado depois de abrir o popup: dê um segundo inteiro antes de mover o mouse. Movimento sobre interface pequena virá borrado depois da compressão
• Use sobreposições de texto para rótulos que não dá para ampliar: uma legenda curta é melhor do que forçar a vista em letras de 10 pixels
• Não conte com dicas de hover: são pequenas, lentas e muitas vezes nem aparecem na gravação. Diga o rótulo em voz alta

Estruture como antes e depois

Extensões melhoram uma experiência que já existe, então comece pela dor.

1. Mostre a página sem a extensão por cinco a dez segundos: o trabalho manual, a informação que falta, o passo tedioso
2. Ative a extensão ou clique no ícone dela, de forma visível
3. Mostre a mesma página transformada, de preferência no mesmo enquadramento, para que a diferença fique óbvia
4. Execute uma tarefa realista do início ao fim usando o recurso
5. Encerre com o caminho de instalação e onde ficam as configurações

Manter o enquadramento idêntico entre os passos 1 e 3 faz muito trabalho por você: o olho compara os dois quadros diretamente, em vez de tentar lembrar como a página era um minuto antes.

Configurações de gravação e exportação

• 30fps é suficiente para interações de página e interface de popup; o texto fica nítido e os arquivos pequenos
• Grave na resolução nativa e deixe o editor recortar ou ampliar, em vez de gravar pequeno e escalar
• Mantenha a janela do navegador fixa: redimensionar durante a gravação reorganiza a página e arruína seus keyframes de zoom
• Grave áudio do sistema se a extensão emitir sons, caso contrário só microfone
• Exporte em 1080p para a web e considere um recorte vertical dos melhores 20 segundos

Checklist antes de gravar

[ ] Perfil de navegador de demo ativo, outras extensões ocultas
[ ] Apenas sua extensão fixada na barra de ferramentas
[ ] Contas pessoais desconectadas, nova aba limpa
[ ] Dados de demonstração preparados na página hospedeira
[ ] Zoom da página em 100%, janela na proporção de exportação
[ ] Permissões ainda não concedidas, se for mostrar a instalação
[ ] Notificações desligadas, selos de aviso limpos
[ ] Teste de dez segundos conferido no tamanho de um celular

Erros comuns

• Demonstrar num navegador com quinze outras extensões: ninguém distingue qual ícone é o seu
• Nunca dar zoom: o motivo mais comum de vídeos de extensão falharem
• Cortar o pedido de permissão: soa como se você estivesse escondendo algo
• Usar uma conta real logada: dados pessoais escapam em quadros que você não vai revisar com atenção
• Explicar o popup enquanto move o mouse: faça uma coisa e depois a outra
• Esquecer o contexto da página hospedeira: é preciso saber que site é antes de se importar com o que mudou

Conclusão

Uma demo de extensão precisa cumprir duas tarefas em menos de dois minutos: mostrar que instalar é seguro e simples, e fazer um pedacinho de interface parecer importante. Um perfil limpo resolve a primeira. Efeitos de zoom, destaque de cursor e uma estrutura antes-e-depois bem apertada resolvem a segunda. Grave a janela do navegador, mantenha-a parada, dê zoom em cada popup e deixe a página transformada argumentar por você.