O documento descreve um processo em 7 etapas para projetar a arquitetura de informação de um site: 1) Briefing para entender os requisitos do cliente, 2) Análise aprofundada dos requisitos, 3) Brainstorming com a equipe, 4) Definição do conceito, 5) Criação do sitemap, 6) Desenvolvimento de wireframes, 7) Testes para validar a solução. O objetivo é organizar a informação e experiência do usuário de forma estruturada e testada antes de criar o design visual do site.

1. ARQUITETURA DE INFORMAÇÃO
PROJETANDO
A EXPERIÊNCIA
DO USUÁRIO Com André Silveira @energizador
Arquitetura de Informação em 7 etapas
Não vou falar sobre a importância de existir uma etapa específica onde seja trabalhada a Arquitetura de
Informação e como isso traz qualidade pro seu produto, pois isso já fiz neste post http://
energizador.blogspot.com/2011/10/preciso-mesmo-ter-arquitetura-de.html. Quero mostrar um exemplo
prático elaborado através de entrevistas com colegas, pesquisas e minha experiência de trabalho nas
agências por onde passei.
1. BRIEFING
Tudo começa com a captura de informações essenciais essenciais pro projeto. Pode ser seu primeiro ponto
de contato com o cliente, então vou dar algumas ideias pra você começar bem essa relação:
• Antes da reunião, estude o mercado do cliente, busque saber tudo sobre ele;
• Questione apenas o necessário, não canse o cliente fazendo perguntas que já estão respondidas em seu
site ou nas redes sociais;
• Formule diferentes tipos de briefing para projetos promocionais, institucionais, sistemas, mobile, etc.;
• Foque em questões estratégicas do negócio, como objetivos, diferenciais e problemas a resolver - isso é o
básico;
• É hora de ouvir;
• Você não precisa ter as respostas agora. Pegue as informações para depois estudá-las;
Recursos utilizados:
• Basecamp, sistema de colaboração entre o cliente e você;
• Qualquer editor de texto, como MS Word;
• Mindjet MindManager, um software de mapas mentais;
• Gravador de voz digital (uso o Sony ICD-PX 820, mas os da Olympus são ótimos também).
2. ANÁLISE
Após captar os dados, é hora de aprofundar o estudo examinando/ evoluindo os itens do documento e
trazendo tipos de análise que possam contribuir. A análise pode ser uma evolução do Briefing pra um
(51) 3325-2596
1
www.targettrust.com.br

2. ARQUITETURA DE INFORMAÇÃO
PROJETANDO
A EXPERIÊNCIA
DO USUÁRIO Com André Silveira @energizador
documento estratégico e norteador ao projeto (v2_briefing_website_Nome da Empresa). Principais técnicas
utilizadas:
• Se for um redesenho, gosto de fazer uma análise da usabilidade atual do site, assim vejo as falhas do
projeto. Uso as Heurísticas do Nielsen e um Checklist que montei com o passar do anos;
• Análise SWOT, é boa pra tudo;
• Ambientes de referências ou empresas benchmark são ótimos caminhos pra você viver mais o mercado
do seu cliente (veja, anote, faça observações quanto ao design, tecnologia e tudo mais que achar
interessante);
• Através dos meus contatos do GMail ou Facebook, monto uma espécie de grupo de interesse, pessoas
tudo-a-ver com o público dos caras. Entrevisto pelo menos 10 pessoas com questões relacionadas ao
projeto;
• Relatórios estatísticos do consumidor (como os do IBOPE), do site (Google Analytics), etc.;
• Por fim, consolido minhas descobertas, reescrevo o Briefing de uma forma fácil e objetiva e envio pro
cliente.
Recursos utilizados:
• Editor de texto;
• Grupos do Facebook;
• Sites de referência como Behance, CPLUV, INfront, TAXI, Design is Kinky, Fubiz, Creattica, entre outros.
Durante essa fase de pesquisa e maturação das ideias, eu crio um .txt onde coloco: Lista de sites com
observações de pontos interessantes da estrutura (exemplo: "Sofitel: área pra reserva"; Nike: menu...);
Ideias que vão surgindo, anoto tudo e depois filtro o que é ou não possível; Lista de assuntos possíveis ao
site (como se fosse um sitemap, mas sem questionar se vale ou não - vejo isso depois).
3. BRAINSTORMING
Você pesquisou, quebrou a cabeça, pensou várias vezes que era um inútil por não achar soluções? Calma,
seus problemas acabaram ;-): utilize o time de projeto, apresente a questão e discuta as possibilidades.
Importante:
(51) 3325-2596
2
www.targettrust.com.br

3. ARQUITETURA DE INFORMAÇÃO
PROJETANDO
A EXPERIÊNCIA
DO USUÁRIO Com André Silveira @energizador
• Não se iluda com todas as ideias possíveis, muito menos com as pessoas "do contra"; absorva o que
importa pra você definir o projeto - se quiser, deixe claro isso pra seus colegas, antes de começar;
• Não faça escândalos se uma de suas ideias "morrerem" ou forem vencidas por outra melhor. Aceite e siga
em frente.
Recursos utilizados:
• Mindjet MindManager;
• Browser Steck Pad pra esboçar possibilidades.
4. CONCEITO
Faça um balanceamento com o escopo contratado e formule o Conceito (de AI) do projeto, pois é a partir
deste validamento que você montará a estrutura e a ideia de navegação do site. Lembre que você já tem
dados pra isso, coletados durante o Briefing. Aquelas palavras são as fontes pra redação de um conceito.
Siga o processo, não crie um protótipo sem antes definir a ideia do produto, nem que seja mentalmente, por
hora. O Conceito será o seu argumento de venda, sua defesa pro GP e cliente, logo ali. Você encontrará
ótimas referências de conceito no livro Advertising Now. Online.
5. SITEMAP
Possivelmente você já tenha alguns rascunhos, agora crie um mapa que demostre claramente a
organização do site:
• Formule através de nós (quadrados), conexões, esquemas de numeração e rótulos o seu sitemap;
• Mostre quais são os itens da primeira tela;
• Quais são as seções principais e locais - grupos de informação com rótulo adequado;
• Quais seções serão gerenciáveis;
• Quais itens serão comuns à Arquitetura de Informação (utilidades, ferramentas...);
• Se inserir mais atributos de página, crie uma legenda.
Recursos utilizados:
• Mindjet MindManager ou Visio;
(51) 3325-2596
3
www.targettrust.com.br

4. ARQUITETURA DE INFORMAÇÃO
PROJETANDO
A EXPERIÊNCIA
DO USUÁRIO Com André Silveira @energizador
6. WIREFRAME
O wireframe é a planta baixa do seu site, é o desenho NÃO estético, o esboço. Ele é o esqueleto do seu
sistema de navegação e, com exceção da hierarquia, do posicionamento dos componentes, em nada deveria
se parecer com o layout final (Wireframes não precisam ser bonitos, não servem pra isso). O Wire nada mais
é do que o resultado do seu processo de Arquitetura de Informação, a demonstração visual do projeto de
interface. Algumas dicas:
• Primeiro, concentre-se num esboço, de preferência feito no papel; depois, refine, utilizando software de
preferência, marcando e fazendo observações nas funcionalidades;
• Não se preocupe com a estética, explore as possibilidades e utilize imagens e texto de marcação Lorem
ipsum http://www.lipsum.com por enquanto;
• Os padrões têm grande importância, pois ajudam o usuário no processo de habituação, predição,
reorientação http://tinyurl.com/62u8gxt; logo, pense neles, templates http://pt.wikipedia.org/wiki/
Templates e na melhor forma de indicar para o usuário o conceito do projeto, o que é mais e menos
importante em nível de informação em página inicial vs internas;
• Com uma home e uma página interna, já é possível sentar-se com o cliente e aprovar o protótipo do
projeto, dando possibilidade pra você progredir com o restante das páginas.
É um erro do mercado achar que o DA consegue fazer ao mesmo tempo a Arquitetura de Informação e o
Layout, pois uma coisa é organizar, classificar ou pensar no melhor rótulo (nomenclatura) pra um um
item, outra coisa é pensar em cores, fontes e formatos. Fazer os dois juntos, literalmente, aumentará
seu tempo de criação e, pior, prejudicará a usabilidade do site. Lembre-se que usuários toleram um
design tosco, desde que ele funcione, desde que eles consigam REALIZAR algo. Mas usuários não
toleram um site lindo, mas que é difícil de navegar, é desorganizado, é enigmático, que tem problemas
com vocabulário... O importante é ter equilíbrio entre as disciplinas.
Recursos utilizados:
• Browser Steck Pad;
• User Flow Stencil Kit;
• Mockingbird ou Axure;
• Adobe Fireworks
(51) 3325-2596
4
www.targettrust.com.br

5. ARQUITETURA DE INFORMAÇÃO
PROJETANDO
A EXPERIÊNCIA
DO USUÁRIO Com André Silveira @energizador
7. TESTES
Este item pode estar no final, mas realizo Testes constantemente, durante todo o processo, mas
principalmente antes de apresentar o protótipo ao cliente. Praticamente volto pra etapa de Análise e reviso
o projeto, utilizo algumas das técnicas novamente, comprovando se estou atendendo aos objetivos de
negócio da empresa. Ou seja, critico e realinho muito meu Conceito, Sitemap e Wireframe.
(Fora as técnicas) Recursos utilizados:
• UserTesting.com;
• Concept Feedback;
• Crazyegg (mapas de calor)
Você viu que não tenho uma etapa pra documentação. Isso porque faço Wireframes com observações onde
descrevo o funcionamento das áreas onde é necessário explicação. É uma forma menos maçante e mais
visual de explicar o funcionamento do sistema.
Por fim, aconselho que você acompanhe a produção do projeto até o final, fazendo manutenção da
Arquitetura de Informação proposta e, com isso, permanecer atendendo desejos iniciais, controlando riscos
e qualidade do produto.
(51) 3325-2596
5
www.targettrust.com.br