Exercícios Práticos - Aula 06: UX para Desenvolvedores

🎯 Objetivo dos Exercícios

Aplicar conceitos de UX em situações reais de desenvolvimento, criando soluções que priorizam a experiência do usuário desde o backend até o frontend.

📝 Exercício 1: Análise de UX Ruim (15 min)

🔍 Situação:

Analise os seguintes exemplos de má UX em código e identifique os problemas:

Exemplo A - API com Erro Genérico:

@PostMapping("/usuario")
public ResponseEntity<?> criarUsuario(@RequestBody Usuario usuario) {
    try {
        usuarioService.salvar(usuario);
        return ResponseEntity.ok("OK");
    } catch (Exception e) {
        return ResponseEntity.badRequest().body("Erro");
    }
}

Exemplo B - Frontend sem Feedback:

function cadastrarUsuario() {
  const dados = obterDadosFormulario();
  api
    .post("/usuario", dados)
    .then(() => location.reload())
    .catch(() => {
      /* não faz nada */
    });
}

Exemplo C - Validação Confusa:

<input type="email" required />
<span class="error" style="display:none;">Campo obrigatório</span>

✅ Tarefas:

Identifique 3 problemas de UX em cada exemplo
Explique o impacto no usuário final
Proponha soluções específicas para cada problema

🎯 Critérios de Avaliação:

Identificação correta dos problemas de UX
Compreensão do impacto no usuário
Soluções viáveis e bem fundamentadas

🔧 Exercício 2: Refatoração de API para UX (25 min)

📋 Contexto:

Você recebeu um sistema de cadastro de produtos com alta taxa de abandono. O backend atual retorna apenas códigos de erro genéricos.

💻 Código Original:

@RestController
public class ProdutoController {
 
    @PostMapping("/produtos")
    public ResponseEntity<String> criarProduto(@RequestBody Produto produto) {
        try {
            // Validações (podem falhar)
            if (produto.getNome() == null) throw new RuntimeException("Nome obrigatório");
            if (produto.getPreco() <= 0) throw new RuntimeException("Preço inválido");
            if (produto.getCategoria() == null) throw new RuntimeException("Categoria obrigatória");
 
            produtoService.salvar(produto);
            return ResponseEntity.ok("Produto criado");
 
        } catch (RuntimeException e) {
            return ResponseEntity.badRequest().body("Erro ao criar produto");
        }
    }
}

✅ Sua Missão:

Passo 1 - Criar Estruturas de Resposta UX-Friendly:

// TODO: Implementar record para respostas de erro user-friendly
// Deve incluir: código, mensagem, detalhe, ação sugerida
 
// TODO: Implementar record para respostas de sucesso
// Deve incluir: mensagem, dados, próximo passo

Passo 2 - Refatorar Controller:

// TODO: Refatorar o controller para retornar:
// - Erros específicos e acionáveis
// - Sucessos com feedback adequado
// - Códigos HTTP apropriados para cada situação

Passo 3 - Implementar Exception Handler:

// TODO: Criar @RestControllerAdvice que trata:
// - Diferentes tipos de erro de validação
// - Erros de negócio vs. erros técnicos
// - Respostas padronizadas user-friendly

🎯 Resultado Esperado:

API que retorna erros específicos e úteis
Mensagens acionáveis para cada tipo de problema
Códigos HTTP semânticos apropriados
Feedback positivo para operações bem-sucedidas

🎨 Exercício 3: Frontend com UX Adequado (30 min)

📱 Contexto:

Criar um formulário de login que demonstre excelente UX através de:

Estados visuais apropriados
Validação em tempo real inteligente
Feedback claro para sucesso/erro
Acessibilidade básica

🎯 Requisitos de UX:

Estados de Interface:

Loading durante autenticação
Feedback visual para campos válidos/inválidos
Mensagens de erro específicas e acionáveis
Confirmação de sucesso antes do redirecionamento

Validação Inteligente:

Email: validação em tempo real após sair do campo
Senha: indicação de força conforme digita
Caps Lock: aviso se estiver ativo
Tentativas: bloqueio temporário após 3 tentativas falhas

Acessibilidade:

Navegação por teclado (Tab, Enter, Escape)
Labels associados aos campos
Indicação clara do foco atual
Contraste adequado (mínimo 4.5:1)

💻 Template Inicial:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login UX-Friendly</title>
  </head>
  <body>
    <form id="loginForm" class="login-container">
      <h1>Entrar na Conta</h1>
 
      <!-- TODO: Implementar campo de email com validação UX -->
 
      <!-- TODO: Implementar campo de senha com melhorias UX -->
 
      <!-- TODO: Implementar botão com estados apropriados -->
 
      <!-- TODO: Área para exibir feedbacks de erro/sucesso -->
    </form>
 
    <script>
      // TODO: Implementar JavaScript com:
      // - Validação em tempo real
      // - Estados de loading
      // - Feedback adequado
      // - Integração com API UX-friendly
    </script>
  </body>
</html>

✅ Implementação Guiada:

JavaScript - Validação UX-Aware:

class LoginUX {
  constructor() {
    // TODO: Configurar event listeners
    // TODO: Inicializar validadores
    // TODO: Configurar estados de interface
  }
 
  validarEmail(email) {
    // TODO: Validação em tempo real
    // Mostrar feedback imediato (visual + texto)
  }
 
  validarSenha(senha) {
    // TODO: Indicador de força
    // TODO: Verificação de caps lock
  }
 
  async realizarLogin(dados) {
    // TODO: Implementar estados de loading
    // TODO: Tratar respostas da API UX-friendly
    // TODO: Aplicar feedback apropriado
  }
}

🔍 Exercício 4: Métricas e Monitoramento UX (15 min)

📊 Contexto:

Implementar tracking básico que ajude a monitorar aspectos de UX na aplicação.

📈 Métricas para Implementar:

1. Tracking de Abandono:

// TODO: Implementar tracking para:
// - Campos abandonados sem preenchimento
// - Formulários iniciados mas não submetidos
// - Tempo gasto em cada campo
// - Tentativas de submissão com falha

2. Tracking de Erros UX:

// TODO: Implementar captura de:
// - Tipos de erro mais frequentes
// - Tempo até resolver cada tipo de erro
// - Taxa de sucesso após erro
// - Abandono após erro específico

3. Métricas de Performance UX:

// TODO: Implementar medição de:
// - Time to Interactive (TTI)
// - Tempo até primeira ação bem-sucedida
// - Tempo de resposta percebido pelo usuário

📋 Template para Tracking:

class UXAnalytics {
  static trackFormAbandonment(formId, fieldName) {
    // TODO: Registrar abandono de campo
  }
 
  static trackAPIError(endpoint, errorType, userAction) {
    // TODO: Registrar erro com contexto UX
  }
 
  static trackUserSuccess(action, timeToComplete) {
    // TODO: Registrar sucesso e eficiência
  }
 
  static trackAccessibilityUsage(method) {
    // TODO: Monitorar uso de navegação por teclado, etc.
  }
}
 
// Exemplo de uso:
document.getElementById("email").addEventListener("blur", (e) => {
  if (e.target.value === "") {
    UXAnalytics.trackFormAbandonment("loginForm", "email");
  }
});

🏆 Exercício 5: Case Study - E-commerce (20 min)

🛍️ Cenário Real:

Um e-commerce está perdendo 40% dos clientes no checkout. Como desenvolvedor, você deve identificar e resolver problemas de UX.

📊 Dados Atuais:

Tempo médio no checkout: 8 minutos
Taxa de erro: 35% (cartão, CEP, CPF)
Abandono após erro: 78%
Reclamações principais: “não sei o que está errado”, “muito complicado”

🔍 Análise do Sistema Atual:

Backend - API de Checkout:

@PostMapping("/checkout")
public ResponseEntity<?> processar(@RequestBody CheckoutRequest request) {
    try {
        CheckoutResult result = checkoutService.processar(request);
        return ResponseEntity.ok(result);
    } catch (Exception e) {
        return ResponseEntity.badRequest().body("Erro no checkout");
    }
}

Frontend - Formulário:

function finalizarCompra() {
  const dados = coletarDadosFormulario();
 
  fetch("/checkout", {
    method: "POST",
    body: JSON.stringify(dados),
  }).then((response) => {
    if (response.ok) {
      window.location = "/sucesso";
    } else {
      alert("Erro ao processar compra");
    }
  });
}

✅ Sua Missão - Diagnóstico e Solução:

Passo 1 - Identificar Problemas UX:

Liste 5 problemas de UX no código atual
Priorize por impacto na taxa de conversão
Estime o esforço para resolver cada um

Passo 2 - Implementar Melhorias:

Refatorar API para retornos user-friendly
Melhorar frontend com feedback adequado
Implementar validação inteligente e progressiva
Adicionar tracking para monitorar melhorias

Passo 3 - Medir Resultados:

Definir métricas para acompanhar impacto
Implementar A/B testing simples
Projetar resultados esperados

🎯 Entregáveis:

Código backend refatorado com UX
Frontend com melhorias de experiência
Plano de métricas e monitoramento
Relatório de problemas identificados e soluções implementadas

🔄 Auto-Avaliação UX

✅ Checklist Final - Você aplicou:

Conceitos Fundamentais:

Compreendo que UX = Utilidade + Usabilidade + Confiança
Identifico impacto UX em decisões técnicas
Reconheço responsabilidade do desenvolvedor na experiência final

Habilidades Técnicas:

Sei projetar APIs com retornos user-friendly
Implemento feedback adequado em interfaces
Crio mensagens de erro acionáveis e específicas
Aplicc validação inteligente nos formulários

Boas Práticas:

Uso códigos HTTP semânticos apropriados
Implemento estados de loading e feedback visual
Considero acessibilidade básica no desenvolvimento
Planejo métricas para monitorar melhorias UX

Mindset Profissional:

Sempre pergunto “Como isso afeta o usuário?”
Documento decisões de UX no código
Proponhu melhorias além do requisito funcional
Compreendo impacto UX nos resultados de negócio

🚀 Desafios Extras (Para quem terminar cedo)

🔥 Desafio 1: Micro-Interações

Implementar micro-feedback que melhora a percepção de qualidade:

Animações sutis em botões ao clicar
Transições suaves entre estados
Feedback tátil (vibratção) em dispositivos móveis
Sounds de feedback para ações importantes

🌐 Desafio 2: Progressive Web App UX

Melhorar UX para diferentes contextos de uso:

Funcionamento offline com feedback claro
Loading progressivo de conteúdo
Instalação como app nativo
Performance otimizada para conexões lentas

🧠 Desafio 3: UX Personalizda

Implementar adaptação à preferências do usuário:

Tema escuro/claro automático
Remembrar preferências de formulário
Adaptar interface à frequência de uso
Sugestões contextuais inteligentes

📱 Desafio 4: Mobile-First UX

Otimizar experiência para devices móveis:

Gestos intuitivos (swipe, long press)
Interfaces thumb-friendly
Orientação e tamanho de tela dinâmicos
Performance otimizada para mobile

📚 Recursos Complementares

🔗 Links Úteis:

Figma Design System: Templates de componentes UX-friendly
Material Design Guidelines: Princípios de UX do Google
WebAIM: Ferramentas de teste de acessibilidade
Can I Use: Compatibilidade de recursos entre navegadores

📖 Leituras Recomendadas:

“Don’t Make Me Think” - Steve Krug
“The Design of Everyday Things” - Don Norman
Google API Design Guidelines
Microsoft REST API Guidelines

🛠️ Ferramentas para UX:

Chrome DevTools: Lighthouse audit, accessibility check
WAVE: Verificador automático de acessibilidade
Contrast Ratio: Teste de contraste de cores
Hotjar: Heatmaps e gravações de sessão

📊 Templates de Métricas:

Google Analytics 4: Eventos customizados para UX
Mixpanel: Funis de conversão e abandono
Amplitude: Análise de comportamento de usuário

Explorador

03-exercicios-praticos