Design de aprendizagem visual
Você está projetando para a compreensão: saber se o aluno pode usar a ideia mais tarde para resolver um problema que nunca viu (transferência). Lembrar e parecer bom vêm em segundo lugar. Tudo aqui vem da teoria cognitiva da aprendizagem multimídia (CTML) de Richard Mayer e da pesquisa em torno dela. Trate seus princípios como padrões fortes com condições de contorno conhecidas, não como leis.
O modelo contra o qual você projeta
Três suposições sobre a mente do aluno:
- Canais duais. As pessoas têm um canal auditivo/verbal e um canal visual/pictórico. Palavras impressas entram pelos olhos, então o texto na tela compete com os gráficos pelo canal visual. Palavras faladas não.
- Capacidade limitada. Cada canal retém apenas um pouco de cada vez.
- Processamento ativo. A aprendizagem acontece quando o aluno seleciona palavras e imagens relevantes, organiza cada uma em um modelo coerente e integra os modelos entre si e com o conhecimento prévio.
O tempo de aprendizagem consome três tipos de processamento. Essas três palavras são como você raciocina sobre cada decisão de design:
| Carga | Causada por | Seu trabalho |
|---|---|---|
| Extrínseca | Design ruim: desordem, atenção dividida, mídia fora de sincronia | Reduzi-la |
| Essencial | O quão complexo é o material para este aluno | Gerenciá-la |
| Generativa | O esforço do aluno para dar sentido ao material | Promovê-la |
A sobrecarga acontece quando o processamento extrínseco mais o essencial excede a capacidade. Depois que você reduziu a carga extrínseca e gerenciou a carga essencial, o risco restante é um aluno que pode pensar muito, mas não tem motivo para isso. O design generativo resolve isso.
Fluxo de trabalho
1. Perfil do aluno e da situação
Escreva uma linha para cada:
- Objetivo, declarado como algo que o aluno pode fazer ("prever o que acontece com a corrente quando a resistência dobra"), não "entender X".
- Conhecimento prévio: novato, intermediário ou especialista neste tópico. Este é o moderador mais forte. A maioria dos princípios é mais forte para novatos, e alguns se invertem para especialistas (reversão de expertise).
- Ritmo: controlado pelo sistema (vídeo, palestra ao vivo, animação com avanço automático) ou controlado pelo aluno (página rolável, deck auto-gerenciado, simulação). O ritmo decide o quão estritamente a redundância, a modalidade e a coerência se aplicam.
- Meio, duração, idioma (o material está no segundo idioma do aluno?) e necessidades de acessibilidade.
Concluído quando cada linha está preenchida. Quando algo é desconhecido, assuma um novato, ritmo controlado pelo sistema se a peça tiver áudio, e diga em sua saída que você assumiu isso.
2. Inventário do conteúdo essencial
Liste os principais elementos (partes nomeadas, termos, atores) e as relações entre eles (cadeia causal, etapas do processo, comparações, estrutura). Conteúdo que não é nem um elemento nem uma relação que o objetivo precisa é candidato a corte. A lista de elementos também se torna o material de pré-treinamento.
Concluído quando cada parte planejada do conteúdo é marcada como essencial ou corte, e a lista de elementos existe.
3. Escolha das representações
Para cada ideia essencial, escolha um gráfico pela sua função:
- Representacional: como se parece
- Organizacional: como as partes se relacionam qualitativamente (mapa conceitual, hierarquia)
- Relacional: relações quantitativas (gráfico)
- Transformacional: mudança ao longo do tempo ou um processo
- Interpretativa: um mecanismo invisível ou abstrato tornado visível (causa e efeito, um modelo)
Decorativo não é uma função. Um visual que só adiciona clima é carga extrínseca.
Use animação apenas quando a mudança ao longo do tempo é a coisa a ser aprendida (um processo, um movimento, uma habilidade motor-procedural), e dê a ela controles. Caso contrário, prefira uma sequência de quadros-chave estáticos. A animação é transitória: cada quadro desaparece antes que o aluno possa compará-lo com o próximo.
Para palavras, decida pelo ritmo. Em peças com ritmo controlado pelo sistema, a narração falada carrega a explicação e a tela mostra gráficos mais breves rótulos. Em peças com ritmo controlado pelo aluno, o texto impresso é aceitável, mas deve ficar dentro ou ao lado do gráfico que explica.
Concluído quando cada visual tem uma função nomeada e cada fluxo de palavras tem uma modalidade (falada ou impressa) e uma localização.
4. Aplicação dos princípios
Percorra a tabela abaixo uma carga de cada vez, em ordem: extrínseca, depois essencial, depois generativa. Leia references/principles.md quando uma condição de contorno puder se aplicar (alunos especialistas, material com ritmo controlado pelo aluno, alunos de segundo idioma, termos técnicos, lições longas), ou quando você precisar justificar uma troca para o usuário. Ele também cobre os efeitos de carga cognitiva intimamente relacionados: exemplos trabalhados, reversão de expertise, informação transitória e prática com feedback.
5. Aplicação do manual do meio
Leia o arquivo para o meio que você está criando. Quando uma peça abrange várias mídias (um aplicativo web com um vídeo incorporado, uma palestra gravada com slides), leia cada arquivo relevante.
| Fazendo… | Leia |
|---|---|
| Aplicativos web, explicadores interativos, simulações, módulos de e-learning, tutoriais no aplicativo, scrollytelling, visualizações de dados de lições | references/web-apps.md |
| Decks de slides, palestras ao vivo, apresentações de slides narradas ou auto-gerenciadas | references/slides.md |
| Vídeos explicativos e de palestras, animações narradas, screencasts, microlearning, vídeo gerado por IA | references/video.md |
| Demonstrações (ao vivo ou gravadas), passo a passos de software, demonstrações de procedimentos, exemplos trabalhados, tours de produto | references/demonstrations.md |
| Vídeo vertical de formato curto (TikTok, Reels, Shorts), posts sociais, carrosséis, threads, stories | references/social-and-short-form.md |
| Infográficos, figuras de livros didáticos ou documentação, apostilas, jogos, VR/AR, somente áudio, tutores e avatares de IA | references/other-formats.md |
Formato de rascunho Markdown. Quando a entrega for um esboço de slide em Markdown, carrossel ou roteiro de vídeo, escreva-o no formato que o verificador de rascunho lê:
- Slides e carrosséis: uma seção
## Slide N: <título de trabalho>para cada slide, contendo:**Manchete:**a frase de conclusão**Na tela:**seguido por linhas>contendo o texto literal na tela, exatamente como aparecerá**Visual:**uma descrição do gráfico**Notas do apresentador:**para um deck apresentado, ou**Texto alternativo:**para um carrossel
- Roteiros de vídeo e formato curto: uma tabela Markdown com as colunas
Tempo | Narração | Visual | Texto na tela, uma linha por batida.
6. Verificação do artefato real
Para esboços de slides em Markdown, carrosséis e roteiros, primeiro execute o verificador de rascunho. É scripts/check_draft.py no diretório base deste skill e precisa apenas da biblioteca padrão do Python:
python <pasta-do-skill>/scripts/check_draft.py rascunho.md --seconds 45 # --seconds: a duração alvo do briefing
Para um vídeo com duração alvo, passe --seconds. Sem ele, o verificador lê uma duração como "~45 s" do título.
Ele conta o que pode ser contado: palavras na tela por slide (manchete incluída), comprimento da manchete, texto alternativo, notas do apresentador, tempo de narração, texto na tela que repete a narração, o gancho, o prompt de fechamento para o espectador e música sob a narração. Corrija cada FALHA. Corrija cada AVISO também, a menos que uma condição de contorno o justifique. Suas próprias contagens de palavras tendem a se desviar, então confie no script.
Em seguida, execute references/audit-checklist.md contra a saída real: a página renderizada, os slides ou o roteiro de duas colunas, não seu plano. Corrija cada item que falha antes de entregar qualquer coisa. Concluído quando o verificador não mostra nenhuma FALHA e cada item da lista de verificação passa ou não se aplica. Esta verificação é para você. Mantenha a lista de verificação, a saída do verificador e suas marcas fora da entrega.
Princípios de relance
Os números são medianas de Mayer (2021): d de Cohen, com testes positivos do total de testes. Um efeito acima de cerca de 0,4 é educacionalmente significativo. Os números vêm principalmente de curtas lições de laboratório com alunos universitários novatos, então use-os para classificar prioridades, não para prometer resultados.
| Princípio | Faça isso | d (testes) | Mais fraco ou invertido quando |
|---|---|---|---|
| Multimídia | Use palavras e gráficos relevantes, não apenas palavras | 1,35 (13) | Gráficos são decorativos; o aluno é especialista |
| Reduzir extrínseca | |||
| Coerência | Corte palavras, imagens, sons e música interessantes, mas irrelevantes (detalhes sedutores) | 0,86 (18/19) | Ritmo controlado pelo aluno; alta memória de trabalho; o material extra é chato em vez de sedutor |
| Sinalização | Sinalize a estrutura e os essenciais: cabeçalhos, esboços, setas, destaques, ênfase vocal | 0,70 (26/28) | Especialistas; material simples; dicas exageradas (se tudo está destacado, nada está) |
| Redundância | Não coloque o texto completo da narração na tela ao lado de gráficos narrados | 0,10 (8/12) | Ritmo controlado pelo aluno; texto curto ou reformulado; alunos de segundo idioma; sem gráficos. Efeito pequeno, então nunca justifica remover legendas de acessibilidade |
| Contiguidade espacial | Coloque palavras impressas ao lado da parte do gráfico que descrevem | 0,82 (9/9) | Especialistas; lições simples |
| Contiguidade temporal | Narre uma coisa enquanto ela é mostrada, não antes ou depois | 1,31 (8/8) | Lições curtas ou com ritmo controlado pelo aluno |
| Gerenciar essencial | |||
| Segmentação | Divida o conteúdo em partes significativas que o aluno avança (um controle "continuar") | 0,67 (7/7) | Material simples ou de ritmo lento |
| Pré-treinamento | Ensine os nomes e características das partes principais antes da explicação de como funcionam | 0,78 (10/10) | Alto conhecimento prévio; material simples ou com ritmo controlado pelo aluno |
| Modalidade | Explique gráficos com palavras faladas em vez de texto impresso | 1,00 (18/19) | Termos técnicos, fórmulas ou código; alunos de segundo idioma; ritmo controlado pelo aluno; material que precisa ser consultado novamente |
| Promover generativa | |||
| Personalização | Escreva de forma conversacional: "você", "seus pulmões", "vamos" | 1,00 (13/15) | Especialistas; lições longas; forçar proximidade |
| Voz | Narre com uma voz humana agradável ou uma voz TTS moderna de alta qualidade, nunca uma robótica | 0,74 (6/7) | Sinais sociais negativos em outro lugar (um avatar rígido) |
| Incorporação | Um instrutor ou agente na tela gesticula, aponta, olha para o conteúdo, desenha enquanto explica | 0,58 (16/17) | Combinado com uma voz de máquina |
| Imagem | Um rosto ou avatar estático na tela adiciona pouco e pode distrair. Mostre uma pessoa apenas quando ela faz algo | 0,19 (4/7) | (É um princípio "não se preocupe") |
| Imersão | Não presuma que VR ou 3D superam uma versão de desktop 2D bem projetada | nenhum ganho confiável | A tarefa é verdadeiramente espacial ou incorporada |
| Atividade generativa | Solicite ao aluno que resuma, mapeie, desenhe, auto-explique, auto-teste, ensine ou aja durante a aprendizagem | 0,71 (37/44) | Sem orientação ou treinamento na atividade; a atividade sobrecarrega novatos |
Resolução de conflitos
Os princípios colidem entre si e com outros objetivos. Resolva as colisões comuns desta forma:
- Acessibilidade vs. redundância. Legendas, transcrições, texto alternativo e descrição de áudio são requisitos de acesso (WCAG 1.2.x, 1.1.1), e o efeito de redundância é pequeno. Forneça legendas como uma faixa fechada e alternável pelo aluno. Texto na tela em frases completas gravado é sobre o que é a redundância. Certifique-se de que alunos surdos e com deficiência auditiva possam seguir cada ideia essencial através de texto mais recursos visuais.
- Engajamento vs. coerência. Construa interesse a partir da relevância (um problema real com o qual o aluno se importa), sinais sociais (voz conversacional, um humano que explica e desenha) e atividade generativa, não de decoração, fotos de banco de imagens, música ou barras laterais de curiosidades. Lições curtas pagam o preço mais alto por detalhes sedutores.
- Normas da plataforma vs. os princípios (feeds sociais). Faça as postagens funcionarem com o som desligado, então o texto na tela carrega o esqueleto e a narração carrega a explicação. Legendas gravadas são aceitáveis quando são blocos de frases curtas colocados longe do visual que está sendo explicado. Faça o gancho ser a própria pergunta de aprendizagem, não um truque. Mantenha o áudio da moda longe da narração.
- Marca vs. coerência. Mantenha a marca em um cartão de título ou final e uma paleta discreta. Logotipos, mascotes e slogans em cada quadro são carga extrínseca.
- Novatos vs. especialistas em uma audiência. Projete o caminho principal para novatos e deixe os especialistas pularem o suporte: pré-treinamento recolhível, etapas trabalhadas opcionais, um link "pular para a prática". Andaimes fixos desaceleram especialistas (reversão de expertise).
- Brevidade vs. completude. Quando o material é longo, segmente-o em vez de cortar relações essenciais. Corte apenas o que a etapa 2 marcou como não essencial.
- Cabeça falante vs. o princípio da imagem. Um breve rosto no início constrói presença social. Depois disso, mostre o conteúdo e traga a pessoa de volta apenas quando suas mãos, olhar ou desenho carregarem informação.
Saída
Ao construir: entregue o artefato, depois uma breve justificativa de design de 3 a 8 marcadores. Cada marcador nomeia uma decisão, o princípio por trás dela e a carga que ela visa. Liste cada suposição da etapa 1. Deixe de fora uma tabela de auditoria ou resultados de lista de verificação. Quando algo não pôde ser verificado de onde você está (contraste ou legibilidade de arte ainda não renderizada), diga em uma linha após a justificativa.
Ao auditar material existente: relate os achados classificados pelo impacto esperado na aprendizagem (use os tamanhos de efeito e o perfil do aluno). Cada achado fornece a localização (slide 4, 01:32, a seção #chart), o problema, o princípio e carga e uma correção concreta. Agrupe os achados por carga. Termine com as duas ou três mudanças de maior alavancagem.
Cite os princípios pelo nome quando explicar suas escolhas, para que o usuário aprenda o vocabulário. Mantenha os tamanhos de efeito honestos: diga "evidência laboratorial forte" ou "efeito pequeno", e não prometa uma melhoria percentual.