🏗️ O que e IA (Information Architecture)
Arquitetura de Informacao (IA) e a arte e ciencia de organizar e estruturar conteudo de forma que usuarios consigam encontrar o que precisam. E o esqueleto invisivel que sustenta toda experiencia digital.
📚 Os Pilares da IA
Organizacao
Como o conteudo e agrupado e categorizado. Esquemas e estruturas.
Rotulagem
Como o conteudo e representado. Nomes, titulos e labels claros.
Navegacao
Como usuarios se movem pelo conteudo. Menus, links e caminhos.
Busca
Como usuarios encontram conteudo especifico. Filtros e resultados.
🎯 IA na Pratica: Estrutura de um Site
💡 Por que IA e Fundamental
🎯 Vibe Coding Prompt
Use: estrutura hierarquica clara com no maximo 3 niveis de profundidade,
categorias mutuamente exclusivas e coletivamente exaustivas,
labels claros que usuarios entendem instantaneamente.
🧭 Navegacao e Menus
A navegacao e como usuarios exploram seu site. Inclui menus principais, mega menus, breadcrumbs e navegacao contextual.
📋 Tipos de Navegacao
Global (Principal)
Menu no topo, presente em todas as paginas.
Local (Contextual)
Sub-navegacao dentro de uma secao.
Breadcrumb (Migalhas)
Mostra o caminho ate a pagina atual.
Footer
Links uteis no rodape.
🎪 Mega Menu: Quando Usar
Regras de Ouro da Navegacao
🎯 Vibe Coding Prompt
Use: navegacao principal com 5-7 itens no maximo,
breadcrumbs em paginas profundas para orientacao,
indicador visual claro da pagina atual no menu.
🏷️ Taxonomia e Categorias
Taxonomia e o sistema de classificacao do conteudo. Define como itens sao agrupados, nomeados e relacionados. Uma boa taxonomia e intuitiva e escalavel.
📊 Esquemas de Organizacao
Exato (Objetivo)
Categorias claras e definidas.
Ambiguo (Subjetivo)
Categorias por conceito ou topico.
🌳 Estruturas Taxonomicas
Hierarquica
Facetada
Flat (Tags)
💡 Principios MECE
Categorias devem ser Mutually Exclusive, Collectively Exhaustive:
🎯 Vibe Coding Prompt
Use: taxonomia hierarquica com categorias MECE,
filtros facetados para catalogos de produtos,
sistema de tags para conteudo relacionado.
🛤️ Fluxos de Usuario
Fluxos de usuario (User Flows) mapeiam o caminho que usuarios percorrem para completar tarefas. Incluem o happy path (caminho ideal) e caminhos alternativos.
🎯 Exemplo: Fluxo de Cadastro
📝 Elementos de um User Flow
Pontos de entrada e saida do fluxo
Passos que o usuario executa
Pontos de ramificacao (sim/nao)
Setas indicando direcao do fluxo
Happy Path vs Edge Cases
Happy Path
O caminho ideal, sem erros. O que acontece quando tudo da certo.
- • Usuario encontra o que busca
- • Form preenchido corretamente
- • Pagamento aprovado
Edge Cases
Caminhos alternativos, erros e excecoes.
- • Senha incorreta (3 tentativas)
- • Email ja cadastrado
- • Timeout de sessao
🎯 Vibe Coding Prompt
Use: happy path claro com feedback positivo em cada etapa,
tratamento de erros inline sem perder dados do usuario,
confirmacao visual ao completar cada acao importante.
📐 Wireframes
Wireframes sao esqueletos visuais das paginas, focados em estrutura e layout sem distracao de cores ou imagens. Sao o passo entre IA e design visual.
📊 Niveis de Fidelidade
Low-Fidelity
Rabiscos rapidos, ideacao
Mid-Fidelity
Estrutura definida, layout
High-Fidelity
Proximo do design final
🧩 Elementos de Wireframe
Por que Wireframes Primeiro?
🎯 Vibe Coding Prompt
Use: estrutura de wireframe low-fi antes de aplicar estilo visual,
layout com placeholders para imagens e textos,
grid definido com areas claras para cada tipo de conteudo.
🗺️ Sitemap e Estrutura
O sitemap e o mapa completo do site, mostrando todas as paginas e suas relacoes. E o documento guia para toda a arquitetura de informacao.
🌐 Exemplo de Sitemap
📄 Tipos de Pagina
Paginas de Conteudo
- • Home (landing principal)
- • Sobre (institucional)
- • Blog/Artigos
- • FAQ
Paginas de Acao
- • Cadastro/Login
- • Checkout
- • Contato
- • Busca
Paginas de Listagem
- • Catalogo de produtos
- • Lista de posts
- • Resultados de busca
- • Categorias
Paginas de Detalhe
- • Produto individual
- • Post de blog
- • Perfil de usuario
- • Case study
✅ Checklist de Sitemap
🎯 Vibe Coding Prompt
Use: sitemap completo com todas as paginas e hierarquia,
URLs semanticas que refletem a estrutura do conteudo,
paginas de erro 404 e 500 com navegacao de volta.
📝 Resumo do Modulo
Proximo Modulo:
2.8 - Design Responsivo: Criando experiencias que funcionam em qualquer tela