Plano de Aula 06 - User Experience (UX) para Desenvolvedores

📋 Informações Gerais

Campo	Valor
Curso	3º Técnico em Desenvolvimento de Sistemas
Disciplina	Desenvolvimento de Sistemas II
Aula	06 - Conceitos de Experiência do Usuário (UX) para Desenvolvedores
Professor	Ricardo Pires
Duração	105 minutos (3 períodos)
Modalidade	Presencial com atividades práticas

🎯 Objetivos de Aprendizagem

Objetivo Geral

Capacitar os estudantes a aplicar conceitos fundamentais de UX em decisões técnicas de desenvolvimento, criando sistemas que priorizam a experiência do usuário desde o backend até o frontend.

Objetivos Específicos

Compreender que UX vai além da interface visual e impacta decisões de arquitetura
Aplicar heurísticas de usabilidade em códigos e APIs
Implementar feedback adequado em interfaces e serviços
Criar mensagens de erro úteis e acionáveis para usuários
Desenvolver sistemas que reduzam fricção e aumentem taxa de sucesso
Integrar monitoramento de UX nas aplicações desenvolvidas

🧭 Competências da BNCC e Itinerário Técnico

Competências Gerais (BNCC)

Conhecimento: Valorizar e utilizar conhecimentos sobre UX para entender e explicar a realidade tecnológica
Pensamento Crítico: Exercitar curiosidade intelectual sobre design centrado no usuário
Comunicação: Utilizar diferentes linguagens para expressar-se sobre experiência do usuário
Empatia: Exercitar empatia, diálogo e cooperação para compreender necessidades dos usuários

Habilidades Técnicas

Análise de usabilidade em aplicações web
Implementação de feedback user-friendly
Design de APIs orientado à experiência do usuário
Monitoramento e métricas de UX

📚 Conteúdo Programático

1. Conceito Fundamental de UX (25 min)

O que é UX além da interface bonita
A equação: UX = Utilidade + Usabilidade + Confiança
Impacto do UX nas decisões técnicas de desenvolvimento
Cases de sucesso e fracasso em produtos digitais

2. UX no Backend e APIs (25 min)

Design de contratos de API amigáveis ao usuário
Estruturação de dados de resposta úteis
Códigos de status HTTP significativos
Mensagens de erro acionáveis e contextualizadas

3. UX no Frontend e Interfaces (25 min)

Heurísticas práticas para desenvolvedores
Estados de loading, sucesso e erro
Validações em tempo real vs. validações pós-submissão
Acessibilidade básica (foco, contraste, navegação por teclado)

4. Implementação Prática (20 min)

Exercício: refatoração de um sistema com UX ruim
Implementação de feedback adequado
Criação de mensagens de erro úteis
Teste da nova experiência

5. Monitoramento e Métricas (10 min)

Métricas de UX para desenvolvedores
Ferramentas de monitoramento de experiência
Como usar dados para melhorar o produto continuamente

🛠️ Metodologia e Estratégias Didáticas

Abordagem Pedagógica

Aprendizagem Ativa: Estudantes participam ativamente através de exercícios práticos
Aprendizagem por Descoberta: Descobrem impactos de má UX através de exemplos reais
Aprendizagem Colaborativa: Trabalham em duplas para refatorar código com foco em UX
Aprendizagem Baseada em Problemas: Resolvem problema real de UX em sistema

Estratégias de Ensino

Demonstração Interativa: Professor demonstra diferenças entre boa e má UX
Análise de Casos Reais: Discussão sobre exemplos de mercado
Codificação Prática: Implementação hands-on de melhorias de UX
Peer Review: Revisão de código focada em aspectos de experiência do usuário
Reflexão Guiada: Momentos para refletir sobre impacto das decisões técnicas no usuário

📖 Recursos Didáticos

Materiais Necessários

Computadores com ambiente de desenvolvimento Java/Spring Boot
Acesso à internet para pesquisa de referências
IDE configurada (VS Code ou IntelliJ)
Browser com ferramentas de desenvolvedor
Slides de apresentação com exemplos visuais

Recursos Tecnológicos

Projetor para demonstrações
Sistema de versionamento (Git)
Plataforma para compartilhamento de código
Ferramentas de teste de usabilidade (opcional)

🔍 Avaliação

Avaliação Formativa (Durante a aula)

Observação da participação nas discussões sobre UX
Qualidade das soluções propostas nos exercícios práticos
Capacidade de identificar problemas de usabilidade no código
Colaboração efetiva nos trabalhos em dupla

Avaliação Somativa (Projeto prático)

Critério 1: Implementação adequada de feedback para o usuário (25%)
Critério 2: Mensagens de erro claras e acionáveis (25%)
Critério 3: Interface responsiva e acessível (25%)
Critério 4: Documentação das decisões de UX tomadas (25%)

Instrumentos de Avaliação

Checklist de heurísticas de usabilidade aplicadas
Rubrica para avaliação do projeto prático
Autoavaliação sobre compreensão dos conceitos de UX
Peer assessment sobre a colaboração em dupla

📝 Atividades e Exercícios

Atividade 1: Análise de UX Ruim (15 min)

Apresentação de exemplos de interfaces e APIs com UX problemática
Identificação dos problemas pelos estudantes
Discussão sobre o impacto no usuário final

Atividade 2: Refatoração de Código para UX (30 min)

Código Java com retornos de API não user-friendly
Implementação de melhorias de UX no backend
Teste das melhorias implementadas

Atividade 3: Design de Interface User-Friendly (25 min)

Criação de formulário com validações adequadas
Implementação de estados de loading e feedback
Teste de acessibilidade básica

Atividade 4: Métricas e Monitoramento (15 min)

Implementação de tracking básico de UX
Discussão sobre como usar métricas para melhorar o produto

🔗 Conexões Interdisciplinares

Disciplinas Relacionadas

Design Gráfico: Princípios de design visual aplicados em interfaces
Psicologia: Compreensão do comportamento humano ao usar tecnologia
Administração: Impacto da UX nos resultados de negócio
Matemática: Análise estatística de métricas de usabilidade

Aplicações Profissionais

Desenvolvimento Frontend/Backend com foco em UX
Product Management com conhecimento técnico
Quality Assurance com foco em usabilidade
DevOps considerando experiência do usuário final

🏠 Atividades Complementares

Para Casa

Pesquisa: Analisar 3 aplicações que você usa frequentemente e identificar:
- 2 aspectos de boa UX (o que funciona bem)
- 2 aspectos de má UX (o que poderia melhorar)
- Proposta de melhorias técnicas para os problemas identificados
Prática: Implementar as melhorias de UX identificadas no projeto da aula em um sistema pessoal

Leitura Recomendada

“Don’t Make Me Think” - Steve Krug (foco em simplificidade)
Artigos sobre API Design Guidelines (Google, Microsoft, REST)
Documentação sobre Web Content Accessibility Guidelines (WCAG)

🎬 Fechamento da Aula

Síntese (5 min)

Recapitulação dos principais conceitos abordados
Conexão entre UX e qualidade técnica do código
Importância do desenvolvedor como defensor da experiência do usuário

Próxima Aula

Prévia: Integração de conceitos de UX com testing strategies
Preparação: Trazer exemplos de testes que validam aspectos de UX

📊 Anexos

Checklist de UX para Desenvolvedores

API retorna erros com códigos e mensagens claras?
Interface fornece feedback visual para ações do usuário?
Formulários validam dados em tempo real quando apropriado?
Sistema é navegável por teclado?
Contrastes de cor atendem padrões de acessibilidade?
Loading states são implementados para operações longas?
Mensagens de sucesso confirmam ações do usuário?

Recursos Adicionais

Template de mensagens de erro user-friendly
Guia de códigos HTTP e seus significados para usuário
Lista de ferramentas de teste de acessibilidade
Métricas básicas de UX para acompanhar em aplicações