Cherchez l'erreur

“Erreur 404, désolé mais la page que vous cherchez n’existe pas ou plus.”

Qui n’est jamais tombé sur ce type de message ? Allez ne soyez pas timide, levez la main. Une grande majorité d’entre vous, c’est super. Mais pour vous au fond, je vais faire une petite piqûre de rappel. Quand vous vous rendez sur un site internet, il arrive parfois qu'une page ait été déplacée, renommée, supprimée, ou pire, qu’elle n'ait jamais existé (eh oui, la vie d'une page n'est pas toujours facile). Alors, pour éviter de semer la panique auprès de l'internaute, ces pages renvoient le code HTTP 404. Ainsi l'administrateur du site peut personnaliser les pages qui seront affichées suite à cette erreur dans le but de rassurer l'utilisateur et l'aider à retrouver son chemin (le but étant qu'il ne quitte pas le site).

Le plus simple est d’afficher un petit message invitant l’utilisateur à se rendre sur la page d’accueil, ou de lui mettre à disposition un champ de recherche, ou encore de lui montrer l’architecture du site via un plan du site.

Une autre solution est de transformer le rôle de cette page. Plutôt que d’afficher un gros message d’erreur en rouge, il est possible avec un peu de créativité, parfois de second degré, de tirer profit de cette page pour marquer les esprits. Le plus simple pour vous le prouver est de vous montrer quelques exemples :

Page 404 de Lego Page 404 de Bret Victor

Lego, Facebook, Bret Victor, Wordans, CSS Tricks… Ceci n’est qu’une sélection de mes préférées, mais je vous invite donc à jeter un oeil sur des sites comme Bonjour 404 ou 404 not found pour en voir encore plus.

Avec toutes ces sources d’inspiration j’ai décidé à mon tour de personnaliser ma page 404. Voici mon retour d’expérience sur le sujet.

Le choix du contenu

Vouloir personnaliser sa page 404 est une bonne chose, avoir des idées en est une autre. Je suis développeur web, mon esprit est plus logique que créatif. Pour le choix du thème, j'ai simplement cherché dans les choses qui me passionnent et j’ai donc choisi les jeux vidéo. J'ai aussi voulu faire jouer la nostalgie, car c'est ce qui marque le plus les esprits. Alors, j'ai fouillé mes souvenirs à la recherche d'un jeu rétro qui a marqué mon enfance. Mario, Prince of Persia… de nombreux choix se présentaient mais, ce sont les Lemmings que j'ai choisis.

Plutôt qu'une simple image, je souhaitais faire quelque chose d'interactif, à la manière des Doodles de Google. Alors que faire de ces petites bêtes pour rendre ma page attractive ? Le principe de ce jeu est de sauver les Lemmings en utilisant divers accessoires et capacités. Mais pour sauver tous ces petits êtres, certains doivent se sacrifier. J'ai donc décidé de faire tomber 404 lemmings du ciel, prêts à s'écraser au sol.

Il me fallait encore ajouter un objectif pour garder l'internaute sur ma page. J'ai donc ajouté la possibilité d'équiper les Lemmings de parapluies, qui ont pour but de ralentir leur chute et de leur sauver la vie. Ainsi le but est de sauver les 404 parachutistes en herbe. Et tout le monde s'y retrouve, le plus acharné qui souhaite tous les sauver, en passant par le développeur qui va écrire un petit script pour tricher, ou encore le gros sadique qui va les regarder s'écraser au sol sans même toucher sa souris.

La page est en place, mais il manque quelque chose : une explication. Alors, pour impliquer l'utilisateur j'ai décidé d'insister sur le fait que la vie de tous ces Lemmings est entre ses mains avec en plus un compteur qui s'incrémente dès qu'un d'entre eux perd la vie.

Page 404 de Romain Brasier

Une fois terminé, j’ai également personnalisé le message,  si tous les lemmings ont été sauvés, si seulement X Lemmings ont été sauvés ou si aucun n’as survécu. Il ne me restait plus qu’à présenter ma page 404 sur la toile en espérant avoir quelques retours. Et pour cela le meilleur outil est sans nul doute Twitter :

Tweet de Romain Brasier pour annoncer le lancement de sa 404

Rapidement les retweets sont arrivés, provoquant un effet boule de neige. Ma page se répand sur Twitter comme une traînée de poudre. En à peine une demi journée, des "grands" de twitter parlent d'elle, et des articles font leur apparition sur Gizmodo, Écrans.fr

Je reste alors impuissant face à tout ça et ne peut que laisser faire et attendre de voir ce qui en découle. Je décide entre deux d’ajouter sur ma page un bouton Twitter pour me suivre, ce qui a boosté mon nombre de followers.

En une journée mon site comptabilisait 42 667 visites contre une moyenne quasi nulle les mois précédents. Je trouve déjà cela totalement démesuré, mais quelques jours plus tard, je décide de faire une version anglaise de ma page, comme ça, juste pour voir… Résultat, je monte le premier jour à 96 526 visites (plus du double). J’ai même eu le droit à une première place sur Reddit et une troisième place sur Hacker News.

Voici un petit aperçu de mes statistiques sur Google Analytics :

Statistques page 404 romain brasier

Mais sans doute la chose qui m’a le plus surpris, et le plus fait plaisir, est le tweet de Michael Dailly, ni plus ni moins le créateur de Lemmings, celui qui a dessiné ces petits bonshommes.

Tweet de Michael Dailly

Quelques mois plus tard, mon site compte en moyenne une cinquantaine de visites par jour. Ce qui est tout de même énorme pour un site personnel. Les gens viennent pour ma page 404, en oubliant presque que celle-ci est à la base une erreur.

J'ai suite à cette expérience, reçu des propositions d'emploi, de création de site. J'ai également gagné en notoriété. Grâce à cette page je ressors en première page sur "Développeur web Lille". Que du positif donc, c'est pourquoi je vous invite tous à en faire autant, à prendre un peu de votre temps pour personnaliser vos pages 404. Faire la mienne m'a pris une bonne après midi avec l'aide de mon collègue Jonathan. Ce qu'il faut, c'est juste une idée originale qui marque les esprits, et internet fera le reste.

Romain Brasier

À propos de Romain Brasier

Romain est développeur web sur la région Lilloise, géniteur de la page http://www.romainbrasier.fr/404, mangeur de sushis et drogué aux salles de cinéma.

Vous pouvez partager cet article sur Facebook, Twitter ou Google+.

Faites un don pour soutenir l'association Les B-A des Satellites

L'association Les B-A des Satellites aide à offrir une école aux enfants de Niellé en Côte d'Ivoire.

Les fonds récoltés vont directement sur le compte PayPal de l'association. En cliquant sur le bouton « Faire un don » ci-dessus, vous allez être redirigé vers PayPal. Vous n'êtes pas obligés de créer un compte PayPal pour faire un don.

8 commentaires sur “Cherchez l'erreur

  1. MoOx, le lundi 2 décembre 2013 à 07:17

    Bon retour d'expérience. Plutôt encourageant :)

    Note: Le lien de la 404 Facebook renvoi vers un profil chez moi. Par contre https://www.facebook.com/error me donne bien une 404 :)

  2. Da Scritch, le lundi 2 décembre 2013 à 10:17

    Mhhh... je trouve que la 404 est parfois mal utilisée. On oublie les codes d'erreurs comme la 401 (authentification requise), 403 (interdit), 301 (j'ai renommé l'url) ou surtout la 410 (effacée).

    Là, je reprend mon classique sur mon blog, qui incite à revenir en arrière pour voir si l'erreur peut être corrigée par le site d'origine, ou sinon à reprendre les mots clés de l'url pour faire une recherche locale.

  3. thenew, le mardi 3 décembre 2013 à 10:57

    Dans un autre genre, les 404 de mauvaise foi, celle du Store Sony : https://store.sonyentertainmentnetwork.com/#!/cid=STORE-MSF75508-12DEALS

    “Page introuvable ! Vous n'êtes pas en cause. C'est la faute à Internet.” :D

  4. Francois, le mardi 3 décembre 2013 à 16:42

    Vraiment excellente la 404 lemmings. Elle m'a beaucoup amusé! Merci pour cet article, c'est vrai que c'est sympa et utile de faire une 404 personnalisée.

  5. Daniel, le lundi 9 décembre 2013 à 09:24

    J'ai toujours été fan des lemmings quand j'étais tout jeune : je ne compte pas le nombre d'heures passées dessus, alors j'imagine le plaisir de voir le tweet du créateur lorsqu'il a découvert cette page 404.

    En tout cas, bravo pour le concept et l'originalité de cette page d'erreur ;)

  6. Alexis, le mardi 24 décembre 2013 à 11:31

    Je trouve l'idée d'utiliser la page 404 pour faire interagir le visiteur excellente, surtout quand on arrive à lui faire mémoriser la marque associée.
    Une petite question me chagrine quant à ce que Google va « penser » si cette page acquiert un peu trop de notoriété. Si le ratio de visites page d'erreur/page valide augmente, le site risque de descendre dans les SERPs, non ?

  7. @rbwebdev, le jeudi 26 décembre 2013 à 09:20

    @ Alexis : C'est en effet ce que la logique laisse à penser. Mais dans mon cas, je n'ai vu que du positif au niveau du trafic. Après, bien sûr il faut voir la qualité de ce dernier; majorité de visite unique sur la page 404. Elle est en place depuis maintenant un peu moins d'un an, une retombé est envisageable mais, étant donné que ce sont des circonstances particulières, la seule façon de le savoir est d'attendre. Ce qui est sur c'est que tous les liens vers mon site (article sur ma page) n'existaient pas avant, donc c'est forcément une bonne chose à ce niveau.

  8. Rodolphe, le mercredi 21 mai 2014 à 10:57

    Top ! j'adore l'idée. Un web créatif, c toujours mieux. Mais pourquoi pas proposer aussi une sortie vers d'autres pages susceptibles d'être lues ?? C'est toujours mieux d'inciter les visiteurs à rester !

Laisser un commentaire

Les commentaires sont modérés manuellement. Merci de respecter l'auteur de l'article, les autres participants à la discussion, et la langue française. Vous pouvez suivre les réponses par flux RSS.