Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX

Améliorer le design de la page 404

by
Length:MediumLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Si un visiteur arrive à voir votre page d'erreur 404 standard, le danger est qu'il ne traînera pas longtemps pour voir ce que propose votre site. Une page 404 personnalisée, l'une de celle qui est accueillante et utile, va encourager vos visiteurs à parcourir votre site en profondeur au lieu de dériver ailleurs.

Image d'aperçu de la page 404 de Tuts+.


Notre objectif : Améliorer la Page 404 par défaut !

A Bad 404 Page Design!

Quel est le problème avec une simple Page d'erreur 404 ?

La réponse est simple, un tas. Une page d'erreur 404 qui dit juste « Page introuvable » n'est pas du tout utile au visiteur - l'ajout d'un lien disant « Retour à la page d'accueil » n'est pas vraiment utile non plus.

L'absence d'une page d'erreur 404 décente affaiblit l'expérience utilisateur. Les utilisateurs qui essaient de trouver une page sur votre site, mais qui rentrent l'url incorrecte ou qui reçoivent un lien brisé, seront obligés de revenir à la page d'accueil, puis de réessayer. Si ils ne trouvent toujours pas ce qu'ils cherchent, ils peuvent finir frustrés et quitter votre site. Dans un monde idéal les utilisateurs ne seraient pas confrontés à des erreurs du tout, mais la page 404 nous donne au moins la possibilité de présenter des excuses et d'aider les utilisateurs à trouver ce qu'ils cherchent. Un utilisateur content est plus susceptible de revenir à l'avenir.

Encore pire qu'une pauvre page 404, c'est son absence totale. L'utilisateur n'a alors aucune idée de ce qui se passe du tout, et il n'y aura même un lien vers la page d'accueil. L'absence d'une page d'erreur 404 fera paraître votre site peu professionnel et encouragera seulement les visiteurs à le quitter.

A Bad 404 Page Design!

Il s'agit d'un exemple d'une page d'erreur 404 médiocre. La seule fonctionnalité rédemptrice est le lien de la page d'accueil, et qui ne semble pas particulièrement agréable non plus. Si votre page d'erreur 404 ressemble à ceci, elle doit être améliorée !


Place à l'amélioration

Beaucoup peut être fait pour améliorer notre page 404 en amont.

Le facteur clé pour une page d'erreur 404 est de la rendre simple et compréhensible pour l'utilisateur. S'il est clair que la page qu'ils recherchaient n'existe pas (cela aide d'utiliser un langage facile à comprendre et sans jargon). Tenter d'expliquer pourquoi elle n'existe pas, la page a-t-elle été déplacée ? Indiquer ce que pourrait être le problème, d'une manière amicale et accueillante.

Désolé, partenaire. La page demandée n'est pas dans notre base de données. Vous pouvez avoir suivi un mauvais lien externe, ou mal tapé une URL. - Page d'erreur 404 de A List Apart

Ne rendez pas l'expérience 404 semblable à une épreuve insurmontable, et mauvaise. Faites-en une expérience conviviale et positive !


Conseil 1 : Maintenez la cohérence du design

Il est important que le design sur votre page d'erreur 404 reste fidèle au reste de votre site. Cela comprend votre logo, la navigation, la palette de couleurs etc. Avoir une page d'erreur 404 qui est sans rapport avec le reste de votre site peut amener l'utilisateur à estimer qu'il a été mis à la dérive - par le maintien de votre marque, l'expérience 404 ne se ressentira pas comme un drame. L'utilisateur se sentira toujours impliqué avec le site.

Consistent design by Twitter

Ceux d'entre vous qui avez joué avec Twitter Bootstrap reconnaîtront leur marque familière, même sur la page d'erreur 404.


Conseil 2 : Rendez-la aussi utile que possible

Puisque nous continuons à le mentionner, une page d'erreur 404 doit être extrêmement utile à l'utilisateur. Il ya beaucoup de façons d'y parvenir, mais certaines des meilleures fonctionnalités dont peut bénéficier une page d'erreur 404 sont :

  • Un formulaire de recherche Avoir un formulaire de recherche sur votre page d'erreur 404 garantira que l'utilisateur se sente enclin à poursuivre la recherche de ce qu'il cherchait - ainsi restera sur votre site.
  • Un lien vers la page d'accueil Cela est essentiel pour une page d'erreur 404, mais si vous avez gardé le design et la navigation de votre site alors cela ne sera pas un problème car il devrait déjà y avoir un lien dans votre navigation.
  • Afficher la liste des pages populaires Mettez les chances de votre côté. Peut-être l'utilisateur cherchait une de vos pages parmi les plus populaires, auquel cas il serait utile d'en voir une liste en référence rapide.
  • Un lien vers votre plan de site Proposer un lien vers votre plan de site (en supposant qu'il est utile et facile à comprendre tout au moins) peut être utile. De cette façon l'utilisateur peut tout parcourir sur votre site, et peut-être trouver ce qu'il cherchait. Un formulaire de recherche gère cela beaucoup mieux, mais un lien vers le plan du site est toujours une bonne précaution. Alternativement, votre page d'erreur 404 pourrait comprendre une partie de votre plan de site. Si c'est ce que vous choisissez, n'oubliez pas de garder le thème et le design du site intacts.
  • Avoir des pages d'erreur spécifiques au problème Si un utilisateur est ramené à votre page en raison, par exemple, d'une recherche de nom d'utilisateur ayant échoué, ou d'entrée de données de formulaire incorrecte, alors vous devez rendre cet écran d'erreur tout aussi utile. Fournissez des moyens faciles de recherche supplémentaire ou affichez des pages connexes.
  • Signaler un lien cassé Avoir un moyen facile pour un utilisateur de signaler un lien brisé est également utile - spécialement pour vous ! Cela peut être sous la forme d'un bouton qui vous envoie l'URL de lien rompu, ou un formulaire simple de courriel.
Report broken links at NYT
Signaler un lien rompu au New York Times

Conseil 3 : Soyez sympathique et compréhensible

Ne supposez pas que vos utilisateurs savent ce qu'est une « erreur 404 ». Vous aurez besoin d'expliquer ce qu'est le problème d'une manière compréhensible, simple et conviviale. De cette façon, un utilisateur ne se sentira pas confus par votre jargon. Il est préférable de dire quelque chose comme « Oops ! Nous ne pouvions pas trouver la page que vous recherchez. », que de simplement affirmer des choses telles que « erreur 404 : Page non trouvée ».

En tant qu'utilisateur, laquelle préféreriez-vous voir ?

Apartmenthomeliving's 404 Page

La page d'erreur 404 de Apartmenthomeliving est assez drôle et décontractée. Le meilleur, (même si ce n'est pas visible dans l'image) la mise en pages reste cohérente avec l'image de marque du site, et il y a beaucoup de liens pour encourager les visiteurs à rester sur place.


Conseil 4 : Un design minimaliste fonctionne également...

Avoir une design minimaliste, basique de page d'erreur 404 peut toujours être efficace.

Si vous avez un site massif, comme Google, avec de nombreuses, nombreuses pages possibles liées, alors une page d'erreur 404 avec des choses comme des liens du plan du site, des listes de pages populaires ou un formulaire de recherche ne sont pas particulièrement pratiques et très probablement ne vont pas beaucoup aider l'utilisateur de toute façon.

Google's 404 Page Design

La page d'erreur 404 de Google est très minimaliste mais fonctionne bien. Il y a toujours un lien vers la page d'accueil (le logo de Google) et elle est écrite d'une manière conviviale et facile à comprendre. Le dessin agréable y contribue également, créant une atmosphère détendue et calme.

Bien que cela semble aller à l'encontre de tout ce qui a été dit jusqu'ici, s'il est tout simplement trop peu pratique d'avoir une page d'erreur 404 avancée, alors une simple, amicale est tout aussi correcte.


Conseil 5 : Gardez-la décontractée

Une bonne page 404 peut également être décontractée et même drôle.

Créer d'une page d'erreur 404 qui soit drôle et mémorable peut avoir un impact énorme sur le maintien de vos visiteurs sur le site. En outre, si vous avez une page 404 particulièrement drôle ou amusante qui demeure dans l'esprit des gens, ils peuvent finir par le raconter à leurs amis pour que les gens la cherchent délibérément ! C'était certainement le cas avec la page d'erreur 404 de Github :

Github's Starwars inspired 404
Découvrez les utilisations innovatrices du mouvement de parallaxe sur la page d'erreur 404 de Github

Github veille à maintenir les aspects utiles d'une page d'erreur 404, quoiqu'il allègent l'atmosphère avec humour.

Blizzard Entertainment's 404 Page

La page d'erreur 404 de Blizzard Entertainment - certainement amusante mais conserve aussi les liens pour l'utilité en bas et (à certains égards) respecte le design même du site.

Jetez un œil à cette vidéo, trouvée sur nosh.com, montrant qu'il y a beaucoup de place pour l'humour (et la post-production!)

BuySellAds emprunte une approche semblable (bien que moins fastidieuses) de vidéo humoristique pour leur page.


Résultats de recherche et pages 404

Votre toute nouvelle, bien conçue et utile page 404 personnalisée peut avoir fière allure et s'exécuter parfaitement, mais c'est exactement le genre de chose que vous ne voulez pas voir apparaître dans les résultats de votre recherche. Il y a deux façons de s'assurer que votre page 404 ne se présente dans les résultats de recherche :

  • Assurez-vous que votre serveur web renvoie un réel, correct code d'état HTTP 404 lorsqu'une page manquante est demandée, ainsi le moteur de recherche l'ignorera.
  • Ajouter votre page d'erreur 404 à votre fichier robots.txt.

La seconde de ces deux méthodes permet également d'empêcher les moteurs de recherche de trouver toutes les pages que vous ne voulez pas qu'ils voient - comme votre page d'erreur 404, vos fichiers PHP de back-end (telles que les fonctions de connexion) et plus encore. Ajoutez simplement leur URL dans le fichier robots.txt et transférez-le sur votre serveur :


Utilisez votre page d'erreur 404

C'est très bien d'avoir une belle page 404 personnalisée toute nouvelle qui est utile à vos utilisateurs, mais il est évidemment très important de s'assurer qu'elle est effectivement utilisée. Pour vous assurer que votre serveur redirige les utilisateurs vers votre page d'erreur 404 (au lieu de simplement utiliser la valeur par défaut), vous devrez configurer votre fichier .htaccess.

La configuration de votre fichier .htaccess pour la direction 404 personnalisée est extrêmement facile. Tout d'abord, localisez le fichier .htaccess sur votre serveur (il devrait déjà être là, mais si non vous pouvez juste faire un nouveau fichier avec ce nom) puis ouvrez-le. Ajoutez la ligne de code suivante :

Assurez-vous que la chemin d'accès et l'extension de fichier coïncident avec votre fichier 404. Si votre fichier devait être nommé 404-error.html et se trouvait dans un répertoire « erreur », vous modifierez l'extrait de code comme suit :

Les navigateurs dirigeront désormais à votre page d'erreur 404 dans le cas d'une erreur 404. C'est aussi simple que cela !


Conclusion

Ainsi, nous savons maintenant qu'au lieu de la normale, ennuyeuse et inutile page 404 par défaut du navigateur, il est dans notre intérêt de passer du temps à créer nos propres pages 404 personnalisées. Si c'est fait correctement, elles vous aideront à garder les visiteurs sur le site et finalement réduire le taux de rebond.


Ressources supplémentaires

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.