Comment créer une excellente page 404 pour vos utilisateurs

Publié: 2021-11-04

Atteindre une page 404 n'est pas une expérience agréable. Mais il y a des choses que vous pouvez faire pour vous assurer que ce n'est pas l'expérience finale d'un utilisateur avec votre site Web.

Pour concevoir une excellente page 404, vous devez savoir quels éléments sont les plus utiles pour les utilisateurs et peuvent aider votre page à se démarquer.

Voici une liste de 6 fonctionnalités pour vous aider à tirer le meilleur parti de votre page 404.

Masquer le contenu
1 Qu'est-ce qu'un code 404 ?
2 Pourquoi créer une page 404 personnalisée
3 Comment créer une superbe page 404 personnalisée
3.1 Effacer le message d'erreur
3.2 Barre de recherche
3.3 Liste des ressources
3.4 Bouton CTA
3.5 Liens vers le contenu supérieur
3.6 Identité de marque
4 Conclusion

Qu'est-ce qu'un code 404 ?

404 est l'un des codes d'état HTTP qui apparaît lorsqu'une page est introuvable.

404 appartient au groupe 4xx, ce qui indique qu'il s'agit d'une erreur côté client. Plus précisément, cela signifie que le client a atteint votre serveur, mais que le serveur n'a pas trouvé le fichier demandé.

Le code 404 peut apparaître pour diverses raisons, telles que :

  • La page a été supprimée,
  • L'utilisateur a fait une faute de frappe en tapant l'URL,
  • Le lien pointant vers la page était incorrect.

Quelle que soit la raison du code 404, les utilisateurs ne pourront pas accéder à la page car elle est tout simplement introuvable.

La page que l'utilisateur verra à la place de la page manquante est sous votre contrôle. Vos options incluent :

  • Une page 404 standard, ou
  • Une page 404 personnalisée.

Une page 404 standard et non personnalisée peut contenir un simple morceau de texte sur un fond blanc qui indique simplement « Introuvable ». Votre serveur génère automatiquement cette page.

Une capture d'écran d'une page 404 non personnalisée indiquant "introuvable"

D'autre part, vous pouvez choisir de personnaliser votre page 404 - concevez-la pour qu'elle s'adapte au reste de votre site Web et sélectionnez les éléments que vous souhaitez inclure.

Pourquoi devriez-vous créer une page 404 personnalisée

Une page 404 personnalisée bien conçue est bénéfique à la fois pour les utilisateurs et pour votre entreprise.

Lorsqu'un utilisateur entre dans une page 404 standard, il comprend seulement que quelque chose s'est mal passé et que la page n'a pas été trouvée. Ils ne savent pas ce qui s'est passé ni ce qu'ils doivent faire ensuite.

Par conséquent, votre client pourrait quitter votre site sans satisfaire ses besoins. C'est loin d'être idéal. Un utilisateur n'était pas satisfait de sa recherche et vous avez perdu son activité.

Avec une page 404 personnalisée, vous pouvez modifier la page inutile par défaut en quelque chose d'utile à la fois pour les utilisateurs et pour votre entreprise.

Une page 404 personnalisée vous permet de :

  • Aider les utilisateurs à trouver les informations qu'ils recherchent,
  • Encouragez les utilisateurs à explorer votre page,
  • Montrez la voix et la créativité de votre marque.

De plus, la création d'une page 404 personnalisée est recommandée par Google .

Si vous avez accès aux fichiers de configuration de votre serveur, vous pouvez rendre ces pages d'erreur utiles aux utilisateurs en les personnalisant. Une bonne page 404 personnalisée aide les internautes à trouver les informations qu'ils recherchent et fournit également d'autres contenus utiles qui encouragent les internautes à explorer davantage votre site.
source : Google

La citation indique clairement que Google considère qu'une page 404 personnalisée est utile pour l'utilisateur et encourage les propriétaires de sites à personnaliser leurs pages 404.

Comment créer une superbe page 404 personnalisée

Même si vous personnalisez entièrement votre page 404, assurez-vous que le serveur renvoie toujours un code d'état HTTP 404. C'est une mauvaise pratique de mettre en place un code 200, suggérant une réponse réussie lorsque la page n'existe pas réellement.

Lorsque vous décidez quoi inclure sur votre page 404, l'un des éléments essentiels est un message indiquant clairement qu'il s'agit d'une page d'erreur . Informez les utilisateurs que quelque chose s'est mal passé de manière amicale et directe.

Mais ce n'est que le début. Voici les principales fonctionnalités que vous pouvez ajouter à votre page 404 personnalisée pour la rendre plus utile :

  • Une barre de recherche,
  • Une liste de ressources disponibles sur votre site web,
  • Un bouton CTA,
  • Des liens vers votre meilleur contenu,
  • Un design aligné avec votre marque.

Une clé d'une bonne page 404 est son utilité pour les utilisateurs. Vous n'avez pas besoin d'inclure tous les éléments de la liste ci-dessus, mais uniquement ceux qui aideront vos utilisateurs à se repérer sur votre site Web.

Effacer le message d'erreur

Une bonne page 404 doit toujours inclure un message clair indiquant qu'il s'agit d'une page d'erreur. Quelle que soit la conception que vous choisissez, vous devez toujours informer les utilisateurs que quelque chose s'est mal passé et que la page n'a pas été trouvée.

Ikea le fait très bien. Ils fournissent un message clair qui comprend à la fois le code 404 et une courte explication qui le rend facilement compréhensible pour les utilisateurs.

Une capture d'écran de la page 404 d'Ikea

Barre de recherche

Une barre de recherche permet aux utilisateurs à la recherche d'un contenu spécifique de lui donner une autre chance et de rechercher ce qu'ils recherchaient sur votre site Web.

Un bon exemple de page 404 avec une barre de recherche est Moz.com :

Une capture d'écran de la page 404 de Moz avec une barre de recherche

Donc, si vous cherchiez quelque chose de spécifique sur Moz.com mais que vous ne l'avez pas trouvé, vous pouvez regarder à nouveau directement sur la page 404.

Liste des ressources

Si un utilisateur s'est retrouvé sur une page 404 mais n'avait pas d'idée précise à taper dans la barre de recherche, vous pouvez fournir une liste de ressources qui peuvent être trouvées sur votre site Web.

Backcountry a une page 404 personnalisée avec une conception simple qui s'adapte au site Web et une liste de pages essentielles.

Une capture d'écran de la page 404 de Backcountry avec une liste de ressources

Non seulement cette page est utile pour les utilisateurs, mais elle permet également à Backcountry de montrer son contenu et d'encourager les gens à explorer le site Web.

Un autre exemple de page 404 avec une liste de ressources est Tripadvisor. Avec un peu d'humour et quatre boutons simples, Tripadvisor offre une option simple pour parcourir les sections qui pourraient intéresser le plus les utilisateurs.

Une capture d'écran de la page 404 de Tripadvisor avec 4 boutons vers les ressources du site

Bouton CTA

En incluant un bouton CTA, vous pouvez montrer aux utilisateurs la prochaine étape qu'ils peuvent franchir.

L'utilisation la plus simple d'un bouton CTA consiste à diriger les utilisateurs vers votre page d'accueil . Un moyen simple mais efficace de guider les utilisateurs.

Voici un exemple de la page 404 de Netflix avec un bouton CTA menant à leur page d'accueil.

Une capture d'écran de la page 404 de Netflix avec un bouton d'accueil Netflix

Une autre solution consiste à inclure un bouton CTA "Contactez-nous" . Par exemple, si un utilisateur est venu avec une question spécifique et que la page 404 a rendu impossible l'obtention de la réponse, il peut vouloir vous contacter pour demander des détails.

Les utilisateurs peuvent également utiliser l'option "Contactez-nous" pour vous signaler l'erreur.

Kinsta comprend à la fois une « Page principale » et un bouton « Contactez-nous ». Les utilisateurs peuvent passer par le site Web ou entrer en contact avec l'entreprise. Ainsi, il fournit une solution aux personnes qui souhaitent explorer le site Web ou trouver une réponse à une question spécifique.

Une capture d'écran de la page 404 de Kinsta avec un bouton vers la page principale et le contact

Le bouton CTA doit aider vos utilisateurs, mais également correspondre à vos objectifs commerciaux. Par exemple, vous pouvez inclure une option pour laisser un e-mail et vous abonner à votre newsletter.

9gag utilise sa page 404 pour encourager les gens à télécharger son application. L'ajout d'un gif de fond s'accorde parfaitement avec le style 9gag.

Une capture d'écran de la page 404 de 9gag avec un bouton "télécharger l'application" et un gif en arrière-plan

Liens vers le contenu principal

Votre contenu populaire a les meilleures chances de garder les utilisateurs engagés. Cela vous donne la possibilité d'attirer l'attention de vos utilisateurs avant qu'ils ne quittent votre page 404.

Les liens vers votre contenu le plus populaire peuvent être particulièrement bénéfiques pour les sites Web de commerce électronique, car vous pouvez promouvoir vos produits les plus vendus sur une page qui, autrement, est en quelque sorte une impasse.

Un excellent exemple de page 404 qui présente le meilleur contenu est affiché sur le site Web d' Urban Outfitters . Il a une section "Les plus populaires" avec la possibilité d'acheter les articles tout de suite.

Une capture d'écran de la page 404 d'Urban Outfitters avec des liens vers les articles les plus populaires

Identité de marque

En personnalisant votre page 404 et en l'alignant sur la conception de votre site Web, vous pouvez montrer que vous vous souciez vraiment de l'intégralité du parcours de votre client sur votre site Web.

Une page 404 peut montrer le ton et la personnalité de votre marque. Un design créatif qui correspond au style du site Web peut faire sourire les gens et peut-être même les encourager à partager la page avec des amis.

Pixar utilise l'un de ses personnages bien connus sur la page 404. Même si la page ne fournit pas de fonctionnalités de navigation étendues, les graphismes et le message réconfortant correspondent parfaitement au style de la marque.

Une capture d'écran de la page 404 de Pixar avec un personnage du film Inside Out

Outre un bouton "Ramenez-moi à la maison", Canva inclut un petit puzzle pour le plaisir des utilisateurs. Sa créativité et son caractère unique se distinguent parmi d'autres pages. C'est une alternative amusante à une page 404 standard.

Une capture d'écran de la page 404 de Canva avec un puzzle

Emballer

Ne laissez pas vos utilisateurs seuls avec une page 404 standard.

Les utilisateurs ne doivent jamais être laissés sans aucune information sur ce qui s'est passé et sur ce qu'ils doivent faire ensuite.

Au lieu de cela, efforcez-vous de créer une bonne expérience sur l'ensemble de votre site. Cela inclut les pages d'erreur.