Mensagens de erro

A comunicação eficaz é um aspecto essencial da experiência do usuário, especialmente quando se trata de mensagens de erro. Os usuários devem ser capazes de entender o que deu errado e como corrigi-lo. Aqui estão algumas dicas para garantir uma comunicação clara de erros para a melhor experiência do usuário:

• Use linguagem simples: Evite usar jargão técnico ou linguagem complexa que possa confundir o usuário. Use uma linguagem simples, concisa e de fácil compreensão.
• Seja específico: forneça detalhes específicos sobre o erro, como o código do erro ou uma descrição do que deu errado. Isso ajudará os usuários a entender o problema e encontrar uma solução.
• Ofereça soluções: não diga apenas aos usuários o que deu errado; oferecer soluções para o problema. Forneça instruções passo a passo sobre como corrigir o erro.
• Use recursos visuais: recursos visuais, como capturas de tela ou vídeos, podem ajudar os usuários a entender melhor o erro e como corrigi-lo.
• Seja educado e empático: Lembre-se de que os erros podem ser frustrantes para os usuários. Use uma linguagem educada e empática para mostrar que você entende a frustração deles e está lá para ajudar.
• Dê destaque às mensagens de erro: use uma cor ou estilo de fonte diferente para destacar as mensagens de erro do restante do texto. Isso chamará a atenção do usuário para a mensagem de erro e facilitará sua localização.

Ao implementar essas dicas, você pode garantir que os usuários recebam mensagens de erro claras e informativas que aprimoram sua experiência geral.

Padrão para mensagens de erro

1. Descrição do erro ou mensagem de alerta
   1. Diga aos usuários o que aconteceu. Seja honesto e informe aos usuários o que o sistema fez, o que eles fizeram ou o que estão prestes a fazer. Se você tiver alguma informação sobre o erro, informe aos usuários. Seja específico. Não diga apenas “algo não está certo” quando você sabe mais sobre o que realmente aconteceu. Se você puder descrever a situação de erro claramente em uma linha, faça-o e trabalhe com parceiros de design para escolher um padrão que funcione com uma cópia resumida. Fornecer orientação simples e rápida é o objetivo. O conteúdo deve exibir:
      1. O que aconteceu;
      2. A causa raiz.
2. Informação adicional
   1. Caso seja necessário, inclua outros conteúdos para esclarecer o contexto do erro;
   2. Quais ações podem ser realizadas pelo usuário para reparar o erro.
3. Call-to-action
   1. Um ou mais botões que oferecem possibilidades de ação para o usuário, possivelmente relacionadas às informações adicionais.

Tipos comuns de mensagens de erros

1. Valores inadequados

   Informe os usuários sobre um erro antes que eles cliquem no botão enviar. Isso conscientizará os usuários de que eles devem digitar outra coisa antes de prosseguir para o próximo nível.

2. Campos obrigatórios não preenchidos

   Informe aos usuários quais dados eles não preencheram ao preencher um formulário. Isso os deixará cientes de que não terão permissão para prosseguir até que preencham os campos obrigatórios.

3. Limite de caracteres excedido ou insuficiente

   Permita que os usuários estejam cientes do limite máximo ou mínimo de caracteres/numéricos para um determinado campo. Isso permitirá que eles conheçam seu limite de digitação.

4. Conexão de rede ruim No caso de conexão de rede ruim ou inexistente, exiba uma mensagem adequada aos para que os usuários não tenham que esperar mais tempo para carregar a página ou para uma página com falha no carregamento.

O que não fazer

Não culpe o usuário

Os usuários já ficarão frustrados quando receberem uma mensagem de erro - não piore a situação colocando a culpa neles. Isso significa que você deve evitar usar frases como "você fez" ou "você não fez" ao explicar o que deu errado.

Evite palavras negativas

O usuário já estará passando por algum nível de estresse porque ele está recebendo uma mensagem de erro. Essa é uma oportunidade de informar positivamente os usuários sobre os erros, em vez de reforçar uma interação negativa

Nunca apresente uma mensagem de erro sem tratamento

O usuário não pode ser responsável pelo entendimento de aspectos técnicos do sistema, nem sobre o que fazer para tratar um código de erro específico.

Não apresente uma mensagem de erro enganosa

É imprescindível que o usuário seja informado sobre a causa raiz do erro, e não sobre o problema imediato. Caso o sistema não consiga recuperar um dado específico porque houve falta de conectividade de rede, o erro deve estar relacionado ao erro de conectividade, e não à falta de conteúdo.

Não inclua várias etapas na caixa de diálogo

Dividir uma tarefa complexa em várias etapas é uma ótima ideia, mas geralmente também é um sinal de que algo é muito complexo para ser concluído pelos usuários dentro dos limites de uma caixa de diálogo.

Diálogo e instruções

O que é uma caixa de diálogo?

Uma caixa de diálogo é uma sobreposição que exige que o usuário interaja com ela e foi projetada para obter uma resposta do usuário. As caixas de diálogo informam os usuários sobre informações essenciais, exigem que os usuários tomem decisões ou envolvem várias tarefas. Nos aplicativos, na Web e até mesmo em dispositivos móveis, as caixas de diálogo são cada vez mais usadas para direcionar a atenção do usuário para uma tarefa específica, sem tirá-lo do contexto da tela atual.

Anatomia de um diálogo

Cabeçalho: Inclui um título, um rótulo opcional e o ícone de fechar. O título deve ser breve e descrever claramente a tarefa ou a finalidade da caixa de diálogo. Use o rótulo opcional acima do título para definir o contexto das informações na caixa de diálogo.

Corpo: Contém as informações e/ou os controles necessários para concluir a tarefa da caixa de diálogo. Pode incluir texto e componentes da mensagem.

Ações: As principais ações necessárias para concluir ou cancelar a tarefa da caixa de diálogo. Os agrupamentos de botões mudam de acordo com a variante modal. Use palavras descritivas para as ações, como Adicionar, Excluir, Salvar, e evite palavras vagas, como Concluído ou OK.

x: O ícone de fechar x fechará a caixa de diálogo sem enviar nenhum dado.

Sobreposição: (Somente caixas de diálogo modais) Sobreposição de tela que obscurece o conteúdo da página.

Escolha o tipo de diálogo apropriado

Existem dois tipos principais de caixas de diálogo. O primeiro é o modal, que busca a atenção e obriga o usuário a interagir com ele antes de continuar. Diálogos modais são geralmente usados para processos de bloqueio discretos:

• Não precisa do ambiente ao redor para decidir qual ação tomar.
• Requer uma ação explícita de "aceitar" ou "cancelar" para fechar. Ele não fecha quando a área fora dele é clicada.
• Não é aceitável que o progresso do usuário esteja em um estado parcialmente concluído.

O segundo tipo é uma caixa de diálogo sem janela restrita, que permite ao usuário clicar ou tocar fora da caixa de diálogo para fechá-la.

Você só deve usar caixas de diálogo modais (o primeiro tipo) para interações muito importantes, como excluir uma conta, concordar com os termos e condições.

Janelas modais

Não use

Não use modais para mostrar estados de erro, tempo de espera ou sucesso. Os modais não são eficazes para essa finalidade porque bloqueiam a página principal

Erros

Os erros devem ser fornecidos no contexto da entrada do usuário ou como uma tela separada.

Carregamento

O uso da janela modal para esse caso parece lógico, pois a janela modal impede que o usuário interaja com a tela. Uma abordagem melhor é adicionar um estado de carregamento diretamente no botão que iniciou a operação. Isso dá aos usuários um sinal de que precisam esperar e impede que o usuário clique no botão novamente.

Sucesso

É sempre melhor exibir a mensagem de sucesso em linha ou em uma página separada.

Atenção

⚠️ É possível usar janelas modais quando o usuário está prestes a realizar uma ação que tem consequências graves em que é difícil ou impossível reverter.