NOTAS DO PROFESSOR 📖 O que é prototipar A ideia central a transmitir é que o protótipo não é o produto: é uma ferramenta para aprender e errar barato antes de investir no desenvolvimento a sério. O lema "falhar depressa para acertar depressa" deve ser desmistificado — falhar aqui é desejável, porque cada falha barata evita uma cara. Convém ligar isto à realidade profissional, onde refazer código custa muito mais do que refazer um esboço. 🗣️ Pontos a desenvolver oralmente • Contrastar o custo de mudar um esboço vs mudar produto já desenvolvido • Explicar que "falhar" no protótipo é o objetivo, não um problema • Dar exemplos de produtos que mudaram radicalmente após prototipagem

NOTAS DO PROFESSOR 📖 Níveis de fidelidade O erro mais comum dos iniciantes é saltar logo para a alta fidelidade, gastando tempo a polir pixels quando ainda nem a ideia está validada. A mensagem-chave é que mais fidelidade não é melhor — é apenas adequada a uma fase diferente. Convém que os alunos saibam ler a tabela e justificar qual o nível certo para cada momento do projeto. 🗣️ Pontos a desenvolver oralmente • Explicar o risco de investir em alta fidelidade demasiado cedo • Dar um exemplo concreto de protótipo para cada nível • Ligar o nível de fidelidade à fase do projeto em que se está

NOTAS DO PROFESSOR 📖 Propósito do protótipo "O que quero aprender?" é a pergunta que deve preceder qualquer protótipo, e é fácil de esquecer no entusiasmo de desenhar. Distinguir validar fluxo, compreensão ou desejo ajuda os alunos a focar o protótipo num objetivo concreto em vez de fazer "um bocadinho de tudo". Esta clareza de propósito é o que torna o teste de usabilidade posterior mensurável. 🗣️ Pontos a desenvolver oralmente • Dar exemplos de protótipos diferentes para cada tipo de propósito • Mostrar como o propósito define o que se mede no teste • Pedir aos alunos que definam o propósito do seu próprio projeto

NOTAS DO PROFESSOR 📖 Paper vs digital O papel é subvalorizado pelos alunos, que tendem a achar que "a sério" só vale o digital. Importa mostrar que o papel é mais rápido, mais barato e, por ser tosco, convida o utilizador a sugerir mudanças sem receio de estragar algo bonito. A regra prática "começar em papel, evoluir para digital" é um bom hábito de trabalho a instalar desde já. 🗣️ Pontos a desenvolver oralmente • Demonstrar uma sessão rápida de paper prototyping em aula • Explicar porque um protótipo tosco gera mais feedback honesto • Justificar a transição papel → digital ao longo do projeto

NOTAS DO PROFESSOR 📖 O modo Prototype do Figma O separador Prototype é onde o design estático ganha vida ao ligar frames com interações. Convém que os alunos interiorizem o trio que está por trás de qualquer interação: trigger (o que a inicia), ação (o que acontece) e animação (como acontece). Demonstrar ao vivo a ligação de dois frames vale mais do que qualquer descrição teórica. 🗣️ Pontos a desenvolver oralmente • Demonstrar ao vivo a ligação de dois frames no separador Prototype • Separar bem os conceitos de trigger, ação e animação • Mostrar o preview a correr para validar a interação criada

NOTAS DO PROFESSOR 📖 Triggers e ações no Figma Esta tabela ajuda a escolher o trigger certo para cada intenção: On tap para navegar, On drag para mover, After delay para auto-avançar. Importa que os alunos percebam que cada trigger imita um comportamento real do utilizador e que escolher o errado quebra a ilusão. Vale a pena testar com a turma o que acontece quando se usa o trigger desadequado. 🗣️ Pontos a desenvolver oralmente • Associar cada trigger a um gesto real do utilizador • Mostrar o After delay aplicado a um ecrã de splash • Discutir o efeito de escolher um trigger inadequado para a ação

NOTAS DO PROFESSOR 📖 Transições As transições não são decoração: comunicam a relação espacial entre ecrãs. A regra de ouro é a coerência — usar push para avançar e back para recuar cria um mapa mental consistente para o utilizador. Convém avisar contra o excesso de efeitos diferentes, que confunde em vez de ajudar. 🗣️ Pontos a desenvolver oralmente • Mostrar como push e slide sugerem direção e hierarquia de ecrãs • Explicar porque misturar muitos tipos de transição prejudica a clareza • Relacionar transição coerente com a sensação de "app bem feita"

NOTAS DO PROFESSOR 📖 Smart Animate e overlays O Smart Animate é a funcionalidade que mais impressiona em demonstrações, mas depende de um detalhe técnico que os alunos esquecem: as camadas têm de ter o mesmo nome em ambos os frames. Os overlays resolvem elegantemente menus e modais sem multiplicar frames. Convém praticar os dois juntos, porque é a combinação que produz microinterações fluidas. 🗣️ Pontos a desenvolver oralmente • Insistir na regra do "mesmo nome de camada" para o Smart Animate funcionar • Demonstrar um overlay de bottom sheet sobre um ecrã existente • Mostrar uma microinteração simples feita com Smart Animate

NOTAS DO PROFESSOR 📖 Limites do Figma É honesto e pedagógico mostrar onde a ferramenta principal falha: o Figma é excelente para fluxos e transições, mas tem lógica condicional limitada e não simula bem dados reais. Reconhecer estes limites motiva o aluno a conhecer ProtoPie e Framer em vez de forçar o Figma a fazer o que não faz bem. É também uma lição sobre escolher a ferramenta certa para o problema. 🗣️ Pontos a desenvolver oralmente • Mostrar um caso concreto onde o Figma não chega (lógica condicional) • Explicar que nenhuma ferramenta faz tudo bem • Antecipar o que ProtoPie e Framer trazem que o Figma não tem

NOTAS DO PROFESSOR 📖 ProtoPie O ProtoPie destaca-se por permitir protótipos muito realistas sem escrever código, ligando até sensores reais do telemóvel. A sua força está na riqueza de triggers e no uso de variáveis e condições, o que aproxima o protótipo do comportamento de um produto real. Convém posicioná-lo como o passo seguinte natural quando o Figma deixa de chegar. 🗣️ Pontos a desenvolver oralmente • Demonstrar um trigger de sensor (tilt ou som) que o Figma não faz • Explicar o modelo Object–Trigger–Response do ProtoPie • Dar exemplos de microinterações que justificam usar ProtoPie

NOTAS DO PROFESSOR 📖 Framer O Framer borra a fronteira entre protótipo e produto: usa dados reais, componentes avançados e pode publicar como site real, recorrendo opcionalmente a código React. Importa ser franco sobre a curva de aprendizagem maior — é poderoso, mas exige mais investimento. É útil para alunos que já dominam web e querem aproximar o protótipo do produto final. 🗣️ Pontos a desenvolver oralmente • Posicionar o Framer no extremo de maior fidelidade e proximidade ao produto • Explicar a vantagem de usar dados reais em vez de ecrãs estáticos • Avisar para o custo de aprendizagem face ao Figma e ProtoPie

NOTAS DO PROFESSOR 📖 Variáveis e condições Este é o salto conceptual do bloco: passar de ecrãs fixos para protótipos que reagem ao estado, com variáveis e lógica condicional. Os exemplos de pseudocódigo (badge do carrinho, login válido) mostram que prototipar avançado se aproxima de programar, ainda que sem código a sério. Convém ligar a variável a algo visível — um contador, um toggle — para que a abstração ganhe forma. 🗣️ Pontos a desenvolver oralmente • Explicar o que é "estado" com um exemplo de contador de carrinho • Ler o pseudocódigo em voz alta e traduzir cada condição • Mostrar como a mesma variável muda vários elementos do ecrã

NOTAS DO PROFESSOR 📖 O que são microinterações As microinterações são os pequenos momentos que distinguem um produto que funciona de um produto que encanta: o toque que confirma, o feedback que tranquiliza. A estrutura de Dan Saffer — trigger, regras, feedback, loops — dá um vocabulário comum para as analisar e desenhar. Convém pedir aos alunos que identifiquem microinterações nas apps que usam todos os dias. 🗣️ Pontos a desenvolver oralmente • Identificar microinterações conhecidas (pull to refresh, like animado) • Decompor uma delas pelos quatro elementos de Dan Saffer • Distinguir microinteração com propósito de mera animação decorativa

NOTAS DO PROFESSOR 📖 Timing e easing Os números deste slide são ouro prático: 150-300 ms é a janela em que a animação se nota sem irritar. O easing é o que dá naturalidade — objetos no mundo real aceleram e desaceleram, não se movem a velocidade constante. Demonstrar lado a lado um movimento linear e um com ease-out convence imediatamente do porquê de evitar o linear. 🗣️ Pontos a desenvolver oralmente • Mostrar comparativamente uma animação linear vs com ease-out • Justificar a janela de 150-300 ms com a perceção humana • Associar ease-out a entradas e ease-in a saídas com exemplos

NOTAS DO PROFESSOR 📖 Princípios de animação aplicados Trazer os princípios da animação clássica para a interface mostra que há décadas de conhecimento por trás de uma boa microinteração. Antecipação, follow-through e staging não são truques estéticos — servem a clareza, guiando o olhar para o que importa. O lema "ao serviço da clareza, não da decoração" deve ser o critério final de qualquer animação que os alunos adicionem. 🗣️ Pontos a desenvolver oralmente • Dar um exemplo de interface para cada princípio (antecipação, staging) • Mostrar como o follow-through evita paragens bruscas e artificiais • Reforçar que a animação deve esclarecer, nunca distrair

NOTAS DO PROFESSOR 📖 Feedback e estados Cada elemento interativo tem vários estados — pressed, loading, sucesso, erro — e o protótipo só é credível se os representar. A regra a fixar é que se deve transitar entre estados, não cortar secamente, porque o corte seco confunde sobre o que aconteceu. Convém ligar isto diretamente ao trabalho de projeto: pedir que mapeiem todos os estados de um botão antes de o animarem. 🗣️ Pontos a desenvolver oralmente • Listar os estados de um botão e pedir que os representem no protótipo • Explicar a importância do estado de loading na perceção de resposta • Mostrar a diferença entre transição suave e corte seco entre estados

NOTAS DO PROFESSOR 📖 Para que servem os testes de usabilidade O ponto mais libertador para os alunos é o dado de Nielsen: bastam 5 utilizadores para detetar cerca de 85% dos problemas. Isto desmonta a desculpa de que testar é caro ou complicado. Importa frisar que o designer está cego para os seus próprios problemas — só observar utilizadores reais os revela. 🗣️ Pontos a desenvolver oralmente • Explicar a regra dos 5 utilizadores e porque mais traz pouco ganho • Dar exemplos de problemas que só aparecem com utilizadores reais • Defender testar cedo, mesmo com protótipos de baixa fidelidade

NOTAS DO PROFESSOR 📖 Protocolo e recrutamento Um teste de usabilidade não é uma conversa informal: precisa de objetivos, tarefas realistas e um guião preparado. A regra de ouro a martelar é "não ensinar a usar — observar", porque ajudar o participante destrói o valor do teste. Recrutar do público-alvo certo é o que garante que os problemas encontrados são reais e não artefactos. 🗣️ Pontos a desenvolver oralmente • Explicar a diferença entre tarefa realista e tarefa enviesada • Insistir no papel passivo do moderador — observar, não ajudar • Discutir como recrutar participantes representativos do público-alvo

NOTAS DO PROFESSOR 📖 Think-aloud A técnica think-aloud dá acesso ao que normalmente é invisível: o raciocínio do utilizador enquanto navega. Ouvir "não percebo o que isto faz" vale mais do que qualquer métrica, porque revela o modelo mental e onde ele falha. Convém treinar os alunos a manterem-se calados — o instinto de ajudar é o maior inimigo de um bom think-aloud. 🗣️ Pontos a desenvolver oralmente • Fazer um role-play de think-aloud com um aluno a testar e outro a moderar • Mostrar como uma frase do utilizador denuncia um problema de design • Reforçar o silêncio do moderador como disciplina difícil mas essencial

NOTAS DO PROFESSOR 📖 Métricas de usabilidade As métricas dão objetividade ao teste e permitem comparar versões: taxa de sucesso, tempo na tarefa, número de erros e satisfação (SUS). A mensagem central é que números sozinhos não bastam — uma taxa de sucesso baixa diz que há um problema, mas só a observação qualitativa diz qual. Combinar os dois é o que produz conclusões acionáveis. 🗣️ Pontos a desenvolver oralmente • Explicar cada métrica e o que revela isoladamente • Mostrar que o "porquê" vem do qualitativo, não dos números • Introduzir brevemente o questionário SUS como medida de satisfação

NOTAS DO PROFESSOR 📖 Analisar resultados Depois do teste vem o trabalho mais difícil: transformar observações dispersas em padrões. A regra prática é que um problema repetido por vários participantes é real, enquanto uma queixa isolada pode ser apenas preferência pessoal. Agrupar por tema evita que se reaja a cada comentário individual e dá foco às correções que importam. 🗣️ Pontos a desenvolver oralmente • Demonstrar o agrupamento de observações por tema (affinity mapping) • Distinguir problema real (recorrente) de preferência individual • Avisar contra mudar tudo com base num único comentário

NOTAS DO PROFESSOR 📖 Priorizar correções Como nunca há tempo para corrigir tudo, priorizar é uma competência profissional essencial. Os três critérios — gravidade, frequência e esforço — permitem decidir racionalmente em vez de corrigir o que é mais visível ou mais fácil. A matriz impacto × esforço é uma ferramenta simples que os alunos podem aplicar imediatamente para identificar os quick wins. 🗣️ Pontos a desenvolver oralmente • Desenhar a matriz impacto × esforço no quadro com exemplos • Explicar porque um quick win (alto impacto, baixo esforço) vem primeiro • Mostrar que um problema grave que bloqueia a tarefa é prioritário mesmo se difícil

NOTAS DO PROFESSOR 📖 Do protótipo ao produto Este slide mostra que prototipar é um ciclo, não um passo único: prototipar, testar, analisar, refinar e repetir. O conceito de handoff — entregar ao desenvolvimento specs, componentes e estados bem documentados — liga a disciplina à realidade de uma equipa de produto. Convém sublinhar que o protótipo validado é o ponto de partida do desenvolvimento, não o fim do trabalho de design. 🗣️ Pontos a desenvolver oralmente • Percorrer o ciclo iterativo e dar exemplos de cada fase • Explicar o que um developer precisa de receber num bom handoff • Discutir como saber quando o protótipo está "pronto" para entregar

NOTAS DO PROFESSOR 📖 Boas práticas Este slide condensa a mentalidade certa: testar cedo, valorizar o teste pequeno feito hoje, documentar aprendizagens e lembrar que o protótipo serve para aprender, não para impressionar. É o antídoto contra o perfecionismo paralisante que afeta muitos alunos. Vale a pena transformar cada bullet num compromisso prático para o projeto da unidade. 🗣️ Pontos a desenvolver oralmente • Combater a ideia de que só vale a pena testar quando estiver "perfeito" • Reforçar o valor de documentar e partilhar o que se aprendeu • Relembrar que o objetivo é aprender, não fazer um protótipo bonito

NOTAS DO PROFESSOR 📖 Síntese da unidade Este resumo organiza o percurso completo: do conceito de prototipar, passando por Figma e ferramentas avançadas, microinterações, testes e iteração. Vale a pena usá-lo como mapa para o projeto final, pedindo aos alunos que situem o seu trabalho em cada etapa. O fio condutor a reforçar é que tudo serve um objetivo — aprender depressa e barato antes de construir. 🗣️ Pontos a desenvolver oralmente • Percorrer o resumo e ligar cada ponto ao projeto que os alunos vão fazer • Recolher dúvidas finais sobre ferramentas e processo de teste • Reafirmar o ciclo prototipar–testar–iterar como hábito profissional