mars 14, 2018 - No Comments!

Page d’erreur 404:
Frustration… ou opportunité UX?

Temps de lecture: 5 minutes

Quoi de plus frustrant que d’atterrir sur une page d’erreur 404? Cette page cul-de-sac du web interrompt la navigation et nuit à l’expérience utilisateur.

Cependant, lorsque son design est axé sur l’expérience utilisateur, la page d’erreur 404 peut transformer le désagrément de navigation en véritable opportunité de conversion!

Le présent article contient quelques conseils et bonnes pratiques en matière de design des pages d’erreur 404.

D’où viennent les erreurs 404?

Ce code d’erreur est certainement le plus répandu et le plus connu du web. Renvoyé par les serveurs d’hébergement web, il indique que les ressources ou pages web demandées par l’usager sont introuvables dans la base de données.

Les erreurs 404 peuvent être causées par l’utilisateur lui-même s’il effectue des fautes de frappe lors de la saisie de l’URL. Dans la majorité des cas toutefois, l’erreur provient des administrateurs web.

Causes fréquentes des erreurs 404

La migration d’un site web vers un nouveau serveur d’hébergement

En cas de changement d’hébergement ou de nom de domaine, il peut être difficile d’effectuer la redirection de toutes les pages et tous les liens internes du site web. Certaines pages peuvent être oubliées ou supprimées lors du processus de transfert. Les liens qui mènent à ces pages inexistantes deviennent ce qu’on appelle des « liens morts », puisqu’ils ne mènent nulle part.

La gestion d’un site web

En effectuant la gestion quotidienne ou hebdomadaire d’un site web, certains administrateurs web décident de supprimer un produit par exemple, ou de renommer une catégorie d’article. Certains modules de gestion de site web gèrent mal les changements d’URL occasionnés par de telles modifications, ce qui résulte en l’accumulation de liens morts.

Page d'erreur 404 par défaut

Par défaut, la page d’erreur 404 d’un fureteur présente très peu d’information. Pour les utilisateurs, ces pages sont particulièrement frustrantes parce qu’elles interrompent la navigation.
Source de la capture d'écran: http://www.designbypearl.com/404

Personnalisation de la page d’erreur 404: bonnes pratiques

La meilleure utilisation qu’on puisse faire d’une page d’erreur 404 en termes d’efficacité UX, c’est de s’en servir pour réorienter l’utilisateur et lui permettre de reprendre la navigation. En personnalisant la page d’erreur 404 d’un site web, on évite de perdre le visiteur! Une bonne page d’erreur 404 doit:

1. Informer l’utilisateur de la nature de l’erreur

Elle doit rassurer l’utilisateur en détaillant la nature de l’inconvénient.

Page d'erreur 404 d'Adobe

La page d’erreur 404 du site web d’Adobe, par exemple, indique clairement que la page recherchée est introuvable.
Source de la capture d’écran: https://www.adobe.com/ca_fr/windows

2. Permettre à l’utilisateur de reprendre la navigation

Afin de ne pas perdre le visiteur, la page d’erreur 404 d’un site web doit le rediriger efficacement vers une autre section ou page du même site web. L’ajout d’un moteur de recherche permet à l’usager d’effectuer rapidement une recherche à même le contenu du site. Il est également recommandé d’ajouter des informations de contact.

Page d'erreur 404 de Apple

La page 404 de Apple inclut un moteur de recherche ainsi que plusieurs liens vers les différentes sections du site web.
Source de la capture d'écran: https://www.apple.com/fr/404

3. Être traitée avec humour!

La personnalisation des pages d’erreur 404 est vite devenue partie intégrante de la culture du web. Bien traitée, elle est un gage de qualité au niveau du design et du développement du site web. Plusieurs agences, compagnies et sites web de vente s’en servent pour faire de l’humour!

Page d'erreur 404 de l'agence Featuring

La page d’erreur 404 de l’agence Featuring invite les internautes à participer à un karaoké!
Source de la capture d'écran: https://featuringagency.com/fr/404

Page d'erreur 404 de l'agence Featuring

Sur la page d’erreur 404 de Pixar figure le personnage de Sadness du film Inside out avec la mention ‘Awww… Don’t cry.’ (« Awww… Ne pleure pas. »)
Source de la capture d'écran: https://www.pixar.com/404

Je termine avec la page d’erreur 404 du site web des Jeux olympiques de Pyeongchang. Le comité olympique s’est moqué de l’erreur technique du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Les anneaux olympiques présentés au spectacle d’ouverture se formaient à partir de flocons de neige lumineux. Une erreur technique, cependant, a empêché le cinquième anneau de se déployer! ...D’où le visuel humoristique de la page d’erreur 404 des JO de Pyeongchang ainsi que la mention ‘Sometimes, things don’t go as planned…’ (« Parfois, les choses ne se passent pas comme prévu…»)!

Erreur technique du spectacle d'ouverture des Jeux olympiques de Sochi, en 2014

Les anneaux lumineux du spectacle d’ouverture des Jeux olympiques de Sochi, en 2014. Le cinquième anneau ne s’est jamais déployé.
Source de l’image: https://www.webnoviny.sk/fotogaleria/otvaraci-ceremonial-zimnych-olympijskych-hier-v-soci/otvaracim-ceremonialom-odstartovali-zimne-olympijske-hry-v-soci-jpeg-5/

Page d'erreur 404 du site des Jeux olympiquesde Pyeongchang

La page d’erreur 404 du site web des Jeux olympiques de Pyeongchang, en 2018.
Source de l’image: http://olympics.org/404

Published by: Laurence Pilon in Design de l’information, Design graphique, Design UX, Design web

Leave a Reply

deux × 3 =