Aula 6

Conceitos de Experiência do Usuário (UX) para devs

Professor: Ricardo Pires
3º Técnico DS - Desenvolvimento de Sistemas II

---

🚀 Roteiro (105 min)

• Ritmo: Conceito → Código → Resolução de Problema.
• Foco: UX aplicada a decisões de frontend e backend.
• Meta: reduzir fricção e aumentar taxa de sucesso do usuário.

---

🧠 Conceito: UX não é só interface bonita

• Utilidade: resolve problema real.
• Usabilidade: fluxo simples e previsível.
• Confiança: feedback claro e estável.

$$UX=Utilidade+Usabilidade+Confianca$$

---

💻 UX no backend: resposta que ajuda

public record ApiError(String codigo, String mensagem, String detalhe) {}

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

• Erro técnico sem contexto gera abandono de fluxo.

---

🧩 Heurísticas práticas para devs

• Feedback imediato (loading/sucesso/erro).
• Mensagem acionável em caso de falha.
• Consistência entre telas e ações.
• Acessibilidade básica (teclado, foco, contraste).

Fluxo simples -> menos erro -> mais conversão

---

🗣️ Desafio do Código - O Bug de Produção

Tela de cadastro exibe apenas Erro 400 quando API rejeita CPF inválido.

Impacto:
- Usuário não entende o problema
- Abandona cadastro
- Queda na taxa de conversão

• Causa: ausência de mensagem útil entre backend e frontend.

---

✅ Desafio do Código - A Solução do Sênior

• Padronizar contrato de erro da API.
• Exibir mensagem amigável na interface.
• Monitorar taxa de erro por tela.

Mensagem clara + ação sugerida = UX melhor e menos suporte

---

🎯 Checklist final da Aula 6

1. O sistema oferece feedback claro em cada etapa?
2. A mensagem de erro orienta o próximo passo?
3. O fluxo principal está previsível e rápido?
4. O backend e frontend usam contrato de erro consistente?

📝 Atividades práticas em sala (30 min)

Exercício 1: Melhorar mensagens de erro

Refatore a API para retornar erros mais úteis:

@RestController
public class UsuarioController {
 
    @PostMapping("/usuarios")
    public ResponseEntity<?> criar(@RequestBody Usuario usuario) {
        try {
            usuarioService.salvar(usuario);
            return ResponseEntity.ok().build();
        } catch (Exception e) {
            return ResponseEntity.badRequest().body("Erro");
        }
    }
}

Exercício 2: UX do formulário

Analise este fluxo de cadastro e identifique melhorias:

Fluxo atual:
1. Usuário preenche 15 campos obrigatórios
2. Clica "Salvar"
3. Se erro: perde todos os dados e volta ao início
4. Se sucesso: redireciona para login
5. Precisa cadastrar senha em tela separada

Mapear: pontos de fricção e soluções

---

✅ Gabarito das atividades

Gabarito 1 - API melhorada:

public record ApiError(String codigo, String mensagem, String detalhe) {}
 
@PostMapping("/usuarios")
public ResponseEntity<?> criar(@RequestBody Usuario usuario) {
    try {
        usuarioService.salvar(usuario);
        return ResponseEntity.ok().build();
    } catch (EmailInvalidoException e) {
        ApiError erro = new ApiError(
            "USUARIO_EMAIL_INVALIDO",
            "E-mail inválido",
            "Use o formato nome@dominio.com"
        );
        return ResponseEntity.badRequest().body(erro);
    } catch (Exception e) {
        ApiError erro = new ApiError(
            "ERRO_INTERNO",
            "Erro interno do servidor",
            "Tente novamente em alguns minutos"
        );
        return ResponseEntity.status(500).body(erro);
    }
}

Gabarito 2 - Melhorias UX:

Problemas identificados:

1. Muitos campos obrigatórios de uma vez
2. Perda de dados em caso de erro
3. Fluxo fragmentado (cadastro → login → senha)

Soluções:

1. Formulário em etapas (wizard)
2. Validação em tempo real
3. Preservar dados preenchidos
4. Cadastro completo em um fluxo
5. Login automático após cadastro

Atividade rápida

• Implementar uma das melhorias de UX.
• Testar fluxo com colega simulando usuário final.