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 :

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.

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 :

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 :

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.

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.