Page 404 personnalisée et utile – Amélioration de l’Ux
Table des matières
Page 404 personnalisée – Améliorer l’expérience utilisateur
Lorsque l’utilisateur tente d’accéder à une page qui n’existe pas ou qui a été déplacée, il accède à la page 404. C’est un code d’erreur standard http qui est affiché lorsque le serveur ne trouve pas une page.
Il est important de ne pas négliger la conception de cette page qui permet à l’utilisateur de comprendre ce qui se passe.
Donner des options de navigation au visiteur permet d’éviter de laisser celui-ci dans une impasse, ce qui pourrait l’amener à quitter le site.
Page 404 – Contenu pertinent et pédagogique – Informer, rassurer, aiguiller
- Informer l’utilisateur.
Délivrer un message d’information clair et compréhensible.
La page affichée ne correspond pas aux attentes initiales de l’utilisateur, celui-ci doit donc comprendre pourquoi il est dirigé sur cette page.
Informer avec un message d’erreur clair et bien mis en évidence « Page perdue » ; « Page introuvable » « Page déplacée ou introuvable ». - Rassurer l’internaute.
Le contenu de cette page 404 doit rassurer l’internaute, lui indiquer que ce n’est pas sa manipulation qui est en cause.
Une dose d’humour permet de diminuer l’impact négatif de cet incident de parcours. - Aiguiller et proposer des alternatives de parcours.
Ne pas laisser l’internaute, en désarroi, bloqué sur cette page mais lui proposer des alternatives pour poursuivre sa navigation, et lui éviter toute impasse.
Page 404 – Psychologie du contrôle – Offre de choix internautes
Alternatives proposées et reprise de contrôle
En général on propose un accès au plan du site, à la page d’accueil ou on affiche sur cette page l’arborescence du site.
Cela présente un aspect psychologique favorable pour l’internaute : celle d’un sentiment de reprise de contrôle.
La situation est sous contrôle, on lui donne la main pour opérer un choix.
- Proposition d’alternatives quant aux choix proposés.
A partir de :- La page d’accueil qui dispose de son menu principal, de ses menus secondaires.
- Du plan de site à la présentation standardisée.
- D’une arborescence soignée et épurée pour ne pas accroître le sentiment de confusion avec une abondance de liens.
- Du menu de page de cette page 404, s’il n’est pas désactivé.
- Impression de contrôle retrouvé pour l’internaute, maîtrise de ses choix et de sa navigation
L’utilisateur n’est plus en déroute, il reprend le contrôle.
Cet aspect psychologique est important :
- L’utilisateur est revenu dans une situation de maîtrise de son univers, de la situation.
Il décide de son choix. - Confronté à un incident de parcours (erreur404), il est de nouveau guidé.
- Il est rassuré.
Alternative – Un compromis inévitable
Toute alternative relève d’un compromis.
- Alternative cartouche de recherche : si un moteur de recherche interne est disponible, cette option peut être proposée mais elle n’apparaît toutefois pas comme pleinement satisfaisante. En effet, le guidage de l’internaute ne peut être qu’aléatoire en fonction des mots clés saisis.
- Alternative plan de site : les sites importants donnent souvent accès aux rubriques principales. Avec cette solution, le guidage reste présent. Il ne peut prétendre cependant à l’exhaustivité.
Un compromis peut s’imposer, mais l’objectif de reprise de navigation est réalisé. - Alternative arborescence : l’arborescence doit être soignée, aérée, volontairement épurée en cas de site important. Ici aussi, un compromis s’impose pour ne pas surcharger visuellement cette page.
Ne pas aller à l’encontre du but recherché.
Ne pas déstabiliser mais rassurer l’internaute et le guider vers une entrée de navigation qui corresponde au mieux à son choix.
Alternatives de parcours – Choix clarifié
- Proposer des alternatives de parcours sans rendre le choix complexe, sans accroître la déstabilisation première par un choix trop vaste.
- Clarifier l’offre de reprise de navigation, soigner et aérer la présentation de cette page quitte à simplifier.
Le but ? Atténuer l’impact initial du désagrément et autoriser une reprise de navigation en redonnant la main à l’internaute.
Design attrayant de la page 404
Cela semble une évidence mais sa présentation doit être conforme à la charte graphique du site.
Là encore, une page 404 en conformité avec l’ensemble des autres pages du site présente un aspect rassurant.
- Le message doit être explicite, l’intention rassurante, et le choix laissé à l’internaute.
- Le rendu graphique doit afficher une cohérence avec la tonalité globale du site, les produits ou les créations.
Exemple Verrerie d’art – Trophées en verre – La Gacilly
Sur le site trophées en verre la gacilly, la page d’erreur met en avant un visuel qui présente deux escrimeurs sculptés en verre.
- Le visuel est cohérent avec celui de la page des trophées sports – trophées escrimes
- Il détourne à cette occasion le visuel d’un trophée d’art déjà présent sur le site.
Il est affiché sur une page au titre informatif : « Erreur 404 – page introuvable » - Il est retravaillé visuellement pour être explicite « Cible déplacée – Erreur 404 » et une ligne secondaire « Touche non comptabilisée »
Un mouvement imprévu, une disparition qui empêche de comptabiliser une touche, de procéder à un atterrissage sur la page ciblée.
Le texte de pédagogie et de réassurance reprend en titre de niveau 1 les mentions « Erreur 404 – Cible déplacée – Touche non comptabilisée » avec :
- Des explications sur la raison d’être de cette page (disparition ou déplacement de la page visée).
- Une proposition d’alternatives de parcours.
Exemple Verrerie d’art – Art Verrier – La Gacilly
Sur le site Art Verrier , la page d’erreur met en avant un visuel qui présente un colibri sculpté en verre.
- Le visuel est cohérent avec le bandeau présent sur les pages des sculptures d’oiseaux dédiées aux colibris de verre.
- Il détourne à cette occasion le visuel d’une création d’art déjà présente sur le site.
Il est affiché sur une page au titre informatif : « erreur 404 – page introuvable » - Il est retravaillé visuellement pour être explicite « Vol de reconnaissance E 404 – Page perdue ».
La page visée est présentée comme disparue, ce qui permet de rendre compte de la raison d’être de l’affichage soudain de cette page 404 (disparition ou déplacement de la page visée).
Texte pédagogique rassurant
Le désarroi lié à une telle disparition est pris en compte sur le ton de l’humour en assimilant le colibri sculpté en vol à un aéronef de type « reconnaissance et sauvetage ».
Le texte français évoque une situation grave de disparition aérienne, une prise en compte de cette disparition et une proposition d’alternatives de parcours.
Tonalité du texte – humour et terminologie militaire
Le texte de pédagogie et de réassurance reprend cette information avec un contenu texte informant
- Qu’une « mission de reconnaissance et secours a été déclenchée ».
- Qu’un colibri SAR – Search and rescue – a été dépêché pour localiser la page disparue.
La disparition de la page souhaitée est évoquée comme celle d’une disparition aérienne : « disparu des écrans (radars) », « Vol de reconnaissance E404 », « Mission de reconnaissance et secours déclenchée », « Colibri SAR – Search and rescue ».
La terminologie est quasi militaire, celle des services de secours et sauvetage aériens mondialement connus sous l’acronyme SAR.
Ce dernier fait par ailleurs l’objet d’une explication par la présence de son équivalent anglais mentionné en extenso.
Page 404 – Amélioration Ux – Curatif Vs préventif
Page 404 – Le curatif
La création d’une page 404 personnalisée s’inscrit dans une démarche d’amélioration de l’expérience utilisateur. On atténue son désagrément, on l’informe et on lui propose des options pour poursuivre sa navigation.
La recherche esthétique d’une page 404 personnalisée est accompagnée ici d’un but utilitaire à la fois informatif et rassurant.
Pédagogie et humour sont mis à contribution pour cela.
Cependant, la présence d’une page 404 personnalisée reste curative, l’incident s’est déclenché révélant l’absence d’affichage de la page souhaitée.
Mode préventif – Module gestion incidents et module interception liens brisés
Cette création de page 404 personnalisée s’accompagne en préventif de l’installation et du paramétrage :
- D’un module de gestion des erreurs présentes sur le site.
- D’un module d’interception et/ou de repérage des liens brisés.
Module gestion des erreurs 301 – Redirections permanentes
Sous WP, un module de prévention d’erreurs 404 comme « Redirection » permet de limiter ce risque.
Ce module gratuit permet de réguler ces erreurs 404 et de gérer des redirections permanentes 301 d’une structure d’url vers une autre.
C’est utile dans le cas d’une modification volontaire dans l’adresse de page, dans le cas d’une migration de site ou d’une refonte avec modification profonde de l’arborescence.
On redirige l’internaute vers la page correspondante ou une page de rubrique/thématique proche.
De surcroît on :
- Evite le phénomène de rebond d’un internaute déçu qui quitte le site.
- Evite de donner l’image d’un site à l’abandon ou négligé avec un grand nombre de liens brisés.
- Prévient le risque de pénalisation en matière de référencement naturel avec un lot de liens brisés inévitablement détectés par les moteurs de recherche.
Module d’interception de liens brisés
Un module WP gratuit comme « Broken link checker » scanne votre site selon une fréquence déterminée et vous informe alors par une alerte spécifique notifiée dans votre messagerie.
Ces liens peuvent faire l’objet d’un affichage css spécifique ce qui les rend en outre facilement identifiables dans vos pages.
D’autres modules comme « Link Fixer » (anciennement « Permanent Finder Link ») plutôt que d’envoyer un code d’erreur 404, font une analyse des mots inclus dans l’url initiale et tentent, en évaluant le meilleur résultat possible, de trouver une adresse de page publiée qui soit proche.
La maintenance préventive permet alors d’améliorer l’expérience utilisateur, de limiter l’affichage d’une page 404.
Le diable se cache dans les détails et l’image de qualité d’un site dépend aussi de cette somme d’attentions portée aux détails.