Mensagens de erro: 5 dicas para não perder usuários engajados

Sejamos sinceros: muito frequentemente, nossos usuários não vão interagir com nossas interfaces da forma como planejamos. 🤦‍♂️

A verdade é que, por mais que nos esforcemos, usuários tomarão atitudes ou terão compreensões "criativas" que vão levá-los a encontrar uma mensagem de erro. Especialmente se estamos falando do preenchimento de um formulário.

E pare para pensar: a missão das mensagens de erro é extremamente importante. Elas são o último recurso para evitar que um usuário engajado (muitas vezes próximo de uma conversão chave) seja perdido. São o meio para explicar a ele o que aconteceu e como resolver o problema em questão.

Mensagens de erro costumam ser um problema invisível

A maioria dos produtos e sites não dá a devida atenção a esse assunto. A falta de consciência se dá pela combinação de alguns fatores. Pela minha experiência, os principais são:

• A ilusão, quando se planeja uma interface, de que os usuários vão sempre entender exatamente o que fazer nela.

• A falta de tracking. Ainda são raros os casos em que profissionais de UX/Marketing têm acesso fácil e constante a relatórios de mensagens de erro. Eles nem sabem que o problema existe.

• Ausência de testes com usuários. É até difícil explicar o quanto testes constantes com usuários reais são importantes. Observar o uso real muitas vezes é o suficiente para se notar que erros acontecem frequentemente e que a forma como eles são tratados só aumentam a frustração dos usuários.

Por isso, hoje vamos dar uma atenção especial a boas práticas e técnicas para que as suas mensagens de erro sejam mais eficientes e consigam evitar que um usuário engajado se torne um detrator da sua marca.

Dica #1: Torne a mensagem muito fácil de se notar

Não importa o quão incrível sua mensagem de erro é. Se o usuário não notá-la, ela é completamente inútil.

O usuário tende a estar com a atenção voltada para o campo que ele acaba de preencher. Por isso, a melhor maneira de garantir que sua mensagem de erro será notada é mostrá-la próxima ao campo onde tal erro ocorreu. Isso também acelera o entendimento do contexto do erro.

Aqui está um exemplo do que NÃO fazer:

A mensagem está longe da "ação" e ainda por cima ela é visualmente discreta. Tudo que não queremos para algo que não pode passar despercebido.

Se você quiser tirar nota 10 no quesito posição da mensagem, a coloque acima do campo onde o erro aconteceu (mesmo que a maioria dos sites coloque abaixo), como aqui:

Ao colocar o erro acima do campo, você evita alguns casos em que a mensagem seria exibida em um ponto da página onde o usuário ainda não rolou o suficiente para visualizar. Esse problema é especialmente comum em celulares.

Além do posicionamento, considere outros recursos para dar visibilidade à sua mensagem. Entre eles:

• Cores chamativas, que tenham alto contraste com o restante da página. Se a cor vermelha atende a esses requisitos na sua interface, dê preferência a ela, já que essa é a cor mais convencional para erros. Mas se no seu caso vermelho é uma cor comum, naturalmente ela não será a melhor escolha para aumentar visibilidade.

• Animações de entrada para as mensagens. Damos atenção a coisas em movimento.

• Ícones, especialmente aqueles que instintivamente podem ser relacionados a erros. ⚠️🛑🚨

Dica #2: Dispare a mensagem na hora certa

Se sua mensagem de erro aparece cedo demais, na maioria das vezes ela é um alarme falso. Como quando você mal começou a digitar uma senha e já estão reclamando com você que ela é muito fraca:

Esperar demais também não é o ideal. Como quando você preenche um longo formulário e, ao apertar o botão de envio, é bombardeado com vários erros ao mesmo tempo.

A frustração acumulada nesse tipo de cenário muitas vezes leva o usuário a desistir.

Mas, se as mensagens tivessem sido exibidas individualmente, imediatamente após o preenchimento de cada campo, essa frustração teria sido diluída, o que manteria mais usuários no fluxo de conversão.

Reflita sobre qual é o momento ideal para exibir cada mensagem de feedback ao usuário.

Mesmo quando ela não é um erro, esse feedback pode ajudar muito. Por exemplo, voltando ao nosso caso da criação de senhas, uma lista de requisitos da senha, sendo preenchida em tempo real como na mensagem abaixo, é muito mais útil do que uma mensagem apressada de senha fraca.

Dica #3: Ajude ativamente o usuário a resolver seu problema

Quem nunca se frustrou com uma mensagem como esta?

Mensagens assim, que muitas vezes são técnicas e não dão nenhuma informação sobre o que aconteceu ou como resolver o problema, são verdadeiros becos sem saída.

O usuário não tem outra opção a não ser desistir. E é assim que um usuário engajado se torna um detrator.

Quando planejar suas mensagens de erro, garanta que elas sejam fáceis de entender para usuários de todos os níveis.

E, acima de tudo, garanta que elas expliquem ao usuário como corrigir o erro. Aqui está um bom exemplo:

Explicar como corrigir um problema ou no mínimo sugerir uma ação ao usuário é fundamental.

Mesmo que o seu erro seja de servidor e o usuário não possa fazer nada, ser transparente com a situação e orientá-lo a voltar mais tarde é muito melhor do que simplesmente exibir uma mensagem de erro genérica.

Dica #4: Evite linguagem negativa

Por mais que você siga todas as boas práticas listadas aqui, o sentimento do usuário ao se deparar com uma mensagem de erro nunca será maravilhoso.

Evite deixar a experiência ainda pior escrevendo textos com um tom negativo como estes:

Seja construtivo e foque em resolver o problema. Também não aponte o dedo para o usuário com palavras como "errado" ou "proibido".

No fundo, a culpa é sua. 🥲 Colocar no usuário só vai aumentar a frustração do mesmo e impactar negativamente seu negócio.

Dica #5: Previna erros

Como dito na dica acima, erros nunca são um acontecimento maravilhoso.

Muitas vezes eles são inevitáveis e nós certamente precisamos estar prontos para lidar com todos eles.

Mas alguns erros podem sim ser evitados, se previstos corretamente. E evitar erros é muito melhor para a experiência do que qualquer mensagem de erro super-otimizada.

Avalie cada campo individualmente, assista gravações de navegação e rode testes com usuários reais. Isso criará insumos sobre vários erros que você poderá evitar com ações como:

• Descrever melhor o que é esperado no campo, inclusive com exemplos.

• Aceitar apenas caracteres válidos para o campo. Ex: campos de CEP não deveriam captar letras.

• Em celulares, exibir o teclado adequado para cada campo. Ex: para campos de e-mail, existe um teclado específico com os caracteres relevantes para o mesmo.

• Se fizer sentido para o caso, troque campos abertos para caixas de seleção. Há uns bons anos (👴), trabalhei com a rede imobiliária Casa Mineira (posteriormente adquirida pela QuintoAndar) e rodei um teste substituindo a caixa de busca do site por duas caixas de seleção:

Esta é a versão original:

E ela ficou assim:

Essa mudança fez com que 57,25% mais pessoas avançassem para a página de resultados de busca.

Você pode ler os detalhes sobre porque decidi fazer essa mudança neste estudo de caso. Mas basicamente, vários erros dos usuários foram evitados ao fazer com que eles selecionassem opções fixas ao invés de digitar livremente. Mas atenção: não recomendo substituir caixas de busca por caixas de seleção em qualquer cenário. Cada caso é um caso.

Dica extra: Mensure tudo

Como já mencionei, erros dos usuários muitas vezes são invisíveis porque quem cuida das interfaces não tem acesso a dados e relatórios de mensagens de erro.

Não deixe que esse seja o seu caso. Afinal, como vimos aqui, mensagens de erro são mais decisivas do que parecem para o sucesso de interfaces digitais.

Garanta que sua solução de Analytics é alimentada com eventos relativos à exibição de mensagens de erro.

Se você usa o GA4, este é um bom tutorial. Ou você pode até optar por uma solução dedicada de form tracking, como o Zuko Analytics.

Independente do caminho, o importante é que você e seu time possam ter acesso ao que acontece com seus formulários e mensagens de erro para, com isso, entender como otimizá-las.