Padrões de Visualização do OLA
Página de governança que define regras, critérios e padrões para o uso de visualizações no OLA, incluindo grafos, mapas, tabelas, matrizes, diagramas, fluxos, painéis e recursos visuais usados para compreensão, navegação, comparação, decisão e evolução do conhecimento.
2. Localização no OLA
Localização física
governanca/padroes_visualizacao_ola.html
Localização semântica
OLA → Governança → Padrões Estruturais → Visualização → Clareza, filtros, legenda, mitigação, validação e evolução.
3. Finalidade × Análise
Finalidade
Estabelecer critérios para criar, revisar, validar e evoluir visualizações no OLA, reduzindo riscos de excesso visual, ambiguidade, baixa acessibilidade e dificuldade de manutenção.
Análise
Visualização no OLA não é ornamento. Ela é instrumento cognitivo, semântico, estrutural e operacional. Por isso precisa de padrões que orientem sua criação e seu uso em páginas, mapas, domínios, objetos de aprendizagem e painéis.
4. Problema resolvido
À medida que o OLA evolui, surgem muitos grafos, mapas, tabelas, matrizes, diagramas e painéis. Sem governança visual, cada página pode passar a usar cores, símbolos, filtros, legendas e estruturas de forma diferente.
5. Escopo dos padrões de visualização
Estes padrões se aplicam a todas as visualizações usadas no OLA, especialmente quando elas aparecem em páginas estruturais, mapas de domínio, objetos de aprendizagem, páginas de arquitetura e páginas de governança.
Visualizações conceituais
Grafos, mapas mentais, mapas conceituais, redes de tópicos, ontologias simplificadas e diagramas de relações.
Visualizações analíticas
Tabelas, matrizes, quadros comparativos, checklists, classificações e mapas de decisão.
Visualizações operacionais
Painéis, fluxos, ciclos, diagramas de blocos, estados, indicadores e acompanhamento de evolução.
6. Princípios de governança visual
| Princípio | Significado no OLA | Regra prática |
|---|---|---|
| Finalidade explícita | A visualização deve ter motivo claro para existir. | Declarar a pergunta que a visualização responde. |
| Leitura orientada | O usuário precisa saber por onde começar. | Incluir instrução “como ler esta visualização”. |
| Legenda semântica | Cores, setas, símbolos e grupos precisam ter significado. | Nenhum elemento visual relevante deve ficar sem legenda. |
| Redução de complexidade | Visualizações ricas devem poder ser lidas por camadas. | Usar filtros, agrupamentos, modos de leitura ou acordeões. |
| Acessibilidade | A compreensão não deve depender apenas de cor. | Usar texto, contraste, legenda, descrição e leitura alternativa. |
| Manutenibilidade | A visualização deve poder evoluir sem refazer a página toda. | Separar dados, estrutura visual e texto explicativo quando possível. |
| Validação pelo uso | A visualização deve ser avaliada pela compreensão que produz. | Aplicar checklist, observação, feedback ou atividade prática. |
7. Tipos de visualização e usos recomendados
| Tipo | Quando usar | Risco principal | Mitigação mínima |
|---|---|---|---|
| Grafo | Quando o foco é mostrar conceitos e relações. | Excesso de nós, setas cruzadas e rótulos pequenos. | Filtros, legenda, descrição ao clicar e agrupamentos. |
| Mapa | Quando o foco é dar visão geral de uma área ou domínio. | Virar lista grande sem hierarquia. | Separar por blocos, camadas, tópicos e caminhos. |
| Tabela | Quando o foco é comparar ou classificar. | Ficar larga demais ou densa demais. | Rolagem horizontal, cabeçalhos claros e colunas essenciais. |
| Matriz | Quando o foco é cruzar dimensões. | Confundir eixos, critérios ou células. | Explicar eixos, legenda e critério de leitura. |
| Diagrama de blocos | Quando o foco é mostrar componentes e interações. | Confundir bloco, fluxo, processo e camada. | Nomear blocos, setas e tipo de interação. |
| Fluxo ou ciclo | Quando o foco é sequência, transformação ou evolução. | Sugerir linearidade quando o processo é iterativo. | Indicar retorno, revisão, retroalimentação ou ciclo. |
| Painel | Quando o foco é acompanhamento, estado ou decisão. | Excesso de indicadores sem prioridade. | Separar estado, alerta, ação e próximo passo. |
8. Padrões obrigatórios para qualquer visualização
Toda visualização relevante do OLA deve conter os elementos mínimos abaixo. Em visualizações simples, esses elementos podem ser curtos; em visualizações complexas, devem ser mais explícitos.
1. Título significativo
Deve dizer o que está sendo representado, não apenas o tipo de recurso.
2. Pergunta orientadora
Deve explicitar qual dúvida ou problema a visualização ajuda a resolver.
3. Como ler
Deve orientar a ordem de leitura: núcleo, grupos, relações, filtros ou camadas.
4. Legenda
Deve explicar cores, símbolos, setas, tipos de linha, grupos ou estados.
5. Redução de complexidade
Deve haver filtro, agrupamento, destaque, acordeão, modo de leitura ou versão simplificada.
6. Critério de manutenção
Deve ficar claro como atualizar a visualização quando o conhecimento evoluir.
9. Padrão para grafos do OLA
Grafos são úteis para mostrar redes de conceitos, páginas, domínios, tópicos, trilhas e relações. Porém, são também as visualizações com maior risco de excesso visual.
| Elemento do grafo | Padrão recomendado | Observação de governança |
|---|---|---|
| Nó central | Deve ser claramente identificável. | Em mapas de domínio, geralmente representa o domínio. |
| Agrupamentos | Devem corresponder a categorias conceituais reais. | Evitar grupos apenas decorativos. |
| Cores | Devem representar grupos, estados ou tipos de entidade. | A cor deve aparecer na legenda. |
| Rótulos | Devem ser legíveis ou ocultáveis. | Grafos grandes devem permitir mostrar/ocultar nomes. |
| Descrição do nó | Ao clicar, deve mostrar significado e papel no contexto. | A descrição evita que o nó vire apenas palavra solta. |
| Filtros | Devem permitir leitura por grupos ou modos. | Filtros reduzem carga cognitiva. |
| Risco visual | Deve ser explicitado quando o grafo for complexo. | Exemplo: excesso de nós, setas, cores ou rótulos. |
Modelo mínimo de seção para grafo
<section id="grafo">
<span class="pill-title">Visualização</span>
<h2>Grafo do domínio ou tema</h2>
<p>Descrição geral do que o grafo representa.</p>
<div class="callout">
<strong>Pergunta orientadora:</strong>
Qual pergunta este grafo ajuda a responder?
</div>
<div class="callout warning">
<strong>Risco visual:</strong>
Qual risco pode dificultar a leitura?
</div>
<div class="graph-controls">
<button>Mostrar tudo</button>
<button>Leitura essencial</button>
<button>Filtro por grupo</button>
</div>
<div id="graph"></div>
<div class="legend">
Legenda dos grupos, cores e tipos de relação.
</div>
<div class="node-description">
Descrição do nó selecionado.
</div>
</section>10. Padrão para tabelas e matrizes
Tabelas são essenciais no OLA porque ajudam a comparar, classificar, organizar critérios e explicitar decisões. Como muitas tabelas têm várias colunas, devem usar rolagem horizontal.
.table-wrap, com overflow-x: auto.
| Critério | Padrão recomendado | Risco mitigado | Aplicação no OLA |
|---|---|---|---|
| Cabeçalhos | Devem ser curtos, claros e orientados à comparação. | Confusão de leitura. | Comparação entre ferramentas, domínios, regras ou padrões. |
| Rolagem horizontal | Obrigatória para tabelas largas. | Quebra de layout em celular. | Tabelas analíticas e matrizes M0–M3. |
| Primeira coluna | Deve identificar o item comparado. | Perda de referência. | Lista de riscos, critérios, páginas, domínios ou entidades. |
| Texto nas células | Preferir frases curtas e informativas. | Sobrecarga textual. | Checklist, classificação e decisão. |
| Uso de tabela | Usar quando houver comparação real. | Tabela usada como decoração. | Matriz, quadro comparativo, critérios e avaliação. |
11. Padrão para mapas de domínio e páginas âncora
Mapas de domínio e páginas âncora devem funcionar como visão geral, orientação estrutural e análise do território de conhecimento.
Mapa como visão geral
Deve explicar o domínio, seus principais agrupamentos, relações, fronteiras, subtemas e conexões com outros domínios.
Mapa como orientação
Deve ajudar o usuário a decidir para onde ir: índice, organização, trilhas, objetos, subdomínios, referências ou páginas específicas.
index_*.html e sua organizacao_*.html.
12. Filtros, destaques e modos de leitura
Em visualizações complexas, é importante separar três recursos: destaque, filtro e modo de leitura.
| Recurso | O que faz | Quando usar | Exemplo no OLA |
|---|---|---|---|
| Destaque | Mostra tudo, mas reduz a opacidade do restante. | Quando o usuário precisa ver foco e contexto ao mesmo tempo. | Destacar núcleo conceitual mantendo o grafo completo ao fundo. |
| Filtro | Mostra apenas um grupo ou conjunto de grupos. | Quando o objetivo é reduzir complexidade. | Mostrar apenas Resultado, Conhecimento ou Governança visual. |
| Modo de leitura | Mostra uma narrativa guiada com grupos combinados. | Quando o objetivo é aprendizagem progressiva. | Leitura essencial, leitura por resultado, leitura por conhecimento. |
13. Riscos visuais recorrentes
| Risco | Como aparece | Consequência | Sinal de alerta |
|---|---|---|---|
| Excesso visual | Muitos elementos aparecem ao mesmo tempo. | O usuário não sabe por onde começar. | O grafo parece “poluído” ou a tabela parece interminável. |
| Ambiguidade semântica | Cores, setas ou símbolos não têm significado claro. | O usuário interpreta errado. | A legenda não existe ou não explica tudo. |
| Visualização sem pergunta | O recurso visual aparece sem finalidade explícita. | A visualização vira ilustração decorativa. | Não há pergunta orientadora. |
| Baixa acessibilidade | Texto pequeno, contraste ruim ou dependência exclusiva de cor. | Parte dos usuários não consegue compreender. | No celular, a leitura fica difícil. |
| Dificuldade de manutenção | Dados, visual e texto estão misturados sem organização. | A visualização fica obsoleta rapidamente. | Atualizar um nó exige revisar muitos trechos soltos. |
| Perda de coerência | Cada página usa cores e padrões diferentes. | O usuário precisa reaprender a interface em cada página. | O mesmo símbolo significa coisas diferentes. |
14. Como mitigar riscos de visualização
Mitigar riscos significa aplicar ajustes antes que a visualização prejudique a compreensão.
Reduzir
Diminuir elementos simultâneos usando filtros, camadas, acordeões ou modos de leitura.
Explicar
Adicionar pergunta orientadora, legenda, “como ler” e descrição de elementos principais.
Padronizar
Manter cores, símbolos, nomes, grupos e tipos de relação com significado consistente.
Validar
Testar se a visualização realmente ajuda a compreender, navegar, comparar, decidir ou aprender.
Registrar
Documentar o risco encontrado, a mitigação adotada e a regra visual resultante.
Evoluir
Transformar soluções bem-sucedidas em padrões reutilizáveis do OLA.
Exemplo aplicado: grafo do domínio Aprendizagem
Um grafo do domínio Aprendizagem pode conter núcleo, teorias, estratégias, resultado, evidências, avaliação, conhecimento, IA e governança visual. O risco é mostrar tudo ao mesmo tempo. A mitigação é usar pergunta orientadora, legenda, descrição dos nós, filtros por grupo e modos de leitura, como “leitura essencial”, “resultado”, “conhecimento” e “governança visual”.
15. Validação de visualizações
Depois de mitigar riscos, a visualização precisa ser validada. A validação verifica se ela realmente ajuda o usuário a compreender e agir.
| Critério | Pergunta de validação | Evidência esperada |
|---|---|---|
| Clareza | O usuário entende o que está vendo? | Consegue explicar o sentido geral da visualização. |
| Finalidade | A visualização responde a uma pergunta? | A pergunta orientadora está explícita. |
| Navegação | A visualização orienta caminhos? | Há links, filtros, grupos ou próximos passos. |
| Comparação | A visualização ajuda a comparar elementos? | Critérios e categorias estão organizados. |
| Acessibilidade | A leitura funciona sem depender apenas de cor? | Há legenda, texto, contraste e alternativa textual. |
| Manutenção | A visualização pode ser atualizada? | Dados, estrutura e explicação são compreensíveis. |
| Evolução | O aprendizado de uso vira regra? | Há registro de melhoria ou padrão reutilizável. |
16. Checklist de maturidade visual
Use este checklist para avaliar se uma visualização está pronta para uso em uma página do OLA.
17. Ciclo de evolução dos padrões visuais
A governança visual do OLA deve ser evolutiva. Uma visualização criada, testada e validada pode gerar novo padrão.
18. Aplicação destes padrões no OLA
Estes padrões devem ser usados em páginas que contenham visualizações significativas, especialmente em áreas estruturais e domínios.
| Área do OLA | Como aplicar | Páginas afetadas ou relacionadas |
|---|---|---|
| Arquitetura | Usar padrões para grafos, blocos, fluxos e camadas. | arquitetura/visualizacao_ola.html |
| Governança | Registrar regras, critérios, checklist e ciclo de evolução. | governanca/index_governanca.html |
| Domínios | Aplicar em mapas, índices, grafos e páginas âncora. | dominios/*/mapa_*.html |
| Aprendizagem | Usar visualização como objeto de aprendizagem e evidência. | dominios/aprendizagem/ |
| Fundamentos | Aplicar a mapas conceituais, ontologias e modelos de conhecimento. | fundamentos/mapa_fundamentos.html |
| Objetos de aprendizagem | Usar visualizações com objetivos, atividades e avaliação. | Objetos com grafos, tabelas, fluxos ou painéis. |
19. Próximos passos recomendados
1. Linkar no índice de governança
Incluir esta página em governanca/index_governanca.html.
2. Linkar na arquitetura
Referenciar esta página em arquitetura/visualizacao_ola.html.
3. Aplicar no domínio Aprendizagem
Usar estes padrões no grafo de mapa_aprendizagem.html
e no objeto de aprendizagem sobre governança visual.
index_governanca.html →
atualizar arquitetura/visualizacao_ola.html →
aplicar nos mapas de domínio.