04-guia-professor

Guia do Professor - Aula 06: UX para Desenvolvedores

🎯 Visão Geral da Aula

📍 Contexto Pedagógico

Esta aula marca um ponto de inflexão no curso, onde estudantes passam de “como fazer” para “como fazer bem”. UX é o diferencial que transforma desenvolvedores júniors em profissionais que impactam resultados de negócio.

🔑 Objetivos Centrais

• Quebrar o mito de que UX é responsabilidade apenas do design
• Evidenciar o impacto das decisões técnicas na experiência do usuário
• Capacitar tecnicamente para implementar melhorias de UX
• Desenvolver mindset de desenvolvedor centrado no usuário

---

🕐 Cronograma Detalhado (105 min)

📚 Parte 1: Conceitos Fundamentais (25 min)

⏰ Abertura (5 min)

🎬 Gancho Inicial:

“Quantos de vocês já abandonaram um app ou site por não conseguir usar?”

💡 Dica pedagógica: Use esse momento para:

• Coletar experiências pessoais dos alunos
• Conectar frustração pessoal com impacto profissional
• Estabelecer relevância do tema para a carreira

⏰ Enquete Interativa (5 min)

📊 Perguntas para a turma:

1. “UX é responsabilidade de quem?” (mostre que muitos dirão ‘designer’)
2. “Quem já viu API que retorna só ‘Error 400’?” (experiência real)
3. “Quantos já desistiram de usar algo que ‘funcionava’ mas era confuso?”

📝 Registro: Anote as respostas no quadro - você vai retomar no final

⏰ A Fórmula UX (10 min)

🧮 UX = Utilidade + Usabilidade + Confiança

💡 Técnica de ensino: Use exemplos que eles conhecem:

• WhatsApp (utilidade alta, usabilidade alta, confiança alta)
• Apps bancários antigos (utilidade alta, usabilidade baixa)
• Sites duvidosos (pode ter utilidade, mas confiança baixa)

⏰ Conexão com Desenvolvimento (5 min)

🔗 Mostre como cada parte da fórmula depende de código:

• Utilidade: funcionalidades que o backend fornece
• Usabilidade: como frontend apresenta e intrage
• Confiança: estabilidade, feedback, mensagens claras

---

🔧 Parte 2: UX no Backend (25 min)

⏰ Demonstração Prática (10 min)

🎭 Side-by-Side Comparison:

Mostre na tela:

// API Ruim
{"error": "Bad Request"}
 
// API Boa
{
  "codigo": "EMAIL_INVALIDO",
  "mensagem": "E-mail inválido",
  "detalhe": "Use o formato nome@dominio.com",
  "acao": "Corrija o e-mail e tente novamente"
}

🗣️ Diálogo sugerido:

“Imaginem vocês como usuários. Qual dessas respostas ajuda mais? Por quê?”

⏰ Códigos HTTP Humanizados (5 min)

📊 Técnica visual: Crie uma tabela no quadro:

Código	O que o dev vê	O que o usuário entende
400	Bad Request	”Algo nos meus dados está errado”
401	Unauthorized	”Preciso fazer login”
403	Forbidden	”Não tenho permissão para isso”

⏰ Exercício Relâmpago (10 min)

⚡ 5 minutos em duplas + 5 minutos compartilhando

Desafio: “Como melhorar esta API?”

try {
    salvar(user);
    return ok("OK");
} catch (Exception e) {
    return badRequest("Error");
}

🎯 Objetivo: Fazer eles pensarem como usuários

---

🎨 Parte 3: UX no Frontend (25 min)

⏰ As 4 Heurísticas Práticas (15 min)

📋 Use a metodologia “Regra + Exemplo + Exercício”:

1. Feedback Imediato (4 min)

• Regra: Todo clique precisa de resposta visual
• Exemplo: Botão sem loading vs. com loading
• Mini-exercício: “Como melhorar um botão que não dá feedback?”

2. Mensagens Acionáveis (4 min)

• Regra: Erro deve dizer o que fazer
• Exemplo: “Senha incorreta” vs. “Senha deve ter 8+ caracteres”
• Mini-exercício: “Melhorem esta mensagem: ‘Erro de validação’”

3. Consistência (4 min)

• Regra: Padrões iguais em todo sistema
• Exemplo: Botões sempre no mesmo local
• Mini-exercício: “Identifiquem inconsistências nesta tela”

4. Acessibilidade Básica (3 min)

• Regra: Sistema navegável por teclado
• Demo: Navegar por um site apenas com Tab
• Reflexão: “Quantos nunca testaram isso?”

⏰ Demo Live: Navegação por Teclado (5 min)

🎭 Performance ao vivo:

1. Abra um site famoso (Amazon, Mercado Livre)
2. Esconda o mouse
3. Tente navegar apenas com Tab, Enter, Escape
4. Mostre onde “trava” ou fica confuso

💬 Reflexão guiada:

“Agora imaginem alguém com deficiëncia visual usando vocês apps…”

⏰ Case Study: Bug de Produção (5 min)

🚨 História real:

“Site de e-commerce perde R$ 50.000/mês porque cadastro só mostra ‘Erro 400’ quando CPF é inválido”

📊 Números de impacto:

• 67% abandono no cadastro
• +340% tickets de suporte
• Clientes frustrados não voltam

✅ A solução: Backend + Frontend user-friendly = +137% conversão

---

💻 Parte 4: Implementação Prática (20 min)

⏰ Setup e Organização (3 min)

• Duplas heterogêneas: misture níveis de habilidade
• Repositório base: tenha código pré-preparado
• Tempo claro: 15 min para implementar + 2 min para mostrar

⏰ Exercício Guiado (15 min)

🎯 Objetivo: Refatorar sistema de login com UX ruim

📋 Roteiro para acompanhar as duplas:

1. Mins 1-5: Verifique se entenderam o problema
2. Mins 6-10: Ajude com implementação backend
3. Mins 11-15: Foque no frontend e feedback

🆘 Principais dúvidas esperadas:

• “Como estruturar a resposta da API?”
• “Onde colocar o loading state?”
• “Como validar em tempo real sem irritar?”

⏰ Compartilhamento (2 min)

• 2-3 duplas mostram rapidamente sua solução
• Foque nas diferenças de abordagem
• Destaque insights criativo dos alunos

---

📊 Parte 5: Monitoramento e Métricas (10 min)

⏰ Métricas que Importam (5 min)

🎯 Conecte métricas com impacto real:

• Taxa de abandono = perda de clientes
• Tempo para sucesso = eficiência do usuário
• Rate de erro = fricção desnecessária

⏰ Ferramentas Práticas (3 min)

🛠️ Foque no que podem usar hoje:

• Google Analytics (gratuito, fácil integração)
• Browser DevTools (já têm instalado)
• Simple tracking events (código que podem escrever)

⏰ Ciclo de Melhoria (2 min)

🔄 Medir → Analisar → Hipótese → Implementar → Testar → Repetir

---

🎓 Estratégias Pedagógicas Detalhadas

🧠 Para Diferentes Perfis de Alunos

👥 Alunos Tímidos:

• Use exercícios em dupla (menos exposição)
• Faça perguntas diretas mas gentis: “João, o que você acha desta mensagem de erro?”
• Valorize contribuições pequenas: “Ótima observação!”

🚀 Alunos Avançados:

• Dê desafios extras: “Como implementariam dark mode automático?”
• Use como mentores: “Ajudem a dupla ao lado com a validação”
• Peça opiniões técnicas: “Qual biblioteca vocês usariam para isso?”

😴 Alunos Dispersos:

• Use movimentação: “Levantem e vejam o que a dupla vizinha está fazendo”
• Conecte com exemplos que eles usam: TikTok, Instagram, jogos
• Faça perguntas diretas: “María, qual app você usa que tem boa UX?”

💡 Técnicas de Manter Energia

🔥 Quebra-gelos:

• “Qual o app mais irritante que vocês já usaram?”
• “Quem já xingou um site que não funcionava direito?”
• “Já tentaram explicar tecnologia para um parente?”

⚡ Reativação de Energia:

• Mins 30 e 60: “Levantem e estiqueism! Vamos ver exemplos no celular”
• Se dispersão: “Quem consegue abrir YouTube apenas com teclado?”
• Se cansaço: “História rápida: a primeira vez que revisei um app e descobri que usuário…”

---

🎯 Pontos de Atenção Críticos

⚠️ Erros Comuns dos Alunos

🚫 “Isso é coisa de designer”

🔧 Contra-argumento:

“Vocês decidem como API retorna dados. Vocês escolham mensagens de erro. Vocês implementam validacciones. Designer só diz onde colocar - mas o que colocar é decisão técnica de vocês.”

🚫 “Usuário que se adapte”

🔧 Perspectiva:

“Mercado competitivo. Se seu app é difícil, usuário vai para o concorrente. Vocês não estão fazendo favor - estão competindo.”

🚫 “Muito trabalho para pouco impacto”

🔧 Dados reais:

“Desenvolvedores que pensam em UX ganham 15-30% mais. Empresas pagam premium para quem entrega código que funciona BEM, não só funciona.”

⚠️ Momentos Difíceis da Aula

😕 Se turma estiver desmotivada:

• Mostre salários de UX Engineer vs. Desenvolvedor comum
• Conte case real de dev que foi promovido por propor melhoria UX
• Pergunte: “Quem quer trabalhar em empresa boa?” (todas têm foco em UX)

😵 Se conceito não “clicar”:

• Use analogia física: “UX é como design de porta. Funciona? Sim. É fácil usar? Depende de quem fez.”
• Demonstre pessoalmente: “Vou usar este app confuso e vocês vão ver minha reação”

🤔 Se questionarem relevância:

• Mostre estatísticas de mercado: 85% das empresas priorizam UX
• LinkedIn: busque “UX Engineer” e mostre salários
• Pergunte: “Querem ser devs que entregam features ou que resolvem problemas?”

---

📋 Checklist de Preparação

🔧 Preparação Técnica

💻 Ambiente de Desenvolvimento:

• VS Code configurado com Live Server
• Browser com DevTools aberto
• Repositório base com código “ruim” preparado
• Exemplos de APIs funcionando
• Backup do material (slides offline)

📊 Dados e Exemplos:

• Cases reais de empresas conhecidas (Amazon, Mercado Livre, etc.)
• Estatísticas de UX atualizadas
• Screenshots de antes/depois de melhorias UX
• Exemplos de apps que eles usam

🎭 Preparação Pedagógica

📝 Material de Apoio:

• Slides com timers visíveis
• Roteiro de perguntas para cada seção
• Exercícios com diferentes níveis de dificuldade
• Gabarito/examples de soluções prontos

👥 Gestão da Turma:

• Plano de formação das duplas
• Estratégias para alunos com dificuldades
• Perguntas preparadas para diferentes perfis
• Sistema de avaliação formativa definido

---

🔍 Avaliação e Feedback

📊 Durante a Aula (Avaliação Formativa)

🎯 O que Observar nas Duplas:

• Compreensão conceptual: estão perguntando “como isso afeta o usuário?”
• Aplicação prática: implementam feedback/loading states?
• Colaboração: discutem opções de UX antes de codificar?
• Mindset: proposem melhorias além do requisito mínimo?

✅ Micro-feedbacks Positivos:

• “Excelente! Vocês estão pensando como usuários”
• “Gostei dessa validação em tempo real”
• “Essa mensagem de erro está muito clara”
• “Boa! Isso reduz a fricção para o usuário”

🔧 Redirecionamentos Construtivos:

• “E se o usuário não souber o que significa esse código?”
• “Como dariam feedback para quem usa only teclado?”
• “Que tal testaram isso com os olhos fechados?”

📝 Após a Aula (Avaliação Somativa)

🎯 Critérios de Avaliação do Projeto:

1. Utilidade (25%):

   • Resolve problema real do usuário?
   • Funcionalidade é relevante?

2. Usabilidade (25%):

   • Interface intuitiva?
   • Fluxo lógico e previsível?
   • Feedback adequado implementado?

3. Confiança (25%):

   • Mensagens de erro úteis?
   • Estados de loading claros?
   • Comportamento consistent?

4. Implementação Técnica (25%):

   • Código bem estruturado?
   • Acessibilidade básica aplicada?
   • Boas práticas seguidas?

📊 Rubricas Detalhadas

🏆 Excelente (9-10)

• Implementa UX além do requisito básico
• Código demonstra mindset centrado no usuário
• Propõe melhorias criativas e viáveis
• Documenta decisões de UX tomadas

✅ Bom (7-8)

• Implementa requisitos UX adequadamente
• Código funcional com feedback appropriado
• Demonstra compreensão dos conceitos
• Aplica heurísticas corretamente

⚠️ Satisfatório (6-7)

• Implementa requisitos mínimos UX
• Código funcional mas sem polish
• Compreensão básica dos conceitos
• Algumas heurísticas aplicadas

🔧 Precisamejorar (5-6)

• Implementação técnica adequada mas UX limitado
• Foco apenas na funcionalidade
• Conceitos não foram totalmente compreendidos
• Heurísticas não aplicadas consistently

---

🚀 Pós-Aula e próximos Passos

📧 Comunicação Pós-Aula

📝 Email para Turma (Template):

Subject: 🎨 Aula 06 - UX para Devs: Material e próximos passos

Pessoal,

Que aula incrível! Vocês mostraram que pegaram o espírito do UX. 🚀

📎 Material da aula:
- Slides: [link]
- Código exemplo: [repo link]
- Guia de implementação: [link]

🏠 Para casa (prazo: próxima aula):
1. Analisar 3 apps que vocês usam
2. Implementar melhorias UX no projeto pessoal
3. Ler Cap. 1-3 do "Don't Make Me Think"

🔗 Links úteis:
- Teste de contraste: webaim.org/resources/contrastchecker
- Heurísticas de Nielsen: [link]
- API Guidelines: [links Google, Microsoft]

Qualquer dúvida, me procurem!

Prof. Ricardo

🔄 Integração com Próximas Aulas

📚 Aula 07 - Testing Strategies:

• Conectar: “Como testar se UX está funcionando?”
• Incluir: testes de usabilidade automatizados
• Focar: TDD com usuário em mente

🎯 Projeto Integrador:

• Requirement: aplicar heurísticas UX em todo o projeto
• Critério: documentar decisões de UX tomadas
• Avaliação: incluir feedback de “usuários teste”

🌟 Oportunidades de Aprofundamento

👥 Para Alunos Interessados:

• Workshops extras: UX Research básico, A/B Testing
• Projetos especiais: redesign UX de sistema real da escola
• Conexões: network com profissionais UX da região
• Certificações: Google UX, Coursera, Alura

🏆 Competições e Concursos:

• Hackathons com critério UX
• Concursos de design de interfaces
• Projetos para ONGs (resolver problemas reais)

---

📚 Recursos de Apoio para Professor

📖 Bibliografia de Referência

📘 Livros Essenciais:

• “Don’t Make Me Think” - Steve Krug (simplicidade)
• “The Design of Everyday Things” - Don Norman (psicologia do design)
• “Atomic Design” - Brad Frost (componentes)
• “Laws of UX” - Jon Yablonski (princípios fundamentais)

🔗 Recursos Online:

• Nielsen Norman Group: artigos autoritativos sobre UX
• Material Design: guidelines do Google
• Human Interface Guidelines: padrões da Apple
• WebAIM: acessibilidade prática

🎓 Desenvolvimento Profissional

📚 Cursos Recomendados:

• Interaction Design Foundation: certificações UX
• Google UX Certificate: program oficial
• Coursera UX/UI: Johns Hopkins, University of Michigan
• Local: workshops presenciais em universidades nearby

🤝 Network Profissional:

• Meetups locais: UX, IxDA, grupos de desenvolvimento
• Conferences: UX Conf BR, Front in Sampa, DevFest
• Communities: Slack, Discord, LinkedIn groups

🔧 Ferramentas para Professor

📊 Para Demonstrações:

• Figma: protótipos rápidos para mostrar
• InVision: simulação de fluxos de usuário
• Loom: gravação de screen demos
• Can I Use: compatibilidade browser features

📈 Para Acompanhar Progresso:

• Google Forms: feedback rápido da turma
• Padlet: compartilhamento de descobertas
• GitHub: projetos e versioning dos exercícios
• Slack: channel da turma para dúvidas

---

💡 FAQ - Perguntas Frequentes da Turma

🤔 “UX não é responsabilidade do designer?”

💬 Resposta:

“Designer define onde colocar elementos, mas desenvolvedor decide como API responde, que mensagens de erro aparecem, como sistema valida dados. 70% da experiência do usuário dependency decisões técnicas que vocês tomam.”

🤔 “Isso não torna desenvolvimento mais lento?”

💬 Resposta:

“No início sim, mas rapidamente vocês ganham tempo: menos bugs reportados, menos perguntas de suporte, menos retrabalho. Plus: empresas pagam mehr para devs que entregam soluções completas.”

🤔 “Como saber se UX está boa se não temos usuários teste?”

💬 Resposta:

“Comecem sendo próprios usuários críticos. Usem suas apps como se fossem sua vó tentando fazer cadastro. Implementem métricas simples (time to complete, error rate). Lean melhora with cada release.”

🤔 “Acessibilidade é realmente importante?”

💬 Resposta:

“Além da inclusão (que já justifica), é lei em muitos países. Empresas grandes são obrigadas a ter sites acessíveis. Plus: acessibilidade boa améliora UX para todos (think about navegação por keyboard quando mouse quebra).”

🤔 “Que ferramenta devo aprender para UX?”

💬 Resposta:

“Focus primeiro no mindset, não nas tools. Mais importante é hacer always estas perguntas: ‘Como isso afeta usuário?’, ‘É claro o que aconteceu?’, ‘É obvious o que fazer next?‘. Tools são meio, UX mindset é objetivo.”

---

🚀 Conclusão e Objetivos Atingidos

Ao final desta aula, estudantes terão:

🧠 Mindset Transformado:

• Compreenderam que UX é responsabilidade compartilhada
• Desenvolveram senso crítico sobre experiência do usuário
• Internalizaram pergunta “Como isso afeta o usuário?”

🛠️ Habilidades Técnicas:

• Sabem strukturar APIs user-friendly
• Implementam feedback adequado em interfaces
• Aplicam heurísticas básicas de usabilidade
• Consideram acessibilidade nas decisões técnicas

💼 Diferencial Profissional:

• Entendem UX como diferencial competitivo na career
• Sabem conecter código com resultados de negócio
• Können discourse about UX com stakeholders não-técnicos
• Propõem melhorias além dos requisitos funcionais

🎯 Miss objective accomplishhed: formar desenvolvedores que criam experiências que usuários adoram usar!