🎨 User Experience (UX) para Desenvolvedores

3º Técnico DS | Desenvolvimento de Sistemas II
Professor: Ricardo Pires | Aula 06
Criando sistemas que os usuários adoram usar

🚀 Roteiro da Aula (105 min)

25 min: Conceitos fundamentais de UX
25 min: UX no Backend e APIs
25 min: UX no Frontend e Interfaces
20 min: Implementação prática - Refatoração
10 min: Monitoramento e métricas de UX

Foco: UX aplicada a decisões técnicas de desenvolvimento

🤔 Pergunta Inicial

Vocês já abandonaram um cadastro ou app por não conseguir entender como usar?

Situação real:

Site de e-commerce perde 23% dos clientes por checkout complicado
Apps móveis: 25% são usados apenas 1 vez após download
Desenvolvedores impactam diretamente essas estatísticas!

🧠 O Mito: “UX é só Design Bonito”

❌ UX NÃO é apenas:

Interface visualmente atrativa
Responsabilidade só do designer
Aplicado apenas no frontend

✅ UX É na verdade:

Utilidade: resolve um problema real do usuário
Usabilidade: fluxo simples e previsível
Confiança: feedback claro e comportamento estável

📐 A Fórmula do UX

$U X = U t i l i d a d e + U s abi l i d a d e + C o n f ian \overset{c}{\c} a$

🔍 Aplicando na Prática:

Utilidade: “Isso resolve meu problema?”
Usabilidade: “Consigo usar facilmente?”
Confiança: “Posso confiar que vai funcionar?”

Desenvolvedores influenciam os 3 fatores!

🏗️ UX no Backend: Primeira Impressão

😱 Erro Ruim (comum):

{
  "error": "Bad Request",
  "status": 400
}

😊 Erro Bom (user-friendly):

{
  "codigo": "USUARIO_EMAIL_INVALIDO",
  "mensagem": "E-mail inválido",
  "detalhe": "Use o formato nome@dominio.com",
  "campo": "email"
}

🔧 API que Ajuda o Usuário

Estrutura de Resposta UX-Friendly:

public record ApiError(
    String codigo,      // Identificador único do erro
    String mensagem,    // Texto para exibir ao usuário
    String detalhe,     // Explicação específica
    String acao         // O que o usuário pode fazer
) {}

public record ApiSucesso(
    String mensagem,
    Object dados,
    String proximoPassso  // Guia para próxima ação
) {}

📊 Status HTTP com Significado

✅ Use códigos que fazem sentido:

200: “Sucesso, dados prontos para usar”
201: “Criado com sucesso, novo recurso disponível”
400: “Erro nos dados enviados, verifique e tente novamente”
401: “Você precisa fazer login para continuar”
403: “Você não tem permissão para esta ação”
404: “O que você procura não foi encontrado”
500: “Erro interno, nossa equipe foi notificada”

🎯 Heurísticas Práticas para Devs

1. Feedback Imediato

// ❌ Ruim: sem feedback
submitButton.onclick = () => processForm();
 
// ✅ Bom: com feedback
submitButton.onclick = () => {
  showLoading();
  processForm().then(showSuccess).catch(showError);
};

💡 Heurística 2: Mensagens Acionáveis

❌ Não acionável:

"Erro ao processar solicitação"

✅ Acionável:

"CPF inválido. Verifique os números e tente novamente.
Exemplo: 123.456.789-10"

Princípio: Todo erro deve dizer o que fazer para resolver.

🔄 Heurística 3: Consistência

Padronizar em todo o sistema:

Botões: sempre no mesmo local (ex: salvar sempre à direita)
Cores: verde = sucesso, vermelho = erro, amarelo = atenção
Linguagem: “Excluir” ou “Deletar”? Escolha um e mantenha
Comportamento: Ctrl+S sempre salva, ESC sempre cancela

♿ Heurística 4: Acessibilidade Básica

Checklist do Desenvolvedor:

Teclado: sistema navegável apenas com Tab/Enter/Escape?
Foco visual: indica claramente onde usuário está?
Contraste: textos legíveis (ferramentas: WebAIM, ColorTester)?
Alt text: imagens têm descrição alternativa?
Labels: campos de formulário têm labels associados?

🚨 Case Real: O Bug de Produção

📉 Problema:

Tela de cadastro só exibe “Erro 400”
API rejeita CPF inválido
Usuário não entende o problema
67% de abandono do cadastro!

💰 Impacto:

Queda na conversão de 23% para 8%
Aumento de 340% em tickets de suporte
Usuários frustrados abandonam plataforma

✅ A Solução: API + Frontend UX-Aware

🔧 Backend (Spring Boot):

@RestControllerAdvice
public class UXErrorHandler {
 
    @ExceptionHandler(CPFInvalidoException.class)
    public ResponseEntity<ApiError> cpfInvalido(CPFInvalidoException e) {
        return ResponseEntity.badRequest().body(new ApiError(
            "CPF_INVALIDO",
            "CPF inválido",
            "Digite apenas números ou no formato 999.999.999-99",
            "Corrija o CPF e tente novamente"
        ));
    }
}

✅ A Solução: Frontend User-Friendly

🎨 Frontend (JavaScript):

function showError(apiError) {
  const errorDiv = document.getElementById("error");
  errorDiv.innerHTML = `
        <div class="alert alert-error">
            <h4>🚫 ${apiError.mensagem}</h4>
            <p>${apiError.detalhe}</p>
            <small><strong>Como resolver:</strong> ${apiError.acao}</small>
        </div>
    `;
  errorDiv.scrollIntoView({ behavior: "smooth" });
}

📈 Resultado da Melhorias UX

Métricas Antes vs. Depois:

Métrica	Antes	Depois	Melhoria
Taxa de conversão	8%	19%	+137%
Abandono por erro	67%	23%	-66%
Tickets de suporte	45/dia	12/dia	-73%
Satisfação usuário	2.3/5	4.1/5	+78%

Conclusão: Código user-friendly = resultados de negócio!

🔍 Estados de Interface: Loading

❌ Sem feedback:

// Usuário clica e não acontece nada visível
async function salvarDados() {
  const resultado = await api.salvar(dados);
  showSuccess(resultado);
}

✅ Com feedback adequado:

async function salvarDados() {
  showLoading("Salvando dados...");
  try {
    const resultado = await api.salvar(dados);
    showSuccess("Dados salvos com sucesso!");
  } catch (error) {
    showError("Erro ao salvar. Tente novamente.");
  } finally {
    hideLoading();
  }
}

⚡ Validação: Tempo Real vs. Pós-Submit

🕐 Validação em Tempo Real (bom para):

Formatos (email, telefone, CPF)
Disponibilidade (username, email único)
Força de senha

📤 Validação Pós-Submit (bom para):

Regras de negócio complexas
Validações que precisam de múltiplos campos
Verificações que exigem processamento pesado

Princípio: Validar o mais cedo possível, sem irritar

🧪 Exercício Prático: Refatoração UX

📝 Cenário:

Sistema de login que:

Não dá feedback durante autenticação
Exibe mensagem genérica “login falhou”
Campo senha não mostra se está sendo digitada
Usuário não sabe se CAPS LOCK está ativo

🎯 Tarefa:

Implementar melhorias de UX no frontend e backend

💻 Hands-On: Implementando Melhorias

// Backend: Controller com retorno UX-friendly
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody LoginRequest request) {
    try {
        TokenResponse token = authService.authenticate(request);
        return ok(new ApiSucesso(
            "Login realizado com sucesso",
            token,
            "Você será redirecionado para o dashboard"
        ));
    } catch (CredenciaisInvalidasException e) {
        return badRequest(new ApiError(
            "CREDENCIAIS_INVALIDAS",
            "E-mail ou senha incorretos",
            "Verifique seus dados e tente novamente",
            "Esqueceu a senha? Clique em 'Recuperar senha'"
        ));
    }
}

📊 Monitoramento de UX

📈 Métricas que Desenvolvedores Devem Acompanhar:

Time to Interactive (TTI): quanto tempo até página ser usável?
Error Rate por Endpoint: qual API está gerando mais erros?
Abandono por Tela: onde usuários mais desistem?
Tempo para Primeiro Sucesso: quanto tempo para completar ação?

🛠️ Ferramentas:

Google Analytics (comportamento)
Hotjar/LogRocket (gravação sessões)
Sentry (erros em produção)

🎯 Implementando Tracking de UX

📊 Frontend: Tracking Simples

// Rastrear abandonos em formulários
document.getElementById("formCadastro").addEventListener("focusout", (e) => {
  if (e.target.value === "" && e.target.required) {
    analytics.track("form_field_abandoned", {
      campo: e.target.name,
      tela: window.location.pathname,
    });
  }
});
 
// Rastrear erros de API
async function callAPI(endpoint, data) {
  try {
    const response = await fetch(endpoint, data);
    return response.json();
  } catch (error) {
    analytics.track("api_error", {
      endpoint: endpoint,
      erro: error.message,
    });
    throw error;
  }
}

🔄 Ciclo de Melhoria Contínua

📊 Processo:

Medir: coletar dados de uso e erros
Analisar: identificar pontos de fricção
Hipótese: criar teoria sobre melhoria
Implementar: desenvolver solução
Testar: validar impacto com dados
Repetir: processo contínuo

Desenvolvedores são parte fundamental desse ciclo!

🏆 UX como Diferencial do Desenvolvedor

💰 Profissionais com Mindset UX:

Salários 15-30% maiores (pesquisa Stack Overflow 2023)
Maior demanda em vagas Sênior/Tech Lead
Melhor comunicação com Product Managers
Código que gera impacto nos resultados de negócio

🚀 Próximos Passos:

Sempre pergunte: “Como isso afeta o usuário?”
Documente decisões de UX no código
Proponha melhorias além do requisito funcional

✅ Checklist UX para Desenvolvedores

🔍 Antes de entregar qualquer feature:

API retorna erros com códigos e mensagens claras?
Interface dá feedback para todas as ações do usuário?
Loading states estão implementados?
Mensagens de erro são acionáveis e específicas?
Sistema é navegável por teclado?
Cores têm contraste adequado?
Formulários validam em tempo apropriado?
Sucessos são confirmados adequadamente?

🎯 Resumo da Aula

🔑 Conceitos-Chave:

UX = Utilidade + Usabilidade + Confiança
Desenvolvedores impactam UX tanto quanto designers
APIs user-friendly reduzem fricção e suporte
Feedback adequado aumenta confiança do usuário
Métricas de UX guiam melhorias técnicas

🚀 Aplicação:

Aplicar heurísticas de UX em todos os projetos, desde código backend até interface final.

🏠 Para Casa & Próxima Aula

📚 Atividade:

Analisar 3 apps que vocês usam e identificar:
- 2 aspectos de boa UX (o que funciona)
- 2 aspectos de má UX (o que poderia melhorar)
- Propor melhorias técnicas para os problemas

📖 Leitura:

“Don’t Make Me Think” - Steve Krug (Cap. 1-3)
Google API Design Guidelines

🔜 Próxima Aula:

Strategies de Testing com foco em UX e acessibilidade

🙋‍♂️ Q&A e Dúvidas

Dúvidas sobre:

Implementação de feedback user-friendly?
Estruturação de APIs com foco em UX?
Ferramentas de monitoramento?
Acessibilidade básica?
Métricas de UX para desenvolvedores?

Vamos construir experiências que os usuários adoram! 🚀

Explorador

02-slides-apresentacao