As melhores páginas 404: 40 exemplos que precisa de ver

Se está a a desenvolver um sítio Web ou ajudar a gerir um, deve estar preparado para quando as coisas correm mal.

As ligações quebram, as páginas são movidas e os utilizadores acabam por ir parar a um sítio inesperado do seu sítio Web.

Isto pode causar uma grande perturbação para as pessoas que utilizam o seu sítio, levando-as potencialmente a abandonar o seu sítio para procurar o que pretendem noutro sítio.

Existe também a possibilidade de afetar a sua classificação de pesquisa se as pessoas estiverem a aterrar em páginas danificadas devido a ligações de entrada.

É aí que entra a página 404 – agindo como um reconhecimento educado de que as coisas não estão onde deveriam estar e empurrando os utilizadores de volta ao caminho certo dentro do seu site.

Pode haver muito valor oculto numa página 404 que faz mais do que apenas declarar que algo está em falta, transformando uma mensagem de erro em algo útil e com propósito.

É por isso que compilámos uma lista de excelentes exemplos que mostram o potencial de uma página 404 para acrescentar à experiência do utilizador, em vez de a prejudicar.

O que é uma página 404?

Uma página 404 é uma página de destino que diz aos visitantes do seu Web site que a página que pediram para ver não está disponível ou, em alguns casos, não existe.

Assim, em vez de mostrar a esse utilizador uma página em branco, é mostrada uma página 404 para explicar o que aconteceu.

Idealmente, os utilizadores nunca chegariam a páginas perdidas – mas a realidade é que as ligações antigas podem escapar ou continuar a existir noutros sites, mesmo para aqueles com sites bem mantidos.

Isto pode potencialmente resultar numa má experiência do utilizador no seu sítio Web, com esses utilizadores a abandonarem o seu sítio Web para procurarem o que pretendem noutro sítio.

Isto pode, por sua vez, ter um impacto negativo no tráfego e na classificação do seu sítio Web, se não for tratado corretamente.

Quando é que os utilizadores podem parar em páginas 404?

Há uma série de razões pelas quais uma página 404 pode ser mostrada a um utilizador:

• O servidor está em baixo.
• Uma página foi movida e não foi redireccionada utilizando um redireccionamento 301.
• A página nunca existiu.
• O utilizador digitou mal o URL.
• O URL está quebrado.

Tudo isto pode ocorrer a partir de um ligação interna quebrada no seu sítio Web ou quando um utilizador é redireccionado para uma página do seu sítio a partir de outro local na Internet.

Como há uma grande variedade de razões pelas quais uma página 404 pode ser mostrada a um utilizador, é melhor ter uma página 404 forte que minimize o possível efeito negativo que possa ter sobre ele.

Como é que uma página 404 é uma oportunidade para a marca?

Uma página 404 ainda faz parte de uma experiência do utilizador do seu site e está totalmente sob o seu controlo, apesar do facto de a sua viagem ter tomado um rumo desconhecido.

Isto significa que o conteúdo da sua página 404 pode ser concebido da forma que achar melhor, constituindo uma parte essencial do seu sítio Web, tal como qualquer outra página que precise de conceber para representar a sua marca.

Se os utilizadores sentirem que o seu passo em falso no seu site não foi punido ou ignorado, mas sim devido a um problema previsto, pode ajudar a reter a sua atenção e mantê-los no site.

Ao utilizar uma página 404 como outra oportunidade para os visitantes do site experimentarem a personalidade da sua marca, pode até aproximá-los da sua empresa e transformar uma experiência potencialmente negativa numa experiência positiva.

O que faz uma óptima página 404?

As melhores páginas 404 são aquelas que parecem autênticas, dando uma resposta adequada aos utilizadores que faz com que o seu passo não planeado para fora do seu mapa do site seja considerado.

Melhor ainda, a página 404 pode oferecer opções de páginas alternativas para levar esses utilizadores para outro local dentro de um site, o que pode ajudá-los a encontrar o que precisam.

A utilização plena do tom de voz da sua marca pode transformar a mensagem de erro em algo muito mais amigável e pessoal, o que pode compensar o incómodo da falta de informação.

Pode até ser agradável de formas inesperadas, como com imagens interessantes ou conteúdo de marca que pode parecer conteúdo especial do ovo da Páscoa no seu sítio Web.

40 dos melhores exemplos de páginas 404

1. Marvel

Marvel utiliza a sua extensa lista de personagens de banda desenhada e a popularidade do Universo Cinematográfico Marvel (MCU) para criar páginas 404 únicas e divertidas para o seu sítio Web.

A linha de apoio por baixo da mensagem de erro 404 principal traz uma personagem relevante ou uma linha de enredo sobre itens perdidos, indisponíveis ou roubados, o que acrescenta bastante carácter à página.

Juntamente com uma imagem relevante, transforma uma biografia de personagem ou uma listagem de banda desenhada em falta num erro menos frustrante e mais divertido.

2. Sobrevivência pronta a usar

Trazer referências culturais populares pode ser outra forma de tornar a sua mensagem 404 “Página não encontrada” mais interessante, como este site de sobrevivência fez com uma cena icónica de The Matrix.

Isto faz referência à escolha oferecida por Morpheus no filme entre um comprimido vermelho ou um comprimido azul, fornecendo a Neo as respostas que procura.

Sobrevivência pronta a usar No entanto, a sua escolha é divertida, uma vez que ambas as opções têm um link para a página inicial, para que os utilizadores possam recomeçar a sua viagem e fazer novas escolhas a partir daí.

Desta forma, a mensagem de erro passa a ser uma escolha, oferecendo um caminho a seguir em vez de ser uma página sem saída que pode deixar os utilizadores bloqueados.

3. Kualo

Fornecedor de alojamento web de longa data Kualo transformou a sua página de erro 404 numa oportunidade para os utilizadores se envolverem numa nostalgia interactiva.

Os utilizadores que se deparam com um link quebrado são informados de que os Space Invaders são a causa, e agora é a sua oportunidade de se vingar.

Embora isto possa não fornecer aos utilizadores a informação que procuravam, ao lançar diretamente uma experiência de jogo prática, os utilizadores são mantidos envolvidos num momento inesperado de alegria.

Isto cria mais uma história sobre a razão pela qual os visitantes do sítio Web estão a ver uma mensagem 404, o que está mais de acordo com a personalidade da marca.

Além disso, ainda tem a opção de voltar atrás e retomar o seu percurso de utilizador onde o deixou depois de se ter divertido.

4. Steve Lambert

Dada a natureza inesperada de uma página 404, é uma grande oportunidade para criar um momento memorável no seu sítio Web.

Steve Lambert tem uma abordagem única a esta questão no seu sítio Web pessoal, com o seu título ousado “A página 404 não encontrada mais embaraçosa da Internet”, em que apresenta um vídeo de si próprio a fazer piadas terríveis.

Embora esta seja uma caraterística habitual da maioria dos sítios Web, adequa-se ao estilo de arte experimental de Lambert e ajuda a construir a sua marca pessoal mais.

Ao incorporar completamente a sua marca excêntrica, mesmo na sua página 404, as suas sugestões de que o utilizador cometeu um erro ao aterrar na sua página 404 parecem mais irónicas e parte da experiência do que uma observação acusatória.

5. Mailchimp

Como plataforma de marketing por correio eletrónico, A plataforma Mailchimp centra-se na automatização e em facilitar a vida dos profissionais de marketing.

Por isso, naturalmente, a sua página de erro 404 está dentro da marca e da mensagem para manter as coisas simples. Assume a responsabilidade pela página em falta e sugere que volte à página inicial para encontrar um sítio melhor para onde ir.

No entanto, o trabalho artístico desenhado à mão é o que realmente define o tom, com um burro confuso a espreitar para o vazio – como se estivesse à procura da página em falta – para apoiar a mensagem da página.

A combinação dos dois capta a utilização caraterística da Mailchimp de gráficos divertidos e humor recatado para infundir simplicidade com personalidade, o que, esperamos, convença os utilizadores a carregar no botão proeminente “Mailchimp Home” e a continuar a sua viagem.

6. Lógica da esquerda

O designer Remy Sharp e a equipa da Lógica da esquerda ultrapassa os limites criativos do que é possível fazer com JavaScript, com a sua página 404 a funcionar de uma forma que envolve o utilizador de forma um pouco diferente.

Os visitantes do site que acabam por navegar para a página de erro são tratados com uma tela de pixel-art em branco, onde podem mostrar um pouco de criatividade e desenhar as suas próprias obras-primas, com as submissões de outros utilizadores a serem mostradas à direita para inspiração.

Esta galeria de trabalhos artísticos de outros utilizadores é uma forma dissimulada de mostrar que o utilizador não está sozinho na sua viagem de erro 404 e encoraja subtilmente o envolvimento no exercício antes de regressar à página inicial do site.

7. Magnt

Quando acaba em Página 404 do Magnt, é-lhe dado a conhecer um pouco de humor visual com um design limpo.

Em vez de se limitar a indicar o erro, a marca criou um diagrama de Venn que abrange as duas principais razões pelas quais o utilizador acabou aqui – erro do utilizador ou um problema do sítio Web.

De qualquer forma, ambas resultariam na aterragem nesta mensagem de erro 404 em negrito.

Esta abordagem alegre a uma página 404 dá um toque mais humano ao facto de se ter chegado a um beco sem saída, atenuando a frustração e apresentando a responsabilidade.

Com o Back casa Com um botão de destaque no design, a página fornece um pouco de inteligência antes de incentivar os utilizadores a regressarem ao início da sua viagem.

8. Lego

Como uma das marcas domésticas mais criativas, Lego mantém a leveza com a sua página 404, que brinca com o ligeiro choque de acabar num sítio desconhecido no seu sítio Web.

O texto utiliza uma linguagem mais familiar, com “Oh, tijolos!”, em vez de outros palavrões, e segue com uma menção divertida à possibilidade de voltar a pôr a cabeça no sítio depois do choque de aparecer na página 404.

A imagem de um homem Lego ligeiramente assustado, Emmet, dos populares filmes Lego, funciona em conjunto para criar empatia com a experiência do utilizador e um sentimento mútuo de surpresa.

Isto coloca ambas as partes numa posição semelhante, por isso, quando é gentilmente encorajado a regressar rapidamente à segurança da página inicial, os utilizadores sentem que estão a ajudar-se a si próprios e também ao Emmet.

9. Wendy’s

Quando se pensa em Wendy’s, é provável que pense nos seus hambúrgueres de assinatura – o Baconator ou o Dave’s Double – e na mascote ruiva da marca.

Por isso, para a página 404 da Wendy’s, a empresa criou uma versão com a sua marca do antigo jogo de empilhar hambúrgueres “BurgerTime”, com a própria Wendy.

A página abre com uma mensagem 404 clássica, antes de convidar os utilizadores a tornarem-se jogadores e a mergulharem num rápido momento de diversão.

À medida que os jogadores se desviam dos cachorros-quentes e deixam cair itens de fast food no tabuleiro, podem esquecer as suas frustrações enquanto se deixam encantar pela jogabilidade nostálgica, antes de carregarem novamente no botão de início da sua viagem pelo site.

10. 9GAG

Centro de humor na Internet 9GAG mantém a sua página 404 simples, mas perfeitamente dentro da marca.

Embora o texto seja curto e direto, é a imagem de fundo que é o foco – utilizando uma reviravolta num GIF clássico dos Simpsons para resumir a sensação de ver um erro 404.

Esta empatia com o utilizador é suscetível de o fazer rir e enquadra-se perfeitamente no tom de voz ideal do 9GAG.

Memes funcionam como uma forma de comunicação que pode transformar a frustração em diversão através da partilha de experiências.

O 9GAG também aproveita esta oportunidade para incentivar os utilizadores a utilizarem a sua experiência móvel, para que possa fazer scroll à vontade.

11. Casaco laranja

Uma empresa que se auto-intitula “web design gourmet”, Casaco Laranja quebra o molde e apresenta um fluxograma para a sua página 404 para redirecionar a viagem de um utilizador.

Dirigindo-se ao visitante do sítio Web como um “feliz viajante da Internet”, a Orange Coat convida-o a responder a uma série de perguntas de “sim” ou “não” até chegar à dica certa para reorientar o utilizador.

Em vez de se limitar a oferecer uma única opção de regresso à página inicial, a Orange Coat vê o utilizador mais como um indivíduo, oferecendo-lhe um fluxograma para o guiar na direção da melhor solução para as suas necessidades.

Desta forma, é mais provável que os utilizadores permaneçam no sítio para encontrarem o que pretendem, em vez de clicarem e irem para outro sítio.

12. DashThis

DashThis é especializada em software de relatórios de marketing e, por isso, adaptou a sua página 404 ao lado mais nerd do seu público com uma referência clássica ao Senhor dos Anéis disfarçada de visualização de dados.

Enquanto o gráfico recria a Montanha da Perdição e o Olho de Sauron, o texto apresenta um jogo de palavras (404 = Mordor) para tornar esta página de erro um pouco mais leve.

Mesmo que esta referência passe ao lado da cabeça do utilizador, existem três links logo abaixo para o colocar de novo no caminho certo – enviando-o para a página inicial, para o centro de ajuda ou para uma conversa com a equipa de apoio.

Este é um exemplo fantástico de mistura do objetivo da marca com alguma diversão irreverente e sinalização genuinamente útil para ajudar um utilizador perdido.

13. Ajude o olheiro

Help Scout tem como objetivo oferecer uma plataforma simples, pessoal e poderosa para ajudar nas suas tarefas de marketing – e a sua página 404 não é exceção.

Personificou a sua marca ao trazer Scout, um cãozinho adorável, para o ajudar a encontrar outra opção no seu site para o ajudar, mantendo o texto caloroso e encorajador.

Com várias opções disponíveis para o ajudar, desde saber mais sobre a sua plataforma até ao botão de conversação ainda claramente visível na parte inferior, a marca também envolve os utilizadores pedindo a quem tiver o seu próprio cão chamado Scout que envie uma fotografia.

Embora seja um nicho, é algo que faz com que a marca se sinta mais autêntica e humana – um toque agradável para uma página 404 que, de outra forma, poderia parecer bastante robótica.

14. Associação Mundial de Zoos e Aquários (WAZA)

Por vezes, opte por uma abordagem muito mais divertida e pessoal para suavizar a aterragem numa página 404.

WAZA abandonou a habitual mensagem de erro e, em vez disso, deixou que os seus animais falassem, com um flamboyance de flamingos a gritar sobre a página web em falta.

Esta abordagem mais inovadora visa manter o utilizador envolvido, tirando partido de conteúdos de vídeo relevantes antes de o fazer regressar subtilmente ao sítio para continuar a sua viagem.

Os balões de diálogo que rodeiam os flamingos conduzem-no gradualmente a uma ligação que o leva de volta ao sítio Web principal, dando ao utilizador um pouco de brevidade antes de regressar à página inicial.

15. BluePath

A estratégia e a ciência dos dados podem não ser as coisas mais fáceis de incluir numa página 404, mas BluePath integrou-o na perfeição com um apelo à ação engenhoso incluído.

Brinca-se com a ideia de que uma página 404 é o mesmo que sair do mapa do site, mostrando que você é – de certa forma – um pouco especial para acabar aqui, saindo do caminho batido.

Aqui, a marca mostra a sua proeza em termos de dados com um painel interativo de pontos críticos de criminalidade e um texto um pouco mais arriscado com o trocadilho: “porque é um crime que ainda não nos tenha contratado!”

Esta é uma forma criativa de potencialmente garantir leads através de uma curva errada no seu site e joga com a personalidade da marca BluePath.

16. Spotify

Como um dos principais intervenientes no sector do streaming de música, Spotify tem uma reputação a defender com a sua página de erro 404 para a manter em linha com o resto da sua marca.

Quando uma faixa de um utilizador através do site Spotify tem um momento de record-scratch, é recebido por imagens de um gira-discos a parar enquanto a cópia reproduz uma referência antiga de Kayne – 808s & Heartbreak é o título do seu quarto álbum.

No entanto, a festa não fica por aqui, já que o Spotify assinala as suas páginas de FAQs e da Comunidade como espaços alternativos para os utilizadores reencontrarem o seu ritmo.

Se nenhuma destas páginas for adequada para o utilizador, este também pode voltar atrás e reproduzir a página anterior em que se encontrava, para que possa escolher um link diferente para seguir.

17. Myriad

Myriad é uma agência de produção de vídeo experiente que opera a partir da Carolina do Norte, com uma página 404 que se inclina diretamente para as suas raízes analógicas.

Quando os visitantes do site se ligam a uma página que não existe, vêem um padrão clássico de teste de barras de cor SMPTE e “OOPS NO SIGNAL!” a aparecer no ecrã, numa homenagem às emissões da era da televisão CRT.

Trata-se de uma homenagem às dificuldades técnicas que por vezes se verificavam nas transmissões, agora adaptadas a uma questão mais moderna que está completamente dentro da marca Myriad.

A mensagem 404 está bem integrada de uma forma que parece fazer parte do design, com um CTA na parte inferior para devolver os espectadores ao serviço normal na página inicial.

18. Feto

Fern’s como estúdio de design e animação significa que as pessoas provavelmente esperam experiências excepcionais no seu sítio Web, e a sua página 404 não fica aquém.

O texto em movimento proporciona um movimento apelativo, enquanto os visuais ilustrados e um momento meme de Clay Davis do The Wire ajudam a transmitir a voz e a estética divertidas da marca Fern.

Uma vez que um erro 404 é normalmente muito raro, isto parece uma espreitadela por detrás da cortina à criatividade e ao tom de voz não filtrados da Fern, seleccionando elementos de diversão de uma experiência indesejável.

Para completar, há duas linhas rápidas de texto que rapidamente levam as pessoas de volta ao sítio principal para que possam descobrir o meu conteúdo lúdico tal como este.

19. Disney

Uma empresa com personagens instantaneamente reconhecíveis é a Disney, com o seu enorme catálogo de filmes de animação para tornar o seu sítio Web mais vibrante e interessante.

Para a sua página 404, a Disney traz o personagem principal de Monsters Inc., Mike, para criar um pouco de empatia e partilhar o choque do utilizador ao descobrir uma página em falta.

A cópia é direta e faz referência a um ponto importante do filme – as portas usadas para assustar – o que é um bom presente para os fãs da Disney que estão a par do assunto.

Em seguida, volta a trazer os utilizadores de volta à página inicial para que possam explorar outros elementos e possivelmente conhecer outras personagens favoritas dos fãs no site.

20. Figma

À primeira vista, O 404 da Figma parece enganadoramente simples – apenas texto Helvetica preto num fundo branco que transmite sucintamente o erro.

No entanto, os pequenos pontos azuis na numeração 404 convidam os utilizadores a mexer na forma destes números.

Esta interatividade subtil desempenha algumas funções – mostra a facilidade das funcionalidades do Figma, permite que os utilizadores descarreguem um pouco de frustração distorcendo os números e mantém o design limpo. Assim, é evidente que o botão home colorido é a melhor opção a escolher.

21. Bebidas inocentes

Toda a gente comete erros. É algo que todos temos de assumir ocasionalmente, e uma página 404 parece ser um bom sítio para assumir a responsabilidade pelos seus erros.

É exatamente isso que Bebidas inocentes fez com a sua página 404, dando rapidamente os parabéns ao utilizador por ter encontrado a página – e depois assumindo a responsabilidade pelo erro.

Em seguida, dobra com algum conteúdo divertido e leve que leva os espectadores do site a uma pequena excursão pelos erros anteriores da marca.

Ao fazer isto, cria um momento de ligação com o utilizador e a página 404 deixa de parecer uma experiência negativa.

Além disso, a barra de menu vermelha e arrojada segue responsivamente a deslocação do utilizador pela página, pronta a levá-lo para outra parte do site assim que tiver acabado de apreciar os pequenos erros anteriores do Innocent.

22. Gymbox

Por vezes, quer transmitir aos utilizadores que a página 404 é definitivamente o sítio errado e levá-los rapidamente para outro sítio.

A Gymbox, uma cadeia de ginásios sediada em Londres, pegou nesta ideia e levou-a para a frente.

A sua mensagem de erro 404 vai mais longe do que outras, informando os utilizadores de que estão “no sítio errado”, enquanto um GIF de John Travolta, do filme “Perfect”, a gingar numa aula de ginástica, é reproduzido em segundo plano.

Este parece ser um instrumento tanto para a comédia de choque como para um ligeiro desconforto, redireccionando estrategicamente os utilizadores para qualquer outro lugar no sítio Web, com a barra de navegação a destacar-se claramente no topo da página – longe do conteúdo do GIF.

23. Jamba Juice

Marca popular de sumos Jamba Juice adoptou uma abordagem de melhores práticas para a sua página 404, mantendo as coisas directas com apenas um toque de marca para fazer com que a página se sinta em casa no seu site.

A mensagem do meio fornece a informação-chave de uma forma mais orientada para a Jamba, enquanto o texto acima fornece uma descrição mais objetiva do que significa, e as imagens ao lado reforçam este ponto.

Por baixo, a Jamba forneceu uma mistura de opções que deve cobrir a maioria das necessidades dos utilizadores: uma ligação para a página inicial, uma opção de menu e “encontre a sua Jamba”, para que possa descobrir o local Jamba mais próximo para tomar o seu próximo sumo.

Embora esta página não faça nada de extravagante ou inesperado, proporciona uma experiência de utilizador fundamental para garantir que a empresa fez tudo o que podia para responder às necessidades do utilizador antes de este clicar.

24. Kinsta

Site de alojamento WordPress baseado na nuvem Kinsta adopta uma abordagem função-sobre-forma para a sua página 404, dando prioridade à utilidade em detrimento de visuais vistosos ou factores de novidade.

Os visitantes do Web site que aterrarem aqui serão recebidos por uma cópia prática que explica porque é que acabaram aqui e oferece algumas ligações para os levar de volta ao sítio onde poderiam querer estar.

O que é ainda melhor é que, por baixo desta mensagem, há um conjunto de recursos publicados recentemente que podem ser de interesse para o utilizador, dando-lhe uma série de pontos de partida para voltar ao sítio Web e encontrar conteúdo valioso noutro local.

25. Carwow

Criar uma página 404 interactiva pode ser complicado em termos de mantê-la relevante para a sua oferta de produtos.

CarWow conseguiu implementar isto na perfeição com um jogo de corridas simples e cativante com um nível de dificuldade crescente.

Quando (inevitavelmente) se despista e se incendeia, o jogo dá-lhe instruções para encontrar um carro novo na vida real para substituir o seu carro fictício que acabou de arder.

Além disso, para aqueles que não estão particularmente interessados em estabelecer uma nova pontuação alta, há um texto muito claro por baixo com ligações tanto para o Car Chooser como para a página inicial, para responder a algumas necessidades claras do utilizador e levá-lo de volta ao seu caminho através do site.

26. Estúdio Wayside

Wayside é uma prática inovadora de design e investigação que tenta fazer as coisas de forma um pouco diferente para reforçar a relação entre as pessoas e as suas comunidades.

A forma como a marca faz as coisas é um pouco fora do normal, mas não só por isso – e o mesmo se aplica à sua página 404.

Ao aterrar, a sua declaração de cor verde está em plena exibição com um texto claro de mensagem de erro – mas a grande diferença é o cursor do seu rato. Um robô triste segue perfeitamente os seus movimentos pela página, indicando que esta página é um beco sem saída.

Isto reforça a mensagem de erro muito clara no ecrã, sendo que o robô só o deixa em paz quando regressa à barra de navegação para escolher outra opção.

27. Pierre-Louis

Pierre-Louis Labonne é um freelancer criativo encantador com um sítio Web que mostra realmente as suas capacidades com uma gama de gadgets e widgets digitais brilhantemente concebidos.

A sua página 404 não é exceção, com uma máquina digital que aparece para lhe dizer: “Oops, a página que procura não foi encontrada”. Embora, à primeira vista, esta pareça uma mensagem bastante normal, a manivela que se encontra por baixo incentiva os utilizadores a ir mais longe.

Ao rodá-la, o texto move-se e é deslocado por duas peças de puzzle que se juntam para ler “404”.

É um pacote com uma marca holística, em que até a mensagem de erro é personalizada para a Labonne, com um botão grande e arrojado “Go Home” no topo para que possa regressar a um terreno familiar.

28. Red Bull

Alta energia e conteúdos visualmente impressionantes compõem Red Bull’s quando se trata da sua marca.

Desde a sua publicidade aos seus eventos regulares de alta octanagem, o sítio Web da Red Bull nunca deixa de ter elementos interessantes com que se envolver. Assim, para a sua página 404, a Red Bull aproveita esta riqueza de elementos fascinantes conteúdo de marca e coloca-o na frente e no centro.

Desta forma, os utilizadores que acabam aqui são claramente informados de que a página está em falta, ao mesmo tempo que lhes é apresentado um vídeo bem editado do seu evento mais recente para prender a sua atenção.

Se os visitantes do sítio Web gostarem deste vídeo, poderão estar inclinados a clicar no botão Dê-me mais! que o leva até à página Discover da Red Bull para recomeçar a sua viagem com energia renovada.

29. Tumblr

Tumblr passou por muitas iterações ao longo de quase duas décadas na Internet, sendo a sua página 404 um excelente exemplo de como manter as pessoas interessadas e satisfazer as suas necessidades num só golpe.

Se os utilizadores conseguirem chegar à página 404, são brindados com um clip de fundo psicadélico selecionado aleatoriamente, enquanto o texto fornece um fragmento lúdico de personalidade.

Ao mesmo tempo que informa os visitantes do sítio Web de que não existe nada aqui, brinca com as convenções para felicitar aqueles que procuram a página de erro.

Além disso, ao fim de três a quatro segundos, a página 404 redirecciona automaticamente os utilizadores para a sua página de tendências, para que possam continuar a sua viagem após uma breve pausa no vazio 404 sem terem de mexer um dedo.

30. Investidores

Há muitas razões pelas quais uma página 404 pode aparecer para um utilizador, mas pode ser complicado explicar ou cobrir todas as bases com uma única página.

Por isso, por vezes é mais fácil recorrer a desculpas comprovadas – como a Investidores clássico, “O cão comeu a nossa página”.

É uma abordagem muito irónica, com uma imagem engraçada de um cão a segurar uma página do sítio Web, e encoraja um certo nível de perdão.

Este toque de personalidade e humor torna mais simples um elemento algo técnico da gestão de sítios Web, ao omitir o jargão sobre a causa do erro 404 e, em vez disso, oferecer simplesmente uma desculpa tola.

O que ajuda a unir tudo isto é a barra de pesquisa que se encontra por baixo, para ajudar os visitantes do sítio Web a voltarem ao sítio onde queriam estar, apenas com uma breve interrupção.

31. Perigo crítico

Como uma organização sem fins lucrativos que une designers para apoiar instituições de caridade para animais selvagens em perigo, Perigo Crítico é muito orientado para um objetivo e relativamente sério na sua narrativa.

Devido ao facto de o seu conteúdo principal ter uma perspetiva mais editorial e ponderada, a sua página 404 é cortada utilizando apenas três letras – “Huh?”

A página mantém a temática vermelho-sobre-vermelho para continuar a transmitir a sensação de perigo e urgência, mas procura imediatamente levar as pessoas de volta ao início da narrativa utilizando o texto por baixo ou reorientando-as com os links no canto superior esquerdo.

Apesar de não ser uma página 404 clara à primeira vista, desempenha a sua função com elegância e capta a atenção do utilizador com uma abordagem sem sentido.

32. Superlista

Superlist é outra marca que utiliza plenamente o conteúdo GIF para transmitir os sentimentos associados a uma página 404.

Facilitada por uma integração com o Giphy, a página roda através de uma lista predefinida de GIFs – desde Moss em The IT Crowd a um ciclista de terra a bater na terra – para transmitir a sensação de que as coisas estão a correr um pouco mal.

Isto mantém o conteúdo atualizado e, ao mesmo tempo, estabelece limitações quanto aos GIFs que podem aparecer na página, para o caso de um utilizador ir parar à página 404 repetidamente.

Ao fazê-lo, a página goza com a Superlist por ter um problema e incentiva os utilizadores a verem o lado mais leve.

E assim que o utilizador se divertir um pouco, pode carregar no botão no centro do ecrã para voltar à página inicial e retomar a sua viagem.

33. Mundo Mágico

É provável que, se estiver a pesquisar no Mundo Mágico está bastante familiarizado com Harry Potter e os seus momentos icónicos.

O site conhece claramente o seu público, pois evoca um momento-chave de A Câmara dos Segredos para refletir um erro na sua página 404.

Harry pronuncia mal o seu destino enquanto usa o Pó de Floo – uma substância usada para teletransportar feiticeiros e bruxas para longas distâncias. Por isso, faz sentido que o Mundo Mágico utilize este momento quando os seus utilizadores aparecem num local inesperado.

Canalizar momentos como este do material de origem pode parecer um ovo da Páscoa para os utilizadores, dando-lhes um momento surpreendente de prazer que os aproxima um pouco mais da marca.

34. Thomas Bosc

Para um portefólio pessoal, é importante transmitir rapidamente os seus conhecimentos e a sua personalidade, de modo a causar impacto.

Thomas Bosc, um talentoso programador e designer da Web, apresenta ambos na sua página de erro 404, começando com uma fotografia do seu eu mais jovem num fato de mágico, misteriosamente sentado no centro da página.

Como é o único recurso interativo, você é naturalmente atraído a clicar nele.

Quando o faz, ele pega na sua vassoura e sai para se agarrar ao seu cursor, deixando apenas uma mensagem “404” no seu rasto. É um pouco de magia que mostra as habilidades e travessuras de Thomas, que certamente se destacará dos outros no seu sector.

35. Dribbble

Ser o centro de inspiração criativa que é, Driblar aproveita a oportunidade apresentada por um erro 404 e transforma-a em mais uma forma de um utilizador encontrar o conteúdo que poderia estar à procura.

Quando os visitantes do site chegam aqui, é-lhes apresentada a típica mensagem de erro – juntamente com uma ferramenta para encontrar mais inspiração que corresponda a um determinado código hexadecimal de cor.

Isto funciona de forma semelhante ao filtro de cores na sua página de inspiração principal, mas com um foco mais visual. Os utilizadores podem alterar a cor do texto 404 utilizando o cursor abaixo, que depois gera trabalhos correspondentes nos quais pode clicar para saber mais.

Assim, de certa forma, a página 404 do Dribbble continua a ser uma parte útil do percurso do utilizador, mesmo que este acabe por lá chegar por acidente.

36. Ecosia

Ecosia é mais conhecido como um motor de busca amigo do ambienteconcentrando os seus esforços na inversão da desflorestação e na manutenção de operações com emissões negativas de CO₂.

Com um compromisso tão grande com o ar livre e o nosso planeta, faz sentido que a página 404 da Ecosia também se concentre nos seus esforços de plantação de árvores.

Se os utilizadores conseguirem chegar à página 404, são brindados com uma bela imagem de uma floresta tropical com vista para um rio com a mensagem “Lost in the woods? – A mensagem “Perdido na floresta?” brinca com o objetivo da marca de uma forma que lhe parece autêntica.

Desta forma, a sua página 404 está ligada à marca Ecosia em geral e parece mais uma experiência considerada para qualquer pessoa que se encontre aqui.

37. Discórdia

A página do Discord O grande foco do Discord é a comunidade, reunindo amigos e grupos maiores online que jogam ou conversam entre si.

Este sentimento de pertença e ligação flui através da experiência mais alargada do sítio Web do Discord, sendo a sua página 404 mais um exemplo encantador de como colocar a sua marca na frente e no centro.

A página 404 do Discord é semelhante à descoberta de um fornecedor secreto de comida no estrangeiro, com um texto que faz lembrar esta experiência.

Embora calorosa e convidativa, leva-o a alguns links úteis disfarçados de “material de leitura” para desfrutar enquanto come uma tigela de macarrão digital.

Este capricho irreverente faz com que a página de erro pareça menos um erro e mais uma área secreta que o utilizador descobriu, que ainda serve para responder às necessidades do utilizador com links sinalizados.

38. Copywriting casual para empresas

Joel Klettke, copywriter de conversão baseado em Calgary, acha que as palavras são aborrecidas – mas o texto pode ser ótimo.

Um escritor com uma imaginação clara e criativa, Joel transformou a sua página 404 em algo mais parecido com uma aventura ao estilo de Madlibs.

Até elimina o código 404 e refere-se simplesmente a ela como uma página morta – daí o estilo zombificado do conteúdo.

Ao preencher alguns campos em branco, os utilizadores são tratados com conteúdo personalizado sob a forma de um conto zombie, que gira em torno da ideia de 404 páginas – com uma reviravolta de um final para completar tudo.

Apesar de a página em si não ser um incentivo explícito para que os visitantes regressem à página inicial, mostra alguns dos talentos de Joel e, possivelmente, encoraja-os a passar para outras áreas do seu site.

39. Gamespot

Gamespot tem sido um tema quente desde há alguns anos, depois de se ter tornado uma sensação no mercado bolsista, e a sua página 404 é mais uma razão para se falar dela.

Sendo um negócio centrado em jogos, faz sentido que o seu erro 404 esteja centrado num minijogo para os utilizadores mergulharem.

Com uma masmorra gerada aleatoriamente, os utilizadores tornam-se jogadores que exploram uma masmorra sem fim, cheia de tesouros interessantes para descobrir.

Depois de os visitantes do sítio Web se terem saciado, as ligações para outras partes do sítio Web da Gamestop estão claramente marcadas a vermelho para ajudar os utilizadores aventureiros a encontrar o caminho para aquilo que realmente procuravam antes de tropeçarem na masmorra 404.

40. The-Artery

The-Artery leva a sua criatividade a sério, tendo produzido alguns visuais fantásticos para marcas, bem como para televisão e cinema. O seu sítio Web está repleto de designs 2D e 3D deslumbrantes, entrelaçando a sua experiência em todos os aspectos do conteúdo do sítio sem ser demasiado evidente.

Na sua página de erro 404, várias imagens das páginas principais são reunidas para dar aos utilizadores que desapareceram no vazio uma amostra dos talentos da The-Artery, na esperança de os atrair de volta à página inicial.

A cópia até enquadra isto quase como o ato de uma figura carinhosa a guiar um utilizador perdido de volta a casa em segurança, para que os utilizadores estejam menos inclinados a entrar em pânico e a sair.

Resumo

Há mais do que uma forma de criar uma página 404, e cada uma desta lista desempenha uma função que lhe parece correcta para a marca.

Melhor ainda, cada página parece ter sido considerada como parte de uma viagem mais ampla do utilizador e elaborada de forma a responder às diferentes necessidades do utilizador, de modo a mantê-lo no site.

Também pode ver tendências comuns nos elementos de várias páginas 404:

• Sinalização de ligações claras para outras áreas úteis do sítio Web.
• Utilizar o humor para entreter os utilizadores de modo a ultrapassar frustrações momentâneas.
• Colocar elementos de marca na página para que se sinta como parte da experiência principal.
• Adicionar elementos interactivos para que os utilizadores se envolvam de formas inovadoras.
• Manter o texto caloroso e amigável para que os utilizadores não entrem em pânico por terem cometido um erro.
• Acrescentar mensagens que simpatizem com a experiência do utilizador, como a surpresa.

Ao criar a sua própria página 404 com base em alguns destes pontos-chave, pode ajudar a garantir que os utilizadores têm uma excelente experiência no seu Web site, mesmo que acabem num local onde não deveriam estar.

Mais recursos:

---

Imagem em destaque: tanahairstudio/Shutterstock