Como documentar um tour pelo produto com capturas de tela automáticas no Mac

Um tour pelo produto mostra ao leitor como um fluxo se apresenta do início ao fim: cadastro, primeiro projeto, um recurso novo. Capturas cronometradas funcionam bem quando o fluxo inclui rolagem, animações ou esperas, situações em que uma captura baseada em cliques perderia as telas intermediárias.

Este post usa o Temposhot Auto Capture no Mac para tirar uma captura de tela em intervalo fixo e, em seguida, transformar os quadros úteis em um guia editado.

As seções seguem um único exemplo trabalhado. O fluxo é "Create and share your first board" em um aplicativo web, executado em cerca de 105 segundos. Uma execução de 70 quadros com intervalo de 1,5 segundo gerou um guia de 12 páginas.

1. Escolha um fluxo do produto

Escolha um fluxo com início e fim claros, como "Create and share your first board". Um tour por todo o produto vira uma galeria longa que ninguém termina.

Registre o público ao lado do fluxo: um possível cliente que avalia o produto, um novo usuário ou um colega que está conhecendo uma versão nova. O público define quais telas importam e quanto é preciso explicar.

Dimensione o fluxo antes de capturar

Um fluxo que cabe em 8 a 15 páginas é fácil de ler de uma vez. Conte as telas que o leitor precisa ver, não os cliques. O fluxo do board tem 12: dashboard vazio, diálogo de novo board, nome do board, escolha de template, board vazio, primeiro card, detalhes do card, botão de compartilhar, diálogo de convite, menu de papel, convite enviado e o board compartilhado.

Se a contagem passar de cerca de 20, divida o fluxo. "Create a board" e "Share a board" funcionam como dois tours que se referenciam. Cada parte tem então seu próprio início e fim, e uma versão que altera o compartilhamento afeta apenas a segunda parte.

Ajuste a profundidade ao público

Um possível cliente precisa do resultado de cada tela e de pouco detalhe. Um novo usuário precisa dos nomes dos campos e dos valores a digitar. Um colega que conhece uma versão nova precisa apenas das telas alteradas, com o comportamento anterior descrito na descrição.

Os mesmos 70 quadros podem atender aos três públicos. A diferença está em quais quadros viram páginas e em quão longas são as descrições.

2. Prepare um ambiente de teste limpo

Um tour mostra muita tela de uma vez, então os dados exibidos importam.

• Use uma conta de demonstração com conteúdo de exemplo realista: nomes de projetos, alguns itens e uma foto de perfil que não seja de uma pessoa real.
• Defina um tamanho de janela e mantenha-o. Uma área de captura em proporção comum, como 16:9 em 1600×900, se adapta a slides e documentos.
• Feche outros aplicativos, oculte o Dock se ele estiver dentro da área e ative um modo de Foco do macOS.
• Ensaie o fluxo uma vez para saber onde estão as pausas.

Fixe a janela e a área

Um tour se lê como uma peça só quando todas as páginas têm o mesmo tamanho e layout. Configure a janela do navegador uma vez e desenhe a área de captura sobre ela com o preset 16:9 em 1600 × 900. Ative Lock aspect para que um ajuste posterior mantenha a proporção.

Se o preset não couber na tela, o Temposhot reduz a área e mantém a proporção. Em um monitor menor de notebook, confira o tamanho exibido na sobreposição antes de começar, porque uma área reduzida produz quadros menores.

Mantenha notificações e janelas privadas fora da captura

O Auto Capture salva tudo o que estiver visível na fonte. Um banner de notificação que deslize para dentro da área personalizada durante a execução aparece em vários quadros. O modo de Foco do macOS bloqueia a maioria dos banners, e fechar aplicativos de chat e e-mail remove o restante.

Uma fonte Windows captura uma janela de aplicativo mesmo quando outras janelas passam à frente dela. Uma Custom Area captura a região como ela está, inclusive o que a cobrir. Para um tour sobre uma janela do navegador, a área personalizada só é a melhor escolha quando nada mais abrir sobre a região durante a execução.

Ensaie e anote as esperas

O ensaio mostra onde o produto faz o leitor esperar. No fluxo do board, a galeria de templates leva cerca de 2 segundos para carregar, e a confirmação do convite aparece cerca de 1 segundo depois de Send. Essas esperas definem o intervalo e o tempo de permanência em cada tela.

3. Configure a captura cronometrada

1. Abra o Auto Capture

   Pressione Command+1 para abrir o Auto Capture.

2. Escolha a fonte

   Escolha Windows para uma janela de aplicativo ou Custom Area para desenhar uma região fixa. O seletor de área oferece presets como 16:9 1600×900 e Lock aspect.

3. Defina a condição de parada

   Escolha Screenshots com uma contagem que cubra o fluxo, ou Duration para uma duração fixa. O padrão é 5 capturas de tela.

4. Defina o intervalo

   Um Interval de 1 a 2 segundos atende à maioria dos tours. O padrão é 1 segundo.

5. Deixe Key press vazio

   Você vai conduzir o produto manualmente, então nenhuma tecla precisa ser enviada entre as capturas.

6. Mantenha a contagem regressiva

   O Countdown padrão de 3 segundos dá tempo para trocar para a janela do produto.

O preset Quick Demo (5 capturas de tela, 1 segundo, sem tecla, contagem de 3 segundos) é um ponto de partida. Mais capturas do que a contagem gratuita por sessão exige o plano Pro. O guia de captura automatizada explica cada configuração.

Configurações do tour do board

O ensaio levou cerca de 95 segundos. Com intervalo de 1,5 segundo, isso dá cerca de 63 quadros, então a condição de parada foi definida em 70 capturas de tela para deixar uma margem. A contagem regressiva foi aumentada para 5 segundos, porque trocar para o navegador e posicionar o ponteiro leva mais de 3 segundos.

Informe o intervalo como 1500 milissegundos ou 1,5 segundo; as duas unidades são aceitas. Salve a configuração com Save Current Setup usando um nome como "Walkthrough 70 frames 1.5 s". Um preset guarda a condição de parada, o intervalo, a tecla e a contagem regressiva, mas não a fonte, então a área personalizada é escolhida novamente em cada execução.

Escolha o intervalo pela tela mais lenta

O intervalo deve ser menor que a tela mais curta que o leitor precisa ver, e longo o bastante para que os quadros não se acumulem. Um intervalo de 1 segundo em um fluxo de 105 segundos gera cerca de 105 quadros, a maioria quase idêntica. Um intervalo de 3 segundos gera 35 quadros, mas pode perder o menu de papel, que fica aberto por cerca de 2 segundos.

No fluxo do board, 1,5 segundo capturou cada tela pelo menos uma vez. Conte os quadros por tela depois da execução: se alguma tela importante tiver apenas um quadro, reduza o intervalo ou permaneça mais tempo nessa tela na próxima vez.

4. Percorra o fluxo em ritmo constante

Selecione Start Capture (no seletor de Custom Area, Start Auto Capture), troque para o produto durante a contagem regressiva e execute o fluxo. Permaneça em cada tela importante por pelo menos dois intervalos para que um quadro capture a tela totalmente carregada.

Use Pause capture na barra flutuante para corrigir um erro e Resume capture para continuar. Finish capture encerra a execução imediatamente.

Ritmo da execução do exemplo

Permanecer dois intervalos em uma tela equivale a cerca de 3 segundos com intervalo de 1,5 segundo. Digitar o nome do board levou mais tempo, então gerou 5 quadros, e o último mostra o nome completo. A linha do tempo abaixo indica como a execução usou o tempo.

Teclas durante a execução

A barra flutuante permanece na tela enquanto o navegador está à frente. Os comandos da barra de menus também funcionam, então a execução pode ser iniciada e encerrada sem trocar para a janela do Temposhot.

Role a tela em passos curtos e regulares

Telas com rolagem são onde a captura cronometrada mais ajuda e onde ela mais costuma gerar quadros borrados ou pela metade. Role cerca de meia tela por vez e pare entre as rolagens por pelo menos um intervalo. Cada parada gera um quadro limpo, e quadros consecutivos se sobrepõem, então nada fica de fora.

Se uma página longa precisar de uma imagem única em vez de vários quadros, exporte os quadros em PNG e una-os com Stitch Screenshots. A ferramenta junta as imagens de cima para baixo e detecta a sobreposição entre elas.

Corrija um erro durante a execução

Se um clique errado abrir o diálogo errado, selecione Pause capture, feche o diálogo, volte à última tela correta e selecione Resume capture. Os quadros do erro permanecem na sessão e são ignorados quando o Document é montado. Com a condição de parada Screenshots, a contagem continua de onde parou, então o orçamento de 70 quadros não é consumido pela pausa.

Se o erro alterou os dados de demonstração, como um board criado com o nome errado, pare a execução, corrija os dados e comece de novo. Uma segunda execução limpa é mais rápida de editar do que uma execução com um reparo no meio.

5. Transforme os quadros úteis em um Document

Quando a execução termina, o painel de resultados mostra Capture complete e os quadros. A captura cronometrada gera mais quadros do que passos, então escolha os que contam a história.

Há duas formas de montar o Document:

• Create Document no painel de resultados usa a sessão inteira. Apague as páginas extras depois no painel Pages.
• Em Documents (Command+4), abra o menu New Document e escolha Capture History…. Expanda a sessão, inclua apenas os quadros desejados e selecione Add selected Frames.

A segunda forma é mais rápida quando você mantém menos da metade dos quadros. O guia de páginas e importações cobre as duas.

Qual caminho serve para 70 quadros

A execução do board manteve 14 de 70 quadros na primeira passagem, ou 20 por cento. Apagar 56 páginas uma a uma é mais lento do que marcar 14 quadros, então o seletor do Capture History foi o caminho melhor.

Create Document sempre usa todos os quadros da sessão, inclusive os não selecionados. A seleção por caixas de seleção no painel de resultados vale para as exportações ZIP, Images, PDF e MP4, não para o Document.

Escolha o quadro de cada tela

Quando uma tela aparece em 3 ou 4 quadros consecutivos, escolha o último. Ele mostra a tela depois que o carregamento terminou e depois que o ponteiro se estabilizou. Para um diálogo, escolha o quadro em que o diálogo está totalmente aberto, não o que está no meio da animação.

Depois da primeira passagem, 2 das 14 páginas eram quase duplicatas da tela de detalhes do card. Apagá-las deixou 12 páginas, uma por tela da lista de fluxo da seção 1.

6. Escreva as instruções das páginas

Cada página precisa de um Page title que diga o que o leitor vê ou faz, e de uma descrição curta que explique por que a etapa importa no fluxo.

• "Nomeie o board": o que digitar e onde.
• "Convide colegas por e-mail": qual campo preencher e qual papel escolher.
• "Revise o board compartilhado": o que o leitor deve observar.

Use Framing (F) com Custom para recortar cada página na parte da tela que o título descreve. Adicione uma Arrow (A) ou um Rectangle (R) onde o olhar deve ir. Quadros cronometrados não guardam a posição do clique, então Focus on action se aplica apenas às páginas do Action Capture.

Padrões de título e descrição

Um título nomeia uma tela ou uma ação. A descrição acrescenta o valor a digitar, a escolha a fazer ou o resultado esperado. Mantenha as descrições em duas frases para que a captura de tela fique perto do topo da página do PDF.

Recorte e marque cada página

Um quadro de 1600 × 900 mostra o app inteiro, mas a maioria das páginas trata de um diálogo ou de um campo. O recorte Custom no editor de enquadramento define a região visível, e Frame size mostra sua largura e altura. O quadro original não muda, e Show full image o restaura.

Uma marcação por página costuma bastar. Uma Arrow aponta para um controle que o leitor precisa encontrar, e um Rectangle contorna um campo a preencher. No Object Inspector, defina Width para que o contorno seja visível no tamanho exportado e mantenha a mesma cor em todas as páginas.

7. Exporte e revise o tour

Selecione Export PDF para um documento que será enviado ou anexado. Com o plano Pro, o diálogo de PDF adiciona página de capa, números de passo e números de página. Abra More export formats para páginas em PNG, JPG ou WebP que possam ser colocadas em slides ou wiki, ou um pacote ZIP com document.json.

Revise a exportação no tamanho final. Confira se cada título corresponde à sua captura de tela e se nenhum dado real de cliente entrou em um quadro. O guia de exportação de Documents lista todos os formatos.

Revise o PDF no tamanho final

A prévia do PDF no diálogo de exportação mostra cada página como ela será salva. Percorra as 12 páginas e verifique três pontos: o título corresponde à captura, o recorte deixa o controle visível e nenhum dado de demonstração parece dado real. Com o padrão Fit without enlarging, uma página com recorte apertado permanece no tamanho original, em vez de ser ampliada e borrada.

O rodapé resume o resultado, por exemplo "12 steps · A4 · Landscape". Se a contagem for diferente da lista de fluxo, uma página está faltando ou duplicada.

Arquivos do tour do board

O guia do board foi exportado duas vezes: uma como PDF para e-mail e outra como páginas PNG para uma apresentação de slides. Os arquivos de imagem recebem o nome dos títulos das páginas, então os slides podem ser organizados em ordem pelo nome.

As páginas PNG são sem perda e mantêm o texto da interface nítido em slides. As páginas JPG são menores e servem para uma wiki com limite de upload. Para um único PDF que reúna este guia com outros, a ferramenta de navegador Merge PDF junta os arquivos exportados.

Transforme os mesmos quadros em um vídeo curto

O painel de resultados exporta MP4 a partir dos quadros selecionados, em ordem. A taxa de quadros define a duração do vídeo. Para os 70 quadros do board, a duração em cada taxa é o número de quadros dividido pela taxa.

Em 5 fps, a menor configuração, cada quadro fica visível por 0,2 segundo, então uma tela só permanece visível pelo tempo em que ocupa vários quadros da execução. Uma execução cronometrada em que o apresentador permanece 3 segundos em cada tela gera 2 quadros por tela, ou 0,4 segundo de vídeo.

Para uma sequência mais lenta com os 14 quadros escolhidos, selecione-os e exporte um GIF em Export settings…. GIF frame delay chega a 1 segundo por quadro, então 14 quadros duram 14 segundos. A ferramenta de navegador Images to Video é outra opção para um slideshow a partir das páginas PNG exportadas.

Mantenha o tour atualizado

Tours mostram muitas telas, então envelhecem a cada versão. Mantenha a sessão e o Document no Mac que os criou, indique a versão do produto na capa e recapture apenas as telas que mudaram. O post sobre como manter a documentação com capturas de tela atualizada descreve uma rotina de revisão.

Se um tour for guiado por cliques, sem esperas nem rolagem, o Action Capture gera uma página por clique, em vez de quadros cronometrados.

Atualize apenas as páginas alteradas

Quando uma versão altera o diálogo de convite, apenas 3 das 12 páginas precisam de novas capturas. Refazer o fluxo inteiro e reconstruir o guia repete o trabalho em 9 páginas que não mudaram.

Novas páginas de uma captura podem ser inseridas após a página selecionada no momento, então selecione primeiro a página que vem antes da seção alterada. Os arquivos exportados não se atualizam sozinhos; exporte novamente após cada alteração.

Atenção ao limite de retenção de sessões

O Capture History mantém 30 sessões por padrão, e o limite pode ser definido de 1 a 500 em Settings > History. O Document guarda suas próprias cópias de todas as imagens que usa, então o guia sobrevive quando a sessão de origem é removida. Os 70 quadros brutos não ficam guardados, então exporte-os como ZIP se uma edição futura puder precisar de um quadro que não foi escolhido.

Perguntas frequentes

A captura cronometrada ou a captura por clique é melhor para tours?

A captura cronometrada atende fluxos com rolagem, carregamentos e animações. A captura por clique atende tarefas com formulários, nas quais cada clique é um passo. Veja capturas de tela manuais versus captura por clique.

Posso fazer um vídeo com os quadros em vez disso?

Sim. O painel de resultados exporta MP4 de 5 a 60 fps. Um MP4 curto serve para uma demonstração, e um Document serve para um guia que o leitor segue no próprio ritmo.

Qual intervalo devo usar?

De 1 a 2 segundos para a maioria dos tours de interface. Intervalos menores capturam transições, mas geram mais quadros para organizar.

Quantas capturas de tela o limite de parada deve permitir?

Divida o tempo do ensaio pelo intervalo e some cerca de 10 por cento. Um ensaio de 95 segundos com intervalo de 1,5 segundo dá cerca de 63 quadros, então 70 deixa uma margem.

O tour pode capturar uma página atrás de um login?

Sim, no Auto Capture. Ele captura a tela como ela está exibida, então faça login na conta de demonstração no navegador antes da execução. O Website Capture é diferente: ele carrega as páginas em uma sessão privada, sem o login do seu navegador.

Transforme capturas repetíveis em trabalho final

Automação de capturas de tela no Mac captura o tour em intervalo fixo e entrega os quadros a um Document editável. Baixe o Temposhot e grave seu primeiro fluxo.