Erro 404: o que é, exemplos e a importância para UX e SEO!

Hoje em dia, temos praticamente TUDO a um clique de distância. Por isso, estamos nos tornando cada vez mais impacientes. Isso também é culpa do tio Google que facilitou demais a nossa vida.

Obviamente, não estou reclamando. Imagine, você nos dias de hoje, ter que se locomover até uma biblioteca para passar a tarde folheando páginas até finalmente achar o conceito correto de ‘erro 404’? Claro, isso não existe mais. Atualmente, basta você perguntar para a ‘Siri’ que ela já te responde.

Tá, tudo isso para dizer que estamos muito, mas muito mal acostumados e que não há nada mais frustrante do que não achar o que queremos na web, não é? Pior ainda se a ausência de informação vem seguida do famoso erro 404 (‘not found’).

…mas o que de fato é o Erro 404? E a página 404? Preciso ter uma? Bom, é isso que você irá aprender nesse post, além de conhecer exemplos criativos de páginas 404 customizadas! Leia até o fim, vale a pena!

Historicamente…

O erro 404 sempre foi tratado como uma coisa horrível e odiosa por todos, quando na verdade, é só um aviso do servidor dizendo que ele não conseguiu achar aquela página. Talvez tenha se popularizado como algo terrível pelo seu layout pouco amigável, visto que no inicio, o erro 404 ‘ not found’ era apresentado SEMPRE, assim:

 

Erro 404 Tradicional do Browser

 

Sim, parece aquelas páginas que você cria quando está aprendendo HTML pela primeira vez, terrível!

E, por este aspecto asqueroso, quando isso acontecia no site X, você culpava o site X e, em muitos casos, nunca mais voltava nele! O site ficava taxado como algo de baixa qualidade.

Hoje o erro 404 ainda não é algo muito amigável. Contudo, com a onda de personalização da página 404, é possível minimizar a impressão negativa, e em muitos casos, até trazer uma imagem positiva para o seu website.

O que é o erro 404?

Imagine que você está andando pela rua e encontra uma vitrine que está expondo uma peça de roupa muito interessante. Agora, imagine que você é um consumista desenfreado, logo você irá entrar na loja e solicitar pela peça de roupa da vitrine, não é? Você faz isso e o atendente te diz que esta peça de roupa não existe.

“Mas como!? Ela está ali!” – você responde.

Pense da seguinte forma: o link (vitrine) que você clicou estava anunciando um produto (página) que não existe, não foi encontrado (erro 404 – ‘not found’).

Basicamente, é isso o que acontece quando acessamos um site de nossos computadores ou dispositivos móveis. Este site ou aplicação web provavelmente encontra-se alocado em um servidor, que pode estar localizado fisicamente em qualquer lugar do mundo. Logo, quando queremos acessar uma página, a informação é buscada no servidor em forma de código e chega até nós no formato amigável que conhecemos (HTML, CSS e JavaScript).

Contudo, quando pedimos para acessar uma informação que não pode ser encontrada, por algum erro do servidor ou porque essa informação não existe mesmo, o servidor irá retornar o código de erro 404, que significa que a informação desejada não foi localizada.

Resumindo, o erro 404 pode ocorrer por 3 fatores principais: problemas gerais nos servidores, links quebrados que referenciam a páginas que não existem ou porque simplesmente o usuário digitou uma URL errada.

“Tá e se isso acontecer no meu site!”

Excelente pergunta! Pois isso vai acontecer sim, por mais que você seja o mestre do desenvolvimento web. Até o google erra.

Página de erro 404 do Google

Quando isso acontecer, não se preocupe, é normal. Contudo, certifique-se que você possui uma página 404 customizada e específica para estas situações.

A importância de ter uma página 404 customizada

Para explicar a importância de ter uma página 404 customizada, vamos voltar ao exemplo anterior, da loja de roupas. Imagine que naquela situação apresentada, o vendedor lhe diga que simplesmente não há o produto e não aponte nenhuma solução, provavelmente você sairá da loja e pensará duas vezes antes de voltar, não?

Agora e se o atendente voltasse com um sorriso no rosto, dando mil desculpas e explicações, te entregasse um cafezinho cortesia, apresentasse produtos similares, ou ainda,  indicasse a loja mais próxima que possui o produto desejado? Com certeza, a sua percepção sobre a marca seria muito mais positiva. Talvez até mais positiva do que antes de entrar na loja.

Pois então, isso acontece de forma similar na Web. Quando navegamos na internet e nos deparamos com um erro em uma determinada página, é inevitável ficar frustrado. Contudo, se somos informados o porquê disso de uma maneira bem humorada e amigável, ou ainda, se o site apresenta alternativas, a sensação que fica é que o site em questão se importa conosco, com a nossa experiência de usuário (UX). Em outras palavras, eles se deram o trabalho de desenvolver uma página especificamente para este tipo de situação.

Dicas para criar uma página 404

Na hora de botar a mão na massa e desenvolver uma página 404 para o seu site, é importante levar em consideração alguns pontos-chaves.

  • Se o seu site é muito grande e cheio de alternativas, é interessante deixar claro ao seu visitante qual erro motivou o erro 404.
  • Nunca culpe o seu visitante pelo erro (o cliente sempre tem razão, lembra?). Portanto, no momento de personalizar sua página de erro, utilize soluções semânticas para suavizar a situação, sendo que expressões como “provavelmente”, “possivelmente” e “deve ter” são ótimas opções.
  • Use a criatividade e crie mensagens engraçadas e interessantes, evite explicações muito técnicas que a grande maioria das pessoas simplesmente não querem saber. A não ser que o seu público deseje esse tipo de informação.
  • Humor é mais do que bem-vindo. Dependendo da situação, o humor transforma frustração em sorriso.
  • Ofereça sempre uma solução ao seu visitante, geralmente, um link para o mapa do site ou para a página principal, ou ainda, um campo de busca interna, de forma que ele permaneça no seu site e não realizando buscas em outros locais.
  • Não esqueça do seu público-alvo! Digamos, você criou um site para um escritório de advocacia, você não irá usar um gif animado para comunicar o erro 404, certo? A não ser que isso faça parte da cultura da organização. Em outras palavras, sempre adapte o texto e a imagem com a comunicação e cultura da organização em questão.

Veja abaixo 8 exemplos de páginas 404 extremamente eficientes, criativas e interessantes para você se inspirar!

Páginas de erro 404 para se inspirar

Separei abaixo alguns exemplos de páginas de erros 404 que são criativas, bem humoradas e funcionais. Espero que essas ideias ajudem você a se inspirar para desenvolver a sua página, vamos lá?

1) Becode

Sim! A nossa página não poderia ficar de fora, afinal, se estamos falando que é importante ter uma página 404 personalizada, é importante dar o exemplo. Você pode conferir a nossa página 404 digitando qualquer URL que não existe em nosso site, por exemplo, “becode.com.br/404“. Ou simplesmente veja a imagem abaixo!

Página de erro 404 da Becode

2) Blizzard

A produtora de jogos não é nada sútil em sua mensagem. Contudo, se adapta perfeitamente ao público que costuma frequentar o seu site.

Página de erro 404 da Blizzard

3) Github

Site para armazenamento de projetos e compartilhamento de código, casa dos programadores. Utilizou-se da cultura geek para se aproximar do seu público. Com a temática Star Wars, criou uma página 404 que utiliza-se do humor e efeitos parallax para suavizar qualquer problema na experiência do usuário. O Github também possui uma página 500 muito interessante, mas isso é tema para um próximo post.

Página de erro 404 do Github

4) MailChimp

Um dos serviços de e-mail marketing mais utilizados no mundo todo. O serviço possui o simpático macaquinho como mascote também se destaca na sua página de erro, confira!

Página de erro 404 do Mailchimp

Seomaster

Empresa brasileira especializada em SEO promove uma solução divertida e interativa em sua página de erro.

Erro 404 Seomaster

5) South Park

A série animada e desbocada sempre figura na lista de páginas 404 divertidas. O destaque é que as imagens aparecem de forma aleatória, ou seja, são diversas opções para informar o visitante sobre o erro.

Página de Erro 404 do South Park

6) h2a

Essa agência de Luxemburgo adotou uma solução bastante criativa e interativa. A página sugere que os visitantes colem um post-it em suas telas, vale a pena conferir.

Página de Erro 404 da agência h2a

7) agens

Essa agência da Noruega retratou exatamente como nos sentimos quando nos deparamos com um erro 404. Quer mais empatia que isso?

Página de erro 404 da agens

8) Tassia Pellegrini

Para provar que você não precisa ser uma grande marca para ter uma página 404 personalizada. Veja o portfólio da Tassia Pellegrini, designer brasileira, radicada em Amsterdã que possui uma página simples, porém com uma mensagem criativa e simpática.

Página de erro 404 da Designer Tassia Pellegrini

É importante manter a identidade do site

É importante notar que cada um desses sites busca a comunicação com um nicho específico. O que demonstra que adotar uma página 404 personalizada é benéfico independente do seu segmento de atuação.

Também, nos exemplos, fica claro que não há um padrão exato a ser seguido. Existem páginas mais complexas e páginas mais simples do ponto de vista de programação. O importante mesmo é que a comunicação seja eficiente, influenciando positivamente a percepção final do usuário.

Implicações na experiência do usuário (UX) e SEO

Todo site que busca ser otimizado para mecanismos de busca (SEO) e alcançar os melhores resultados no Google, deve prezar pela experiência do usuário (UX). Desta forma, precisa utilizar técnicas e princípios do web design visando a melhor experiência para o usuário. Assim, retendo o visitante e estimulando sua interação dentro daquele determinado domínio, becode.com.br, por exemplo.

O Google mudou muito o seu algoritmo de pesquisas ao longo dos anos. Antes, muito voltado para otimização de código e “posicionamento” de palavras-chaves, hoje, possui foco total na experiência do usuário. Em outras palavras, o Google identifica os sites/aplicações/páginas que apresentam a melhor experiência para o usuário e beneficia eles.

Claro, SEO não é só experiência do usuário. Contudo, você não pode ignorar o peso que isso possui no rankeamento do sua aplicação web.

Tudo isso para falar que é cada vez mais fundamental contar com mecanismos que melhorem a experiência do usuário no seu domínio como um todo. Entre esses mecanismos, temos a página 404 personalizada. Afinal, a página 404 padrão dos navegadores é assustadora, gera frustração e abandono por parte do usuário. E, a página 404 customizada é a sua chance de reverter a situação a seu favor.

Transformando uma situação que antes fora de estresse para algo engraçado, criativo, surpreendente e descontraído, melhorando a impressão sobre o seu site (e consequentemente sobre sua empresa e marca). Em outras palavras, pontos para a usabilidade do seu site.

Resumindo…

A realidade é uma só: em algum momento, algum visitante vai se deparar com a página 404 de seu site, seja por um link quebrado, erro de digitação na URL ou qualquer erro no servidor. Sendo assim, é fundamental estar preparado para esses momentos, adotando soluções que permitam reter o seu usuário e até mesmo conquistá-lo ainda mais.

Nesse sentido, a personalização das páginas de erro 404 traz um excelente resultado. Sendo que, quando bem elaborada e planejada, pode inclusive aumentar a identificação de seu público-alvo junto ao seu site, negócio ou marca.

Ficou com dúvidas ou tem alguma sugestão de página para acrescentarmos a nosso post? Deixe o seu comentário abaixo. Até a próxima!

 

Curso online de HTML5, CSS3 e JavaScript da Becode! O seu primeiro passo para se tornar um front-end developer!

Written by Erick Scudero

Especialista em Marketing Digital e apaixonado por tudo que envolve o universo de tecnologia e comunicação. Durante sua jornada na terra dos cangurus (Austrália), atuou em diversos projetos prestando consultoria em questões de UX, SEO, Marketing Digital e modelos de negócio com foco em startups. É cofundador da Becode, da M2up e instrutor de cursos presenciais na TargetTrust.

10 frases que os programadores não aguentam mais ouvir!

10 frases que os programadores não aguentam mais ouvir!

Carreira na TI depois dos 30? Veja 10 dicas para vencer o preconceito!

Carreira na TI depois dos 30? Veja 10 dicas para vencer o preconceito!