In partnership with

ED 032

O tutorial de 14 passos que ninguém terminava

Um passo a passo do meu arquivo mandava o leitor clicar catorze vezes e descrevia tudo só em texto, e só 11 de cada 100 chegavam ao fim.

Bancada clara vista de cima com catorze folhas impressas dispostas em duas fileiras, cada folha com um retângulo de texto corrido no meio e uma seta vermelha desenhada à mão apontando para um canto, um marcador vermelho destampado apoiado na terceira folha, régua de metal atravessada na diagonal, luz de manhã entrando pela esquerda, sem nenhuma pessoa por perto

De 11% para 38% no passo final.

▼

O marcador vermelho rangeu no papel quando risquei a seta na terceira folha, e o cheiro de tinta de caneta permanente tomou a mesa. Na minha frente havia catorze folhas impressas, uma por passo do meu post viverdeblog.com/como-criar-um-blog/, publicado em 2018, e nas catorze o leitor recebia ordens escritas do tipo "clique no menu lateral e escolha a terceira opção".

O painel de eventos do meu blog, na janela de 28 dias anterior, mostrava 11 de cada 100 visitantes dessa página chegando ao marco de 100% da rolagem, que naquela página coincide com o passo catorze. No passo quatro, pouco depois do primeiro trecho que pedia mexer no painel de hospedagem, 44 de cada 100 já tinham saído.

As perguntas na caixa de entrada contavam a mesma história com outras palavras. "Não achei esse menu lateral." "O meu painel tem outro nome nesse botão." "Travei no passo seis." Nenhuma delas duvidava da instrução, todas perguntavam onde a instrução acontecia na tela.

O primeiro conserto que tentei foi escrever mais: detalhar cada clique com mais frases, dizer a cor do botão, o canto da tela, o nome exato do campo. O post engordou 900 palavras e a saída no passo quatro continuou no lugar, porque descrição de tela obriga o leitor a montar a tela na cabeça antes de procurar o botão de verdade.

O segundo conserto foi um vídeo de doze minutos no topo da página. O vídeo ajudou quem senta para assistir e não ajudou quem tenta executar: ninguém pausa e volta doze minutos para conferir onde o botão mora no passo nove.

O caminho que mexeu no número levou uma tarde: cada passo do tutorial ganha uma captura de tela (a imagem do que aparece no monitor naquele instante) com uma seta vermelha desenhada por cima, apontando o único elemento que o leitor precisa tocar naquele passo.

A seta tira do leitor o trabalho de traduzir palavra em lugar. Ele bate o olho, reconhece a tela que já está aberta na frente dele, encontra o alvo e executa sem soletrar a instrução.

Continue lendo ↓

I A técnica de hoje

Uma seta vermelha por passo

A técnica de hoje coloca uma captura de tela em cada passo do tutorial e desenha nela uma seta vermelha apontando o único ponto que o leitor precisa clicar. No meu post de 2018 sobre criar um blog, catorze capturas entraram onde não havia imagem nenhuma.

A captura sozinha não resolve. Tela cheia de menu, barra lateral e propaganda espalha o olho do leitor pelos mesmos trinta elementos que ele já não sabia interpretar. A seta escolhe por ele, e escolher por ele é o serviço que o tutorial presta.

POR QUE A SETA GANHA DA DESCRIÇÃO

Quem lê um tutorial está com duas janelas abertas: a sua página e o painel que ele precisa mexer. Cada frase descritiva pede que ele guarde a descrição na memória, troque de janela, procure o elemento e volte. Quatro operações por passo, catorze passos, e o cansaço chega antes do fim.

A captura anotada corta três dessas quatro operações. O leitor compara duas imagens, a sua e a dele, e o cérebro acha a semelhança sem precisar de palavra no meio do caminho.

"Pessoas aprendem melhor com palavras e imagens juntas do que com palavras sozinhas." Richard Mayer, Multimedia Learning, 2001.

Mayer testou estudantes recebendo a mesma explicação em texto puro e em texto com figura ao lado, e o grupo com figura resolveu mais problemas de transferência, ou seja, aplicou a explicação numa situação nova. Tutorial é transferência inteira: o leitor precisa refazer no painel dele o que leu na sua página.

AS QUATRO REGRAS DA CAPTURA ANOTADA

Primeira: uma seta por imagem. Duas setas transformam a captura num mapa e devolvem ao leitor o problema de decidir por onde começar.

Segunda: recorte apertado. Corte a captura até sobrar o painel em volta do alvo, com o suficiente de contexto para o leitor se localizar. Tela inteira de 1920 pixels vira uma tarja ilegível no celular.

Terceira: cor fixa e forte. Escolha um vermelho e use o mesmo nas catorze imagens. Cor que muda de passo para passo faz o leitor procurar significado onde só houve descuido do autor.

Quarta: a seta aponta, a legenda nomeia. Embaixo de cada captura, uma linha curta com o nome do botão escrito igual ao que aparece na tela, para o leitor que usa leitor de tela e para quem bloqueia imagem no navegador.

O QUE FAZER QUANDO A TELA MUDA

Painel de hospedagem troca de layout a cada temporada. Guarde as capturas originais em pasta própria, com o nome do passo no arquivo, e anote na planilha do post a data da captura. Refazer catorze imagens do zero custa uma tarde; refazer três custa vinte minutos.

II No seu blog

Catorze capturas numa tarde

O passo de hoje pega o seu tutorial mais visitado sem imagem, refaz o procedimento do começo ao fim capturando cada tela e publica cada passo com a sua seta vermelha. Um tutorial por vez, com a leitura da rolagem antes e depois.

O candidato sai do painel de eventos: filtre as páginas que começam com "como" ou trazem a palavra passo no título, ordene por visitas e pegue a mais visitada que hoje não tem imagem nenhuma no corpo.

OS QUATRO PASSOS

1. Abra uma conta nova, limpa, do serviço que o tutorial ensina, e percorra o procedimento inteiro como um iniciante faria. Conta velha tem configuração antiga e mostra telas que o seu leitor nunca verá.

2. Capture a tela a cada clique, sem editar nada ainda. Nomeie cada arquivo com o número do passo na frente, de 01 até o fim. Uma passada, catorze arquivos, quarenta minutos.

3. Abra as capturas num editor simples, recorte cada uma em volta do alvo e desenhe a seta vermelha. Padronize a espessura da seta e o tamanho da imagem final, com 800 pixels de largura servindo bem no celular e no desktop.

4. Publique com legenda por imagem e marque na agenda a leitura da rolagem 28 dias depois. Anote quantas capturas entraram e qual passo perdia mais leitor antes da reforma.

O passo 1 é onde a tarde trava. A tentação é capturar da sua conta de trabalho, cheia de atalhos e de configurações que você mesmo instalou anos atrás, e o leitor abre a imagem, não reconhece a tela dele e desiste com a sensação de estar fazendo errado.

A DÚVIDA QUE SEMPRE APARECE

Catorze imagens parecem pesar a página e derrubar a velocidade de carregamento. Salve cada captura no formato WebP (o formato de imagem que o navegador carrega mais leve que o antigo JPEG) e ative o carregamento preguiçoso, que traz a imagem apenas quando ela se aproxima da tela. As catorze somadas ficaram em 380 kilobytes no meu post.

O CUIDADO COM DADO NA TELA

Antes de publicar, varra cada captura procurando email, nome de domínio de cliente, chave de acesso e valor de fatura. Painel de hospedagem mostra o seu email no canto superior em quase toda tela, e um retângulo cinza por cima resolve.

Guarde numa planilha a data da reforma, a URL, o número de capturas inseridas e a rolagem das quatro semanas anteriores. Sem esse registro, daqui a três meses você não sabe se o ganho veio das capturas ou de o tutorial ter subido de posição na busca por outro motivo.

Quem banca a edição de hoje

Free Workshop: Turn a Tiny Audience Into $10k/month

We’ve driven over $10M in revenue for our newsletter clients and are unpacking the plug-and-play system thousands of people are using to turn a small email list into $2k-$10k/month.

(…without needing to quit your job, without needing to get on camera, and without needing prior experience).

We’ll show you how to start a newsletter in <30 minutes, scale to 1,000 readers, and make your first $10,000 in revenue.

Save Your Free Seat

Patrocinadores mantêm a edição gratuita

III O número pra olhar

Quem chega ao último passo

O número pra olhar: a porcentagem de visitantes da página que atinge o marco de 100% da rolagem, nos 28 dias depois da reforma contra os 28 dias anteriores. Num tutorial, o fim da página coincide com o último passo do procedimento.

Numa página de artigo, chegar ao fim significa ter lido tudo. Num tutorial, significa ter executado tudo, e por isso o marco de 100% aqui vale mais que tempo médio na página: quem executa passa minutos fora da sua aba, mexendo no painel, e o relógio da página não enxerga esse trabalho.

COMO SE FAZ A CONTA

No painel de eventos do seu blog, filtre pela URL do tutorial, escolha a janela de 28 dias e leia os marcos de rolagem de 25%, 50%, 75% e 100%. Anote os quatro. Repita a leitura 28 dias depois da publicação das capturas.

No meu post de 2018 sobre criar um blog, medido no painel de eventos do meu blog:

Visitantes que chegaram a 100% da rolagem, antes

11%

Visitantes que chegaram a 100% da rolagem, depois

38%

Visitantes que chegaram a 25% da rolagem, antes e depois

56% e 71%

Emails de leitor travado num passo, por semana, antes e depois

9 e 2

Cliques no link de cadastro no pé do tutorial, antes e depois

27 e 96

A queda nos emails de leitor travado sustenta o marco de rolagem. Quem chegava ao fim da página estava mesmo executando, e não passando o dedo rápido até o rodapé.

A JANELA E O PISO

Vinte e oito dias contra vinte e oito dias evita comparar quatro semanas com cinco e dilui o peso de um dia de pico. Espere a janela fechar inteira antes de ler, porque a primeira semana depois da republicação traz visita de leitor antigo curioso com a mudança.

Abaixo de 300 visitantes na janela anterior, a leitura não se sustenta. Com 80 visitantes, dez pessoas que executaram o tutorial inteiro sobem o marco de 100% em doze pontos e você credita às setas um movimento de dez conhecidos.

A RESSALVA QUE O MEU PRÓPRIO NÚMERO EXIGE

A minha medição é de uma página só, com janelas de 09/08/2026 a 05/09/2026 e de 12/07/2026 a 08/08/2026, lidas no painel de eventos do meu blog, que dispara o marco de rolagem quando o pixel correspondente entra na tela, mesmo que o visitante tenha descido rápido sem executar o passo.

Junto com as capturas eu reescrevi as legendas dos passos e republiquei a página com data nova, e data nova sozinha costuma mexer na posição de busca. Faça a reforma num segundo tutorial, sem mexer na data original, e compare os dois resultados para separar o efeito das setas do efeito da republicação.

38% dos visitantes chegando ao passo catorze. Foi o marco de 100% da rolagem depois das catorze capturas anotadas, contra 11% antes, medido no painel de eventos do meu blog entre 09/08/2026 e 05/09/2026 (viverdeblog.com/como-criar-um-blog/, 2018).

"Em qual passo do seu tutorial o leitor desiste hoje por não achar o botão?"