Sitemap visual: como desenhar a estrutura do site antes do layout

Sitemap visual é um diagrama que mostra todas as páginas de um site e a hierarquia entre elas, da página inicial até o último nível do menu. Ele é feito antes do layout, com blocos e linhas, e serve para decidir quais páginas existem, como cada uma se chama e por onde o visitante chega até elas.

O que é um sitemap visual e qual a diferença para o sitemap XML?

O sitemap visual é uma ferramenta de planejamento para pessoas. O sitemap XML é um arquivo técnico para buscadores. Os dois descrevem a organização do site, mas têm leitores e momentos de uso diferentes.

O arquivo XML é enviado ao Google pelo Search Console. Já o diagrama responde a perguntas de quem está montando o site: que conteúdo entra, como fica o menu, que nome cada página recebe. Ele é a forma mais simples de representar a arquitetura da informação.

A leitura começa pela página inicial, no topo. Dela saem as seções principais, e de cada seção saem as páginas internas. O desenho mostra, de uma vez, todos os caminhos que o visitante pode seguir.

Para que serve o sitemap visual?

Serve para enxergar o site inteiro antes de gastar tempo com texto, design e programação. Com o diagrama na mesa, três ganhos aparecem:

• Conferência do objetivo. Quem olha o mapa precisa identificar logo qual é a conversão mais importante (o pedido de orçamento, a compra, o agendamento) e ver que o caminho até ela é curto.
• Uma referência única para a equipe. Um site passa por redator, designer e desenvolvedor. O sitemap mantém todos trabalhando sobre a mesma estrutura e reduz o retrabalho.
• Corte de páginas que sobram. O mapa expõe páginas com conteúdo repetido e etapas que só atrasam o visitante. Cada bloco precisa justificar o lugar que ocupa.

O efeito final aparece na navegação. Um visitante que encontra rápido o que procura abandona menos o site.

Como montar um sitemap visual passo a passo

Você monta um sitemap visual com papel, quadro branco ou qualquer ferramenta de diagrama: bastam blocos e linhas, e conhecimento de design é opcional. Dois elementos são obrigatórios:

• a página inicial como raiz, no topo do desenho;
• em cada bloco, um número de referência que segue a hierarquia (1.0, 1.1, 1.2) e um rótulo, que pode ser o título da página.

Os seis cuidados abaixo deixam o resultado mais útil.

Comece o projeto pelo sitemap

O sitemap rende mais quando é a primeira entrega do projeto, antes de qualquer tela. Uma hierarquia coerente desde o início evita refazer layout e texto depois. Se você tem dados sobre o seu público, use: o que aparece em uma pesquisa com usuários mostra quais informações as pessoas procuram primeiro.

Mapeie o site atual antes de reformar

Em um site que já existe, o primeiro desenho é o retrato do que está no ar hoje. Parta da página inicial e registre cada página e cada ligação. Com a estrutura atual na frente, fica fácil ver o que juntar, o que mover de lugar e o que excluir.

Deixe as páginas de venda perto da página inicial

Quanto mais níveis separam uma página da inicial, menos gente chega até ela. Páginas de serviço, de produto e de contato pertencem às primeiras camadas do mapa. Conteúdo de apoio pode ficar mais fundo.

Use os nomes que o visitante espera encontrar

As pessoas chegam com um modelo mental formado por outros sites. Quem quer saber quanto custa procura um item chamado “Preços”. Rótulos criativos demais confundem. Para descobrir como o seu público agrupa e nomeia os assuntos, aplique a classificação de cartões (card sorting), uma das técnicas de teste de usabilidade.

Conte os cliques até cada página

Uma regra prática conhecida do web design sugere que qualquer página fique a, no máximo, três cliques da inicial. Use como referência, e o mapa ajuda nessa contagem. Siga o caminho até cada página importante e veja quais etapas são obrigatórias e quais podem ser eliminadas ou unidas a outras.

Revise o mapa de tempos em tempos

A estrutura de um site acompanha o negócio: serviços entram, produtos saem, dúvidas novas aparecem. Volte ao sitemap periodicamente e procure caminhos mais curtos. Em mudanças grandes de navegação, vale comparar a versão nova com a antiga em um teste A/B antes de adotar de vez.

Qual é o passo seguinte ao sitemap visual?

O passo seguinte é o wireframe. O sitemap define quais páginas existem e como se ligam. O wireframe desce um nível e rascunha o conteúdo de cada página: a ordem dos blocos, onde fica o título, onde entra o botão de contato. Só depois vêm o layout final e a construção. O guia sobre como criar um wireframe explica essa etapa.

Perguntas frequentes

Sitemap visual e sitemap XML são a mesma coisa?

São documentos diferentes. O sitemap visual é um diagrama usado no planejamento, lido pelas pessoas que constroem o site, e mostra páginas, menu e caminhos de navegação. O sitemap XML é um arquivo com a lista de endereços, lido pelo Google e por outros buscadores depois que o site está publicado.

Preciso ser designer para fazer um sitemap visual?

Qualquer pessoa que conheça o negócio consegue fazer. O desenho usa só blocos e linhas e pode ser feito em papel, em um quadro branco ou em uma ferramenta de diagrama. O que importa é começar pela página inicial e dar a cada bloco um número de referência e um rótulo.

Quando devo refazer o sitemap do meu site?

Antes de uma reforma do site e sempre que o negócio mudar: serviço novo, linha de produto encerrada, páginas acumuladas ao longo dos anos. Desenhe primeiro a estrutura que está no ar, identifique o que juntar, mover ou excluir e só então proponha a nova organização.

O que vem primeiro: sitemap ou wireframe?

O sitemap vem primeiro. Ele define quais páginas o site terá e como elas se conectam a partir da página inicial. O wireframe vem em seguida e rascunha o conteúdo de cada página, com a ordem dos blocos e a posição dos botões. Depois dele entram o layout e a construção.

Um site com a estrutura certa desde o primeiro rascunho

A Fysi Lab Digital cria sites com copy, design no Figma e construção em WordPress, em projetos de 10 a 30 dias. Conheça o serviço de criação de sites e veja no portfólio como ficaram os projetos entregues.