“Walkthrough de site” quer dizer duas coisas diferentes, e essa confusão custa dinheiro às equipes nos dois sentidos. Para um grupo, é um vídeo: a gravação de alguém clicando pelo site enquanto explica o que faz. Para outro, é um overlay sobre a página real: uma sequência de elementos destacados, com instruções curtas, que o visitante segue enquanto executa a tarefa.
Este guia trata principalmente do segundo tipo, porque é ele que muda se o visitante conclui o que veio fazer. Ele também trata de saber quando não criar um. A maioria das páginas da maioria dos sites não precisa de walkthrough, e colocar um onde ele não faz falta é a forma mais comum de fazer walkthroughs parecerem inúteis.
O que vem a seguir: os dois tipos e quando cada um se encaixa, as páginas que realmente precisam de um walkthrough, a anatomia de um walkthrough que chega ao fim, sete padrões com exemplos, uma criação em seis passos e os erros que fazem o visitante fechá-lo.
Principais pontos
- Um walkthrough serve para páginas em que o visitante tem uma tarefa e o caminho está escondido. Portais, formulários de várias etapas, áreas de membros, redesigns. Nunca a página inicial.
- O interativo ganha do vídeo quando o visitante está na página, com a tarefa diante dele. O vídeo ganha para explicar à distância.
- De três a cinco passos, uma tarefa, uma frase por passo. Um tour pelo site inteiro é um mapa, não um caminho.
- Dispare na primeira visita à tarefa, não em toda visita. Depois disso, ofereça, nunca force.
- O walkthrough é um remendo, não uma correção. Se o mesmo passo confunde todo mundo, mude a página e aposente o passo.
- Meça a conclusão da tarefa depois do walkthrough, não a conclusão do walkthrough.
O que é um walkthrough de site? (Definição e significado)
Walkthrough de site: definição
Um walkthrough de site é uma explicação guiada, passo a passo, de como fazer uma coisa em um site. O walkthrough interativo funciona como um overlay sobre a página real: escurece tudo exceto um elemento, explica esse elemento em uma frase e passa ao próximo quando o visitante estiver pronto. O vídeo de walkthrough é uma gravação da mesma tarefa, assistida fora da página. Os dois guiam; só o interativo guia o visitante enquanto ele executa a tarefa.
Um walkthrough de site se diferencia de um walkthrough de produto principalmente pelo contexto. Um walkthrough de produto explica as funcionalidades de um software a um usuário que acabou de se cadastrar. Um walkthrough de site explica um site a um visitante ou a um cliente logado: como encontrar uma fatura no portal do cliente, como concluir uma reserva em várias etapas, para onde as coisas foram depois de um redesign, como usar uma área de membros. A mecânica é a mesma, e as mesmas ferramentas criam os dois. O público é diferente em pontos que mudam o design: visitantes de sites são mais variados, menos engajados e estão com muito mais frequência no celular.
Walkthrough interativo ou em vídeo: quando usar cada um
A pergunta não é qual é melhor. É onde o visitante está quando precisa da explicação.
| Walkthrough interativo | Vídeo de walkthrough | |
|---|---|---|
| O visitante está | Na página, com a tarefa diante dele | Em qualquer lugar: um artigo de ajuda, um e-mail, uma página de vendas |
| Ideal para | Fazer: portais, formulários, configurações da conta, nova navegação | Explicar: o que um site oferece, como um processo funciona do início ao fim |
| Duração | 3–5 passos, menos de um minuto | 1–3 minutos |
| Continua correto | Enquanto os elementos para os quais aponta existirem; exige manutenção | Até o site mudar; a partir daí, mente com toda a confiança |
| Medido por | Conclusão da tarefa depois do walkthrough | Tempo assistido, e mais nada |
| Falha quando | É disparado em páginas sem tarefa | É a única ajuda em uma página onde o visitante está travado |
Um vídeo que percorre o site inteiro tem lugar na central de ajuda e na página de vendas; o guia de vídeos de onboarding (em inglês) traz as regras de duração e posicionamento. No momento em que o visitante está na página tentando fazer algo, o vídeo pede que ele saia dela, assista, memorize, volte e reproduza; o walkthrough interativo pede que ele clique em avançar. Esse é todo o argumento a favor do interativo, e ele só vale em páginas com uma tarefa.
Quando um site precisa de walkthrough (e quando nunca precisa)
O teste tem duas partes. O visitante chega com uma tarefa? E a página esconde o caminho até ela? Um walkthrough só se justifica quando as duas respostas são sim. Uma sem a outra indica uma página que precisa de um design melhor, não de um guia.
Páginas que precisam
- Portais do cliente após o login: seguros, energia e saneamento, bancos, telecom, cobrança de SaaS. O visitante quer um documento ou uma configuração, e o portal tem quarenta itens de menu.
- Formulários de várias etapas: solicitações, sinistros, reservas e cadastros em que as etapas se espalham por várias páginas e o visitante não vê quanto falta.
- Navegação redesenhada: quem volta ao site sabe onde as coisas ficavam; o walkthrough mostra onde elas estão agora, uma única vez.
- Áreas de membros e de conta: a parte do site em que o visitante vira usuário e as tarefas se multiplicam.
- Painéis de vendedores e parceiros: o lado da oferta de um marketplace tem um trabalho a concluir antes que qualquer coisa funcione.
- Intranets e sites internos: colaboradores com um processo a seguir e sem tempo para aprender a ferramenta.
Páginas que nunca precisam
- A página inicial. Ninguém chega à página inicial com uma tarefa que ela esconda. Um walkthrough ali é um pop-up com passos a mais.
- Páginas de ação única: um formulário de contato, uma página de preços, um checkout com um botão só. Se a ação não é óbvia, a página está quebrada.
- Páginas de conteúdo: artigos, documentação, landing pages. A tarefa é ler.
- Páginas que o visitante vê uma vez só. Um walkthrough ensina; não há o que aprender em uma página à qual ninguém volta.
- Qualquer página em que a solução é um rótulo. Se um título mais claro acabaria com a confusão, escreva o título.
Repare no que a coluna da esquerda tem em comum: todas essas páginas ficam depois de algum tipo de login ou compromisso. É ali que o walkthrough de site se paga, e é por isso que a prática se sobrepõe tanto ao onboarding em setores regulados e de serviços. Os guias de onboarding para concessionárias de serviços e seguradoras (em inglês) giram em torno do portal do cliente, que é o território natural do walkthrough de site.
A anatomia de um bom walkthrough de site
Um walkthrough que chega ao fim tem seis partes, e a maioria dos que são abandonados não tem duas delas: uma saída clara e uma regra que diz quando ele nunca mais aparece.
As duas partes que mais faltam são a saída e a regra do nunca mais. Sem elas, o walkthrough vira uma interrupção que se repete.
1. Um gatilho com público definido
Quem vê, em qual página e quando. O gatilho mais forte é a primeira visita à página onde a tarefa acontece: o primeiro login no portal, a primeira chegada ao menu redesenhado. Qualquer outro gatilho é um convite, não um disparo: um pequeno botão “me mostre como funciona”, um hotspot no elemento que as pessoas não encontram, um link na central de ajuda. O guia de gatilhos de onboarding (em inglês) detalha as regras; a versão curta é que um walkthrough dispara uma vez por pessoa e por tarefa.
2. Um destaque, não uma seta
Escureça a página e deixe um único elemento iluminado. Um tooltip com seta em uma página sem escurecimento disputa atenção com todo o resto; o destaque elimina a disputa. Ele também torna o walkthrough fácil de abandonar, porque clicar na área escurecida é uma saída óbvia.
3. Uma frase por passo, começando pelo verbo
“Abra Faturas e baixe qualquer conta dos últimos 24 meses.” Não “Esta é a seção Faturas, onde você encontra seu histórico de cobrança e pode baixar extratos.” A primeira diz ao visitante o que fazer e o que ele ganha; a segunda descreve a mobília. As regras de escrita de tooltips (em inglês) valem para cada passo.
4. Progresso visível
“Passo 2 de 4” é a alavanca de conclusão mais barata de um walkthrough. O visitante que enxerga o fim costuma chegar até ele; o que não enxerga imagina o pior por volta do terceiro passo.
5. Uma saída em cada passo
Um link para pular, com texto direto, em todos os passos. Nada de “não, obrigado, não quero economizar tempo”. O visitante que pula está dizendo algo útil: o walkthrough não era para ele, ou chegou na hora errada. Conte o pulo como concluído.
6. Uma regra de nunca mais
Concluído ou pulado, o walkthrough não volta, a menos que o visitante peça. É essa regra que separa um walkthrough de um incômodo, e ela exige que a ferramenta se lembre do visitante entre sessões, uma pergunta a fazer antes de escolher qualquer ferramenta.
Exemplos de walkthrough de site: 7 padrões
Os padrões abaixo vêm dos tipos de site em que walkthroughs dão retorno de forma consistente. Cada um é descrito por onde roda, quais são seus passos e o erro que o arruína.
1. O walkthrough do primeiro login no portal
Onde: um portal do cliente de uma concessionária de energia ou água, seguradora, banco ou operadora de telecom, no primeiro login após a criação da conta. Passos: onde ficam seus documentos, como pagar ou atualizar a forma de pagamento, onde alterar os dados de contato, como falar com o suporte. Quatro passos, cada um sobre o elemento. O erro: incluir todos os itens do menu. Os quatro passos são os quatro motivos pelos quais as pessoas fazem login, e os dados de analytics do portal dizem quais são.
2. O walkthrough da navegação redesenhada
Onde: qualquer site depois de um redesign, exibido só para visitantes recorrentes que usavam o layout antigo. Passos: as duas ou três coisas que mudaram de lugar, na ordem em que as pessoas as procuram. O erro: mostrá-lo a visitantes novos, que nunca conheceram o layout antigo e agora descobrem que algo é confuso. O guia de lançamento de redesign (em inglês) explica a regra de segmentação e por quanto tempo mantê-lo no ar.
3. O guia do formulário de várias etapas
Onde: uma solicitação, sinistro, reserva ou cadastro que se espalha por várias páginas. Passos: um no início, mostrando o caminho completo e quais documentos ter em mãos; depois, um único tooltip em cada página, no único campo que não é óbvio. O erro: guiar pelos campos óbvios. Um guia em “digite seu e-mail” ensina os visitantes a fechar guias.
4. O walkthrough da conta em autoatendimento
Onde: a área de conta ou de configurações de qualquer site com assinaturas, na primeira visita. Passos: como mudar de plano, como atualizar os dados de cobrança, como cancelar ou pausar. Sim, cancelar: o visitante que não encontra a opção liga, e a ligação custa mais que o churn. O erro: esconder justamente o passo de que tratam os chamados de suporte.
5. O walkthrough do painel de vendedores ou parceiros
Onde: o lado da oferta de um marketplace ou de um programa de parceiros, no primeiro login. Passos: a ordem de configuração que coloca um anúncio no ar: perfil, primeiro anúncio, dados de recebimento, nessa sequência. O erro: um walkthrough sem checklist por trás. A configuração leva dias; o walkthrough mostra o caminho uma vez e um checklist persistente guarda o progresso. O guia de onboarding para marketplaces (em inglês) explica como combinar os dois.
6. O walkthrough da intranet ou ferramenta interna
Onde: um site para colaboradores ou uma aplicação web interna, na implantação e para cada nova contratação. Passos: o processo, não a ferramenta: onde enviar a solicitação, onde acompanhar o status, a quem perguntar. O erro: substituir o treinamento por um walkthrough. Ele é o lembrete depois do treinamento, não o treinamento; o guia de implantação de software (em inglês) cobre o resto.
7. O hotspot “o que mudou nesta página”
Onde: qualquer página com uma única novidade, para visitantes recorrentes. Passos: um. Um ponto pulsante sobre o novo elemento que abre um único tooltip ao clicar. O erro: transformar uma mudança de uma frase em um walkthrough de três passos. O guia de hotspots (em inglês) é a referência para saber quando um ponto funciona melhor que uma sequência.
Como criar um walkthrough de site em 6 passos
- Escolha uma tarefa em uma página.
- Percorra o caminho você mesmo e reduza ao mínimo de cliques.
- Escreva os passos: uma frase cada, começando pelo verbo.
- Defina o gatilho e o público.
- Crie no site real com uma ferramenta no-code.
- Acompanhe os números e depois corte.
1. Escolha uma tarefa em uma página
Comece pela fila de suporte ou pelos dados de analytics, não pelo mapa do site. A tarefa é aquilo sobre o que os visitantes mais perguntam, ou a página em que eles chegam e saem sem agir. Uma tarefa. Uma segunda tarefa é um segundo walkthrough.
2. Percorra o caminho você mesmo e reduza ao mínimo de cliques
Antes de escrever um único passo, execute a tarefa no site e conte os cliques. Se o caminho tem oito etapas, a primeira melhoria é no caminho, não no walkthrough. Um walkthrough sobre um caminho ruim é um labirinto bem iluminado.
3. Escreva os passos: uma frase cada, começando pelo verbo
De três a cinco frases, cada uma apontando para um elemento e dizendo o que o visitante ganha ao usá-lo. Escreva tudo primeiro em um documento, leia em sequência e elimine qualquer passo que descreve em vez de orientar.
4. Defina o gatilho e o público
Primeira visita à página, para quem ainda não fez a tarefa: dispare. Para todos os outros: ofereça. Registre por escrito a regra de nunca mais. Decida se os visitantes no celular recebem o mesmo walkthrough, uma versão mais curta ou um único hotspot no lugar.
5. Crie no site real com uma ferramenta no-code
Uma ferramenta de walkthrough no-code é adicionada ao site uma única vez, pelo template ou pelo gerenciador de tags, e a partir daí os walkthroughs são criados clicando nos elementos da página real e digitando os passos. Segmente por página e por atributo do visitante, visualize, publique. Sem release, sem desenvolvedor no meio do caminho para os vinte pequenos ajustes de que o walkthrough vai precisar ao longo da vida. O guia de onboarding no-code (em inglês) mostra o que verificar antes de instalar uma.
6. Acompanhe os números e depois corte
Depois de duas semanas, olhe a conclusão por passo e se a tarefa foi feita em seguida. Um passo em que muitos visitantes saem está mal escrito ou é desnecessário. Um walkthrough que todos concluem, mas que não muda a conclusão da tarefa, é decoração. Remova passos antes de adicionar.
Por que os visitantes fecham walkthroughs
Cada um destes problemas aparece no walkthrough de site médio, e qualquer um deles basta sozinho.
-
Ele dispara na página inicial
O visitante ainda não tem uma tarefa e o walkthrough não tem para onde guiá-lo. Parece um pop-up.
-
Ele dispara a cada visita
Na segunda vez é uma interrupção; na terceira, ensina o visitante a fechar qualquer walkthrough assim que aparece.
-
Ele passeia pelo site em vez de guiar uma tarefa
Nove passos em cinco seções é um mapa. O visitante queria um caminho.
-
Ele remenda uma página que deveria ser corrigida
Se todo visitante precisa do mesmo passo, a página precisa de um rótulo, de um botão ou de um redesign. O walkthrough é a evidência, não a correção.
-
Nunca foi testado no celular
O tooltip cobre o elemento que explica, o item destacado fica abaixo da dobra e o link para pular fica embaixo do polegar.
-
Ele bloqueia a página
Um walkthrough que não pode ser fechado é um modal com contador de passos. A área escurecida deve ser sempre uma saída.
-
Ele aponta para um elemento que mudou de lugar
Sites mudam; walkthroughs ancorados em elementos específicos quebram em silêncio. O guia de manutenção (em inglês) mostra como perceber antes dos visitantes.
Como medir um walkthrough de site
| Métrica | O que ela mostra | Como é um resultado saudável |
|---|---|---|
| Iniciados / exibidos | Se o gatilho alcança quem tem a tarefa | Alto em um disparo na primeira visita; mais baixo, e tudo bem, em um walkthrough oferecido |
| Conclusão por passo | Qual passo perde pessoas | Uma descida suave; um penhasco em um passo aponta para esse passo |
| Pulados no passo 1 | Público errado ou momento errado | Baixo em um gatilho bem segmentado |
| Tarefa concluída após o walkthrough | Se ele funcionou | Mais alta do que entre os visitantes que não o viram |
| Chamados sobre a tarefa | Se a confusão acabou | Caindo em poucas semanas |
A quarta linha é a que importa, e é justamente a que a maioria das ferramentas não mostra por padrão: um walkthrough que todos concluem e que não muda nada fracassou tanto quanto um que todos fecham. Meça a tarefa, não o tour.
Walkthroughs de site: o que fazer e o que evitar
Faça
- Crie walkthroughs para páginas com uma tarefa e um caminho escondido: portais, formulários, áreas de membros.
- Limite a três a cinco passos, uma frase cada, começando pelo verbo.
- Dispare uma vez na primeira visita, ofereça em todo o resto, nunca repita.
- Mostre o progresso e um link simples para pular em cada passo.
- Teste em um celular antes de publicar.
- Meça a conclusão da tarefa depois do walkthrough.
Não faça
- Colocar um walkthrough na página inicial ou em uma página de ação única.
- Fazer um tour pelo site inteiro.
- Disparar automaticamente a cada visita.
- Usar um walkthrough para não corrigir a página.
- Bloquear a página ou esconder a saída.
- Julgá-lo pela própria taxa de conclusão.
Como criar um walkthrough de site sem desenvolvedor
O obstáculo prático para bons walkthroughs de site não é o design; é que o walkthrough precisa de vinte pequenos ajustes ao longo da vida e cada um passa por um desenvolvedor. Então ele é lançado uma vez, fica desatualizado e acaba desligado.
Os tours do produto da Kompassify rodam em qualquer site depois que você adiciona um script uma única vez. A partir daí, os walkthroughs são criados em um editor visual na página real: clique no elemento, escreva o passo, escolha o gatilho e o público por página e por atributo do visitante, visualize no desktop e no celular, publique. Um hotspot, um tooltip avulso e um checklist persistente são criados do mesmo jeito, então os sete padrões acima usam uma única ferramenta. A regra de nunca mais já vem embutida, e o analytics mostra iniciados, concluídos, pulados e conclusão por passo.
Um walkthrough da Kompassify em uma página real: um elemento em destaque, uma frase, um botão de avançar e uma saída. Criado clicando no elemento, não escrevendo código.
Coloque um walkthrough no seu site ainda hoje
Instale uma vez, crie na página real, segmente por página e por visitante e meça a conclusão por passo. Grátis até 100 usuários ativos mensais, planos a partir de $129/mês, em conformidade com o GDPR e hospedado na UE.
Comece grátis →A versão em um parágrafo
Um walkthrough de site guia o visitante por uma tarefa em uma página, e só tem lugar onde o visitante chega com uma tarefa e a página esconde o caminho: portais do cliente, formulários de várias etapas, áreas de membros, navegação redesenhada, painéis de vendedores e intranets, nunca a página inicial. O interativo ganha do vídeo quando o visitante está na página com a tarefa diante dele; o vídeo ganha para explicar à distância. Um walkthrough que chega ao fim tem um gatilho na primeira visita, um destaque, uma frase por passo, progresso visível, uma saída em cada passo e uma regra que impede que ele volte. Limite-o a cinco passos, teste no celular, trate-o como um remendo que aponta o que a página deveria corrigir e meça se a tarefa foi feita depois, e não se o walkthrough foi concluído.
Perguntas frequentes
O que é um walkthrough de site?
Um walkthrough de site é uma explicação guiada, passo a passo, de como fazer algo em um site. Ele existe em dois formatos. O walkthrough interativo é um overlay sobre o site real que destaca um elemento por vez com um tooltip curto e um botão de avançar, para que o visitante execute a tarefa enquanto é guiado. O vídeo de walkthrough é uma gravação de alguém fazendo a tarefa, assistida à parte. O formato interativo serve para páginas em que o visitante tem uma tarefa para concluir agora, como um portal do cliente ou um formulário de várias etapas; o vídeo serve para explicar à distância, como em um artigo de ajuda ou em uma página de vendas.
Qual a diferença entre um walkthrough de site e um tour do produto?
Basicamente o contexto. Um tour do produto guia o usuário por um fluxo de um software, normalmente logo após o cadastro, e o assunto é uma funcionalidade. Um walkthrough de site guia um visitante ou um cliente logado por um site: um portal, um fluxo de reserva, uma área de membros, uma navegação redesenhada. A mecânica é a mesma, uma sequência de elementos destacados com explicações curtas, e as mesmas ferramentas no-code criam os dois. As diferenças de design vêm do público: visitantes de sites são mais variados, menos engajados e estão com mais frequência no celular, então um walkthrough de site precisa ser mais curto, mais fácil de abandonar e mais seguro de pular.
Quantos passos deve ter um walkthrough de site?
De três a cinco passos, cobrindo uma única tarefa. Um walkthrough que tenta mostrar o site inteiro é um passeio pelo mapa, e não um caminho até o destino, e os visitantes o fecham por volta do quarto passo. Se uma tarefa realmente exige mais de cinco passos, divida: guie a primeira parte, deixe o visitante concluí-la e ofereça o próximo walkthrough a partir de onde ele parou. Cada passo deve ser uma frase que começa com um verbo e aponta para um único elemento.
Dá para adicionar um walkthrough ao meu site sem programar?
Sim. Ferramentas de walkthrough no-code como a Kompassify funcionam com a adição de um único script ao template do site ou ao gerenciador de tags, uma vez só. Depois disso, os walkthroughs são criados em um editor visual por cima da página real: você clica no elemento a destacar, escreve o passo, escolhe o gatilho e o público e publica. As alterações entram no ar sem mexer no código do site nem esperar por um desenvolvedor, o que importa porque walkthroughs precisam de pequenos ajustes frequentes conforme o site muda.
Um walkthrough de site deve começar automaticamente?
Só na primeira visita a uma página em que o visitante muito provavelmente tem a tarefa que o walkthrough cobre, como o primeiro login em um portal do cliente ou a primeira visita depois de um redesign. Em todos os outros casos, ofereça em vez de disparar: um convite discreto, um botão de ajuda ou um hotspot no elemento em que as pessoas travam. Disparar automaticamente a cada visita é o jeito mais rápido de ensinar os visitantes a fechar walkthroughs sem ler, e um walkthrough nunca deve aparecer duas vezes para a mesma pessoa, a menos que ela peça.
Walkthroughs de site funcionam no celular?
Funcionam se foram pensados para isso, o que não é o caso da maioria. Em uma tela pequena, o tooltip pode cobrir o elemento que está explicando, o item destacado pode ficar abaixo da dobra e uma sequência de cinco passos exige muito movimento do polegar. Teste cada walkthrough em um celular antes de publicar, encurte-o para mobile se a ferramenta permitir versões diferentes e prefira um único hotspot ou um banner curto a uma sequência de vários passos na versão mobile da página.