#UX/UI.5 — Boas práticas em páginas de erro 404.
Olá, leitor! Como vai?
Neste artigo, vamos conversar um pouco sobre um detalhe muito importante em sistemas e sites que nem sempre é levado em consideração: a experiência em páginas de erro. Mais especificamente, na página de erro 404.
E, para facilitar sua leitura, esse artigo está dividido em 5 partes. Pega aí um spoilerzinho de que partes são essas:
- O que é a página de erro 404.
- Como evitar essa página de erro.
- Boas práticas para a construção de páginas de erro 404.
- Opções criativas para criar uma boa página de erro.
- Materiais que podem te auxiliar nessa criação + presente!
Bora começar?
O que é a página de erro 404.
A página de erro 404, que também possui títulos como “404 Not found” ou “404 Error”, é uma página que aparece para o usuário toda vez que o navegador tenta encontrar uma URL e não tem sucesso, mas verifica que seu servidor está comunicável.
Geralmente, ela aparece a partir das seguintes ações:
- Quando uma URL é digitada incorretamente pelo usuário.
- Quando uma URL é alterada pelo administrador.
- Quando o conteúdo que deveria existir naquela URL foi excluído. Dessa forma, o navegador não consegue encontrar o que o usuário está procurando, e retorna para ele um aviso de erro com o código 404.
Como evitar essa página?
A página de erro 404 nem sempre pode ser evitada, mas existe um caso específico em que isso pode ser feito de forma a auxiliar o usuário. Estamos nos referindo ao caso em que o erro ocorre por uma alteração de URL feita pelo administrador, quando ele altera a URL da página que está sendo procurada para uma diferente e a URL antiga passa a encontrar apenas uma página de erro.
Nesse caso, podemos utilizar um recurso conhecido como “Redirect 301", que redireciona o endereço utilizado anteriormente para o endereço atual daquela página automaticamente. Isso pode ser muito útil para sites ou sistemas com muitas páginas diferentes que, em algum momento, precisam passar por uma manutenção nos endereços mas já tem eles sendo divulgados e/ou citados em diversos lugares.
Existe um vídeo muito interessante do Fabio Ricotta que ensina muito bem como realizar o Redirecionamento 301 na prática:
Ele também tem um artigo muito interessante sobre esse tipo de redirecionamento, onde ele apresenta a sua aplicação nas linguagens PHP, ASP, htaccess, Coldfusion e Ruby on Rails, e você pode ler ele clicando aqui.
Porém, como citado anteriormente, a página de erro ainda é um fator que não pode ser evitado completamente e sempre vai existir. Isso porque o erro pode acontecer também quando uma página é excluída ou quando o usuário digita seu endereço incorretamente. Por isso, pensar na experiência do usuário ao se deparar com uma página de erro é muito importante para evitar frustrações do usuário e evitar que ele deixe de usar seu site por consequência disso. E, para que isso não ocorra, algumas boas práticas podem ser seguidas. Práticas, estas, que estão citadas nos próximos parágrafos desse texto :)
Boas práticas para a construção de páginas de erro 404.
- Esclareça o ocorrido: Nem todos sabem o que significa o erro 404. Por isso, é importante esclarecer o que aconteceu para o usuário, explicando o fato de que a página não pode ser encontrada e os possíveis motivos para isso ter acontecido. É importante que o usuário saiba não apenas que a página não foi encontrada, mas também os porquês de isso ter acontecido, para ter um esclarecimento ainda maior.
- Linguagem acessível: “Erro 404” não é uma terminologia usada pelo público em geral e muitas pessoas podem desconhecer seu significado. Ao se referir à ele e ao realizar outras explicações na página, é importante utilizar uma linguagem acessível para o usuário, que torne o conteúdo esclarecedor e de fácil entendimento.
- Recuperação de erro: É muito importante não fazer com que o usuário fique preso em um beco sem saída ao cair em uma página 404. Por isso, uma boa prática é utilizar meios que ajudem o usuário a encontrar o seu objetivo ou que o redirecionem para outras páginas do seu site. Existem várias formas de realizar isso, e algumas exigem bastante criatividade! Mas, no decorrer do texto, algumas sugestões serão citadas.
- Mensagem de erro: Uma boa mensagem de erro é muito importante para o esclarecimento do ocorrido. Ela deve responder à 3 perguntas:
- O que aconteceu?
- O que isso significa?
- O que pode ser feito sobre isso?
Algumas das práticas acima, inclusive, se encaixam perfeitamente com algumas das Heurísticas de Nielsen! Jakob Nielsen foi considerado o pai da usabilidade ao escrever suas 10 heurísticas básicas para o desenvolvimento de uma boa experiência, que são utilizadas em muitos lugares e possuem muito reconhecimento. Aqui no blog, temos um artigo sobre essas heurísticas, que você pode encontrar clicando aqui.
Além de apenas conhecer as boas práticas, você pode utilizar diversas opções criativas para colocá-las em prática e, assim, conseguir encantar ainda mais o seu usuário e obter ainda mais chances de manter ele no seu site, fornecendo também — e principalmente — uma boa experiência.
Essas opções devem fazer sentido com o contexto da página e com o objetivo de busca do usuário. Por exemplo, se a página de erro se refere à um site de eventos de determinado ponto turístico, faria sentido apresentar para o usuário eventos relacionados ou próximos ao que ele buscava naquela página, ajudando-o, assim, a atingir o objetivo dele.
Algumas práticas criativas que podem ser adotadas, são:
Opções criativas para páginas de erro 404.
1.Caixa de busca: Uma caixa de busca pode ser uma ótima opção para ajudar o usuário a cumprir seu objetivo, uma vez que ele pode utilizá-la para pesquisar o que estava procurando quando caiu na página de erro e, assim, talvez possa atingir o seu objetivo de busca.
2. Formulário de contato: Outra forma de ajudar o usuário à se recuperar de um erro, em casos mais complexos, é oferecendo um formulário de contato para que ele possa comunicar que precisa de ajuda e explicar o ocorrido para receber o suporte necessário.
3. Recompensas chamativas: Ao cair em uma página de erro, o usuário provavelmente se sentirá frustrado. Uma opção para aliviar esse sentimento e para manter o usuário em seu site é recompensá-lo pelo erro de forma chamativa, oferecendo, por exemplo, brindes, promoções exclusivas ou cupons de desconto.
4. Recompensas entretíveis: Uma outra boa opção para aliviar o sentimento de frustração do usuário pode estar no entretenimento. Fornecer jogos rápidos e/ou educativos pode aliviar o sentimento de frustração do usuário, mas é importante existir também uma forma fácil de sair da página de erro.
5. Redirecionamento amigável: Uma prática interessante é realizar o redirecionamento do usuário para outra página chave do site, como para a Home ou para uma página de produtos, por exemplo. Mas, para isso, é importante o deixar ciente de que ocorreu um erro para que ele não encontrasse o que estava procurando. Para redirecionar o usuário para uma página diferente da que ele esperava, prefira fazer com que isso seja uma opção dele, e não uma ação automática.
6. Conteúdo relacionado: Exibir conteúdos relacionados ao que o usuário estava procurando pode te ajudar a mantê-lo no site por mais tempo e pode o ajudar a encontrar o que buscava (no caso da página ainda existir) ou conteúdos que substituam o que ele buscava.
7. Conteúdo em destaque: Exibir o seu conteúdo em destaque pode ajudar o usuário a encontrar outros conteúdos no seu site que pode achar interessantes, fazendo com que ele não fique em um beco sem saída ao se deparar com a página de erro e com que ele permaneça por mais tempo no seu site.
Mas, deixo novamente o lembrete: você deve conciliar essas opções com o contexto da página e com o contexto de uso do usuário, para que as utilize de forma a ajudar o usuário a cumprir seu objetivo :)
Materiais que podem te auxiliar nessa criação.
Para finalizar esse texto, temos links!
No dia 03 de setembro de 2021 (fico me perguntando se você, leitor, está lendo isso numa data perto ou longe da publicação…) fiz uma live na Twitch sobre esse mesmo assunto e, a partir dela, surgiu esse arquivo aqui embaixo, disponível no Figma Community, com alguns cards das boas práticas apresentadas nesse texto, para você ter sempre como lembrete no seu trabalho ❤
Como as dicas estão distribuídas em cards, sua consulta fica muito mais prática e, se você achar que isso pode te ajudar mesmo, existe a opção de impressão no arquivo!
E como um presente para quem leu todo esse texto até o finalzinho, deixo um cupom de 10% de desconto na Alura para quem clicar aqui, a plataforma de cursos de tecnologia que eu mais gosto e recomendo no mundo todo! Uhuuul ❤
Por hoje, é só! :)
E deixo para todos o convite de escrever um comentário supimpa se tiver algo à acrescentar para os aprendizados desse artigo ou se tiver alguma observação ou sugestão à fazer.
Obrigada por ter chego aqui no finalzinho!
E até o próximo texto ❤
