Já nos acostumamos a passar de site em site, e rolar pelos feeds sem qualquer interrupção. Quando surpreendentemente alguma coisa dá errado ou se clicamos em um link que não funciona, a mensagem “Esta página não pode ser encontrada” pode ser muito frustrante. E é exatamente aqui que entram as páginas 404.
A página de erro 404 pode vir a ser o sucesso ou o fracasso da sua experiência como cliente. Esta pequena, porém importante seção do design do seu site tem o potencial de alavancar as vendas e estimular os visitantes a tomar uma ação. Ela pode ser o diferencial entre o visitante desistir e sair do seu site ou tornar-se um cliente leal e grande fã da sua marca.
As marcas abaixo nos mostram como a clássica mensagem de erro pode ser usada a seu favor. Elas deram uma arrumada e enfeitaram suas páginas 404, não apenas para suavizar a situação, mas também fazer os clientes sorrirem, ter uma sensação de alívio ou até dar uma pequena risada. Veja a seguir exemplos das melhores páginas 404 encontradas por aí.
O que é página de erro 404?
A página de erro 404 é uma página que aparece quando você clica em um link quebrado, que não está mais (ou nunca esteve!) disponível.
Isso pode acontecer se a pessoa digitar errado o URL (o endereço que aparece na barra de endereços do navegador). Você também pode chegar a uma página 404 se a empresa apagou ou retirou determinado conteúdo do seu site ou se fez alterações na sua estrutura de permalink e no mapa do site.
Quando você cria um site, é possível deixar a opção que vem por padrão ou você pode personalizar sua página de erro 404. Essa última opção permite criar um design atraente que resulte em uma melhora na sua experiência de usuário. Além do design, você ainda tem a opção de escrever uma mensagem amigável, no tom da sua marca, para proporcionar aos visitantes ajuda e orientação para continuar a navegar.
01. Pixar – Página 404 fofa
Os fãs da Pixar vão, sem dúvida alguma, se identificar com esta apaixonante página 404. A página usa um dos personagens do filme Divertida Mente para fortalecer a reputação da marca e a construir uma ligação com os visitantes do site. O uso de linguagem coloquial e de um personagem familiar também faz a página parecer mais humana e ajuda os usuários a se sentirem mais identificados e conectados.
Mesmo que sua marca não seja amplamente reconhecida como a Pixar, você sempre pode testar diferentes alternativas de texto e imagem para criar uma sensação amigável e humana. Use uma linguagem informal e agradável, com palavras como “uau” e “opa” para se conectar com seu público.
02. Omelet – Página 404 com humor
Nada como um toque de humor para ajudar a aliviar uma situação frustrante – especialmente quando é tão bem concebida como esta. A agência de criação Omelet utilizou o poder discreto da comédia na sua página 404 mantendo o tempo todo o alinhamento com a temática do ovo presente em seu nome e diversos outros detalhes de sua identidade de marca.
A cor vermelha viva indica automaticamente um sinal de alerta, mas o pânico inicial é contrabalançado pela mensagem cômica em inglês “This message is eggstinct” – usando o trocadilho em inglês da palavra “egg” (ovo) com a palavra “extinct” (extinta). Repare como eles deixaram visível no topo da tela a barra do menu do site, contribuindo para uma navegação confortável e permitindo que os visitantes do site continuem navegando.
03. Dribble – Página 404 interativa
Distração nem sempre é ruim. A página de erro da rede social Dribble comprova exatamente isso. O design divertido e interativo convida os visitantes a brincar, mesmo que distraia sua atenção momentaneamente do fato de não terem conseguido alcançar a página desejada.
O jogo não é apenas viciante, como também serve como uma forma de navegação; ao clicar em qualquer uma das imagens, o visitante é direcionado ao perfil de quem a criou, saindo suavemente da página 404. Eles também incluíram uma barra de busca e um link para a página inicial.
04. Dropbox – Página 404 útil
É impossível não se apaixonar por essa dupla tentando equilibrar-se em cima da bicicleta. As figuras foram desenhadas em um estilo ilustrativo e inocente, estão sorrindo de orelha a orelha e fazem tudo parecer um pouquinho melhor. Este fantástico exemplo de incorporação de ilustrações ao web design transmite uma sensação de familiaridade que alivia a frustração de ter alcançado uma página de erro 404.
Além disso, o Dropbox fez questão de incluir alguns links úteis que permitem ao usuário alcançar facilmente outras páginas. Ao criar sua página 404, recomendamos adicionar links para as seções mais procuradas do seu site como página inicial, seção de contato e página “Sobre” de forma a ajudar os visitantes do seu site.
05. The-Artery – Página 404 de marca
Quem reclamaria de chegar a uma página 404 com esse design maravilhoso? Os recursos visuais são modernos e coerentes com o restante do site deste estúdio de criação, resultando em uma experiência de navegação perfeita, mesmo quando o visitante se depara com um link quebrado.
A imagem em si movimenta-se de acordo com movimento do cursor e é composta de elementos intrigantes, retendo os visitantes na página por um pouco mais. O texto usado também é acolhedor e estimula o público a clicar em qualquer local da tela para continuar navegando.
06. Lazy Oaf – Página 404 inovadora
Esta é uma página 404 que não se atém às convenções. Alegando que “Mantém um estilo esquisito desde 2001”, a marca de moda Lazy Oaf também se manteve fiel a essa promessa na página de erro 404 da melhor forma possível.
Ao invés de dar aos visitantes do site a explicação sobre terem chegado à página de erro, eles trocaram isso por desculpas engraçadas, emojis de carinhas tristes e uma plaquinha dizendo “m… acontece”. No entanto, esta página 404 franca e de cores brilhantes não é nem um pouco triste. Eles oferecerem uma navegação intuitiva, mantendo a barra do menu visível, além de incluir imagens da sua loja virtual bastando rolar um pouco para encontrá-las.
07. Spotify – Página 404 com um toque pessoal
A página de erro do Spotify ajuda a fortalecer sua identidade da marca com o uso de um tom moderno de rosa millennial e uma imagem de disco de vinil. Eles mantiveram visíveis suas barras de menu, tanto no cabeçalho como no rodapé, simplificando muito a navegação.
Além da possibilidade de navegar através dos menus, o Spotify adotou uma linguagem informal e amigável para sugerir outras páginas úteis que possam ajudar. Quando for criar a sua página, tente usar palavras informais como “talvez” e “quem sabe” e incluir perguntas frequentes para ajudar os visitantes do site a ter a sensação de que há um ser humano do outro lado.
08. Julie Bonnemy – Página 404 com animação
O portfólio de design da designer freelance Julie Bonnemoy é um banquete para os olhos. O design da página 404 é praticamente idêntico ao design da página inicial, apenas com texto diferente. Isso significa que você pode navegar facilmente para qualquer uma das outras seções, sem sequer perceber que chegou à página 404.
Se você decidir criar o design da sua página inicial e da página de erro 404 com estilos semelhantes, pode experimentar adicionar certos elementos para criar uma experiência interativa. Use elementos com animação, vídeos transparentes e ilustrações únicas de arte vetorial.
09. OkCupid – Página 404 tranquila
A rede social de relacionamentos OkCupid não tentou esconder seu principal objetivo: encorajar os visitantes do site a assinarem seus serviços. Ainda que esta CTA (chamada de ação) seja bem direta em sua abordagem, a fonte usada é delicada e os elementos visuais subaquáticos que flutuam lentamente pela tela são relaxantes. Juntos formam um aspecto geral equilibrado que está longe de ser agressivo.
Uma outra dica é focar o design da sua página 404 em tons calmos para transmitir aos seus clientes a noção de que estão no caminho certo, apesar da página estar faltando. O tom de azul do OkCupid transmite, ao mesmo tempo, tranquilidade e uma sensação de confiança – uma escolha muito inteligente para uma página 404. Vale a pena dar uma olhada na psicologia das cores para encontrar o tom certo para o seu design.
10. Lego – Página 404 amigável
A Lego usou um personagem familiar para o design da sua página 404, o que ajuda a conectar seu público com a marca e a criar uma atmosfera amigável. Além disso, o estilo informal do texto é tranquilizador, mantendo um tom leve e divertido com pontos de exclamação e linguagem coloquial.
Se você também quer partir para ter uma página 404 com humor, certifique-se de mantê-la funcional como o Lego fez e proporcionando opções de navegação alternativas. Eles deram ênfase ao botão de CTA usando um fundo branco que o faz se destacar. Mantendo o menu visível, tanto no cabeçalho como no rodapé, os visitantes do site podem facilmente chegar em outras páginas.
11. Ueno – página 404 criativa
A agência digital Ueno criou algumas variações da sua alegre e divertida página 404. A animação do cachorro quente fugindo já faz qualquer pessoa sorrir. Agora, juntando a animação com o texto à esquerda, vai fazer os visitantes do site ficarem contentes de terem caído nessa página de erro.
Ueno combinou o lado divertido com um design preciso e minimalista. Se você decidir incluir humor na sua página 404, certifique-se de conseguir compensar isso mantendo a página com um aspecto profissional que obedeça aos princípios do design. O uso do espaço branco, uma pequena paleta de cores e hierarquia textual ajudam a marca a alcançar um tom profissional.
12. Figma – Página 404 interativa
Apesar de até parecer inicialmente o design clássico de texto preto em um fundo branco, é muito mais do que isso. Olhando melhor, você vai perceber a possibilidade de brincar com o texto, pois se trata de um jogo interativo e viciante que, ao mesmo tempo, dá uma ideia da natureza do próprio produto.
A Figma também incorporou muitas opções diferentes de navegação, incluindo menus tanto no topo como ao final da página. Os visitantes, possivelmente frustrados por chegarem à página de erro, podem facilmente acessar a página que estão procurando ao clicar em um dos muitos itens do menu.
13. MailChimp – Página 404 reconfortante
MailChimp implementou um estilo de ilustração que se posiciona perfeitamente entre o infantil e o emotivo, e definitivamente sabe como amortecer a desanimadora situação de aterrissar em uma página 404. Eles incluíram um grande botão bem destacado que é o único elemento colorido e que fica situado diretamente no meio da página.
No entanto, o que faz esta página 404 ser verdadeiramente especial é a sensibilidade com que cada elemento foi criado. A imagem do burro com a cabeça enfiada em um buraco, procurando desesperadamente a página que o visitante está procurando é motivante. Mas combinada com a linguagem poética e o pareamento de fontes, uma com serifa e outra sem serifa, o aspecto geral é tocante e inspirador.
14. Wade and Leta – Página 404 diferente e maravilhosa
O exclusivo design da dupla criativa Wade and Leta se destaca entre a grande maioria. Exatamente como todo o resto do seu portfólio online, a página é pessoal e inusitada, tudo na medida certa. Eles incluíram um gif curto em looping do Wade conversando em um supermercado e fazendo um gesto com a mão que parece nada relacionado à questão da página 404.
Mesmo assim, a página provoca um sorriso, o que é sem dúvida um resultado positivo para uma página de erro. O grande texto que salta à vista não apenas é uma tendência do web design, como também serve para informar ao visitante da questão, com muito estilo e sem qualquer pedido de desculpas.
15. Carwow – Página 404 Interativa
E o que você acha da Carwow, empresa revendedora de carros inglesa, que em sua página de 404 colocou um joguinho interativo para testar suas habilidades no volante. Uma idéia genial levando em consideração o segmento da empresa.
16. GSP Sites – Página 404 clara e concisa
Não ia dar para deixar de incluir esta página. E não só porque ela mostra um gato incrivelmente fofo teclando no computador. Apesar deste amigo felino certamente se destacar em termos de simpatia e fofura, também serve para sutilmente sugerir que o visitante do site tenha digitado de forma errada o nome de domínio (ou seu bichano de estimação esbarrou no teclado).
Além do aspecto visual, esta página de erro também inclui links para direcionar o visitante ao local desejado. O texto é conciso e direto ao ponto. Com todos eles elementos reunidos, a página transmite uma sensação de calma.