Errar é humano. Todos nós cometemos erros e, quando se trata de design digital, os usuários provavelmente enfrentam condições de erro ao interagir com seu produto. Mas a forma como o sistema lida com essas condições tem um impacto tremendo na experiência que os usuários terão.
Neste artigo, revisaremos dicas práticas que o ajudarão a projetar estados de erro para sites.
Como minimizar o número de erros durante o desenvolvimento
Cada erro, independentemente da causa raiz, torna-se um ponto de atrito para os visitantes. Isso os impede de avançar em direção ao seu objetivo. O visitante deve parar e investir tempo e esforço para resolver um problema que enfrenta. Projetistas experientes sabem que prevenir erros é sempre melhor do que remediá-los. É por isso que a melhor mensagem de erro é aquela que nunca aparece.
Antecipe possíveis erros
Analise como os usuários interagem com o seu site e identifique onde eles podem encontrar erros. É recomendado começar com uma análise de alto nível-analise os fluxos do usuário para identificar as áreas onde os usuários podem enfrentar problemas.
Normalmente, os erros aparecem quando os usuários realizam operações incompatíveis (como fornecer entrada de dados inválida) ou devido a problemas técnicos (vários problemas de rede). Por exemplo, geralmente é difícil preencher corretamente um formulário longo sem erros na primeira tentativa. Você deve levar esses casos em consideração para minimizar a chance de erros.
Também é essencial coletar informações sobre o comportamento real do usuário (como os usuários interagem com seu produto). Use observação pessoal e análises para isso:
- Observação pessoal. Conduza consultas contextuais e observe como os usuários interagem com seu produto em seus ambiente natural.
- Use análises para identificar áreas onde os usuários enfrentam atritos. Por exemplo, se você deseja otimizar a experiência na web, convém rastrear o tempo médio na tarefa (a duração total que os usuários gastam em sua tarefa) e compará-lo com o tempo esperado.
Escreva instruções claras
Clareza é uma das principais prioridades do design digital. As instruções que você fornece aos usuários devem ajudá-los a entender o que precisam fazer em cada momento. As instruções são especialmente importantes durante a primeira experiência, porque quando os usuários aprendem apenas a usar um produto, eles podem enfrentar muitos problemas.
Ao escrever instruções, você sempre deve evitar jargões. Livre-se de termos técnicos e expresse tudo no vocabulário do usuário. E sempre teste suas instruções com seus usuários. Faça uma série de testes de usabilidade com seu público-alvo para garantir que os usuários entendam o que precisam fazer em cada situação.
Suporte para operações Desfazer/Refazer
Jakob Nielsen chamadas Desfazer/Refazer operações “ saídas de emegência.”Esse recurso permite que os usuários saiam de um estado indesejado sem qualquer impacto em seus dados e dá aos usuários liberdade de exploração. Os usuários ficam mais dispostos a explorar quando sabem que estão seguros. Sempre suporte os atalhos de teclado Ctrl + Z e Ctrl + Y para operações comuns.
Técnicas de prevenção de erros com exemplos
Aqui estão algumas técnicas que podem ajudá-lo a evitar condições de erro.
Introduzir restrições à entrada
É possível evitar que os usuários cometam erros, em primeiro lugar, utilizando restrições. Não permita que os usuários digitem ou selecionem algo que não seja válido. Por exemplo, ao criar um formulário de reserva de voo, você não deve permitir que os usuários selecionem datas do passado porque não faz muito sentido.
 100vw, 500px”/><figcaption id=)
Quando você projeta um seletor de data, não faz muito sentido permitir que os usuários selecionem datas do passado. Use um seletor de data que permita aos usuários escolher apenas a data de hoje ou datas futuras. Essa restrição fará com que os usuários escolham um intervalo de datas adequado.
Ofereça bons padrões
Bons padrões minimizam o custo de interação (esforço do usuário necessário para fornecer dados). Por exemplo, em vez de fazer com que o usuário forneça informações sobre seu endereço, é possível pré-selecionar alguns campos com base nos dados de geolocalização de um usuário.
Adicionar atrito extra a operações potencialmente perigosas
É sempre uma boa ideia para qualquer operação irreversível mostrar uma caixa de diálogo de confirmação como “Tem certeza de que deseja fazer isso?” Esse atrito extra fará o usuário parar e pensar no que está fazendo. Também evita que os usuários acionem alguma ação acidentalmente.
Nota lateral: você pode argumentar que o design deve sempre suportar operações Desfazer. É verdade, mas às vezes é impossível introduzir o recurso Desfazer devido às limitações da lógica de negócios ou à natureza da operação.
Técnicas de recuperação de erros para desenvolvimento web
Quando surgem erros, o tratamento de erros bem projetado evita que os usuários se sintam ignorantes. Aqui estão algumas técnicas que você pode usar quando as coisas dão errado:
Escreva mensagens de erro úteis
Como você facilita para o usuário a recuperação de erros de formulário? A resposta é escrever mensagens de erro adequadas.
Não escreva:
- Erros vagos. Muitas vezes vemos erros como “Ops, algo deu errado”. Esses erros não contêm nenhuma informação valiosa (não está claro para os usuários o que fazer a seguir)
- Erros brutos. Erros brutos são erros que contêm códigos de erro internos de um aplicativo, como “WGeneralError521 A operação não pode ser concluída”. Eles são escritos por desenvolvedores e para desenvolvedores e não são muito úteis para usuários comuns
- Erros de beco sem saída. Os erros de beco sem saída são erros que simplesmente indicam um problema. Um erro de beco sem saída típico pode indicar,”Seu arquivo não pode ser salvo”, sem dizer ao usuário o que está errado (é um problema de rede? Há algo errado com o próprio arquivo?). O usuário não deve adivinhar o que está acontecendo. Idealmente, o formulário deve indicar um problema e compartilhar algumas dicas sobre como resolvê-lo
Torne sua mensagem de erro fácil de entender e útil:
- Diga ao usuário o que deu errado e possivelmente por quê
- Explique o que o usuário precisa fazer para corrigir o erro (quando não for evidente)
Use a validação de formulário dinâmico com instruções embutidas
Imagine que você está preenchendo um longo formulário e, ao clicar em Enviar , vê uma longa lista de mensagens de erro na parte superior do formulário. Não é legal, certo?
A entrada do usuário deve ser validada logo após o usuário fornecê-la. Uma técnica chamada validação embutida irá ajudá-lo com isso. O usuário não precisa clicar/tocar no botão Enviar para ver o que há de errado.
Em seu artigo “ Validação em linha em formulários-projetando a experiência ,” Mihael Konjević compara os benefícios e as desvantagens de várias estratégias de validação em linha e propõe uma estratégia de validação que ele chama de “recompensar cedo, punir tarde.”
Os aplicativos que seguem essa abordagem informam os usuários sobre entradas incorretas no contexto da operação (logo após o usuário parar de digitar e passar para a próxima seção de entrada).
A proximidade é outro elemento importante da validação de dados. Coloque a mensagem de erro ao lado do campo para ajudar os usuários a compreender o status.
Adicione um pouco de humor
O tratamento de erros bem elaborado pode transformar um momento de falha em um momento de deleite. O humor é o tempero da vida e é fácil humanizar estados de erro combinando visuais agradáveis com uma cópia engraçada.
Ao mesmo tempo, você precisa se lembrar que o humor é contextual. Uma piada que pode ser engraçada em um contexto pode ser terrível em outro. Imagine uma situação em que você trabalha duro em um documento muito importante por algumas horas e, finalmente, decide salvá-lo. Quando você clica no botão Salvar, o sistema “recompensa” você com uma mensagem de erro “Ups, não foi possível salvar. Desculpe!”Essa mensagem é totalmente inadequada.
Conclusão
A melhor mensagem de erro é aquela que nunca aparece. No entanto, quando projetamos para condições sujeitas a erros, nosso objetivo é evitar que os usuários tenham estresse e tornar a interação com um produto o mais agradável possível.
A postagem Prevenção de erros no desenvolvimento da web apareceu primeiro em LogRocket Blog .
