Squad Front

Appearance

Erros de Tela (Nível de Interface) ​

Erros de tela são problemas localizados que afetam a interação imediata do usuário com os componentes da interface. Eles são, geralmente, os erros mais comuns e os que exigem maior refinamento visual.

O que são? ​

São falhas que ocorrem durante o preenchimento de dados ou carregamento de partes da página.

  • Campos de formulário inválidos (E-mail mal formatado, senha curta).
  • Falha ao carregar uma lista específica (ex: lista de exames).
  • Arquivo de upload muito grande ou formato não suportado.
  • Busca que não retorna resultados (Empty State com erro).

Como pensar o Design? ​

O design para erros de tela deve ser contextual e não obstrutivo. O usuário deve conseguir corrigir o problema sem perder o foco do que estava fazendo.

1. Mensagens Inline (Abaixo do Campo) ​

Para formulários, a regra de ouro é: o erro deve aparecer o mais próximo possível da causa.

  • Use a cor de erro do Design System (Tokens de Error).
  • Use ícones para ajudar usuários com daltonismo.

2. Toasts (Notificações Flutuantes) ​

Use Toasts para feedbacks de ações rápidas que falharam, mas que não impedem a navegação (ex: "Falha ao favoritar exame").

  • O Toast deve ter uma duração curta (4-6 segundos).
  • Deve conter um ícone de alerta.

3. Estados de Erro em Componentes (Error States) ​

Componentes como Selects, Inputs e DatePickers devem ter um estado visual de erro integrado (borda vermelha, ícone de aviso).

Exemplos Práticos ​

✅ Como fazer ​

  • Validação de Senha: Mostrar em tempo real quais requisitos não foram atendidos (ex: "Pelo menos 8 caracteres" em vermelho).
  • Lista que falhou: Em vez de uma tela branca, mostre um componente de "Placeholder" com um botão de "Recarregar Lista".
  • Upload Inválido: "O arquivo excede o limite de 10MB. Por favor, selecione um arquivo menor."

❌ Como não fazer ​

  • Alertas do Navegador: Nunca use o alert() nativo do navegador. É péssimo para a experiência e para a marca.
  • Limpar o campo: Nunca limpe o que o usuário digitou após um erro. Deixe ele corrigir apenas o que está errado.
  • Apenas Cor: Colocar apenas uma borda vermelha sem explicar o que está errado. O usuário pode não saber que o erro é um caractere especial faltando.

O Impacto no Produto ​

Tratar erros de interface com excelência reduz a carga cognitiva do usuário. Uma interface que guia o usuário através dos seus erros de digitação parece "inteligente" e gera menos frustração, aumentando a confiança na plataforma.