Concevoir des pages 404 intuitives et conviviales

Publié: 2019-10-16

Nous avons tous interagi avec une page 404 à un moment donné.

Ces pages apparaissent lorsque le lien est rompu, qu'une page est supprimée ou lorsque l'utilisateur a mal saisi l'adresse de la page. Mais quelle qu'en soit la raison, cela reste une erreur qui doit être corrigée. De plus, les liens brisés nuisent au classement de votre site et ce n'est pas ce dont vous avez besoin. L'aspect SEO de votre site est extrêmement important, vous ne voulez donc pas perdre du trafic simplement parce que vous avez oublié de garder un œil sur les notifications 404.

Bien qu'il soit clair que 404 pages doivent être corrigées dès que possible, vous ne pouvez jamais vraiment prévoir quand l'utilisateur rencontre un lien brisé. Donc, pour être prêt et transformer l'expérience négative en expérience positive, vous devez personnaliser vos pages 404 et les rendre conviviales et intuitives.

Prêt à apprendre comment transformer le mal en bien ? Découvrons-le.

Personnalisez la page 404 pour votre site

Imaginez que vous naviguez sur un site Web incroyablement coloré et attrayant avec de nombreux éléments interactifs et que vous tombez soudainement sur une page vierge avec le message simple "404 Page Not Found".

Un peu réveillant, n'est-ce pas ?

La page 404 ne doit pas apparaître comme une mauvaise surprise, c'est pourquoi il est si important de garder son design identique à la mise en page globale du site.

Specialized.com 404 Page

Pour cela, gardez l'apparence de la page 404 identique à celle des autres pages, y compris l'arrière-plan, les couleurs, les polices et d'autres éléments (le cas échéant). De plus, de nombreux sites Web profitent de la page 404 pour mettre l'accent sur la marque et la rappeler aux utilisateurs une fois de plus.

Lors de la conception d'une page 404 pour votre site, faites attention au message. Un message bien conçu est une bonne occasion d'inclure un jeu de mots intelligent ou de rappeler aux utilisateurs vos produits/services de manière discrète.

Expliquez ce qui s'est passé

Si nous regardons la page 404 par défaut sous Apache, nous verrons ce qui suit :

Codinghorror.com 404 Page

Et c'est tout. L'utilisateur n'a aucune idée de ce qui s'est réellement passé et de ce qu'il doit faire ensuite.

Parce que vous vous souciez de vos clients et que vous souhaitez ignorer toute expérience désagréable, fournissez une explication de l'erreur. Les principales raisons du 404 sont généralement :

  • L'utilisateur a mal saisi quelque chose,
  • Le lien est rompu,
  • La page n'existe pas,
  • La connexion avec le serveur est interrompue.

Marvelapp.com 404 Page

Bien sûr, vous n'êtes pas obligé d'énumérer tous les problèmes mentionnés ci-dessus. Assurez-vous simplement que votre explication est compréhensible.

En étant honnête sur le problème, vous gagnerez les utilisateurs et les encouragerez à rester sur le site et à continuer à le parcourir.

Créer un message engageant

La page 404 est une occasion parfaite pour la marque de mettre en valeur son identité à travers un message bien ficelé.

Les meilleurs exemples de 404 pages comportent souvent :

  • Jeux de mots
  • Message lié aux produits ou services du site
  • Attrait personnel,
  • Références à la culture pop et aux événements reconnaissables.

Github.com 404 Page

Parce que la page 404 est une erreur par défaut, vous devez la transformer en quelque chose de complètement opposé, c'est-à-dire une expérience positive et amusante.

GitHub a fait un travail brillant en termes de conception de sa page 404. Il a utilisé le stéréotype sur les développeurs et leur amour de la saga "Star Wars" et l'a utilisé à leur propre avantage en rendant les éléments visuels et le message de la page instantanément reconnaissables même par les personnes qui n'ont regardé aucun film Star Wars.

Proposer une action à entreprendre

Un appel à l'action est vraiment important et est un must absolu pour un design de 404 pages.

Un utilisateur ne doit jamais se retrouver avec une page blanche et zéro choix. Donc, même si quelque chose comme 404 se produisait, proposez une alternative qui conduirait à un avantage mutuel.

Pagecloud.com 404 Page

Certains des CTA les plus populaires pour la page 404 sont :

  • une barre de recherche
  • page d'accueil
  • top-produits/services
  • s'inscrire à un produit ou à une newsletter
  • une offre d'essai gratuit

Faites attention à la conception des boutons CTA. Ils doivent être facilement repérables et ne doivent pas se confondre avec l'arrière-plan, sinon l'utilisateur ne les remarquera pas. Pensez également au message du bouton CTA : au lieu de clichés comme "Cliquez ici", optez pour quelque chose de plus créatif ("Voyez ce que nous avons").

Ajouter une barre de recherche

Un utilisateur a atterri sur la page 404 parce qu'il a cherché quelque chose. Offrez-leur donc la possibilité de réessayer en ajoutant une barre de recherche à la page.

Vous pouvez l'accompagner d'un message du type : "On dirait que votre requête est introuvable... Pourquoi ne pas réessayer ?" Les CTA bien écrits ont un taux d'engagement élevé et fonctionnent bien avec les images.

De plus, ajoutez un texte d'indice à la barre de recherche. Une barre avec un texte obtient un meilleur engagement qu'une barre vide.

Ajouter des points de sortie

Une barre de recherche sur la page 404 ne suffit pas. Que faire si les utilisateurs ne sont pas sûrs de ce dont ils ont besoin ?

Ajoutez "Page d'accueil" ou tout autre bouton pertinent pour faire passer l'utilisateur d'une page 404 à une conversion potentielle. De plus, vous pouvez ajouter un bouton "Contactez-nous" pour augmenter la fiabilité.

Certaines entreprises utilisent la page 404 comme une opportunité de rappeler leurs produits et services et placent les liens correspondants sur la page.

Présentez vos produits/services

Si vous êtes une boutique de commerce électronique, par exemple, vous pouvez placer vos produits les plus vendus sur la page 404 pour donner aux utilisateurs une chance de découvrir vos meilleurs produits et (espérons-le !) de les acheter.

Comme pour les autres sites, vous pouvez certainement offrir quelque chose de précieux à vos utilisateurs. Il peut s'agir d'un essai gratuit d'un produit, d'une offre d'inscription à un cours ou d'un guide des zones utiles du site.

Amuse-toi

Comme nous l'avons déjà dit plus haut, la page 404 est une expérience négative car l'utilisateur n'a pas obtenu le résultat escompté. Pour résoudre le problème, rendez la page interactive ou ajoutez-y un élément amusant.

imdb.com 404 Page

Même si vous vous positionnez comme une marque hautement professionnelle, un peu d'humour ne fera pas de mal. De plus, de nombreuses entreprises ajoutent de la gamification et des vidéos à leur page 404 pour engager l'utilisateur et le divertir.

Suivi de l'erreur 404

L'erreur 404 n'est pas l'affaire de l'utilisateur. Mais c'est à vous de suivre et d'identifier la cause de l'erreur et le parcours de l'utilisateur.

Il y a quelques éléments à garder à l'esprit lors du choix d'un outil de suivi des erreurs 404.

Considérez toutes les sources d'erreur 404

Une erreur 404 ne se trouve pas nécessairement sur votre site – un client peut ouvrir une ancienne newsletter et suivre le lien ou elle peut apparaître dans les résultats de recherche sur Google.

Ainsi, lorsque vous choisissez un outil de surveillance des erreurs, vérifiez qu'il recherche les erreurs 404 partout afin de pouvoir toutes les corriger.

Rapport sur le coût des erreurs 404

En tant que propriétaire de site, vous avez probablement un million de choses à faire et la correction des erreurs 404 ne figure peut-être pas en tête de votre liste.

C'est pourquoi vous avez besoin d'un outil qui vous permettra de savoir combien coûtent vos erreurs 404. Et nous ne parlons pas d'argent ici - il peut s'agir d'un pourcentage de conversions perdues, d'un taux de rebond accru, d'un certain nombre d'utilisateurs perdus.

Une fois que vous aurez vu l'impact des erreurs 404 sur votre entreprise, il sera plus facile de hiérarchiser vos tâches et de déplacer les erreurs 404 vers le haut ou vers le bas de la liste.

Surveillance constante

Une erreur 404 n'est pas quelque chose qui se produit régulièrement. Il peut arriver que vous vous débrouilliez parfaitement et que, tout à coup, un utilisateur reçoive un 404.

C'est pourquoi votre outil de suivi doit surveiller en permanence les erreurs 404 et vous avertir immédiatement lorsqu'il en trouve une. De cette façon, vous serez en mesure de le réparer en temps opportun et d'éliminer le risque que d'autres utilisateurs tombent sur la page 404.

Types d'outils de suivi

Il existe différents types d'outils de suivi disponibles qui vous aideront à identifier l'erreur 404 et à la corriger avec succès.

Outils d'exploration

Les outils d'exploration comme Screaming Frog sont parfaits pour analyser rapidement votre site Web et vérifier les liens brisés.

Ces outils analysent les liens de votre site Web et vous permettent de savoir lesquels sont cassés et quelle est la source de l'erreur. De plus, les outils d'exploration sont généralement faciles à gérer et à installer.

Le plus gros défaut de ces outils est qu'ils n'analysent que les liens de votre site Web - et souvenez-vous de ce que nous avons dit sur l'importance de l'analyse avancée ? De plus, les outils de crawl ne vous indiquent pas le coût d'une erreur 404 mais aident seulement à l'identifier.

Un outil d'exploration est certainement utile et vous devez le déployer régulièrement pour vous assurer que tout va bien avec votre boutique. Cependant, n'oubliez pas d'effectuer des analyses régulières et avancées pour vous assurer qu'il n'y a pas d'autres erreurs que vous auriez pu passer inaperçues.

Outils de backlink

Contrairement aux outils de crawl, les outils de backlink se concentrent sur les sources externes qui conduisent les utilisateurs vers les liens rompus sur votre site.

L'explorateur de liens de Moz est l'un des outils qui vous aide à trouver les sites Web qui amènent les utilisateurs sur votre site. Une telle analyse est vraiment utile pour votre référencement car vous pouvez éliminer les liens 404 et améliorer le classement de votre site.

Mais encore une fois, comme avec les outils de crawl, les outils de suivi des backlinks ne couvrent qu'un aspect de l'identification des liens brisés. Si vous souhaitez trouver tous les liens d'erreur 404, y compris ceux des anciennes newsletters ou des réseaux sociaux, vous aurez besoin d'une analyse plus complète.

Suivi avec Google Analytics

Google Analytics est l'un des moyens les plus courants et les plus efficaces de suivre l'erreur 404 pages.

Pour cela, vous devrez copier ce code :

<script>  
   // Create Tracker - Send to GA
   // Replace UA-11111111-11 with your own Tracking ID
 ga('create', 'UA-11111111-11');
   ga('send', {
     hitType: 'event',
     eventCategory: '404 Response',
     eventAction: window.location.href,
     eventLabel: document.referrer
});
</script>

et ajoutez-le à la page/modèle d'erreur 404. N'oubliez pas de coller l'identifiant de votre compte Google dans le code.

Après cela, vous pourrez voir quelles URL exactes provoquent l'erreur 404 et où les gens les obtiennent.

Et enfin : résolvez le problème !

Des accidents se produiront et c'est un fait. Il vaut mieux avoir une belle page 404 à l'avance que de résoudre frénétiquement le problème pendant que les utilisateurs ennuyés attendent.

Cependant, 404 est une erreur et doit être corrigée. Selon la priorité de l'erreur, vous pouvez rediriger le lien, restaurer la page ou corriger le lien source. Effectuez également les opérations suivantes :

  • Introduire des rapports 404 automatisés et réguliers pour garder un œil sur les pages 404 et les corriger en temps opportun,
  • Configurez des notifications en temps réel sur le 404,
  • Effectuez un audit pour identifier les liens brisés.

Dans l'ensemble, une page 404 conviviale doit apporter de la valeur à l'utilisateur, être cohérente en termes de conception globale du site Web et faciliter la navigation sur le site. En suivant ces règles, vous fidéliserez les utilisateurs et par la même occasion boosterez vos conversions.