Erreur 404 : 28 exemples de pages originales

Sur Graphiste.com, recevez rapidement des devis pour réaliser votre projet Webdesign. Trouver un webdesigner disponible

Je suis certaine qu’il vous est déjà arrivé de naviguer sur Internet et de tomber sur une page « erreur 404 ». Hé oui ! La page n’existe pas ou plus, et c’est l’une des erreurs les plus fréquentes sur Internet.

Que les internautes y arrivent via un lien extérieur menant vers une page qui a changé de nom, ou par un lien brisé à l’intérieur de votre site, vous devez à la fois leur indiquer où ils sont, conserver leur attention et les orienter vers une autre page.

Alors si cela devait arriver à un internaute sur votre site, pourquoi ne pas rendre cette page plus attractive ? Vous pouvez en profiter pour leur faire passer un message, valoriser une image, faire de l’humour, voire même garder contact avec eux. Après tout, vous n’avez rien à perdre, mais plutôt tout à y gagner !

Je vous laisse à présent profiter de cette sélection d’astuces et pages « erreur 404 » les plus originales. N’hésitez pas à vous rendre directement sur les pages 404, car certaines d’entre elles sont animées et interactives.

À lire aussi : Web design : quand utiliser une illustration ?

1. Une erreur 404 qui a votre style

Vous ne pouvez pas savoir par quel biais un internaute parviendra sur votre page d’erreur. S’il ne vous connaît pas, il doit tout de suite pouvoir vous identifier. Raison pour laquelle il est d’autant plus important que cette page reprenne le même code graphique que les autres.

Page 404 style graphique
Source : Brightscout

Votre logo, ou votre en-tête habituel devront être présents. Les textes utiliseront la même typographie.

Plus encore : votre branding, l’attitude que vous voulez dégager via votre site, devra également transparaître sur la manière dont vous présenterez votre erreur 404. Votre identité doit être partout, et là aussi.

2. Une erreur 404 qui se rend utile

Vous pouvez utiliser la logique et vous dire qu’il suffit à l’internaute de cliquer sur votre logo pour revenir à la page d’accueil, ou de faire un clic arrière. Soyez cependant certain d’une chose : tout le monde ne le fera pas.

Page 404 navigation
Source : Spotify

Or, vous n’avez certainement pas envie que de potentiels clients quittent votre site en restant sur ce sentiment d’erreur.

C’est pourquoi il pourra être très utile d’intégrer un petit moteur de recherche ou quelques liens vers d’autres pages de votre site en bas de page. Vous continuez à proposer des choses, vous transformez une erreur en de nouvelles propositions… et c’est ainsi que vous restez dans la partie !

3. Une erreur 404 qui joue sur les émotions

Que ce soit l’humour ou la compassion, ajoutez, via l’image ou le texte, un peu d’émotions à votre page d’erreur. Toujours en restant dans votre style, bien sûr.

En utilisant la photo d’un chat grognon, d’un membre du personnel qui se confond en plates excuses ou de votre mascotte qui cherche son chemin, vous créerez un lien avec l’internaute.

Page 404 émotions
Source : Pixar

Vous lui redonnerez surtout le sourire, afin qu’il ne reste pas sur la mauvaise impression laissée par ce cul-de-sac. Et il repartira dans sa quête, via votre site, avec beaucoup plus d’allant.

4. Une erreur 404 qui fait agir l’internaute

Vous savez que vous pouvez donner envie aux gens d’arriver sur une page d’erreur ? Si vous y incluez une animation interactive, par exemple.

Page 404 interactive
Source : Kualo

Il suffit d’une petite histoire qui se dévoile en trois clics, ou d’une abeille qui suit la souris, pour transformer l’impasse en une aventure.

Et un internaute qui interagit avec votre page sera toujours dans un meilleur état d’esprit par rapport à ce que vous pouvez lui proposer d’autre !

5. Une erreur 404 avec un message clair

En général, l’internaute n’est pas franchement ravi de se retrouver face à une page d’erreur 404. Évitez donc les messages alambiqués et obscurs qui risquent de pousser son agacement jusqu’à quitter le site.

erreurs 404
Une partie de ping-pong en attendant ?

Gardez toujours à l’esprit que la page d’erreur 404 a pour but d’aider les utilisateurs à retrouver leur chemin. Votre message doit uniquement contenir les informations leur permettant d’atteindre cet objectif. Ne vous encombrez donc pas de détails inutiles et trop techniques. Ne soyez pas trop expéditif pour autant. N’imaginez surtout pas que vos visiteurs peuvent se sortir seul de cette situation en cliquant sur votre logo pour revenir à l’accueil du site. Si certains le font, ils ne seront pas majoritaires.

La clarté est donc votre principale alliée :

  • Décrivez succinctement ce qui s’est passé,
  • Donnez à l’utilisateur les clés pour se sortir de cette situation.

Votre utilisateur doit facilement comprendre le problème ainsi que sa solution. Bannissez donc les messages d’erreur trop abstraits et trop vagues sur le problème survenu. Soyez explicite, mais n’utilisez pas de jargon technique qui ne fera que créer encore plus de confusion dans l’esprit de votre visiteur égaré.

6. Une erreur 404 précise et facilement compréhensible

Très peu de gens lisent entièrement les contenus rédactionnels d’une page web. En général, l’internaute se contente de parcourir le texte en diagonale et s’attarde uniquement sur certaines phrases. Il est donc inutile de tartiner votre page d’erreur 404 de multiples paragraphes. Encore une fois, préférez aller à l’essentiel de manière claire et concise.

erreurs 404
Message très amusant avec une animation sur le site d’Agnes Lloyd platt

Pour cela, utilisez des phrases courtes qui permettent une meilleure compréhension. On entend par courte les phrases qui contiennent au maximum huit mots. Avec ce type de format, vous êtes sûre de la totale compréhension de votre visiteur.

7. Une erreur 404 qui dédouane l’internaute de toute responsabilité

Le ton que vous employez dans votre page d’erreur 404 joue un rôle important dans la manière dont l’internaute perçoit votre message. Utilisez donc le ton approprié afin de l’aider à bien comprendre la situation sans lui donner le sentiment d’être jugé.

rétro-gaming jeux page 404
Et pourquoi pas une petite partie retrogaming ?

Attention donc à ne pas paraître condescendant. On évitera soigneusement les phrases incriminatrices du type « Votre action a causé… »

Gardez bien en tête qu’une erreur 404 est souvent perçue comme très frustrante. Si votre message d’erreur semble dire « tout est de votre faute », vous ne risquez pas de retenir longtemps votre visiteur !

Souvenez-vous qu’il est possible de tout dire, mais en utilisant les bons mots, afin de pousser l’internaute a continué sa visite.

8. Une erreur 404 convenablement ponctuée

Source : Lego

Voici un conseil qui vaut pour vos pages d’erreur 404, mais pas seulement. On l’oublie trop souvent, mais il existe certaines règles de savoir-vivre sur le web, que l’on appelle la nétiquette. Et celle-ci est très claire à propos de la ponctuation excessive et des majuscules.

Aussi, évitez de rédiger vos phrases en majuscules et d’accumuler les points d’exclamation. Vous ne feriez que renforcer l’impression de réprimande. L’expérience utilisateur se dégrade sensiblement à chaque point d’exclamation utilisé. Et les majuscules sont perçues comme des cris.

Or, comme nous l’avons vu précédemment, la page d’erreur est là pour aider l’utilisateur et non pour lui donner le sentiment qu’il a lui-même commis un grave impair. D’autant qu’un internaute n’est jamais responsable d’une erreur 404, il ne fait que la subir.

À lire aussi : Acheter du contenu rédactionnel

9. Une erreur 404 avec une redirection 301 bien pensée

Les référenceurs vous conseilleront de systématiquement mettre en place une redirection 301 sur vos pages affichant un code d’erreur 404. Pourtant, cette pratique est bien souvent à proscrire.

Attention : Si la redirection est parfois judicieuse, elle peut également nuire gravement à l’expérience utilisateur si elle n’est pas appropriée. Pour éviter les déconvenues, si vous souhaitez automatiquement rediriger votre internaute, faites en sorte que la page d’erreur reste toujours disponible.

Dans les faits, une redirection n’est utile qu’à condition de diriger le visiteur vers une page susceptible de l’intéresser autant que la page qui l’a conduit à une erreur 404. Si vous le redirigez vers une page qui n’a strictement rien à voir, vous ne ferez que le froisser.

À lire aussi : 6 erreurs à ne pas faire sur un site responsive

10. Une erreur 404 qui offre de vraies solutions

Comme précédemment évoqué, inclure un moteur de recherche et des liens est une excellente idée pour amener vos visiteurs à continuer leur exploration de votre site.

solution page 404
Source : badass35.com

Attention toutefois, veillez à ce que vos liens ne conduisent pas à leur tour à une page 404… rien de tel pour porter l’exaspération de l’internaute à son comble.

Notez que le phénomène est assez fréquent lorsqu’on utilise un CMS. En effet, le template peut utiliser des chemins relatifs en référence à vos fichiers (images, CSS, JavaScript, etc.). Lorsque ces chemins ne pointent plus là où il faut, votre page 404 est alors appelée. Une parfaite illustration de l’expression « le serpent qui se mord la queue ».

Inspirations de page erreur 404

erreur 404 Fnac
Source : Fnac.com
Erreur 404 dessin
Source : ArtVersion
Source : Marvel
erreur 404 Aquativex
Source : Aquavitex
Erreur 404 dessin enfant
Source : Orpi
Page 404 Peugeot
Source : Peugeot
page erreur 404 Sygic.com
Source : Sygic Travel
Page 404 restaurant
Source : Le Bistroquet
Page 404 armée
Source : Armée de Terre Française
Page 404 carte
Source : Popcarte
Erreur 404 interactif
Source : 4K Network
Erreur 404 site ecommerce
Source : Reversible
Erreur 404 avion
Source : Adria
Erreur 404 Ubisoft
Source : Ubisoft
Erreur 404 Nexity
Source : Nexity
Erreur 404 perdu
Source : Name City
Page 404 portfolio
Source : Watermelon Pixels
Erreur 404 offre
Source : Primashop
Erreur 404 Kaligo
Source : Kaligo

Conclusion

Vous l’avez compris, le but d’une page erreur 404, ce n’est plus seulement d’informer qu’une direction est mauvaise. C’est aussi l’occasion de rappeler un client à vous, de montrer qui vous êtes, de lui offrir de meilleures occasions de vous redécouvrir.

Ce qui constituait avant un motif de plainte devient aujourd’hui une véritable opportunité, pour peu que vous preniez le temps de les designer soigneusement. Pensez juste à ne pas surcharger cette page : un message, une image, une ouverture…

Voilà les composants essentiels que vous devez mettre en place. Il n’en faut pas plus.