40 pages d'erreur intelligentes 404 provenant de vrais sites Web

Gérer un site Web réussi signifie rester attentif aux erreurs telles que les pages cassées ou les performances lentes. Cependant, il y a parfois des problèmes que vous ne pouvez tout simplement pas éviter, et les erreurs 404 en font partie.

Un 404 se produit lorsqu'un utilisateur demande une page de votre site Web qui n'existe pas, générant ainsi une page d'erreur 404 invitant les utilisateurs à revenir au bon endroit. Peu importe le nombre de ressources que vous mettez pour vous assurer que votre site Web ne tombe jamais en panne… il y a toujours une chance que des utilisateurs se retrouvent ici.

C'est gênant, mais c'est une réalité. Et la réaction des visiteurs lorsqu'ils atterrissent sur une page inexistante peut aller de "prendre le pas" à "perdre totalement la tête".

Bien que vous ne puissiez rien faire à propos de ce dernier, vous pouvez rendre les choses un peu moins pénibles en affichant un message d'erreur 404 créatif. Cela peut faire des merveilles pour faire sourire les visiteurs de votre site Web dans une situation autrement frustrante.

Pour faire avancer la conception de votre site Web, cet article présentera certaines de nos pages d'erreur de site Web préférées. J'espère que vous pourrez emporter quelques idées pour créer votre propre message 404.

Qu'est-ce qu'une erreur 404 ?

Une erreur 404 est un code de message d'erreur HTTP standard qui signifie que le site Web que vous essayez d'atteindre est introuvable sur le serveur. Il s'agit d'une erreur côté client, ce qui signifie que la page Web a été supprimée ou déplacée et que l'URL n'a pas été modifiée en conséquence, ou que la personne a simplement saisi l'URL de manière incorrecte.

Dans la plupart des cas, vous pouvez configurer votre serveur pour créer une page d'erreur 404 personnalisée. (Si vous êtes un client HubSpot, cliquez ici pour savoir comment personnaliser votre page 404 dans HubSpot.)

Certaines pages d'erreur 404 personnalisées incluent une image de héros, une description pleine d'esprit, un plan du site, un formulaire de recherche ou des informations de contact de base.

Les meilleurs exemples de pages Web 404

Au fil des ans, les sites Web ont trouvé différentes façons d'informer les visiteurs d'une erreur 404 et de les renvoyer au bon endroit, certains simplement, d'autres de manière créative et d'autres de manière hilarante. Commençons par regarder quelques pages 404 créatives, puis regardons quelques exemples amusants qui raviront à coup sûr tous ceux qui les rencontreront.

Page introuvable : pages d'erreur 404 de la création

1. Le maïs soufflé

Alors qu'une page 404 peut facilement ressortir d'un site Web, la page d'erreur de Pipcorn s'aligne parfaitement avec le reste de la marque du site. Il y a un joli arrière-plan animé, une invite de texte conviviale invitant les visiteurs à rechercher le site Web (avec un jeu de mots intelligent) et un morceau de pop-corn utilisé comme "0" dans "404".

2. Spotify

Le géant du streaming musical Spotify a couvert ses bases avec une page 404 astucieuse. Avec un jeu de mots plein d'esprit sur l'album "808s and Heartbreak" de Kanye West et une animation de disque, le site Web divertit brièvement puis renvoie les visiteurs à la page d'où ils viennent.

3. Génialement

Un moyen simple d'atténuer la tension sur votre page 404 est d'ajouter un rapide "Oups!" message - cela aide votre site à se sentir plus personnalisé en guidant les utilisateurs vers le bon endroit. Dans le cas du site de Genially, la page comprend également une illustration astucieuse associée à une copie ludique.

4. Adobe

Comme vous vous en doutez, la page d'erreur 404 d'Adobe est à la fois utile et visuellement agréable. Il répertorie les liens populaires que les visiteurs pourraient souhaiter, ainsi que des illustrations numériques intéressantes servant de métaphore visuelle pour une page cassée ou perdue. Honnêtement, les sites Web devraient utiliser plus souvent des métaphores visuelles.

5. Clorox

La page 404 des produits de nettoyage Clorox tourne entre trois photos légères pour signaler aux visiteurs qu'ils ont fait un faux pas. C'est une utilisation intelligente de la marque pour ajouter un bref moment de plaisir tout en aidant les utilisateurs perdus.

6. Collectif Douma

D'autres fois, vous n'aurez peut-être pas besoin d'un texte de présentation plein d'esprit - dites simplement aux visiteurs qu'il n'y a pas de page à l'adresse et laissez-les passer à autre chose. C'est exactement ce que fait l'agence de conseil en divertissement Duma Collective avec sa page d'erreur, bien qu'elle soit complétée par une image d'arrière-plan pour un peu de flair.

7. Chillhouse

En parlant de flair, la marque de soins personnels Chillhouse a fait le travail supplémentaire pour rediriger ses visiteurs avec style. La page 404 est marquée de manière appropriée et emmène même les visiteurs dans un petit voyage à travers quelques images fixes avant de revenir à la page d'accueil.

8. Bitly

Si vous entrez un lien Bitly incorrect, vous serez redirigé vers la page 404 de Bitly. Nous supposons que cela se produit assez souvent, c'est pourquoi la page 404 va droit au but. Il explique ce qui a pu mal tourner et invite les utilisateurs à visiter la page d'accueil de Bitly si c'est ce qu'ils recherchent.

9. Ikéa

La page 404 d'Ikea ​​​​est également minimaliste, mais parvient toujours à y intégrer une marque intelligente. Cet exemple montre que vos pages d'erreur n'ont pas besoin d'être élaborées pour faire passer le message, mais il n'y a rien de mal non plus à injecter du plaisir.

10. Moxie Design Co.

Bien sûr, "faire exploser Internet" est peut-être un peu hyperbolique, mais cela indique aux visiteurs que Moxie Design Co. ne se prend pas trop au sérieux avec de petites erreurs comme celle-ci. De plus, une barre de recherche est idéalement placée en bas pour vous envoyer sur votre chemin.

11. McKissack & McKissack

Ah, le truc classique "nous avons perdu la page". Encore une fois, un moyen facile de présenter un 404 sans aliéner votre public. Si vous êtes une agence comme McKissack & McKissack qui gère de nombreuses interactions avec les clients, une copie claire et concise est essentielle pour toutes les pages de votre site, y compris les pages d'erreur.

12. Astuces CSS

Avez-vous déjà arraché l'emballage d'un site Web pour voir ce qu'il y a en dessous ? C'est le concept que CSS Tricks recherchait dans sa page d'erreur 404. C'est à la fois plein d'esprit et rappelle ce qu'est le site Web : une utilisation intelligente du style de page.

13. Bon vieux jeux

Pour d'autres sites Web, vous déballez le front-end et il n'y a… que le vaste vide de l'espace. Cette page est une référence intelligente à GOG Galaxy, qui est le client de jeu vidéo natif de Good Old Games. Heureusement, un petit personnage de jeu vidéo est là pour donner aux visiteurs un endroit où signaler une erreur s'ils le souhaitent.

14. Toile

Pour quelque chose d'un peu différent, consultez la page 404 de Canva. Il comprend non seulement un message d'erreur, mais aussi un astucieux puzzle de tuiles que les visiteurs peuvent jouer pour un bref divertissement. Il n'y a pas de mal à laisser vos visiteurs se détendre pendant quelques minutes, n'est-ce pas ?

15. Innotech

Semblable à l'approche de Canva, Innotech propose un jeu Pong-esque sur sa page 404 pour fournir un bref divertissement. Il y a de fortes chances que vous vous souveniez d'un site Web comme celui-ci. De plus, le détour amusant complète un site Web vraiment impressionnant - sérieusement, lorsque vous avez fini de jouer, rendez-vous sur la page d'accueil et profitez-en.

16. Myriade

L'agence vidéo Myriad a opté pour une conception de page 404 originale et sur la marque qui imite les barres de couleurs SMPTE classiques qui apparaissent sur les anciennes cassettes et téléviseurs. C'est un drôle de retour aux technologies plus anciennes tout en représentant le problème plus moderne d'une page Web inexistante.

17. KonMari

Connue pour ses méthodes et sa marque de nettoyage et d'organisation populaires, Marie Kondo a apporté une sensation similaire à la page 404 de son site Web. La copie rappelle brièvement et avec humour sa philosophie de rangement – ​​un détail petit mais bien marqué que les fans reconnaîtront.

18. MarqueCrowd

Non seulement l'illustration de cette page d'erreur est détaillée et attrayante, mais la copie est également intelligente. Nous adorons la référence à la chanson Semisonic "Closing Time": "Vous pouvez cliquer n'importe où ailleurs, mais vous ne pouvez pas cliquer ici."

19. Productions de points chauds

La page d'erreur de Hot Dot reste fidèle à son slogan, "l'intersection des nouvelles technologies et du design". La page est animée par des centaines de petits points qui changent de direction en fonction de l'endroit où vous déplacez votre curseur. C'est fascinant et une excellente vitrine des capacités de conception de l'agence.

20. Manteau orange

Si vous allez donner un message d'erreur, pourquoi ne pas divertir l'utilisateur pendant quelques secondes pendant que vous l'aidez ? Après une salutation amicale, OrangeCoat propose un organigramme qui aide réellement les utilisateurs à comprendre pourquoi ils ont atteint une page d'erreur en premier lieu.

21. Ervin et Smith

Cette page 404 fait plus que rediriger les utilisateurs vers des pages actives. Au lieu de cela, la page 404 d'Ervin & Smith vous invite à faire défiler vers le bas et à découvrir pourquoi vous avez besoin d'une agence de marketing numérique, et pourquoi choisir Ervin & Smith en particulier, complétée par un formulaire de contact. Fidèle à sa mission, cette agence montre que n'importe quelle page peut être une opportunité de conversion.

22. Studios DayCloud

… ou, votre 404 peut simplement être un endroit où perdre du temps pendant une minute, comme on peut le voir sur le site Web de DayCloud Studios. Déplacer le curseur sur l'écran révèle un message 404 éclairé par des lasers tirant des yeux d'un chat. Parce que pourquoi pas ?

23. Espace de tête

Un autre exemple d'un site Web incorporant intelligemment sa messagerie de marque dans une page 404 - l'application de méditation guidée Headspace fait l'effort de calmer les utilisateurs, nous encourageant à prendre une profonde respiration, puis à revenir au site principal.

24. Boulangerie Wildwood

Jusqu'à présent, certains sites Web ont intégré une copie de marque intelligente dans leurs pages, tandis que d'autres ont hébergé des jeux en ligne à part entière sur les leurs. Mais, il n'y a rien de mal à une brève poussée dans la bonne direction. Le site exquis de Wildwood Bakery garde les choses courtes et douces (littéralement).

Page introuvable : pages d'erreur 404 amusantes

25. Astuteo

La page 404 de l'agence de design Astuteo est un équilibre parfait entre visuels élégants, humour et serviabilité. La mise en page minimale donne aux utilisateurs les informations dont ils ont besoin aux côtés d'une autre métaphore visuelle amusante, un cargo qui coule et une silhouette en fuite.

26. Lego

Il y a peu de mots nécessaires sur la page d'erreur 404 de LEGO - l'expression du personnage rend tout clair. De plus, les fans de la franchise de films LEGO apprécieront la référence amusante dans la copie.

27. Magnétique

Dans ce message d'erreur amusant, Magnt se moque du fait que, oui, ils auraient pu casser quelque chose - ou, vous ne pouvez tout simplement pas taper. Le visuel sert de moyen rapide pour illustrer rapidement leur propos.

28. Recherche d'icônes

La page d'erreur d'IconFinder est simple mais délicieuse. La mascotte de l'entreprise vêtue d'une robe et paraissant fatiguée est un clin d'œil aux visiteurs perdus. Pas de soucis cependant, puisque le site répertorie certains de ses liens à visiter ci-dessous.

29. Fais de beaux rêves

Apparemment, l'équipe de la société d'aide au sommeil Sweet Dreams a pris trop de ses produits selon la page 404 du site Web. Non seulement cette page est humoristique, mais elle se marie également bien avec le reste de l'esthétique et de la messagerie frontales du site pour une sensation de cohésion.

30. Git Hub

La ligne "Ce ne sont pas les droïdes que vous recherchez" fait référence au tour d'esprit Jedi d'Obi-Wan Kenobi sur Stormtroopers dans Star Wars Episode IV , et c'est devenu une phrase bien connue utilisée pour dire à quelqu'un qu'il poursuit le mal cours d'action. GitHub joue sur cette fameuse ligne dans leur message d'erreur 404.

31. Patagonie

La page 404 personnalisée de Patagonia capture parfaitement l'ambiance de la marque, avec une vidéo boomerang d'un twirler de frisbee, un jeu de mots astucieux combinant "404" et "aloha" et des liens vers ses pages de produits. C'est une façon amicale et amusante de saluer les visiteurs qui se sont retrouvés au mauvais endroit.

32. Nuage Sigma

Vérifiez-le: Cloud Sigma nous laisse entrer dans une action en coulisses. Leur page d'erreur 404 prétend être la «page d'accueil d'un développeur junior» – ce développeur junior étant, eh bien, un chat.

33. Théâtres AMC

Vous avez peut-être déjà été dans une salle de cinéma AMC, mais vous n'avez, espérons-le, jamais vu la page 404 de leur site Web. Le site Web utilise un one-liner rapide, amusant et pertinent avant de vous renvoyer au bon endroit.

34. Bruno

Ce n'est pas un hasard si les agences de création sont douées pour créer des pages 404 sympas. En voici un autre des créatifs de Bruno qui joue sur le classique de la comédie culte de 2000 Dude, Where's My Car? Non, cela n'a rien à voir avec l'entreprise ou le site Web, mais il est sûr de faire rire.

35. RNP

Au début, la page d'erreur de NPR ne semble rien de spécial. Mais continuez à lire et vous verrez comment ils se lient intelligemment à certaines de leurs grandes histoires sur des personnes, des lieux et des choses perdus, comme un article sur Amelia Earhart et un sur Waldo. Cela pourrait simplement faire en sorte que les utilisateurs perdus se sentent un peu moins seuls.

36. Moyen

Medium adopte une approche similaire à la page 404 de NPR, recommandant des articles sur la perte et la perte de choses. Consultez ces articles si vous avez le temps – ce sont de très bonnes lectures.

37. HomeStarRunner

HomeStarRunner.com, qui abrite une série de dessins animés animés par Flash, a eu une série de pages d'erreur 404 hilarantes au fil des ans. Le plus récent présente des personnages de la série de dessins animés dans une scène qui aurait pu sortir tout droit d'un de leurs épisodes. Si vous activez le son lorsque vous chargez la page, vous entendrez leur personnage Strong Bad - connu pour crier des phrases à haute voix - disant "404'd!"

38. Divertissement Blizzard

Voici une idée simple qui finit par avoir l'air astucieuse : la page 404 de Blizzard Entertainment présente un personnage animé perdu dans un véritable blizzard et un peu d'humour que les fans de World of Warcraft apprécieront.

39. Bonjour grande idée

Un rapide tour d'horizon des experts en marketing et en médias sociaux Le site Web de Hello Big Idea vous dira ce que vous devez savoir sur son style de copie audacieux et direct. Et, bien sûr, sa page d'erreur 404 ne fait pas exception.

40. HubSpot

Ça nous arrive aussi ! C'est le message que nous mettons en place pour informer les visiteurs de notre site qu'il y a des problèmes de site Web. Notre objectif était de rester fidèle à la voix de la marque HubSpot en étant aussi aimable, empathique et serviable que possible.

Transformez une page d'erreur 404 en un moment de délice

Personne ne veut atterrir sur une page 404 - ils sont ennuyeux et inattendus. Cependant, vous ne pouvez pas vraiment les éviter, c'est donc toujours une bonne idée d'avoir une page 404 sur laquelle se rabattre pour votre site Web.

Et, du point de vue de l'expérience utilisateur, votre page 404 devrait être un petit ralentisseur, pas un mur de briques. Le bon design peut faire la différence entre un rebond frustré et une éventuelle conversion, alors pourquoi ne pas le rendre amusant ?

Note de l'éditeur : cet article a été initialement publié en décembre 2015 et a été mis à jour pour plus d'exhaustivité.