Um sitemap é a representação gráfica da estrutura de um website, do ponto de vista da distribuição do conteúdo por “páginas” e do caminho mais simples (hiperlink) a ser percorrido pelo usuário para se chegar a cada “página” pretendida.

Não se pretende esgotar as possibilidades de navegação ou interação digital com um sitemap. A história do design gráfico, muito antes da idealização sequer de um computador pessoal, já nos mostrava que para se fazer compreender, um projeto deve ser uniformizado e simplificado em seus pontos de maior importância.

Mapas, em geral, são representações iconográficas de estruturas físicas ou digitais, de modo a serem mais úteis como guias visuais e informativos de um determinado caminho ou sistema, mais do que representarem com alta fidelidade o próprio caminho.

Compare, nas duas figuras seguintes, diferentes versões para o mapa do metrô de Londres, criadas no início do século XX:

Mapa do metrô de Londres, década de 20

A primeira imagem é da década de 20 e nos mostra claramente que seu autor buscou representar, da maneira mais fiel que poderia, o traçado dos trilhos que interligavam as estações do metrô. Fica evidenciado que ao tentar se fazer completo, seu mapa gerou mais confusão do que esclarecimentos aos usuários do serviço.

Mapa do metrô de Londres, década de 30

Já a segunda imagem data de 1933 e, de saída, nos traz uma sensação bem mais agradável da malha metroviária londrina. Notemos que informações secundárias foram subtraídas, todas as retas se ligam por ângulos de 45 e 90 graus e cada cor vem representar uma determinada função da linha na totalidade do sistema, devidamente descritas em uma legenda esquemática e objetiva.

Ao deixar de lado a imitação da realidade para elucidar a funcionalidade e as interconexões do sistema, o designer (que neste caso não era um designer, mas um engenheiro civil) alcançou um resultado de grande impacto visual e satisfação dos usuários do metrô.

Um mapa deve simplificar a realidade, torná–la esquemática e inteligível. O mesmo devemos ter em mente ao construir um sitemap.

Dois modelos de mapas

Antes de nos aprofundarmos no estudo dos sitemaps como documentos de trabalho do arquiteto de informação, devemos fazer uma distinção entre os dois tipos de sitemaps existentes.

Todo website planejado por um arquiteto de informação apresenta dois sitemaps. O primeiro, ainda na fase de projeto, apresenta as “páginas” do futuro site com suas principais conexões. Chamado de sitemap estrutural, este modelo é quase totalmente iconográfico e necessita apenas de alguns elementos complementares em sua apresentação para ser plenamente compreendido.

Recursos como legenda e numeração de páginas são muito importantes para a compreensão do sitemap e serão estudadas mais a fundo. Por hora fiquemos com algumas características do sitemap estrutural:

– Simbólico

– Não–maleável

– Interpretável

– Não–interativo

– Bidimensional

Exemplo de sitemap estrutural

O segundo modelo de sitemap que conhecemos é o navegável, comumente encontrado. Muitos sites apresentam este recurso, geralmente acessível através de um botão ou link simples. Este mapa estrutura–se como uma página a mais do site, onde estão os nomes de todas as seções do site, com links ativos. Foi desenvolvido para auxiliar o usuário a encontrar a informação, serviço ou produto que procura.

Para se fazer compreensível até para os recém iniciados na web, estes mapas apresentam elementos visuais muito comuns aos do próprio site, além de carregar forte influência da mídia impressa, principalmente na disposição das seções e na indicação de seus subníveis. As principais características deste modelo de sitemap são:

– Navegável

– Digital

– Interativo

– Indexador

– Multidimensional

Sitemap navegável – Starbucks.co.uk

O sitemap como ferramenta do Arquiteto de Informação

Em seu trabalho de planejamento e arquitetura do futuro website, o arquiteto de informação utiliza–se do sitemap estrutural, que tem a função de mostrar as relações entre as “páginas”, exibindo seus caminhos de navegação e as definições de nomes para seções e páginas individualizadas. Cabe também a este mapa mostrar em que “momentos” o usuário necessita cadastrar–se para visitar áreas restritas, receber informações sobre o site ou simplesmente ser reconhecido pelo sistema de banco de dados a cada vez que se conectar ao site.

Graficamente, um sitemap pode ser representado de várias maneiras, mas em sua grande maioria o ponto de partida para a construção da estrutura de navegação é a home page.

Nesta prática, de uso corrente atualmente, as seções são mostradas como ramificações de sua página predecessora e de onde se originarão as páginas seguintes. Cada página é acompanhada de um número, chamado de ID, que pode ser entendido como sendo o “número de identidade” da página. Esta identificação é indispensável para a documentação de AI pois mostra os níveis de imersão no conteúdo do site além de serem utilizadas, como veremos a seguir, nos wireframes para identificação de cada página à sua respectiva posição no mapa.

Detalhe de uma página com nome e número de identificação

Por fim, para a total compreensão do sitemap é indispensável uma legenda que traduza todos os componentes presentes e passíveis de utilização na representação gráfica do site. Na legenda são diferenciadas as categorias de página, possíveis aplicações tecnológicas especiais, áreas para coleta de dados, downloads etc.

Um exemplo de sitemap padrão para documentação AI:
sitemap fictício, construído com o Microsoft Visio

Principais softwares para criação de sitemaps

Para quem está começando no ofício de arquiteto da informação, ou ainda pretende desbravar esta nova profissão, algumas dicas são muitos úteis. A começar pelos softwares mais utilizados atualmente, o arquiteto tem muitas opções para criar ou personalizar sua documentação da maneira que melhor escolher.

Certamente você poderá utilizar outros softwares para construir sua documentação, porém os três abaixo listados são recomendáveis para a função, visto que foram desenvolvidos para o planejamento e representação esquemática de sistemas em geral.

Visio (PC)
Concept Draw (PC e Mac)
Smart Draw (PC e Mac)

No próximo artigo falaremos sobre o wireframe, o primo pobre do design ;–) [Webinsider]

Leonardo Oliveira

Leonardo Oliveira é mestre em Jornalismo Digital pela ECA/USP.